document.addEventListener("DOMContentLoaded", () => {
  const mainImg = document.getElementById("main_img");
  const thumbs = document.querySelectorAll("#thumbs img.thumb");
  const thumbsWrapper = document.getElementById("thumbs_wrapper");
  const thumbsContainer = document.getElementById("thumbs");
  const prevBtn = document.getElementById("prev");
  const nextBtn = document.getElementById("next");

  const thumbWidth = thumbs[0].offsetWidth + 5;

  // click fade
  thumbs.forEach(thumb => {
    thumb.addEventListener("click", () => {
      mainImg.style.opacity = 0;

      setTimeout(() => {
        mainImg.src = thumb.dataset.full;
        mainImg.style.opacity = 1;
      }, 200);

      // change class
      thumbs.forEach(t => t.classList.remove("on"));
      thumb.classList.add("on");

      const wrapperRect = thumbsWrapper.getBoundingClientRect();
      const thumbRect = thumb.getBoundingClientRect();
      thumbsContainer.scrollLeft += thumbRect.left - wrapperRect.left - (thumbsWrapper.clientWidth / 2) + (thumb.clientWidth / 2);
    });
  });

  if (thumbs[0]) thumbs[0].classList.add("on");

  prevBtn.addEventListener("click", () => {
    thumbsContainer.scrollBy({ left: -thumbWidth, behavior: "smooth" });
  });

  nextBtn.addEventListener("click", () => {
    thumbsContainer.scrollBy({ left: thumbWidth, behavior: "smooth" });
  });
});