var canvas1 = document.getElementById("canvas1"),
  canvas2 = document.getElementById("canvas2"),
  canvas3 = document.getElementById("canvas3"),
  ctx1 = canvas1.getContext("2d"),
  ctx2 = canvas2.getContext("2d"),
  ctx3 = canvas3.getContext("2d"),
  rainthroughnum = 10,
  speedRainTrough = 2,
  RainTrough = [],
  rainnum = 300,
  rain = [],
  lightning = [],
  lightTimeCurrent = 0,
  lightTimeTotal = 0,
  w = (canvas1.width = canvas2.width = canvas3.width = window.innerWidth),
  h = (canvas1.height = canvas2.height = canvas3.height = window.innerHeight);
function random(n, a) {
  return Math.random() * (a - n + 1) + n;
}
function clearcanvas1() {
  ctx1.clearRect(0, 0, w, h);
}
function clearcanvas2() {
  ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
}
function clearCanvas3() {
  (ctx3.globalCompositeOperation = "destination-out"),
    (ctx3.fillStyle = "rgba(0,0,0," + random(1, 30) / 100 + ")"),
    ctx3.fillRect(0, 0, w, h),
    (ctx3.globalCompositeOperation = "source-over");
}
function createRainTrough() {
  for (var n = 0; n < rainthroughnum; n++)
    RainTrough[n] = {
      x: random(0, w),
      y: random(0, h),
      length: Math.floor(random(1, 830)),
      opacity: 0.2 * Math.random(),
      xs: random(-2, 2),
      ys: random(10, 20),
    };
}
function createRain() {
  for (var n = 0; n < rainnum; n++)
    rain[n] = {
      x: Math.random() * w,
      y: Math.random() * h,
      l: 1 * Math.random(),
      xs: 4 * Math.random() - 4 + 2,
      ys: 10 * Math.random() + 10,
    };
}
function createLightning() {
  for (
    var n = random(100, w - 100), a = random(0, h / 4), t = random(1, 3), i = 0;
    i < t;
    i++
  )
    (single = {
      x: n,
      y: a,
      xRange: random(5, 30),
      yRange: random(10, 25),
      path: [{ x: n, y: a }],
      pathLimit: random(40, 55),
    }),
      lightning.push(single);
}
function drawRainTrough(n) {
  ctx1.beginPath();
  var a = ctx1.createLinearGradient(
    0,
    RainTrough[n].y,
    0,
    RainTrough[n].y + RainTrough[n].length
  );
  a.addColorStop(0, "rgba(255,255,255,0)"),
    a.addColorStop(1, "rgba(255,255,255," + RainTrough[n].opacity + ")"),
    (ctx1.fillStyle = a),
    ctx1.fillRect(RainTrough[n].x, RainTrough[n].y, 1, RainTrough[n].length),
    ctx1.fill();
}
function drawRain(n) {
  ctx2.beginPath(),
    ctx2.moveTo(rain[n].x, rain[n].y),
    ctx2.lineTo(
      rain[n].x + rain[n].l * rain[n].xs,
      rain[n].y + rain[n].l * rain[n].ys
    ),
    (ctx2.strokeStyle = "rgba(174,194,224,0.5)"),
    (ctx2.lineWidth = 1),
    (ctx2.lineCap = "round"),
    ctx2.stroke();
}
function drawLightning() {
  for (var n = 0; n < lightning.length; n++) {
    var a = lightning[n];
    a.path.push({
      x: a.path[a.path.length - 1].x + (random(0, a.xRange) - a.xRange / 2),
      y: a.path[a.path.length - 1].y + random(0, a.yRange),
    }),
      a.path.length > a.pathLimit && lightning.splice(n, 1),
      (ctx3.strokeStyle = "rgba(255, 255, 255, .1)"),
      (ctx3.lineWidth = 3),
      0 === random(0, 15) && (ctx3.lineWidth = 6),
      0 === random(0, 30) && (ctx3.lineWidth = 8),
      ctx3.beginPath(),
      ctx3.moveTo(a.x, a.y);
    for (var t = 0; t < a.path.length; t++)
      ctx3.lineTo(a.path[t].x, a.path[t].y);
    1 === Math.floor(random(0, 30)) &&
      ((ctx3.fillStyle = "rgba(255, 255, 255, " + random(1, 3) / 100 + ")"),
      ctx3.fillRect(0, 0, w, h)),
      (ctx3.lineJoin = "miter"),
      ctx3.stroke();
  }
}
function animateRainTrough() {
  clearcanvas1();
  for (var n = 0; n < rainthroughnum; n++)
    RainTrough[n].y >= h
      ? (RainTrough[n].y = h - RainTrough[n].y - 5 * RainTrough[n].length)
      : (RainTrough[n].y += speedRainTrough),
      drawRainTrough(n);
}
function animateRain() {
  clearcanvas2();
  for (var n = 0; n < rainnum; n++)
    (rain[n].x += rain[n].xs),
      (rain[n].y += rain[n].ys),
      (rain[n].x > w || rain[n].y > h) &&
        ((rain[n].x = Math.random() * w), (rain[n].y = -20)),
      drawRain(n);
}
function animateLightning() {
  clearCanvas3(),
    ++lightTimeCurrent >= lightTimeTotal &&
      (createLightning(), (lightTimeCurrent = 0), (lightTimeTotal = 200)),
    drawLightning();
}
function init() {
  createRainTrough(),
    createRain(),
    window.addEventListener("resize", createRainTrough);
}
function animloop() {
  animateRainTrough(),
    animateRain(),
    animateLightning(),
    requestAnimationFrame(animloop);
}
window.addEventListener("resize", function () {
  (w = canvas1.width = canvas2.width = canvas3.width = window.innerWidth),
    (h = canvas1.height = canvas2.height = canvas3.height = window.innerHeight);
}),
  init(),
  animloop();
