//Global Variales
const root = document.documentElement;

// // ------------------------------------------------------------------
// // Fixed Header with Anchor Tag Adjustment
// // Creation Date: 2/23/2021
// // Last Updated: 4/19/2023
// // Description: Makes the navigation sticky and alters where the anchor tags should land
// // when clicked.  Needs to be an ID for the anchor tag to work properly
// // ------------------------------------------------------------------
// Determine if header is sticky
let headerStyle = findHeaderStyle();

function findHeaderStyle () {
  const headerStyling = getComputedStyle(document.querySelector('.c-header'));
  const navStyling = getComputedStyle(document.querySelector('.c-topnav__navbar'));

  if (["sticky", "fixed"].includes(headerStyling.position) || ["sticky", "fixed"].includes(navStyling.position)) {
    return true;
  } else {
    return false;
  }
}

//If sticky, do the following on load
if (headerStyle == true) {
  window.addEventListener("load", (event) => {
    moveNavBar();
    headerOffset();
    anchor();
  });

  // Run headerOffset when logo is done transitioning or if there is a displayname
  const findLogo = document.getElementById('agentLogo');
  const findDisplayName = document.querySelector('.c-header .c-template__logo--displayName');
  if(findLogo){
    findLogo.addEventListener('transitionend', () => {
      headerOffset();
    });
  }
  else if (findDisplayName){
    headerOffset();
  }

  // Intersection Observer
  if (!('IntersectionObserver' in window) || !('IntersectionObserverEntry' in window) || !('intersectionRatio' in window.IntersectionObserverEntry.prototype)) {
    //On load, scroll, or resize.  Do this.
    //Enable scrollDown feature
    ["load", "resize", "scroll"].forEach(function (evt) {
      window.addEventListener(evt, scrollDown);
    });
  }
  else {
    //Resize header intersection observer
    document.querySelector("body").insertAdjacentHTML('afterbegin','<div id="headerResizing" aria-hidden="true"/>'); //Add Div at top of the page so we can check if visible

    //Define options
    const resizeOptions = {
      threshold: 1 //It has to be fully in view   
    };

    const findHeader = document.getElementsByClassName('c-header');
    //Activate observer for added item
    const resizeObserver = new IntersectionObserver(entries => {
      entries.forEach(function callbackFN(entry) {
        //Once visible
        if(entry.isIntersecting){
          findHeader[0].classList.remove('scrolled'); //remove when item is visible
        }
        else {
          findHeader[0].classList.add('scrolled'); //Add when item is not visible
        }
      });
    }, resizeOptions);
    resizeObserver.observe(document.getElementById("headerResizing")); //Div that is added to the top of the page
  }

  // Perform other sticky header related functions
  backToTopBtn();
  mobileNavAnchor();
  fixGlossaryPage();

} else {
  window.addEventListener("load", (event) => {
    anchor();
    backToTopBtn();
  });
}

// -----------------------------------------
// Start of Functions
// -----------------------------------------

// Scroll down function
function scrollDown() {
  const findHeader = document.getElementsByClassName('c-header');
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    findHeader[0].classList.add('scrolled');
  } else {
    findHeader[0].classList.remove('scrolled');  
  }
}

// Obtain header size
function headerOffset() {
  if (window.matchMedia('(max-width: 991px)').matches && !document.querySelector(".c-header").classList.contains('c-header--optimized')) {
    root.style.setProperty('--headerHeight', document.querySelector(".c-header .c-topnav__navbar").getBoundingClientRect().height + "px");
    root.style.setProperty('--brokerCheckHeight', '0px');
  }
  else {
    root.style.setProperty('--headerHeight', document.querySelector(".c-header").getBoundingClientRect().height + "px");
    // Get Broker Check Height
    const findBrokerCheck = document.querySelectorAll('.c-header .fmg-exclusive-brokercheck');
    const findFloatingBrokerCheck = document.querySelectorAll('.c-header .floating-broker-check');
    if (findBrokerCheck?.[0]) {
      root.style.setProperty('--brokerCheckHeight', findBrokerCheck[0].getBoundingClientRect().height + "px");
    }
    else if (findFloatingBrokerCheck?.[0]){
      root.style.setProperty('--brokerCheckHeight', findFloatingBrokerCheck[0].getBoundingClientRect().height + "px");
    }
  }
}

// Perform anchoring action
function anchor() {
  const anchor = window.location.hash.replace('#', '');
  if(anchor) {
    // reset anchor
    // history.pushState("", document.title, window.location.pathname + window.location.search);

    let target = document.getElementById(anchor);        
    if (target) {
      setTimeout(function() {
          target.scrollIntoView({ behavior: 'auto' });
      }, 100);
    }
  }
}

// Set up back to top button 
function backToTopBtn() {
  // Back to top 
  document.querySelectorAll(".back-to-top").forEach((back) => {
    back.href = "#";
    back.addEventListener("click", () => {
        window.scrollTo({ top: 0, behavior: "auto", });
    });
  });
}

// Ensure mobile nav closes on anchor click
function mobileNavAnchor() {
  const navLinks = document.querySelectorAll('#mainNav a[href*="#"]:not([href="#"])');
  const navbarToggle = document.querySelector('.js-navbar__toggle');

  navLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      navbarToggle.click();
    });
  });
}

// Move Navigation inside of the header if found outside
function moveNavBar() {
  // //Add Navigation to header if it is outside of the header
  if (!document.querySelector('header.c-header #mainNav')) {
    const mainNav = document.querySelector('#mainNav');
    const headerOverlay = document.querySelector('header.c-header .c-header--overylay');
    headerOverlay.appendChild(mainNav);
  }
}

function fixGlossaryPage() {
  const glossaryLinks = document.querySelectorAll('.page-tools-glossary .body-container a');
  glossaryLinks.forEach(link => {
    if (link.hasAttribute('name')) {
      link.id = link.getAttribute('name');
      link.removeAttribute('name');
    }
  });
}

// -----------------------------------------
// Turn off framework animations
// Last Updated: 4/11/2023
// -----------------------------------------
$(document).ready(function () {
  // Remove JQuery effects from Back to Top and Mobile.
  $('.back-to-top, .js-page-down').off();
});