function applyImageStyling(element) {
    const content = document.querySelector('.content'); // Make sure you have this defined
    const dataPar = element.dataset.par.split(',').map(parseFloat);
    const heightPercent = dataPar[0];
    const bottomPercent = dataPar[1];
    const horizontalOffsetPercent = dataPar[2];

    const height = content.offsetHeight * (heightPercent / 100);
    const bottom = content.offsetHeight * (bottomPercent / 100);
    const left = (content.offsetWidth / 2) + (content.offsetWidth * (horizontalOffsetPercent / 100));

    element.style.height = `${height}px`;
    element.style.bottom = `${bottom}px`;
    element.style.left = `${left}px`;
    element.style.transform = `translateX(-50%)`;
}

// Shared parameters
const allSlides = [
  "index.html",
  "slide1.html",
  "slide2.html",
  "slide3.html",
  "slide4.html",
  "slide5.html",
  "slide6.html",
  "slide7.html",
  "slide8.html",
  "slide9.html"
];

console.log("All slides:", allSlides);

document.addEventListener("DOMContentLoaded", () => {

  if (typeof params !== 'undefined' && params.gregName) {
    document.title = params.gregName;
  } else {
    console.warn("Params object is not defined or missing 'gregName'.");
  }





  const buttonContainer = document.getElementById("button-container");
  console.log(buttonContainer);

  const prvButton = document.createElement("a");
  prvButton.id = "prvButton";
  prvButton.className = "prev";
  prvButton.textContent = "\u2190 Previous";
  buttonContainer.appendChild(prvButton);

  if (params.shanMask) {
    const rwdButton = document.createElement("a");
    rwdButton.id = "rwdButton";
    rwdButton.textContent = "RWD";
    buttonContainer.appendChild(rwdButton);

    // Create and append "FWD" button
    const fwdButton = document.createElement("a");
    fwdButton.id = "fwdButton";
    fwdButton.textContent = "FWD";
    buttonContainer.appendChild(fwdButton);
  }

  const nxtButton = document.createElement("a");
  nxtButton.id = "nxtButton";
  nxtButton.className = "next";
  nxtButton.textContent = "Next \u2192";
  buttonContainer.appendChild(nxtButton);

  const currentSlide = document.location.pathname.split("/").pop(); // Get current slide name
  const currentIndex = allSlides.indexOf(currentSlide);

  if (currentIndex !== -1) {
    const prevLink = document.querySelector(".prev");
    const nextLink = document.querySelector(".next");

    // Set previous and next links
    if (currentIndex > 0) {
      prevLink.href = allSlides[currentIndex - 1];
    } else {
      prevLink.className = "prev disabled";
    }

    if (currentIndex < allSlides.length - 1) {
      nextLink.href = allSlides[currentIndex + 1];
    } else {
      nextLink.className = "next disabled";
    }
  } else {
    console.warn("Current slide not found in allSlides array!");
  }


  if (params.shanMask) {
    let imgElement = document.getElementById("myMedia");
    const fwdButton = document.getElementById("fwdButton");
    const rwdButton = document.getElementById("rwdButton");

    const shanName = params.shanName;
    const shanMask = params.shanMask;

    const maxIndex = shanMask.length;

    let curIndx = 0;

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

    const preloadMedia = () => {
        for (let i = 0; i < maxIndex; i++) {
            const fileType = shanMask[i] === "0" ? "png" : shanMask[i] === "1" ? "gif" : "mp4";
            const src = `ink/${shanName}${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();

    const updateMedia = () => {
        const fileType = shanMask[curIndx] === "0" ? "png" : shanMask[curIndx] === "1" ? "gif" : "mp4";
        const newSrc = `ink/${shanName}${curIndx.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;
            newElement.className = "content-imageCH";

            const sourceElement = document.createElement("source");
            sourceElement.src = newSrc;
            sourceElement.type = "video/mp4";
            newElement.appendChild(sourceElement);
            newElement.dataset.par = imgElement.dataset.par;
        } else {
            newElement = document.createElement("img");
            newElement.id = "myMedia";
            newElement.src = newSrc;
            newElement.alt = "Image";
            newElement.className = "content-imageCH";
            newElement.dataset.par = imgElement.dataset.par;
        }

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

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

    fwdButton.addEventListener("click", () => {
        console.log("FWD clicked. curIndx (before):", curIndx);

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

    rwdButton.addEventListener("click", () => {
        console.log("RWD clicked. curIndx (before):", curIndx);

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

    updateMedia();


  }



});


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;
    }
});