// Mobile menu toggle
const menuToggle = document.createElement("div");
menuToggle.className = "menu-toggle";
menuToggle.textContent = "☰ Menu";
document.body.insertBefore(menuToggle, document.body.firstChild);

const sidebar = document.getElementById("menu");

menuToggle.addEventListener("click", () => {
  sidebar.classList.toggle("active");
});

// Create the menu dynamically
const menuContainer = document.getElementById("sidebar");
const menuData = {
  pages: [
    {
      Name: "home",
      Label: "Home",
      Contents: "content/home.html",
    },
    {
      Name: "ideaofz",
      Label: "Idea of Zack",
      Contents: "content/ideaofz.html",
    },

    {
      Name: "links",
      Label: "Links",
      Contents: "content/links.html",
    },
  ],
};

// Generate the menu
menuData.pages.forEach((page) => {
  const listContainer = document.createElement("ul");
  const list = document.createElement("li");
  const link = document.createElement("a");
  link.href = `#${page.Name}`;
  link.textContent = page.Label;
  link.addEventListener("click", (e) => {
    e.preventDefault();
    loadPage(page.Name);
  });
  listContainer.appendChild(list);
  list.appendChild(link);
  menuContainer.appendChild(listContainer);
});

// Load the content dynamically
function loadPage(name) {
  const page = menuData.pages.find((p) => p.Name === name);
  if (!page) return;

  fetch(page.Contents)
    .then((response) => response.text())
    .then((html) => {
      document.getElementById("content").innerHTML = html;
    })
    .catch((error) => {
      console.error("Error loading content:", error);
      document.getElementById("content").innerHTML =
        `<p>Failed to load ${page.Label} content.</p>`;
    });
}

// Handle hash changes
window.addEventListener("hashchange", () => {
  const hash = window.location.hash.substring(1) || "home";
  loadPage(hash);
});

// Load the default page
window.addEventListener("load", () => {
  const hash = window.location.hash.substring(1) || "home";
  loadPage(hash);
});

// ==============================================
// Copyright 2003 by jsCode.com
// Source: jsCode.com
// Author: etLux
// Free for all; but please leave in the header.
// ==============================================
function showImage() {
  // Set up the image files to be used.
  var theImages = new Array(); // do not change this
  // To add more image files, continue with the
  // pattern below, adding to the array. Rememeber
  // to increment the theImages[x] index!

  theImages[0] = "images/adorable_z_colored.png";
  theImages[1] = "images/spit_bomber_tails.png";
  theImages[2] = "images/THATS_MY_GREEN_EGGS_AND_HAM.png";

  // ======================================
  // do not change anything below this line
  // ======================================

  var j = 0;
  var p = theImages.length;

  var preBuffer = new Array();
  for (i = 0; i < p; i++) {
    preBuffer[i] = new Image();
    preBuffer[i].src = theImages[i];
  }

  var whichImage = Math.round(Math.random() * (p - 1));
  document.write('<img src="' + theImages[whichImage] + '">');
}