const starSamples = document.querySelector("#samples .starsamples").children;
const bgStarDiv = document.getElementById("bgstars");
const debrisDiv = document.getElementById("debris");
const bgStars = [100, 50, 25];

const giant = document.getElementById("giant");
const actualHor = giant.querySelector(".actualhor");
const actualVer = giant.querySelector(".actualver");

const light = document.getElementById("light");
const lightLight = light.querySelector(".light");

const execDelay = 20;

// INITIATE!
for (let i = 0; i < starSamples.length; i++) {
  for (let _ = 0; _ < bgStars[i]; _++) {
    const star = starSamples[i].cloneNode(true);
    star.style.top = `${Math.random() * 100}vh`;
    star.style.left = `${Math.random() * 100}vw`;
    star.setAttribute("opacity", ((Math.random() + 1) / 2).toString());
    star.style.opacity = star.getAttribute("opacity");
    star.style.scale = (Math.random() + 2) / 3;
    bgStarDiv.appendChild(star, giant);
  }
}
const remnant = starSamples[starSamples.length - 1].cloneNode(true);
remnant.id = "remnant"
remnant.style.top = "50%";
remnant.style.left = "50%";
remnant.style.scale = 0;
document.body.insertBefore(remnant, light);

function explode() {
  /*
  SUUNNITELMA asioista
  | Ympyrä, joka haalenee kasvaessaan (skaalattu dot)
  | Pisteitä, jotka lentävät satunnaisiin suuntiin ja pienenevät (dot)
  | Kartiomaiset säteet tai jotain
  | Viivoja, jotka lentävät satunnaisiin suuntiin ja ohenevat
  | Iso valoläikkä (light)
  * Paljon värejä, jotka tekevät jotain
  | Lopulta muuttuu s3:ksi ja kasvaa takaisin jätiksi minuutin ajan. Kaikki toistuu uusiksi...
    | Kloonaa s3, jonka näkyvyys 0 ja koko .25
    | Muuta se kirkkaaksi hieman ennen muita tähtiä
    | Muiden tähtien kirkastuessa ja taustan palaessa normaaliin kasvata se kokoon 1
    | Kasvata giant-elementin kokoa 30s ajan kokoon 1
    | Pienennä s3-elementtiä kokoon 0 30s ajan
    | Kutsu trigger(fluxSpeed); joka toistaa kaiken uudelleen
      | Muista resetoida light-elementin ominaisuudet (background, opacity...)
  * yms. yms. yms.
  */

  actualHor.style.scale = 1;
  actualVer.style.scale = 1;
  // Hieno ympyrä
  const circMist = document.createElement("div");
  circMist.classList.add("dot", "mid", "fixed");
  // Pisteet
  let dotParticles = [];
  for (let _ = 0; _ < 15; _++) {
    const clone = circMist.cloneNode(true);
    clone.style.top = "50%";
    clone.style.left = "50%";
    const scaleT = Math.random() * 3 + 1;
    clone.style.transition = `width ${scaleT}s linear, height ${scaleT}s linear, top ${scaleT}s ease-out, left ${scaleT}s ease-out`;
    debrisDiv.appendChild(clone);
    setTimeout(() => {
      clone.style.top = `${50 + Math.random() * 50 - 25}%`
      clone.style.left = `${50 + Math.random() * 50 - 25}%`
      clone.style.width = 0;
      clone.style.height = 0;
      setTimeout(() => { clone.remove(); }, scaleT * 1000);
    }, execDelay);
  }
  circMist.style.width = 0;
  circMist.style.height = 0;
  circMist.style.top = "50%";
  circMist.style.left = "50%";
  circMist.style.transition = "width 1.5s linear, height 1.5s linear, opacity 1.5s linear";
  debrisDiv.appendChild(circMist);
  setTimeout(() => {
    circMist.style.width = "150vw";
    circMist.style.height = "150vw";
    circMist.style.opacity = 0;
    setTimeout(() => { circMist.remove(); }, 1500);
  }, execDelay);

  // Viivoja
  const debRay = document.createElement("div");
  debRay.classList.add("fixed");
  debRay.style.width = "2px";
  debRay.style.height = "2px";
  debRay.style.backgroundColor = "#fff";
  debRay.style.transformOrigin = "left";
  debRay.style.transition = "top 1s ease-out, left 1s ease-out, width 1s ease-out";
  debRay.style.top = "calc(50% - 1px)";
  debRay.style.left = "50%";
  let bursts = 0;
  let rayShooting = setInterval (() => {
    for (let _ = 0; _ < 10; _++) {
      const clone = debRay.cloneNode(true);
      const windowSize = [window.innerWidth, window.innerHeight];
      const finalPos = [Math.random()*2-.5, Math.random()*2-.5];
      const offsets = [finalPos[0] * windowSize[0] - windowSize[0] / 2, finalPos[1] * windowSize[1] - windowSize[1] / 2];
      let rotation = Math.atan(offsets[1] / offsets[0]) + Math.PI;
      if (finalPos[0] * windowSize[0] - windowSize[0] / 2 < 0) {
      rotation -= Math.PI;
      }
      clone.style.rotate = `${rotation}rad`;
      debrisDiv.appendChild(clone);
      setTimeout(() => {
        clone.style.left = `${finalPos[0]*100}%`;
        clone.style.top = `${finalPos[1]*100}%`;
        clone.style.width = `${Math.sqrt(offsets[0]**2 + offsets[1]**2) / 2}px`;
        setTimeout(() => {
          clone.style.transition = "top 1s ease-out, left 1s ease-out, width 1.5s ease-in";
          setTimeout(() => {
            clone.style.width = 0;
            setTimeout(() => {
              clone.remove();
            }, 1500);
          }, execDelay);
        }, 500);
      }, execDelay);
    }
    bursts += 1;
    if (bursts >= 20) {
      clearInterval(rayShooting);
    }
  }, 20);

  // Kolmiosäteet
  const ray = document.createElement("div");
  ray.classList.add("fixed");
  ray.style.width = "150vh";
  ray.style.height = "10vh";
  ray.style.clipPath = "polygon(0 50%, 100% 0, 100% 100%)";
  ray.style.transformOrigin = "left";
  ray.style.top = "calc(50% - 5vh)";
  ray.style.left = "50%";
  for (let _ = 0; _ < 12; _++) {
    const clone = ray.cloneNode(true);
    clone.style.background = `linear-gradient(to right, hsl(${Math.random() * 360}, 100%, 90%), transparent) border-box`;
    clone.style.rotate = `${Math.random() * 360}deg`;
    const rotatT = Math.random() * 3 + .25;
    clone.style.transition = `rotate ${rotatT}s ease-out, height ${rotatT}s ease-out, top ${rotatT}s ease-out`;
    clone.style.opacity = 0;
    debrisDiv.appendChild(clone);
    setTimeout(() => {
      clone.style.opacity = 1;
      clone.style.rotate = `${parseFloat(clone.style.rotate) + Math.random() * 240 - 120}deg`;
      clone.style.height = 0;
      clone.style.top = "50%";
      setTimeout(() => {
        clone.remove();
      }, rotatT * 1000);
    }, execDelay);
  }

  // GRB
  const grb = ray.cloneNode(true);
  grb.style.background = "rgba(255,255,255,1)";
  grb.style.filter = "blur(5px)"
  grb.style.height = "1vh";
  grb.style.top = "calc(50% - .5vh)";
  const grbSpeed = Math.random() + .25;
  const grbRotation = Math.random() * 360;
  const oppositeGrb = grb.cloneNode(true);
  grb.style.rotate = `${grbRotation - 1}deg`;
  oppositeGrb.style.rotate = `${grbRotation + 179}deg`;
  grb.style.transition = `opacity 1s linear, rotate ${grbSpeed}s ease-in-out, height 5s ease-out, top 5s ease-out`;
  oppositeGrb.style.transition = grb.style.transition;
  debrisDiv.appendChild(grb);
  debrisDiv.appendChild(oppositeGrb);
  setTimeout(() => {
    grb.style.height = ".5vh";
    oppositeGrb.style.height = grb.style.height;
    grb.style.top = "calc(50% - .25vh)";
    oppositeGrb.style.top = grb.style.top;
    const grbInterval = setInterval(() => {
      grb.style.rotate = `${grbRotation + 1}deg`;
      oppositeGrb.style.rotate = `${grbRotation + 181}deg`;
      setTimeout(() => {
        grb.style.rotate = `${grbRotation - 1}deg`;
        oppositeGrb.style.rotate = `${grbRotation + 179}deg`;
      }, grbSpeed * 1000);
    }, 300);
    setTimeout(() => {
      grb.style.opacity = 0;
      oppositeGrb.style.opacity = 0;
      setTimeout(() => {
        clearInterval(grbInterval);
        grb.remove();
        oppositeGrb.remove();
      }, 1000);
    }, 5000);
  }, execDelay);


  // Valolla säätämistä
  light.style.transition = "unset";
  light.style.scale = 2;
  light.style.opacity = .5;
  lightLight.style.background = `radial-gradient(#fff, rgba(255, 255, 200, .5),  transparent, transparent)`;
  light.style.transition = "scale 1.5s linear, opacity .75s linear";
  setTimeout(() => {
    light.style.scale = 3;
    light.style.opacity = 1;
    setTimeout(() => {
      light.style.opacity = 0;
    }, 750);
  }, execDelay);

  // Tausta-asiat
  document.body.style.transition = "background-color 0s linear";
  document.body.style.backgroundColor = "#324";
  setTimeout(() => {
    document.body.style.transition = "background-color .5s linear";
    setTimeout(() => {
      document.body.style.backgroundColor = "#000";
    }, execDelay);
  }, execDelay);

  // Palautuminen
  setTimeout(() => {
    light.style.transition = "unset";
    light.style.scale = 2;
    light.style.background = "radial-gradient(#fff, rgba(255, 255, 255, .5),  transparent, transparent)";
    light.style.transition = "scale 5s ease-in-out, opacity 5s ease-in";
    remnant.style.transition = "scale 10s ease-out";
    setTimeout(() => {
      light.style.scale = 0;
      light.style.opacity = 1;
      remnant.style.scale = .75;
    }, execDelay);
    setTimeout(() => {
      bgStarDiv.childNodes.forEach(child => {
        child.style.transition = "opacity 10s linear";
        setTimeout(() => {
          child.style.opacity = child.getAttribute("opacity");
        }, execDelay);
      })
      setTimeout(() => {
        document.body.style.transition = "background-color 8s linear";
        giant.style.transition = "scale 15s ease-out";
        setTimeout(() => {
          document.body.style.backgroundColor = "#202";
          giant.style.scale = 1;
          remnant.style.transition = "scale 3s ease-in";
        }, execDelay);
        setTimeout(() => {
          remnant.style.scale = 0;
          setTimeout(() => { trigger(500) }, 3000);
        }, 15000);
      }, 5000);
    }, 7500);
  }, 2500);
}

// Kaiken alku
function trigger(fluxSpeed) {
  giant.style.transition = "scale 5s ease-in";
  giant.style.scale = 0;
  light.style.transition = "scale 4s ease-out";
  light.style.scale = .5;
  document.body.style.transition = "background-color 5s linear";
  document.body.style.backgroundColor = "#000";
  bgStarDiv.childNodes.forEach(child => {
    child.style.transition = "opacity 5s linear";
    setTimeout(() => {
      child.style.opacity = .1;
    }, execDelay);
  });
  setTimeout(() => {
    actualHor.style.transition = `scale ${fluxSpeed/1000}s ease-in-out`;
    actualVer.style.transition = `scale ${fluxSpeed/1000}s ease-in-out`;
    actualHor.style.scale = 1.25;
    actualVer.style.scale = .75;
    setTimeout(() => {
      actualHor.style.scale = 1;
      actualVer.style.scale = 1;
      setTimeout(() => {
        actualHor.style.scale = 1.25;
        actualVer.style.scale = .75;
        setTimeout(() => {
          actualHor.style.scale = 1;
          actualVer.style.scale = 1.5;
          setTimeout(() => {
            actualHor.style.scale = 1.5;
            actualVer.style.scale = .5;
            setTimeout(() => {
              actualHor.style.scale = 1.25;
              actualVer.style.scale = 1.25;
              setTimeout(() => {
                actualHor.style.transition = `scale ${4*fluxSpeed/1000}s ease-in-out`;
                actualVer.style.transition = `scale ${4*fluxSpeed/1000}s ease-in-out`;
                actualHor.style.scale = "50 1";
                actualVer.style.scale = .5;
                setTimeout(() => {
                  light.style.transition = `scale ${2*fluxSpeed/1000}s ease-in`;
                  light.style.scale = 0;
                  setTimeout(explode, 2 * fluxSpeed);
                }, fluxSpeed);
              }, fluxSpeed);
            }, fluxSpeed);
          }, fluxSpeed);
        }, fluxSpeed);
      }, fluxSpeed);
    }, fluxSpeed);
  }, fluxSpeed);
}

setTimeout(() => { trigger(500); }, 1000);