document.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowLeft') {
        const prev = document.querySelector('.prev');
        if (prev) window.location.href = prev.href;
    }
    if (event.key === 'ArrowRight') {
        const next = document.querySelector('.next');
        if (next) window.location.href = next.href;
    }
});



document.addEventListener("DOMContentLoaded", () => {
    let imgElement = document.getElementById("myMedia");
    const fwdButton = document.getElementById("fwdButton");
    const rwdButton = document.getElementById("rwdButton");

    // Attributes retrieved from the HTML template
    const baseName = imgElement.getAttribute("data-base-name"); // e.g., "pname_"
    const shanMask = imgElement.getAttribute("data-shan-mask"); // e.g., "0010"

    const maxIndex = shanMask.length;
    let currentIndex = 0;

    console.log("Initial setup:", { baseName, shanMask });

    // Preload images and videos
    const preloadMedia = () => {
        for (let i = 0; i < maxIndex; i++) {
            const fileType = shanMask[i] === "1" ? "mp4" : "png";
            const src = `/lib/images/${baseName}${i.toString().padStart(2, '0')}.${fileType}`;

            if (fileType === "mp4") {
                const video = document.createElement("video");
                video.src = src;
                video.preload = "auto"; // Preload video
            } else {
                const img = new Image();
                img.src = src; // Preload image
            }

            console.log(`Preloading: ${src}`);
        }
    };

    preloadMedia(); // Call preload function

    // Function to update the media (image or video)
    const updateMedia = () => {
        const fileType = shanMask[currentIndex] === "1" ? "mp4" : "png";
        const newSrc = `/lib/images/${baseName}${currentIndex.toString().padStart(2, '0')}.${fileType}`;
        const parentNode = imgElement.parentNode; // Save the parent node

        let newElement;
        if (fileType === "mp4") {
            newElement = document.createElement("video");
            newElement.id = "myMedia";
            newElement.autoplay = true;
            newElement.loop = false;
            newElement.controls = true;

            const sourceElement = document.createElement("source");
            sourceElement.src = newSrc;
            sourceElement.type = "video/mp4";
            newElement.appendChild(sourceElement);
        } else {
            newElement = document.createElement("img");
            newElement.id = "myMedia";
            newElement.src = newSrc;
            newElement.alt = "Image";
        }

        parentNode.replaceChild(newElement, imgElement); // Replace the old element with the new one
        imgElement = newElement; // Update the reference to point to the new element

        console.log(`Media updated to: ${newSrc}, Type: ${fileType}`);
    };

    // Attach event listener to FWD button
    fwdButton.addEventListener("click", () => {
        console.log("FWD clicked. Current index (before):", currentIndex);

        if (currentIndex < maxIndex - 1) {
            currentIndex++;
            console.log("Current index (after FWD):", currentIndex);
            updateMedia();
        }
    });

    // Attach event listener to RWD button
    rwdButton.addEventListener("click", () => {
        console.log("RWD clicked. Current index (before):", currentIndex);

        if (currentIndex > 0) {
            currentIndex--;
            console.log("Current index (after RWD):", currentIndex);
            updateMedia();
        }
    });

    // Initial load
    updateMedia();
});