// Shared parameters
const allSlides = [
  "index.html",
  "page1.html",
  "page2.html",
  "page3.html",
  "page4.html",
  "page5.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] === "1" ? "mp4" : "png";
            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] === "1" ? "mp4" : "png";
        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;

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

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


  }



});




let gridVisible = true;

function drawGrid() {
  const svgContainer = document.getElementById('databoxID');
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

  const containerWidth = svgContainer.offsetWidth;
  const containerHeight = svgContainer.offsetHeight;

  console.log("X : ", containerWidth);
  console.log("Y : ", containerHeight);

  // Compute scaling factors
  const scaleX = containerWidth / 100; // Scale based on width
  const scaleY = containerHeight / 100; // Scale based on height


  svg.setAttribute("viewBox", `0 0 ${containerWidth} ${containerHeight}`);
  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  svg.style.position = 'absolute'; // Ensure proper positioning
  svg.style.top = '0';
  svg.style.left = '0';
  svg.style.zIndex = '10';
  for (let x = 1; x < 10; x++) {
    for (let y = 1; y < 10; y++) {
      
      const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
      circle.setAttribute("cx", x * 10 * scaleX);
      circle.setAttribute("cy", y * 10 * scaleY);
      circle.setAttribute("r", 5); // Small radius for dots
      circle.setAttribute("fill", "red");
      svg.appendChild(circle);
    }
  }

  svgContainer.appendChild(svg);
}

// Function to toggle the grid visibility
function toggleGrid() {
  const svgContainer = document.getElementById('databoxID');
  const existingGrid = svgContainer.querySelector('svg');

  if (existingGrid) {
    svgContainer.removeChild(existingGrid); // Remove the grid if it exists
  } else {
    drawGrid(); // Draw the grid if it doesn't exist
  }
}



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

    if (event.key === 'g') {
        toggleGrid();
    }
});