(function () {
  'use strict';

  const stylesheet = document.querySelector("#stylesheet");
  const toggleStylesheetLightButton = document.querySelector("#light");
  const toggleStylesheetDarkButton = document.querySelector("#dark");
  const navMenu = document.querySelector("#nav-menu");
  navMenu.offsetTop;
  const mainPage = document.querySelector("#main-div");
  const topBar = document.querySelector("#top-bar");
  const lightDarkWarning = document.querySelector("#light-dark-warning");
  const abnormalLogo = document.querySelector("#logo");
  const abnormalLogoStylesheet = document.querySelector("#logo-stylesheet");
  const footerAbnormal = document.querySelector("#footer-fourth");
  const introScreen = document.querySelector("[data-intro-screen]");
  const stylesheetSelector = document.createElement("div");
  const previousStylesheet = document.createElement("div");
  const menuButton = document.querySelector("#menu-button-open-close");
  const navMobile = document.querySelector("#mobile-nav-menu");
  const menuBar = document.querySelector("#mobile-menu-bar");
  const pageName = document.querySelector("#page-name");
  /*change prefix from "./" for test page inside the issue's 
  folder to "./issue-number/" for root index file */
  const prefix = "./158/";

  const articles = {
    "Featured Art": [
      {
        title: "La Orana Maria",
        "sub-title": "",
        author: "Paul Gaugin",
        description: [
  "Before embarking on a series of pictures inspired by Polynesian religious beliefs, Gauguin devoted this, his first major Tahitian canvas, to a Christian theme, describing it in a letter of March 1892: \"An angel with yellow wings reveals Mary and Jesus, both Tahitians, to two Tahitian women, nudes dressed in pareus, a sort of cotton cloth printed with flowers that can be draped from the waist. Very somber, mountainous background and flowering trees . . . a dark violet path and an emerald green foreground, with bananas on the left. I'm rather happy with it.\"",
  "The title in the lower left-hand corner: LA ORANA MARIA = Hail Mary \[Ave Maria\]",
  "In view at the Metropolitan Museum of Art, New York CityIa Orana Maria (Hail Mary)", "Paul Gauguin (French, Paris 1848–1903 Atuona, Hiva Oa, Marquesas Islands), Oil on canvas",
        ],
        imgUrl: `${prefix}orana.jpg`,
        link: "",
        poem: false,
        mainImg: true,
      },

    ],
    "Current Events": [
      {
        title: "Trump or Biden on Israel?",
        "sub-title": "It's no contest",
        author: "Bob Dreyfuss",
        description: [
          "Recently, I attended a demonstration called by groups opposing the carnage in Gaza, where eight months of air, ground, and sea attacks by the Israeli Defense Forces have leveled entire quadrants of cities and killed more than 36,000 Palestinians. Many of the participants, justly outraged by the ongoing mass murder triggered by Hamas’s October 7th terrorist massacre, bitterly criticized President Biden over his continuing support for Prime Minister Benjamin Netanyahu’s war.",
          "Asked about the likely choice in November between Biden and Donald Trump, the consensus among the demonstrators was that they wouldn’t vote for “Genocide Joe,” and that there was nothing to choose from between Biden and Trump when it comes to Middle East policy. Some would simply stay home, while some might vote for the Green Party or another third party, and even those who might eventually pull the lever for Biden pledged to vote “uncommitted” in any primary to “send a message to the White House.”",
        ],
        imgUrl: `${prefix}trump-biden.jpeg`,
        link: `${prefix}dreyfus-election.html`,
        poem: false,
        mainImg: false,
      },
      {
        title: "The Military-Industrial Complex Is Killing Us All",
        "sub-title": "",
        author: "Theresa (Isa) Arriola and David Vine",
        description: [
          "We need to talk about what bombs do in war. Bombs shred flesh. Bombs shatter bones. Bombs dismember. Bombs cause brains, lungs, and other organs to shake so violently they bleed, rupture, and cease functioning. Bombs injure. Bombs kill. Bombs destroy.",
          "Bombs also make people rich.",
          "When a bomb explodes, someone profits. And when someone profits, bombs claim more unseen victims. Every dollar spent on a bomb is a dollar not spent saving a life from a preventable death, a dollar not spent curing cancer, a dollar not spent educating children. That’s why, not so long ago a retired five-star general and President Dwight D. Eisenhower rightly called spending on bombs and all things military a “theft.”",
          "The perpetrator of that theft is perhaps the world’s most overlooked destructive force. It looms unnoticed behind so many major problems in the United States and the world today. Eisenhower famously warned Americans about it in his 1961 farewell address, calling it for the first time “the military-industrial complex,” or the MIC.",
        ],
        imgUrl: `${prefix}MOC-tom-dispatch.jpg`,
        link: `${prefix}MOC-tom-dspatch.html`,
        poem: false,
        mainImg: false,
      },
    ],
    "Social Science": [
      {
        title: "Favela Children",
        "sub-title": "",
        author: "Ute Creamer",
        description: [
          "Christmas 1972",
          "Holidays! At least holidays from the Waldorf School. No sooner had I promoted my class into the fifth grade, put on a play, distributed report cards, etc, than I rushed off to Londrina. With two huge suitcases full of presents and used clothes and an unwieldy traveling bag, I stood before my door waiting to be picked up by a fifty-year-old bachelor. Like all bachelors he had his ticks, and only wanted to drive me as far as the city airport and not to the bus-station, which is farther. Luckily I was able to convince him to go by the Banco Mercantil, where Zéca works. Zéca had to help me drag the suitcases to the station. Two minutes before the departure time we arrived panting and laughing. We checked the baggage as I wanted to travel light. But the driver told me that, although this bus did go to Londrina, mine had already left and I should chase it in a taxi. I was furious as I saw the bus with my luggage, but without me, drive off.",
        ],
        imgUrl: `${prefix}favela-cover.jpg`,
        link: `${prefix}favela-children-12.html`,
        poem: false,
        mainImg: false,
      },
    ],
    Memoir: [
      {
        title: "Exile's End",
        "sub-title": "",
        author: "Frank Thomas Smith",
        description: [
          "In order to make an intelligent choice, or even a stupid one, you have to have reached a certain age, not necessarily a legal age, but at least one which allows thinking to function. On the other hand, according to some, including myself, your spirit exists both before birth and after death. And during the time between death and the future birth you train for the big moment, which includes choosing your future parents. If your future parents live in Brooklyn, NY as mine did, you will necessarily be born there — as I was. This implies that I made my first choice (possibly influenced by previous events and choices, intelligent or stupid) before I was even born. The way things turned out it was a very good choice. My parents were neither rich nor poor, originally working class, but after my father somehow became the U.S. sales representative for a Cuban tobacco company (before Castro), we at least approached middle class. When Castro took over Cuba the company lost its tobacco source, but the owners had moved their money and themselves to Florida. We stayed in Brooklyn and my father traveled a lot seeking tobacco in Mexico, and South and Central America. I had no sisters or brothers, don't know why. Neither my parents nor other relatives of that generation were intellectuals, nor did they have much faith in education, which they had lacked, having gone to work before finishing high school. So, they left me on my own in that respect.",
        ],
        imgUrl: `${prefix}exiles-end-cvr-sm.jpg`,
        link: `${prefix}exiles-end-1.html`,
        poem: false,
        mainImg: false,
      },
      {
        title: "Frank is always right",
        "sub-title": "",
        author: "Hernan Melana",
        description: [
          "Now that my  friend Frank Thomas Smith has written his memoirs, or his spiritual autobiography, as he calls it, or the biography of his decisions, I wonder if he knows how many decisions he has made without realizing that with them he has changed the lives of many of us who pass close to him. I have not spent as much time or had as many talks with him as I would have liked; life is like that. We are always have obligations and urgencies that don't let us do what's important. But I have been around long enough to play long chess matches over the course of two decades, where we have had a parity that has allowed both of us to like playing against each other. But chess was an excuse for me to visit him. Now that I am far away, geographically speaking, I would like to play another game.",
          "I met him at the El Trigal school, which is the fruit of many efforts, but which is a Waldorf school thanks to him. It was his impetus and his convictions that gave that school its identity. My two daughters went there and I became a teacher. The years when Frank was on the school's Board of Directors, he was at the helm of the ship. You could say that those were the best years of the institution, the golden years. Then, when he left, citing age and fatigue, it was my turn to take the helm at various times. I think I did quite well.",
        ],
        imgUrl: `${prefix}frank-always-right.jpg`,
        link: `${prefix}frank-always-right.html`,
        poem: false,
        mainImg: false,
      },
    ],
    Anthroposophy: [
      {
        title: "Anthroposophical Guidelines",
        "sub-title": "",
        author: "Rudolf Steiner",
        description: [
          "29. What acts in enhanced imaginative cognition is what lives in man’s psychic-spiritual interior and is the form in his physical body; and on this foundation human existence unfolds in the physical world. The physical body, ever and again renewing itself in its metabolism, stands from birth (or rather conception) until death before the continuously unfolding inner human being: the physical space-body becoming a time-body.",
          "30. In inspired cognition, imaginative images depict what the human being experiences in the time between death and a new birth in a spiritual environment. Here is visible what man is in a cosmic context, without his physical and etheric bodies through which he lived out his earthly existence.",
          "31. In intuitive cognition the effects of previous incarnations on the present one enter consciousness. These previous incarnations, in their further development, have erased the connection they once had with the physical world. They have become the pure spiritual core of the person and as such are active in his current life. They are also an object of the cognition that is the result of the unfolding of imagination and inspiration.",
        ],
        imgUrl: `${prefix}guidelines-29-37-plus.jpg`,
        link: `${prefix}guidelines-29-37-plus.html`,
        poem: false,
        mainImg: false,
      },
    ],
    "True Tales (kind of)": [
      {
        title: "The Fuming Salamander",
        "sub-title": "",
        author: "Frank Thomas Smith",
        description: [
          "A salamander, besides being an interesting amphibious creature, in Spanish – at least in Argentine Spanish – is a squat, cast-iron, wood-burning stove used for heating, called a salamandra. Not much more to say about this primitive stove…now, so let’s start with the creature. What I learned about salamanders was that it is an amphibian of the order urodela which was often in olden times credited with fantastic and sometimes occult qualities such as an affinity with elemental fire, as in the allegorical descriptions of animals in medieval bestiaries.",
        ],
        imgUrl: `${prefix}salamander-1.jpg`,
        link: `${prefix}fts-fuming-salamander.html`,
        poem: false,
        mainImg: false,
      },
    ],
    "Children's Corner": [
      {
        title: "The Magic Mound",
        "sub-title": "",
        author: "Frank Thomas Smith",
        description: [
          "They soon learned that Sergio's precaution not to stop on the path was justified. They had no sooner finished eating when a squad of soldiers armed with spears and maces came along the path.",
          '"What a waste of time," one of them said, "marching all day and night without finding them."',
          '"I\'m glad we didn\'t," said another, "I\'d rather not meet up with that white monster." He meant Platero, who was standing stock still behind a boulder a few yards away.',
          '"Maybe the squad that went to guard the Eastbridge found them."',
        ],
        imgUrl: `${prefix}magic-mound-cover.png`,
        link: `${prefix}magic-mound-14-15.html`,
        poem: false,
        mainImg: false,
      },
    ],
  };

  const articlesKeys = Object.keys(articles);

  // Uncheck all other hidden checkboxes when one is checked
  // colapses nav-menu dropdowns when a new one is expanded
  function createNavMenu(navMenuElement) {
    function createMenuLinks() {
      articlesKeys.forEach((category) => {
        // create dropdown menu if there is more than one article in category
        if (articles[category].length === 1) {
          if (!articles[category][0]["title"]) return;
          const div = document.createElement("div");
          const p = document.createElement("p");
          const title = articles[category][0]["title"]
            .toLowerCase()
            .replace(/[^a-zA-Z0-9]/g, "");
          p.className = "nav-menu-links";
          p.innerText = category;
          p.dataset.title = title;
          div.appendChild(p);
          navMenuElement.appendChild(div);
        } else if (articles[category].length > 1) {
          const content = document
            .querySelector("[data-dropdown-template]")
            .content.cloneNode(true);
          const hiddenInput = content.querySelector("[data-hidden-input]");
          const label = content.querySelector("[data-label]");
          const title = content.querySelector("[data-title]");
          const list = content.querySelector("[data-list]");
          hiddenInput.id = `${category}-input`;
          label.htmlFor = hiddenInput.id;
          title.innerHTML = `${category} ▼`;
          articles[category].forEach((article) => {
            const li = document.createElement("li");
            const title = article["title"]
              .replace(/[^a-zA-Z0-9]/g, "")
              .toLowerCase();
            li.className = "nav-menu-links";
            li.id = article["title"];
            li.innerText = `${article.title} - ${article.author}`;
            li.dataset.title = title;
            list.appendChild(li);
          });
          navMenuElement.appendChild(content);
        }
      });
      const createSingleLink = (title, id) => {
        const div = document.createElement("div");
        const p = document.createElement("p");
        p.className = "nav-menu-links";
        p.innerText = title;
        p.dataset.title = id;
        div.appendChild(p);
        navMenuElement.appendChild(div);
      };
      createSingleLink("Letters to the Editor", "pic-nav-menu");
      createSingleLink("Other Sections", "pic-nav-menu");
      createSingleLink("Subscribe", "subscribe");
    }
    createMenuLinks();

    //event listeners
    const navmenuLinkArray = Array.from(
      navMenuElement.querySelectorAll(".nav-menu-links"),
    );
    const scrollToTarget = (target) => {
      const headerOffset = 120;
      const elementPositon = target.getBoundingClientRect().top;
      const offsetPosition = elementPositon + window.pageYOffset - headerOffset;
      window.scrollTo({
        top: offsetPosition,
        behavior: "smooth",
      });
    };

    navmenuLinkArray.forEach((link) => {
      link.addEventListener("click", () => {
        let article = document.querySelector(`#${link.dataset.title}`);
        scrollToTarget(article);
        if (menuBar.dataset.opened === "true") {
          menuBar.dataset.opened = "false";
        }
      });
    });

    const navChekboxes = Array.from(
      document.querySelectorAll(".nav-hidden-inputs"),
    );

    navChekboxes.forEach((input) => {
      input.addEventListener("change", () => {
        navChekboxes.forEach((element) => {
          console.log("hi");
          if (element === input) return;
          element.checked = false;
        });
      });
    });
  }
  function checkAndReduce() {
    const title = mainPage.querySelector("h2");
    if (title.innerText.length > 20) {
      title.style.fontSize = "2.5em";
    }
  }

  function appendPicNavMenu() {
    const picNavDiv = document
      .querySelector("[data-pic-nav]")
      .content.cloneNode(true);
    const nav = picNavDiv.querySelector("nav");
    nav.id = "pic-nav-menu";
    const subscribeDiv = document
      .querySelector("[data-subscribe-div]")
      .content.cloneNode(true);
    const subscribe = subscribeDiv.querySelector("div");
    subscribe.id = "subscribe";
    const firstChild = document.querySelector("#main-div").lastElementChild;
    const navDiv = document.createElement("div");
    navDiv.appendChild(picNavDiv);
    navDiv.appendChild(subscribe);
    firstChild.insertAdjacentElement("afterend", navDiv);
  }

  function createArticlePeek(object) {
    const keys = Object.keys(object);
    keys.forEach((key) => {
      if (keys.indexOf(key) !== 0) {
        const categoryTitle = document.createElement("h1");
        categoryTitle.innerText = key;
        categoryTitle.className = "category-title";
        mainPage.appendChild(categoryTitle);
      }
      object[key].forEach((article) => {
        const articleDiv = document
          .querySelector("[data-article-template]")
          .content.cloneNode(true);
        const articleInnerDiv = articleDiv.querySelector("article");
        const div1 = articleDiv.querySelector("div");
        div1.cloneNode(true);
        const titleElement = articleDiv.querySelector("h2");
        const author = articleDiv.querySelector("h1");
        const subTitle = articleDiv.querySelector("h3");
        const description = articleDiv.querySelector(
          "[data-article-description]",
        );
        const img = articleDiv.querySelector("[data-article-img]");
        const linkContainer = articleDiv.querySelector("[data-link-container]");
        const link = articleDiv.querySelector("[data-article-link]");
        articleInnerDiv.id = article["title"]
          .toLowerCase()
          .replace(/[^a-zA-Z0-9]/g, "");
        titleElement.innerHTML = article["title"];
        author.innerHTML = article["author"];
        if (article["sub-title"] && article["sub-title"].length !== 0) {
          subTitle.innerText = article["sub-title"];
        }
        img.src = article["imgUrl"];
        linkContainer.style.display = "flex";
        linkContainer.style.width = "100%";
        linkContainer.style.justifyContent = "center";
        link.href = article["link"];
        link.style.fontSize = "130%";
        link.style.fontWeight = "500";
        // Special Atributes for "Featured Art"
        if (article["mainImg"]) {
       //   doubleFeaturedArt({
       //     div1,
       //     div2,
       //     titleElement,
       //     subTitle,
       //     articleInnerDiv,
       //     img,
       //     description,
       //   });
          titleElement.style.marginBottom = "1em";
          link.style.display = "none";
          img.style.maxWidth = "60%";
          img.style.maxHeight = "100%";
          img.style.marginLeft = "auto";
          img.style.marginRight = "auto";
          img.style.marginBottom = "1em";
          img.style.float = "none";
          img.insertAdjacentElement("afterend", author);
        }
        // if its a poem, make the div and link float (so the text doesn't go under the img)
        if (article["poem"]) {
          description.style.float = "left";
          link.style.clear = "left";
          link.style.float = "right";
        }
        let i = 1;
        const className = article["title"]
          .replace(/[^a-zA-Z0-9]/g, "")
          .toLowerCase();
        description.id = `${className}-paragraphs-div`;
        link.id = `${className}-main-link`;
        article["description"].forEach((descriptionParagraph) => {
          const paragraph = document.createElement("p");
          paragraph.innerHTML = descriptionParagraph;
          paragraph.className = `${className}-paragraph-${i}`;
          description.appendChild(paragraph);
          i++;
        });
        mainPage.appendChild(articleDiv);
        checkAndReduce();
      });
    });
    appendPicNavMenu();
  }

  function mobilePortrait() {
    if (previousStylesheet.dataset.stylesheet == "mobile") return
    pageName.innerHTML = "Menu";
    //create elements in mobile-navbar


    createNavMenu(navMobile);

    //get modify input and label "for" in mobile nav
    const navMobileInputs = Array.from(navMobile.querySelectorAll("input"));
    const navMobileLabels = Array.from(navMobile.querySelectorAll("label"));

    navMobileInputs.forEach(input => {
      input.id += "-mobile";
    });

    navMobileLabels.forEach(label => {
      label.htmlFor += "-mobile";
    });

    //append elements
    topBar.appendChild(navMobile);

    //create observer functions
    let observerMobileMenu = new MutationObserver(mutations => {
      mutations.forEach(mutation => {
        if (mutation.type == "attributes") {
          if (menuBar.dataset.opened == "true") {
            navMobile.classList.add("open");
            menuButton.classList.add("close");
          } else {
            navMobile.classList.remove("open");
            menuButton.classList.remove("close");
          }
        }
      });
    });

    //create menu open button - three lines
    for (let i = 0; i < 3; i++) {
      const menuButtonLine = document.createElement("div");
      menuButtonLine.className = "menu-button-line";
      menuButton.appendChild(menuButtonLine);
    }
    //give new class to desktop menu
    navMobile.className = "nav-menu menu-mobile desktop-hide";
    //observe for changes
    observerMobileMenu.observe(menuBar, {
      attributes: true,
    });

    //menu button listener
    menuButton.addEventListener("click", () => {
      if (menuBar.dataset.opened === "false") {
        menuBar.dataset.opened = "true";
      } else {
        menuBar.dataset.opened = "false";
      }
    });
    previousStylesheet.dataset.stylesheet = "mobile";

    // musicLinks.innerHTML = "Words and Music"
  }

  //scroll to top on refresh
  window.onbeforeunload = function () {
    window.scrollTo(0, 0);
  };

  //create elements for data-attributes

  // function to set data atributes acording to screen width
  function setStylesheetDataAttr() {
    if (screen.width <= 650) {
      if (stylesheetSelector.dataset.stylesheet == "mobile") return
      stylesheetSelector.dataset.stylesheet = "mobile";
    } else if (screen.width >= 651 && screen.width < 1200) {
      if (stylesheetSelector.dataset.stylesheet == "medium") return
      stylesheetSelector.dataset.stylesheet = "medium";
    } else {
      if (stylesheetSelector.dataset.stylesheet == "desktop") return
      stylesheetSelector.dataset.stylesheet = "desktop";
    }
  }

  //execute on rezise
  window.addEventListener("resize", () => {
    setStylesheetDataAttr();
  });

  //ovserve changes on data-attributes and execute functions
  let observerStylesheetAttr = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      if (mutation.type == "attributes") {
        if (stylesheetSelector.dataset.stylesheet === "mobile") {
          mobilePortrait();
        }
      }
    });
  });
  observerStylesheetAttr.observe(stylesheetSelector, {
    attributes: true,
  });

  //onload functions
  window.addEventListener("load", () => {
    setStylesheetDataAttr();
    mainPage.offsetTop;
    introScreen.classList.add("fade-out");
    setTimeout(() => {
      introScreen.style.display = "none";
      document.querySelector("html").style.overflowY = "visible";
      lightDarkWarning.classList.remove("desktop-hide", "mobile-hide");
    }, 1000);

    //local storage - if exists change theme
    if (!localStorage.getItem("style")) return
    lightDarkWarning.style.display = "none";
    const lightOrDark = localStorage.getItem("style");
    if (lightOrDark === "dark") {
      stylesheet.href = `${prefix}css/dark.css`;
    }

    if (screen.width <= 650) {
      mobilePortrait();
    }
  });

  //remove light-and-dark warning onclick
  lightDarkWarning.addEventListener("click", () => {
    lightDarkWarning.style.display = "none";
  });

  // Toggle Stylesheets
  toggleStylesheetLightButton.addEventListener("click", () => {
    stylesheet.href = `${prefix}css/light.css`;
    localStorage.setItem("style", "light");
  });
  toggleStylesheetDarkButton.addEventListener("click", () => {
    stylesheet.href = `${prefix}css/dark.css`;
    localStorage.setItem("style", "dark");
  });

  // Sticky navbar
  const stickyFunc = () => {
    const limit = mainPage.offsetTop;
    const navCol = document.querySelector("#sticky-div  ");
    if (window.pageYOffset + 50 >= limit) {
      navCol.classList.add("fixed-nav-col");
    } else {
      navCol.classList.remove("fixed-nav-col");
    }
  };

  //observer function, scroll-in abnormal logo when footer is 50% visible
  let notFirstTime = 0;
  const observer = new IntersectionObserver(
    entries => {
      if (entries[0].isIntersecting === true) {
        if (notFirstTime > 0) return
        abnormalLogoStylesheet.href = `${prefix}css/logo2.css`;
        abnormalLogo.classList.add("logo-animation");
        notFirstTime++;
      }
    },
    { threshold: [0.5] }
  );

  observer.observe(footerAbnormal);

  createNavMenu(navMenu);
  createArticlePeek(articles);

  window.onscroll = () => {
    stickyFunc();
  };

})();