const imageGallery = document.getElementById("imageGallery");
const lightbox = document.getElementById("lightbox");
const lightboxImage = document.getElementById("lightboxImage");
const lightboxDesc = document.getElementById("lightboxDesc");
const closeLightbox = document.querySelector(".close-lightbox")

fetch("data.json").then(response => response.json())
.then(data => {
    data.forEach(item => {
        const galleryItem = document.createElement("div");
        galleryItem.classList.add("col-md-4", "gallery-item");

        const img = document.createElement("img");
        img.src = item.thumbpath;
        img.alt = item.desc;
        img.dataset.imagepath = item.imagepath;
        img.dataset.desc = item.desc;

        galleryItem.appendChild(img);
        imageGallery.appendChild(galleryItem);
    });
});

imageGallery.addEventListener("click", (event) =>{
    const target = event.target;
    if (target.tagName === "IMG") {
        const imagepath = target.dataset.imagepath;
        const desc = target.dataset.desc;
        lightbox.style.display = "block";
        lightboxImage.src = imagepath;
        lightboxDesc.textContent = desc;
    }
})

closeLightbox.addEventListener("click", () => {
    lightbox.style.display = "none";
})

window.addEventListener("click", event => {
    if (event.target === lightbox) {
        lightbox.style.display = "none";
    }
})