(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 subscribeDiv = document.querySelector("#subscribe");
  subscribeDiv.offsetTop;
  const abnormalLogo = document.querySelector("#logo");
  const abnormalLogoStylesheet = document.querySelector("#logo-stylesheet");
  const footerAbnormal = document.querySelector("#footer-fourth");
  document.querySelector("#mobile-subscribe");
  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 = {
    "Title Page": [
      {
        "title": "The Spiritual Foundation of Morality",
        "sub-title": "",
        "author": "Rudolf Steiner",
        "description": [
          "We have to consider in these coming days one of the most important and significant fields of our Anthroposophical study of life. We are often reproached for our inclination towards the study of far-distant cosmic developments in their connection with man; it is said that we like to lift ourselves into spiritual worlds, too frequently only considering the far-distant events of the past and the far-reaching perspective of the future, and that we disregard a sphere which concerns man most intimately — the sphere of human morals and human ethics.",
        ],
        "imgUrl": `${prefix}st-francis.jpg`,
        "link": `${prefix}steiner-morality-1.html`,
      },
    ],
    "Current Events": [
      {
        "title": "Now Is the Time to Be Angry",
        "sub-title": "Remembering Forgotten Afghanistan",
        "author": "Ann Jones",
        "description": [
          "I know, I know. It’s the last thing you want to hear about. Twenty years of American carnage in Afghanistan was plenty for you, I’m sure, and there are so many other things to worry about in an America at the edge of… well, who knows what? But for me, it’s different. I went to Afghanistan in 2002, already angry about this country’s misbegotten war on that poor land, to offer what help I could to Afghan women. And little as I may have been able to do in those years, Afghanistan left a deep and lasting impression on me.",
          "So, while this country has fled its shameful Afghan War, I, in some sense, am still there. That’s partly because I’ve kept in touch with Afghan women friends and colleagues, some living through the nightmare of the Taliban back again and others improbably here in America, confined in military barracks to await resettlement in the very country that so thoroughly wrecked their own. And after all these years, I’d at least like to offer some thoughts on the subject, starting with a little history that most Americans know nothing about.",
        ],
        "imgUrl": `${prefix}afghan.jpg`,
        "link": `${prefix}jones-angry.html`,
      },
    ],
    "Science & Covid-19": [
      {
        "title": "Ways of Looking at a Virus",
        "sub-title": "Reflections on the COVID-19 Pandemic",
        "author": "Jon McAlice and Craig Holdrege",
        "description": [
          "Since the beginning of 2020, we have been swept up in a chain of events that has called into question much of what we have come to take for granted. It has been a time when, to paraphrase Goethe, Nature wakens us. How can we best place ourselves in relation to the events that have unfolded over the course of the pandemic? Or: Can we find a way to think about them that allows us to experience ourselves as participants capable of making considered decisions? This seems to us to be important. What decisions an individual makes should be rooted in understanding and the intention to act responsibly, yet out of freedom. Action born of “manufactured consent,”(1) enforced by societal pressure and government regulations, deprives us of the fundamental sense of agency that lies at the core of being human. And this seems to be a pivotal question. The presence of the virus is linked inextricably with the way we choose to enact being human.",
          "he initial conversations that led to this article took place in the spring of 2020. We thought that the best way to find a productive relationship to the growing pandemic was to engage with it in all its various aspects. We began with the question: What is a virus? This led to the publication of three papers: on viruses in the dynamics of life,(2) on extendedness and permeability in understanding organisms,(3) and a critique of the book The Contagion Myth.(4) As the pandemic developed, the questions shifted. We realized that although SARS-CoV-2 was a necessary condition for the spread of COVID-19, the response to this new viral presence had little to do with the virus itself. The pandemic was and is an ecological, social, and worldview phenomenon. What follows is an attempt on our part — as of October 2021 — to orient ourselves in what is without question a complex, confusing, and still evolving situation.",
        ],
        "imgUrl": ``,
        "link": `https://www.natureinstitute.org/article/jon-mcalice-and-craig-holdrege/ways-of-looking-at-a-virus`,
      },
    ],
    "Fiction": [
      {
        "title": "The Purloined Poem",
        "sub-title": "",
        "author": "Frank Thomas Smith",
        "description": [
          "I never asked my friend, Peter Product, the origin of his family name. I just assumed that it was shortened from one of those long, unpronounceable Polish or Czech names. In any case it raised eyebrows and, often, grins. Pete was a poet, a profession not very amenable to earning money, so he moonlighted as an assistant insurance underwriter at Encore Underwriters, Inc., 66 Wall Street, New York City, which is where I met him.",
          "One day he hit the poetic jackpot when he wrote an epic poem with the title “Ode to the Brooklyn Bridge”, dedicated lovingly to María, and had it published in the <em>The New Yorker</em>. Getting something published in that magazine was enough to win Brooklyn’s 3-B (Best Breast-Beating) Gold Medal, so Peter Product’s reputation went into orbit. Simon and Schuster approached him directly (he had no agent yet) for a book of his poems. S &amp; S knew that they would gain no profit, but publishing poetry is good for a publishing house’s reputation. Pete had a pendrive full of his life’s work, none of which, by the way, approached the poetic quality and heartfelt metaphoric feeling of “Ode”. He sent it all to   S &amp; S, who edited it as best they could and issued it with the title <em>Ode to the Brooklyn Bridge – and other verses</em> by Peter Product.",
          "In the real world not even a successful poet can live on the royalties from one book of poetry, so Pete kept his job at Encore, for a while. His girlfriend – María, a dark-haired Argentine beauty – worked as a secretary at Encore, actually <em>my</em> secretary. I was a licensed insurance underwriter, Peter Product was one of my assistants. My section was growing and making a lot of money. Most of the other sections used the secretary pool, but I had the most important places in the country to cover: New York City and Kentucky. The importance of NYC is obvious, but Kentucky? It’s the whisky, stupid. Whisky distilleries were and probably still are great fire risks, and their contents valuable. So risky and so valuable that no insurance company would dare to cover them alone. That’s where Encore Underwriters came in. We would distribute the risk over various companies, even including Lloyd’s of London. The latter, the biggest insurance company in the world, would automatically accept fifty percent of any risk if our American companies combined would take the other fifty percent.",
        ],
        "imgUrl": `${prefix}shakespeare-mad.jpg`,
        "link": `${prefix}fts-purloined-poem.html`,
      },
    ],
    "Poetry": [
      {
        "title": "Buddha at Nadika",
        "sub-title": "",
        "author": "Arthur Davison Ficke",
        "description": [
          "The Buddha came to where the sea<br />Curled silver-white upon the land,<br />And murmurs of infinity<br />Breathed on the sand.  ",
          "And there lay shells like rosy foam<br />Borne from the caverns of the deep,<br />Frail playthings drifted from the home<br />Of timeless, tideless sleep.",
        ],
        "imgUrl": `${prefix}buddha.webp`,
        "link": `${prefix}ficke-buddha-at-nadika.html`,
      },
    ],
    "Words & Music": [
      {
        "title": "Love's Been Good To Me",
        "sub-title": "sung by Johnny Cash",
        "author": "Rod McKuen",
        "description": [
          "I have been a rover<br />I have walked alone<br />Hiked a hundred highways<br />Never found a home<br />Still in all I’m happy<br />The reason is, you see<br />Once in a while along the way<br />Love’s been good to me</p>",
        ],
        "imgUrl": `${prefix}johnny-and-june.jpg`,
        "link": `${prefix}cash-loves-been-good.html`,
      },
    ],
  };

  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) {
          const div = document.createElement("div");
          const p = document.createElement("p");
          p.className = "nav-menu-links";
          p.id = articles[category][0]["title"];
          p.innerText = category;
          p.dataset.category = category;
          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");
            li.className = "nav-menu-links";
            li.id = article["title"];
            li.innerText = `${article.title} - ${article.author}`;
            li.dataset.category = category;
            list.appendChild(li);
          });
          navMenuElement.appendChild(content);
        }
      });
    }
    createMenuLinks();

    //event listeners
    const navmenuLinkArray = Array.from(
      navMenuElement.querySelectorAll(".nav-menu-links")
    );

    navmenuLinkArray.forEach(link => {
      link.addEventListener("click", () => {
        createArticlePeek(link.dataset.category, link.id);
        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 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(/\s/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

    const mobileSubscribe = document.querySelector("#mobile-subscribe");
    const mobileSubscribeContent = subscribeDiv.cloneNode(true);

    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);
    mobileSubscribe.appendChild(mobileSubscribeContent);

    //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 === "light") {
      stylesheet.href = `${prefix}css/light.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");
  });

  //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("Title Page", "The Spiritual Foundation of Morality");

  //--------------------------------
  // 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()
  // }
  //-------------------

}());