(() => {
  const allImages = document.querySelectorAll('.img-src-hidden img');
  if (!allImages || !allImages.length) return;

  const frontImage = document.querySelector('#gallery .img-front');
  const description = document.querySelector('#gallery .description span');
  const arrowRight = document.querySelector('.right-arrow-cont');
  const arrowLeft = document.querySelector('.left-arrow-cont');


  // Initialize front
  frontImage.querySelector('img').src = allImages[0].src;
  description.innerHTML = allImages[0].getAttribute('alt');

  let activeIndex = 0;

  const move = direction => {
    const currentFront = document.querySelector('#gallery .img-front');
    const currentBack = document.querySelector('#gallery .img-back');

    if (direction === 'right') {
      currentFront.style.transform = 'translateX(100%)';
      activeIndex = activeIndex < allImages.length - 1 ? activeIndex + 1 : 0;
    } else {
      currentFront.style.transform = 'translateX(-100%)';
      activeIndex = activeIndex === 0 ? allImages.length - 1 : activeIndex - 1;
    }

    currentBack.querySelector('img').src = allImages[activeIndex].src;
    description.innerHTML = allImages[activeIndex].getAttribute('alt');

    // Wait until out of view - swap sources and reset "front"
    setTimeout(() => {
      currentFront.className = 'img-back';
      currentFront.style.transform = '';
      currentBack.className = 'img-front';
    }, 500)
  }

  arrowRight.addEventListener('click', () => move('right'));
  arrowLeft.addEventListener('click', () => move('left'));

})();