elbyid = (id) => document.getElementById(id);
clamp = (num, min, max) => Math.min(Math.max(num, min), max);
clamp01 = (num) => clamp(num, 0, 1);
sign = (num) => (num === 0 ? 0 : num > 0 ? 1 : -1);
within = (num, min, max) => num >= min && num <= max;
lerp = (a, b, t) => a + t * (b - a);

document.addEventListener("DOMContentLoaded", () => {
  let side_open = localStorage.getItem("side_open") ? true : false;

  const nav_el = elbyid("nav");
  const nav_border_el = elbyid("nav_border");
  const nav_side_el = elbyid("nav_side");
  const side_el = elbyid("side");
  const side_border_el = elbyid("side_border");
  const main_el = elbyid("main");
  const top_img_el = elbyid("top_img");

  const currentPath = window.location.pathname;
  const sideLinks = side_el.getElementsByTagName('a');
  
  for (const link of sideLinks) {
    if (link.pathname === currentPath) {
      link.classList.add('onpage');
    }
  }

  nav_fade = () => {
    if (window.scrollY == 0) {
      if (!side_open) {
        side_el.style.backgroundColor = side_border_el.style.backgroundColor =
          "#80808000";
      } else {
        side_el.style.backgroundColor = "#808080FF";
        side_border_el.style.backgroundColor = "#777777FF";
      }

      nav_el.style.backgroundColor = nav_border_el.style.backgroundColor =
        "#80808000";
    } else {
      nav_el.style.backgroundColor = side_el.style.backgroundColor =
        "#808080FF";
      nav_border_el.style.backgroundColor =
        side_border_el.style.backgroundColor = "#777777FF";
    }
  };
  nav_fade();
  nav_el.style.transition =
    nav_border_el.style.transition =
    side_el.style.transition =
    side_border_el.style.transition =
      "background-color 0.166s";

  window.addEventListener("scroll", (event) => {
    nav_fade();
  });

  open_side = () => {
    side_open = true;
    localStorage.setItem("side_open", "open");

    nav_side_el.style.width = "240px";
    side_el.style.width = "240px";
    side_el.classList.add("open");
    side_border_el.style.left = "240px";
    main_el.style.paddingLeft = "240px";
  };
  close_side = () => {
    side_open = false;
    localStorage.removeItem("side_open");

    nav_side_el.style.width = "auto";
    side_el.style.width = "64px";
    side_el.classList.remove("open");
    side_border_el.style.left = "64px";
    main_el.style.paddingLeft = "64px";
  };
  update_side = () => {
    if (side_open) {
      open_side();
    } else {
      close_side();
    }
    nav_fade();
  };
  update_side();
  toggle_side = () => {
    side_open = !side_open;
    update_side();
  };
});

window.addEventListener("load", () => {});