const shards = (function () {
  let count;
  let delay = 120 * 1000;
  let els = [];
  let t = 0;
  let rebuilding = false;
  let nextTimeout;
  let dark, light;
  const bg_el = document.querySelector(".bgs");

  function init() {
    bind();
    build();
    step();
    setTimeout(next, 20);
    bg_el.classList.remove("fade");
  }
  function bind() {
    document.querySelector("h1").addEventListener("click", () => {
      sounds.play("click");
      rebuild();
      site.navigateHash("");
      player.hidePlaylist();
    });
  }
  function build() {
    count = choice(is_mobile ? [5, 7] : [5, 7, 7, 11, 11]);
    light = cielab.gradient(count);
    dark = cielab.gradient(count);
    let el;
    for (var i = 0; i < count; i++) {
      el = append(i);
    }
  }
  function destroy() {
    for (var i = 0; i < count; i++) {
      els[i] && bg_el.removeChild(els[i]);
    }
    els.length = 0;
  }
  function rebuild() {
    if (rebuilding) return;
    rebuilding = true;
    // sounds.play('click')
    stars.rebuild();
    next();
    t = 0;
    bg_el.classList.add("fade");
    setTimeout(() => {
      destroy();
      build();
      step();
      setTimeout(next, 20);
      bg_el.classList.remove("fade");
      rebuilding = false;
      // sounds.play('click')
    }, 500);
  }
  function append(i) {
    const el = document.createElement("div");
    el.classList.add("bg");
    els.push(el);
    bg_el.appendChild(el);
    return el;
  }
  function next() {
    clearTimeout(nextTimeout);
    nextTimeout = setTimeout(next, delay);
    step();
  }
  function step() {
    t += 1;
    light = cielab.gradient(count);
    let w = {
      min: is_mobile ? randrange(40, 90) : randrange(20, 40),
      max: randrange(10, 90),
    };
    if (w.min > w.max) {
      w.min += 10;
    }
    let rotMin = randint(360);
    let rot = {
      min: rotMin,
      max: rotMin * randrange(2, 3) + randint(90) + 270,
    };
    for (var i = 0; i < count; i++) {
      update(i, t, w, rot, dark, light);
    }
    document.body.style.backgroundColor = cielab.gradient(2)(0.05);
  }
  function update(i, t, w, rot) {
    const el = els[i];
    const n = i / count;
    const side = lerp(n, w.min, w.max);
    const spin = lerp(i % 2 ? 1 - n : n, rot.min, rot.max);
    const rotation =
      "rotate3d(" +
      [randrange(-1, 1), randrange(-1, 1), randrange(-1, 1)].join(",") +
      "," +
      randint(360) +
      "deg)";
    el.style.width = side + "vmin";
    el.style.height = side + "vmin";
    el.style.transform =
      "translate3d(-50%, -50%, 0) rotate(" +
      spin +
      "deg) translate3d(50%, 50%, 0) " +
      rotation;
    // el.style.transform = "translate3d(-50%, -50%, 0)"
    if (t === 1) {
      light = cielab.gradient(count);
      if (is_mobile) {
        el.style.backgroundImage =
          "linear-gradient(0deg, " + dark(1) + ", " + light(1) + ")";
      } else {
        el.style.backgroundImage =
          "linear-gradient(0deg, " + dark(1) + ", " + light(0) + ")";
      }
    }
    el.style.backgroundColor = light(1);
    el.style.opacity = lerp(n, randrange(0.1, 0.4), randrange(0.2, 0.5));
  }
  init();
  return { rebuild: rebuild, step: step };
})();