window.addEventListener('pageshow', () =>
{
  /**
   * @type {NodeListOf<HTMLVideoElement>}
   */
  const parallaxElems = document.querySelectorAll('.parallax');

  const refreshScrollLinkedPositioningEffect = () =>
  {
    document.body.classList.toggle('is-scrolled', window.scrollY > 0);

    parallaxElems.forEach(parallaxElem =>
    {
      const parentElem = parallaxElem.parentElement;

      const parentRect = parentElem.getBoundingClientRect();
      const parentScroll = parentRect.top + (parentRect.height / 2);

      const windowScroll = window.scrollY + (window.innerHeight / 2);

      parallaxElem.style.top = `${(windowScroll - parentScroll) / 4}px`;
    });
  };

  refreshScrollLinkedPositioningEffect();
  window.addEventListener('scroll', refreshScrollLinkedPositioningEffect);
});

document.addEventListener('DOMContentLoaded', () =>
{
  /**
   * @type {HTMLDivElement}
   */
  const navBar = document.getElementById('navbarNav');
  /**
   * @type {NodeListOf<HTMLAnchorElement>}
   */
  const navLinks = navBar.querySelectorAll('a.nav-link');
  /**
   * @type {NodeListOf<HTMLElement>}
   */
  const sectionsWithId = document.querySelectorAll('section[id]');

  // Update nav links and add anchor links to section headers.
  sectionsWithId.forEach(anchorTarget =>
  {
    // Navigate within current page if a section for the anchor exists.
    navLinks.forEach(navLink =>
    {
      const href = navLink.getAttribute('href');

      if (href.startsWith('/#') && href.substring(2) === anchorTarget.id)
      {
        navLink.setAttribute('href', href.substring(1));
      }
    });

    /**
     * @type {HTMLHeadingElement|null}
     */
    const anchorHeader = anchorTarget.querySelector('h1,h2');

    // Add anchor link to section header.
    if (anchorHeader)
    {
      const anchorLink = document.createElement('a');
      anchorLink.className = 'anchor-link';
      anchorLink.href = `#${anchorTarget.id}`;
      anchorLink.innerHTML = ' #&nbsp;';
      anchorHeader.appendChild(anchorLink);
    }
  });

  // Collapse the navbar in mobile view after clicking a link.
  navLinks.forEach(navLink =>
  {
    navLink.addEventListener('click', () =>
    {
      /**
       * @type {HTMLButtonElement}
       */
      const navbarNav = document.querySelector('button.navbar-toggler[aria-expanded="true"]');
      navbarNav?.click();
    });
  });
});