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

/**
 * @type {NodeListOf<HTMLAnchorElement>}
 */
const navlinks = document.querySelectorAll('a.nav-link');

/**
 * @type {NodeListOf<HTMLElement>}
 */
const sections = document.querySelectorAll('.section');

// Handle scroll events.
window.addEventListener('scroll', () =>
{
  // Add class to body when scrolled.
  document.body.classList.toggle('is-scrolled', window.scrollY > 0);

  // Parallax effect.
  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`;
  });

  // Highlight menu item when scrolled to section.
  let current = '';
  sections.forEach(section =>
  {
    const rect = section.getBoundingClientRect();
    const sectionTop = rect.top + window.scrollY;

    if (window.scrollY >= sectionTop - 70)
    {
      current = section.getAttribute('id');
    }
  });

  navlinks.forEach(link =>
  {
    link.classList.remove('active');

    if (link.getAttribute('href') === `#${current}`)
    {
      link.classList.add('active');
    }
  });
});

sections.forEach(section =>
{
  if (section.id)
  {
    const anchor = document.createElement('a');
    anchor.className = 'anchor-link';
    anchor.href = `#${section.id}`;
    anchor.innerHTML = ' #&nbsp;';
    section.appendChild(anchor);
  }
});

document.querySelectorAll('#navbarNav li.nav-item>a').forEach(anchor =>
{
  anchor.addEventListener('click', () =>
  {
    /**
     * @type {HTMLButtonElement}
     */
    const navbarNav = document.querySelector('button.navbar-toggler[aria-expanded="true"]');
    navbarNav?.click();
  });
});