<script>
  
const images = document.querySelectorAll('.fb-vid-gallery-one__card');
const popup = document.getElementById('fb-video-popup');
const container = popup.querySelector('.fb-video-popup__container');
const videoFrame = document.getElementById('videoFrame');
const prevButton = popup.querySelector('.fb-video-popup__prev');
const nextButton = popup.querySelector('.fb-video-popup__next');
const closeButton = popup.querySelector('.fb-video-popup__close');

  
const autoplay = true;          
const loop = true;              
const showControls = false;     

let currentIndex = 0;
  

document.addEventListener('keydown', (event) => {
    if (popup.classList.contains('fb-open')) {
        if (event.key === 'ArrowLeft') {
            currentIndex = (currentIndex - 1 + images.length) % images.length;
            loadVideo(currentIndex);
        } else if (event.key === 'ArrowRight') {
            currentIndex = (currentIndex + 1) % images.length;
            loadVideo(currentIndex);
        } else if (event.key === 'Escape') {
            closePopup();
        }
    }
});


popup.addEventListener('keydown', (event) => {
    const focusableElements = popup.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), iframe');
    const firstFocusable = focusableElements[0];
    const lastFocusable = focusableElements[focusableElements.length - 1];

    if (event.key === 'Tab') {
        if (event.shiftKey) {
            if (document.activeElement === firstFocusable) {
                event.preventDefault();
                lastFocusable.focus();
            }
        } else {
            if (document.activeElement === lastFocusable) {
                event.preventDefault();
                firstFocusable.focus();
            }
        }
    }
  
});

let lastFocusedCard = null;

images.forEach((image, index) => {
    image.addEventListener('click', () => {
        const videoId = image.getAttribute('data-video');
        const controlsParam = showControls ? '&controls=1' : '&controls=0';
        const videoUrl = `https://www.youtube.com/embed/${videoId}?autoplay=${autoplay ? 1 : 0}&loop=${loop ? 1 : 0}${controlsParam}`;
        
        videoFrame.src = videoUrl;
        popup.classList.add('fb-open');
        currentIndex = index;
    });

    image.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
            openPopup(index);
        }
    });

    image.addEventListener('focus', () => {
        lastFocusedCard = image;

        image.addEventListener('keydown', (event) => {
            if (event.key === 'Enter') {
                openPopup(index);
            }
        });
    });
});

prevButton.addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    loadVideo(currentIndex);
});

nextButton.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % images.length;
    loadVideo(currentIndex);
});

closeButton.addEventListener('click', () => {
    closePopup();
});

popup.addEventListener('click', (event) => {
    if (event.target === container) {
        // Prevent closing the popup when clicking inside the container
        return;
    }

    if (
        event.target !== prevButton &&
        event.target !== nextButton &&
        !prevButton.contains(event.target) &&
        !nextButton.contains(event.target) &&
        !closeButton.contains(event.target)
    ) {
        closePopup();
    }
});

function openPopup(index) {
    const videoId = images[index].getAttribute('data-video');
    const controlsParam = showControls ? '&controls=1' : '&controls=0';
    const videoUrl = `https://www.youtube.com/embed/${videoId}?autoplay=${autoplay ? 1 : 0}&loop=${loop ? 1 : 0}${controlsParam}`;
    videoFrame.src = videoUrl;
    popup.classList.add('fb-open');
    currentIndex = index;
  
    setTimeout(() => {
        nextButton.focus();
    }, 100);
}

function loadVideo(index) {
    const videoId = images[index].getAttribute('data-video');
    const controlsParam = showControls ? '&controls=1' : '&controls=0';
    const videoUrl = `https://www.youtube.com/embed/${videoId}?autoplay=${autoplay ? 1 : 0}&loop=${loop ? 1 : 0}${controlsParam}`;
    videoFrame.src = videoUrl;
}

function closePopup() {
    popup.classList.remove('fb-open');
    setTimeout(() => {
        videoFrame.src = '';

        if (lastFocusedCard) {
            lastFocusedCard.focus();
        }
    }, 400);
}
  
</script>