(function(){
  const stage = document.getElementById('galleryStage');
  const cards = Array.from(document.querySelectorAll('.photo-card'));
  const dots = Array.from(document.querySelectorAll('.dot'));
  let active = 0;
  let timer = null;
  const duration = 2800;

  function setActive(index){
    active = index % cards.length;
    stage.classList.add('is-playing');

    cards.forEach((card, i) => {
      card.classList.remove('is-active','is-dim','is-next','is-exit');
      const diff = (i - active + cards.length) % cards.length;
      if(i === active){
        card.classList.add('is-active');
      }else if(diff === 1 || diff === 2){
        card.classList.add('is-next');
      }else if(diff === cards.length - 1){
        card.classList.add('is-exit');
      }else{
        card.classList.add('is-dim');
      }
    });

    dots.forEach((dot, i) => dot.classList.toggle('is-active', i === active));
  }

  function next(){
    setActive(active + 1);
  }

  function start(){
    stop();
    timer = setInterval(next, duration);
  }

  function stop(){
    if(timer) clearInterval(timer);
  }

  cards.forEach((card, i) => {
    card.addEventListener('mouseenter', () => {
      stop();
      setActive(i);
    });
    card.addEventListener('mouseleave', start);
  });

  dots.forEach((dot, i) => {
    dot.addEventListener('click', () => {
      setActive(i);
      start();
    });
  });

  window.addEventListener('load', () => {
    setTimeout(() => {
      setActive(0);
      start();
    }, 900);
  });
})();