(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 "./issues-number/" for root index file */
  const prefix = "./";

  const articles = {
    "Featured Art": [
      {
        "title": "",
        "sub-title": "",
        "author": "",
        "description": [
        ],
        "imgUrl": `${prefix}ascent-bosch-2.jpg`,
        "link": `javascript:void(0)`,
  			"poem": false,
        "mainImg": true,
      },
    ],
    "Fiction": [
      {
        "title": "A Girl I Knew",
        "sub-title": "",
        "author": "J.D.Salinger",
        "description": [
          "At the end of my freshman year of college, back in 1936, I flunked five out of five subjects. Flunking three out of five would have made me eligible to report for an invitation to attend some other college in the fall. But men in this three-out-of-five category sometimes had to wait outside the Dean's office as long as two hours. Men in my group - some of whom had big dates in New York that same night - weren't kept waiting a minute. It went one, two, three, the way most men in my group like things to go.",
          "The particular college I had been attending apparently does not simply mail people's grades home, but prefers to shoot them out of some kind of gun. When I got home to New York, even the butler looked tipped off and hostile. It was a bad night altogether. My father informed me quietly that my formal education was formally over. In a way, I felt like asking for a crack at summer school or something. But I didn't. For one reason, my mother was in the room, and she kept saying that she just knew I should have gone to see my faculty adviser more regularly, that that was what he was there for. This was the kind of talk that made me want to go straight to the Rainbow Room with a friend. At any rate, one thing leading to another, when the familiar moment came to me to advance one of my fragile promises really to apply myself this time, I let it go by unused...",
        ],
        "imgUrl": `${prefix}girl-i-knew.jpg`,
        "link": `${prefix}salinger-girl-i-knew.html`,
  			"poem": false,
      },
      {
        "title": "The Escape Route",
        "sub-title": "",
        "author": "Frank Thomas Smith",
        "description": [
          "Look lieutenant, we’re part of the intelligence cadre of this operation. We briefed you guys day before yesterday. Weren’t you there? I mean you can’t interrogate us. Well, you could, but what’s the point? Besides, it’s late.",
          "The young officer looked at Ted Jung and me with tired eyes. It was late. And what was the point? he must have been thinking.",
          "Okay, he said. I’m putting in the log that we captured two members of the local underground who confessed after a relatively short but hard interrogation; they also gave the names of other collaborators. How’s that sound?",
          "He was in uniform, combat fatigues, with a colt 45 on his belt. Ted and I were in civvies, me covered by a Bogart trench coat and Ted a green German loden overcoat. Two grunts who could barely keep their eyes open were sitting on chairs on either side of the room with M1 rifles between their legs.",
          "Sounds good, I said.",
          "Good. What are their names? And what are your names?",
          "We don’t not know nutting, Ted said.",
          "The lieutenant shot a killing glance at Ted and the grunts woke up.",
          "He’s kidding, sir, I said. Don’t pay any attention. Er…my name’s Arnold Schiklegruber and he’s Hans Henkel. The chief of the underground is Eric Marie Remarck and his concubine is Eva Braun. You got a beer or something? We’re dying of thirst",
        ],
        "imgUrl": `${prefix}bogartbergman.jpg`,
        "link": `${prefix}fts-escape-route.html`,
  			"poem": false,
      },
    ],
    "Poetry": [
      {
        "title": "Reincarnation Blues - Canto IV",
        "sub-title": "",
        "author": "Frank Thomas Smith",
        "description": [
          "Meditating on the mother of questions,<br/>(I don't mean the coronavirus<br/>Or the first class esoteric lessons)<br>But the one that necessarily concerns us:",
          "Sooner or later you'll want to know<br/>If life has meaning and if so: what?<br/>We can start be presuming the answer is: no!<br/>If that's the case are we alive or: not?",
          "Or are we actors in a computer game<br/>As the movie Matrix wonkly warned?<br/>Like death itself it's all the same:<br/>No one emerges wholly unharmed.",
          "But if life – human life I mean –<br/>Is real, then so are you and I<br/>Not to mention nature's green<br/>Life of leaves that will also die. . .",
        ],
        "imgUrl": `${prefix}ascent-bosch-2.jpg`,
        "link": `${prefix}reincarnation-blues-4.html`,
  			"poem": true,
      },
      {
        "title": "Reincarnation Blues - Canto V",
        "sub-title": "",
        "author": "Frank Thomas Smith",
        "description": [
          "Look at it, if you will, this way:<br/>If you're here now and likely alive,<br/>Where were you before today?<br/>Before, that is, you dropped or dived",
          "Into this wild and woolly world?<br/>Not a cut-rate clue have you<br/>Unless you think you once uncurled<br/>And mewing in Mama's uterus grew...",
        ],
        "imgUrl": `${prefix}ascent-bosch-2.jpg`,
        "link": `${prefix}reincarnation-blues-5.html`,
  			"poem": false,
      },
    ],
    "Current Events": [
      {
        "title": "Last Supper for the West",
        "sub-title":
          "Is Putin the Face of the Future or the Final Gasp of the Past?",
        "author": "John Feffer",
        "description": [
          "In its attempt to swallow Ukraine whole, Russia has so far managed to bite off only the eastern Donbas region and a portion of its southern coast. The rest of the country remains independent, with its capital Kyiv intact. No one knows how this meal will end. Ukraine is eager to force Russia to disgorge what it’s already devoured, while the still-peckish invader clearly has no interest in leaving the table.",
          "This might seem like an ordinary territorial dispute between predator and prey. Ukraine’s central location between east and west, however, turns it into a potentially world-historical conflict like the Battle of Tours when the Christian Franks turned back the surging Ummayad army of Muslims in 732 AD or the withdrawal of U.S. forces from Vietnam in 1975.",
          "The pivotal nature of the current war seems obvious. Ukraine has for some time wanted to join western institutions like the European Union. Russia prefers to absorb Ukraine into its russkiy mir (Russian world). However, this tug of war over the dividing line between East and West isn’t a simple recapitulation of the Cold War. Russian President Vladimir Putin clearly has no interest in reconstituting the Soviet Union, much less in sending his troops westward into Poland or Germany, while the United States isn’t wielding Ukraine as a proxy to fight the Kremlin. Both superpowers have far more circumscribed aims..",
        ],

        "imgUrl": `${prefix}putin-supper.jpg`,
        "link": `${prefix}feffer-last-supper.html`,
  			"poem": false,
      },
      {
        "title": "Welcome to a Science-Fiction Planet",
        "sub-title":
          "How George Orwell's Doublethink Became the Way of the World",
        "author": "David Barsamian and Noam Chomsky",
        "description": [
          '<span style="font-style:italic">David Barsamian: Let’s head into the most obvious nightmare of this moment, the war in Ukraine and its effects globally. But first a little background. Let’s start with President George H.W. Bush’s assurance to then-Soviet leader Mikhail Gorbachev that NATO would not move “one inch to the east” — and that pledge has been verified. My question to you is, why didn’t Gorbachev get that in writing?</span>',
          '<span style="font-style:italic">Noam Chomsky</span>: He accepted a gentleman’s agreement, which is not that uncommon in diplomacy. Shake-of-the-hand. Furthermore, having it on paper would have made no difference whatsoever. Treaties that are on paper are torn up all the time. What matters is good faith. And in fact, H.W. Bush, the first Bush, did honor the agreement explicitly. He even moved toward instituting a partnership in peace, which would accommodate the countries of Eurasia. NATO wouldn’t be disbanded but would be marginalized. Countries like Tajikistan, for example, could join without formally being part of NATO. And Gorbachev approved of that. It would have been a step toward creating what he called a common European home with no military alliances...',
        ],

        "imgUrl": `${prefix}doublethink-1.jpg`,
        "link": `${prefix}chomsky-doublethink.html`,
  			"poem": false,
      },
    ],
    "Anthroposophy": [
      {
        "title":
          "Esoteric Lessons for the First Class of the School for Spiritual Science at the Goetheanum",
        "sub-title": "Lesson Four",
        "author": "Rudolf Steiner",
        "description": [
          "In the previous lessons we were concerned with meeting the Guardian of the Threshold. And we must understand this meeting well, to the extent that its earnestness can really occupy our minds. For here we enter an area which is essentially different from other areas of spiritual life, what is called spiritual life by today’s civilization, that is. The encounter with the Guardian of the Threshold is the first thing one experiences when a relationship with the spiritual world truly and earnestly takes place. A relationship with the spiritual world cannot take place without this understanding of the meeting with the Guardian of the Threshold, because the spiritual world is on the other side of this threshold. So when communications are received from the spiritual world, they should be understood as merely in preparation for a relationship with the spiritual world.",
          "As an example of what we will receive today, my dear friends, I would like to tell you a story taken from ancient esoteric tradition...",
        ],
        "imgUrl": `${prefix}esoteric-lessons-cover.jpg`,
        "link": `${prefix}steiner-class-4.html`,
  			"poem": false,
      },
      {
        "title": "Tres Años Más:",
        "sub-title": "Reflexiones sobre el día de la muerte de Rudolf Steiner",
        "author": "Eugene Schwartz",
        "description": [
          "Puede parecer extraño incluir una conmemoración del Día de la Muerte de Rudolf Steiner en un boletín que está dedicado a la celebración de la niñez, de las nuevas iniciativas, y de la vida en general, pero incluso en medio de tanta vida el movimiento Waldorf está obligado a afrontar la muerte. Este artículo es un esfuerzo por comprender esta obligación.",
          'El período de seis años que se extendió desde la primavera de 1919 hasta la muerte de Rudolf Steiner, el 29 de marzo de 1925, estuvo lleno de una rápida sucesión de triunfos - y tragedias. Entre las tragedias están los infructuosos esfuerzos por curar las heridas de guerra de Europa mediante la Trimembración Social, el incendio del Primer Goetheanum y la larga y debilitante enfermedad de Steiner. Entre los triunfos se encuentran la refundación de la Sociedad Antroposófica y la poderosa y prolífica producción de las conferencias sobre las relaciones kármicas. Fue durante este período que Rudolf Steiner también ayudó a fundar, nutrir y asesorar lo que él llamaría los "movimientos vástagos", esfuerzos concretos para aplicar los principios espirituales directamente en la sociedad contemporánea. Los movimientos vástagos establecieron vocaciones que hicieron posible un camino único de iniciación moderna. Maestros, médicos, sacerdotes y agricultores ya no tenían que retirarse a centros de misterio o ashrams para desarrollarse espiritualmente, sino que se les proporcionaban los ejercicios meditativos y los retos prácticos que les permitían desplegar sus facultades superiores mientras trabajaban. La pedagogía Waldorf, la medicina antroposófica, la Comunidad de Cristianos y la agricultura biodinámica ya han celebrado, o lo harán pronto, sus cien años, y cada una de ellas tiene sus propias historias de éxito y fracaso. Este artículo se centrará en el papel especial que la pedagogía Waldorf tiene que desempeñar entre sus movimientos hermanos...',
        ],
        "imgUrl": `${prefix}steiner-portrait-1.jpg`,
        "link": `${prefix}schwartz-tres-anios-mas.html`,
  			"poem": false,
      },
    ],
    "Education": [
      {
        "title": "The Necessity of Truly Free Education",
        "sub-title": "",
        "author":
          "Carlos Mönckeberg (d), Frank Thomas Smith and Dr. William L. Chapman (d)",
        "description": [
          "Any reform decided upon cannot have the desired effect if it does not get to the root of the problem of education in this country and in the world: the dependence of educational institutions on the political state.",
          "If we analyze the evolution of social forms in history, we find three archetypal elements that constitute an organized society. The State proper, that is, the bearer of the element of rights.",
          "The sector which we could call cultural, and which encompasses all manifestations of religion, culture, art and education, since to educate is precisely to make the contents of culture available to the learner.",
          "And finally, the sector of economic life, which includes the processes of production, distribution and consumption of goods and services.",
          "Although this plan of a social organism seems convincing, it is only applicable to the present, and this present is a consequence of the preceding historical evolution. Formerly, in the early epoch of the evolution of humanity, the social organization started from an all-embracing theocracy which, from the top of the pyramid, for example the Egyptian Pharaoh, who ruled as a representative of the divinity and as a secular lord simultaneously...",
        ],
        "imgUrl": `${prefix}educacion-libre.jpg`,
        "link": `${prefix}education-free.html`,
  			"poem": false,
      },
    ],
  };

  const articlesKeys = Object.keys(articles);
  const navChekboxes = Array.from(document.querySelectorAll("#nav-menu input"));

  // Uncheck all other hidden checkboxes when one is checked
  // colapses nav-menu dropdowns when a new one is expanded
  function createNavMenu(navMenuElement) {
    navChekboxes.forEach(input => {
      input.addEventListener("change", () => {
        navChekboxes.forEach(element => {
          if (element === input) return
          element.checked = false;
        });
      });
    });

    function createMenuLinks() {
      articlesKeys.forEach(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} &#9660;`;
          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);
        }
      });
    }
    createMenuLinks();

    //event listeners
    const navmenuLinkArray = Array.from(
      navMenuElement.querySelectorAll(".nav-menu-links")
    );
    const scrollToTarget = target => {
      const headerOffset = 60;
      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";
        }
      });
    });
  }
  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 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 link = articleDiv.querySelector("[data-article-link]");
        articleInnerDiv.id = article["title"]
          .toLowerCase()
          .replace(/[^a-zA-Z0-9]/g, "");
        titleElement.innerText = article["title"];
        author.innerText = article["author"];
        if (article["sub-title"] && article["sub-title"].length !== 0) {
          subTitle.innerText = article["sub-title"];
        }
        img.src = article["imgUrl"];
        link.href = article["link"];
        // Special Atributes for "Featured Art"
        if (article["mainImg"]) {
          titleElement.style.marginBottom = "1em";
          link.style.display = "none";
          img.style.maxWidth = "80%";
          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 = "left";
        }
        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();
  }

  // export function createArticlePeek(category, title) {
  //   mainPage.innerHTML = ""
  //   articlesKeys.forEach(group => {
  //     if (group !== category) return
  //     articles[group].forEach(article => {
  //       if (article["title"] !== title) return
  //       const articleDiv = document.querySelector("[data-article-template]")
  //         .content.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 link = articleDiv.querySelector("[data-article-link]")
  //       titleElement.innerText = title
  //       author.innerText = article["author"]
  //       if (article["sub-title"] && article["sub-title"].length !== 0) {
  //         subTitle.innerText = article["sub-title"]
  //       }
  //       img.src = article["imgUrl"]
  //       link.href = article["link"]
  //       let i = 1
  //       const className = article["title"]
  //         .replace(/[^a-zA-Z0-9]/g, "")
  //         .toLowerCase()
  //       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()
  //     })
  //   })
  // }

  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();
    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);
  //create title page with the first property of "articleObject.js" and it's title
  createArticlePeek(articles);
  window.onscroll = () => {
    stickyFunc();
  };
  // createArticlePeek(
  //   Object.keys(articles)[0],
  //   articles[Object.keys(articles)[0]][0].title
  // )

  //--------------------------------
  // Change navbar position to fixed on scroll
  // function navMenuPositionFixed() {
  //   if (window.pageYOffset + 55 >= navDivTop) {
  //     navMenu.classList.add("fixed")
  //   } else {
  //     navMenu.classList.remove("fixed")
  //   }
  // }
  // window.onscroll = () => {
  //   navMenuPositionFixed()
  // }
  //-------------------

}());