const openButton = document.querySelectorAll('.thumbnail');
const carouselOverlay = document.querySelectorAll('.carousel');
const closeButton = document.querySelectorAll('.close');

function openCarousel() {
    this.classList.add("on");
    let slides = this.parentElement.querySelectorAll(".carousel .slides .slide:not(.loaded)");
    let isFirstLoad = this.parentElement.querySelectorAll(".carousel .slides .slide.show").length == 0;
    if (slides.length) {
    	if (isFirstLoad) slides[0].classList.add("show");
		loadCarouselImg(slides, 1);
    }
}

openButton.forEach(function(each) {
    each.addEventListener("click", openCarousel);
});

function closeCarousel() {
    openButton.forEach(function(item) {item.classList.remove("on");});
}

closeButton.forEach(function(each) {
    each.addEventListener("click", closeCarousel);
});