Organize the Scrolls

// JavaScript
// Lightbox

// References to the overlay elements
const lightboxOverlay = document.getElementById('lightboxOverlay');
const lightboxImage = document.getElementById('lightboxImage');
const lightboxVideo = document.getElementById('lightboxVideo');
const closeBtn = document.getElementById('closeBtn');

// All gallery elements that have the "img-gallery" class
const galleryItems = document.querySelectorAll('.img-gallery');

galleryItems.forEach(item => {
    item.addEventListener('click', () => {
        // First hide both image and video so that both aren't shown at the same time
        lightboxImage.style.display = 'none';
        lightboxVideo.style.display = 'none';
        lightboxVideo.pause(); // Pause the video just in case

        // Check if it's an IMG or VIDEO
        if (item.tagName.toLowerCase() === 'img') {
            // Set image source
            lightboxImage.src = item.src;
            lightboxImage.style.display = 'block';
        } else if (item.tagName.toLowerCase() === 'video') {
            // Set video source
            lightboxVideo.src = item.src;
            lightboxVideo.style.display = 'block';
            lightboxVideo.play();
        }

        // Show overlay
        lightboxOverlay.style.display = 'flex';
    });
});

// Click on the "X" -> Close overlay
closeBtn.addEventListener('click', () => {
    lightboxOverlay.style.display = 'none';
    lightboxVideo.pause(); // Stop the video if present
});

// Click on overlay background -> Close overlay
lightboxOverlay.addEventListener('click', (event) => {
    // Only close if the background (not the image/video) is clicked
    if (event.target === lightboxOverlay) {
        lightboxOverlay.style.display = 'none';
        lightboxVideo.pause();
    }
});