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 rot = { min: randint(360), max: randrange(720, 1080) }
    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, }
})()