// const navigationTypes = {
//   ElkGrove: "elkGrove",
//   FullDropdown: "fullDropdown",
//   MegaMenu: "megaMenu",
// }

// const mobileNavigationToggleTypes = {
//   Collapse: "collapse",
//   OffCanvas: "offCanvas",
// }

// const mobileOffCanvasNavigationSides = {
//   Left: "offcanvas-start",
//   Right: "offcanvas-end",
//   Top: "offcanvas-top",
//   Bottom: "offcanvas-bottom",
// }

// const mobileNavigationTypes = {
//   Default: "default",
//   OffCanvas: "offCanvas",
// }

// const mobileNavigationExpandSizes = {
//   None: "",
//   Small: "sm",
//   Medium: "md",
//   Large: "lg",
//   ExtraLarge: "xl",
//   ExtraExtraLarge: "xxl",
// }

// const navigationType = navigationTypes.ElkGrove;
// const elkGroveheader = false;
// const mobileNavigationToggleType = mobileNavigationToggleTypes.OffCanvas;
// const mobileOffCanvasNavigationSide = mobileOffCanvasNavigationSides.Left;
// const mobileNavigationType = mobileNavigationTypes.OffCanvas;
// const mobileNavigationExpandSize = mobileNavigationExpandSizes.Large;

if (!navigationType) {
  console.log('Navigation Type is not selected');
}

if (!mobileNavigationType) {
  console.log('Mobile Navigation Type is not selected');
}

// // Should the nav items beyond "numberOfTopNavItems" be placed inside a dropdown called "More"?
// const useMoreDropdown = true;

// // The number of top level nav items including the more dropdown
// let numberOfTopNavItems = 7;

// // Should the nav items beyond "numberOfDropdownNavItems" be placed under "More Pages" in dropdowns?
// const useMoreInDropdowns = true;

// const numberOfDropdownNavItems = 4;

// // Should home be shown in the first level navigation?
// const showHome = true;

// // Should the nav use nav images?
// const useNavImages = true;

// // Show nav images in mobile
// const showMobileNavImages = true;

// // Should mobile nav be in its own bar?
// const separateMobileNav = false;

// // Should the more dropdown display even if it only has one link in it?
// const allowSingleMoreDropdownLink = false;

// // Should the mobile nav hamburger become an X when clicked?
// const mobileNavTogglerToX = true;

// const CheckMobile = () => $(window).width() < 992;

const CheckMobile = () => {
  let sizeToCheck = 992;
  switch (mobileNavigationExpandSize) {
    case mobileNavigationExpandSizes.None:
      sizeToCheck = 0;
      break;
    case mobileNavigationExpandSizes.Small:
      sizeToCheck = 556;
      break;
    case mobileNavigationExpandSizes.Medium:
      sizeToCheck = 748;
      break;
    case mobileNavigationExpandSizes.Large:
      sizeToCheck = 992;
      break;
    case mobileNavigationExpandSizes.ExtraLarge:
      sizeToCheck = 1200;
      break;
    case mobileNavigationExpandSizes.ExtraExtraLarge:
      sizeToCheck = 1400;
      break;

    default:
      break;
  }

  return $(window).width() < sizeToCheck;
}


// Quick change expand to lg for testing
$('.navbar.navbar-expand-md').removeClass('navbar-expand-md').addClass(`navbar-expand-${mobileNavigationExpandSize}`);

let didThePrependAppend = false;

(function ($, sr) {

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
    var timeout;

    return function debounced() {
      var obj = this, args = arguments;
      function delayed() {
        if (!execAsap)
          func.apply(obj, args);
        timeout = null;
      };

      if (timeout)
        clearTimeout(timeout);
      else if (execAsap)
        func.apply(obj, args);

      timeout = setTimeout(delayed, threshold || 100);
    };
  }
  // smartresize
  jQuery.fn[sr] = function (fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery, 'smartresize');

const offCanvasToggle = `<button class="navbar-toggler d-inline-flex d-${mobileNavigationExpandSize}-none mobile-nav-toggle" type="button" data-bs-toggle="offcanvas" data-bs-target="#mainNavigation" aria-controls="mainNavigation" aria-expanded="false" aria-label="Toggle navigation">
                                        <div class="mobile-nav-toggle-icon"><span class="navbar-toggler-icon"><div></div></span></div>
                                    </button>`;

const mobileSearchBar = `<div id="mobile-search-bar" class="search-bar d-block d-lg-none">
<form action="Site-Search/index.html" method="get">
  <label for="search"><span class="ada">Search</span></label>
  <input id="search" name="search_string" type="text" value="Search" placeholder="Search"
    onclick="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}">
  <button class="mobile-search-submit-button" type="submit"
    onclick="forms.freedom_search_form.referring_page_url.value=location.href;forms.freedom_search_form.submit();"
    value="Search Site" alt="Search"><i class="fa fa-search" aria-hidden="true"></i><span
      class="ada">Submit</span></button>
</form>
</div>`;

function MobileNavInHeader() {
  if (!separateMobileNav) {
//     $('.top-bar .container-xxl > .row').prepend(offCanvasToggle);
    $('.navigation').after(offCanvasToggle);
    $('.navigation .navbar-toggler').hide();
  }
  $('.navigation .offcanvas > .offcanvas-body').prepend(mobileSearchBar);
}

function MobilePlacement() {
  const topBarHeaderOuterHeight = $('.top-bar-header').outerHeight();
  const mobileNavTogglerPlacement = ($('.top-bar-header').outerHeight()/2)-($('.mobile-nav-toggle').outerHeight()/2);
  $('.mobile-nav-toggle').css('top', mobileNavTogglerPlacement);
  const mobileSearchBarPlacement = $('.top-bar-header').outerHeight() - $('.offcanvas-header.main-offcanvas-header').outerHeight() - 25;
  CheckMobile() ? $('#mainNavigation .offcanvas-body').css('padding-top', mobileSearchBarPlacement) : $('#mainNavigation .offcanvas-body').css('padding-top', '');
  const addedSearchIconPadding = $(window).width() > 600 ? 15 : 3;
  $('.mobile-search-submit-button').css('top', topBarHeaderOuterHeight + addedSearchIconPadding);
  const subpageOffcanvasHeaderPadding = ($('.top-bar-header').outerHeight()/2)-17.5;
  $('.offcanvas-header.subpage-offcanvas-header').css('padding-top', subpageOffcanvasHeaderPadding);
}

function CheckSeparateMobileNav() {
  if (!separateMobileNav && CheckMobile()) {
    $('.navigation').css('height', '0');
    $('.top-bar-title-wrapper').addClass('hamburger-nav-padding');
  }
  else {
    $('.navigation').css('height', '');
    $('.top-bar-title-wrapper').removeClass('hamburger-nav-padding');
  }
}

const offCanvasHeader = `<div class="offcanvas-header main-offcanvas-header">
                              <!-- <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5> -->
                              <!-- <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> -->
                           </div>`;
$('.navbar .navbar-toggler').attr('data-bs-toggle', 'offcanvas');
$('#mainNavigation').removeClass('collapse navbar-collapse').addClass(`offcanvas ${mobileOffCanvasNavigationSide}`).attr('data-bs-backdrop', 'false').prepend(offCanvasHeader);
$('#mainNavigation > .navbar-nav').wrap('<div class="offcanvas-body" />');

function OffCanvasMobileNav() {

  if (mobileNavigationType === mobileNavigationTypes.OffCanvas && CheckMobile()) {
    $('#mainNavigation .dropdown-toggle > i:not(.more-dropdown-ellipsis)').addClass('mobile-dropdown-arrow');
    const allDropdownToggles = $('.mobile-dropdown-arrow');
    const subOffCanvasHeader = `<div class="offcanvas-header subpage-offcanvas-header">
                              <!-- <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5> -->
                              <button type="button" class="text-reset mobile-nav-off-canvas-back-button" data-bs-dismiss="offcanvas" aria-label="Back"><i class="fa-thin fa-angle-left"></i></button>
                           </div>`;

    if (!didThePrependAppend) {
      $('#mainNavigation .dropdown-menu').addClass(`offcanvas ${mobileOffCanvasNavigationSide}`).attr('data-bs-backdrop', 'false').removeClass('dropdown-menu').prepend(subOffCanvasHeader);
    }

    else {
      $('#mainNavigation .dropdown-menu').addClass(`offcanvas ${mobileOffCanvasNavigationSide}`).attr('data-bs-backdrop', 'false').removeClass('dropdown-menu');
    }

    $('.subpage-offcanvas-header').each(function (index) {
      const linkText = $(this).parent('.mobile-dropdown').siblings('a').text();
      const closeButton = '<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" data-bs-target="#mainNavigation" aria-label="Close"></button>'
      if (!didThePrependAppend) {
        $(this).append(`<div class="subpage-offcanvas-header-link-text">${linkText}</div>`); // .append(closeButton);
      }

    });

    //  $('.mobile-dropdown-arrow').removeClass('dropdown-toggle').attr('data-bs-toggle', '');
    // Testing not removing .dropdown-toggle
    //     $('.mobile-dropdown-arrow').attr('data-bs-toggle', '');

    $(allDropdownToggles).each(function (index) {
      $(this).attr('offcanvas-target', `offcanvas-toggle-${index}`);
      $(this).parent('a').siblings('.mobile-dropdown').attr('id', `offcanvas-toggle-${index}`);
      $(this).siblings('.mobile-dropdown').attr('id', `offcanvas-toggle-${index}`);
    });

    $('.nav-link.dropdown-toggle').click(function (event) {
      if (!CheckMobile()) {
        try {
          //         const thisTarget = $(this).attr('offcanvas-target');
          const myDropdown = $(this).siblings('.dropdown-menu');
          const theInstance = bootstrap.Offcanvas.getInstance(myDropdown);
          //         console.log(theInstance);
          //         theInstance && theInstance.dispose();
          //         const bsDropdown = new bootstrap.Dropdown(myDropdown);
          // bsDropdown.show();

        } catch (error) {
          console.log(error);
        }
      }
    });

    $('.mobile-dropdown-arrow').click(function (event) {
      try {
        const thisTarget = $(this).attr('offcanvas-target');
        const myOffcanvas = document.getElementById(thisTarget);
        const bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
        bsOffcanvas.show();

      } catch (error) {
        console.log(error);
      }
    });

    didThePrependAppend = true;
  }
  else {
    $(`.offcanvas .${mobileOffCanvasNavigationSide}`).removeClass(`offcanvas ${mobileOffCanvasNavigationSide}`).attr('data-bs-backdrop', '');
    $('#mainNavigation .more-dropdown > ul').addClass('dropdown-menu');
    $('#mainNavigation .dropdown-toggle > i').removeClass('mobile-dropdown-arrow');
  }
}

function NavigationSocialLinks() {
  const facebookLink = $('.social-facebook').attr('href')?.trim();
  const twitterLink = $('.social-twitter').attr('href')?.trim();
  const instagramLink = $('.social-instagram').attr('href')?.trim();
  const linkedInLink = $('.social-linkedin').attr('href')?.trim();
  const youtubeLink = $('.social-youtube').attr('href')?.trim();

  const parallelogramFooterLinks = $('.parallelogram-footer-link');
  let socialLinksObject = {};
  const socialWebsites = ['facebook', 'twitter', 'instagram', 'linkedin', 'youtube'];

  $(parallelogramFooterLinks).each(function (index) {
    let thisLinksHREF = $(this).attr('href').trim();

    for (let i = 0; i < socialWebsites.length; i++) {
      if (thisLinksHREF.includes(socialWebsites[i])) {
        socialLinksObject[socialWebsites[i]] = thisLinksHREF;
      }
    }
  });

  const socialLinks = `<a class="navigation-social-link" href="${socialLinksObject.facebook || facebookLink}" target="_blank"><span class="ada">Facebook</span><i class="fa-brands fa-facebook-square"></i></a>
                         <a class="navigation-social-link" href="${socialLinksObject.twitter || twitterLink}" target="_blank"><span class="ada">Twitter</span><i class="fa-brands fa-twitter-square"></i></a>
                         <a class="navigation-social-link" href="${socialLinksObject.instagram || instagramLink}" target="_blank"><span class="ada">Instagram</span><i class="fa-brands fa-instagram"></i></a>
                         <a class="navigation-social-link" href="${socialLinksObject.linkedin || linkedInLink}" target="_blank"><span class="ada">Linked In</span><i class="fa-brands fa-linkedin-in"></i></a>
                         <a class="navigation-social-link" href="${socialLinksObject.youtube || youtubeLink}" target="_blank"><span class="ada">Youtube</span><i class="fa-brands fa-youtube"></i></a>`;

  const desktopSocial = `<li class="inside-more-dropdown more-dropdown-social d-none d-lg-block"><div class="more-dropdown-social-text">CONNECT WITH US</div>${socialLinks}</li>`;
  const mobileSocial = `<li class="mobile-navigation-social d-block d-lg-none">${socialLinks}</li>`;

  $('.navbar .navbar-nav').append(mobileSocial)
  $('.more-dropdown .dropdown-menu').append(desktopSocial);

  $('.navigation-social-link').attr('href').length <= 0 && $('.more-dropdown-social-text').hide();
}


  const navItemsWithDropdowns = $('.navbar-nav .dropdown-menu').parent('.nav-item');
  const firstLevelNavItems = $('.navbar-nav > .nav-item');
  const firstLevelDropdowns = $(firstLevelNavItems).children('.dropdown-menu');
  const secondLevelDropdowns = $(firstLevelDropdowns).find('> li > .dropdown-menu');
  const thirdLevelDropdowns = $(secondLevelDropdowns).find('> li > .dropdown-menu');
  const fourthLevelDropdowns = $(thirdLevelDropdowns).find('> li > .dropdown-menu');
  $(navItemsWithDropdowns).addClass('dropdown');
  $(navItemsWithDropdowns).find('> .nav-link').addClass('dropdown-toggle').attr('data-bs-toggle', 'dropdown').attr('data-bs-auto-close', 'outside');
  $(firstLevelNavItems).addClass('first-level-nav-item');
  $(firstLevelDropdowns).addClass('first-level-dropdown');
  $(secondLevelDropdowns).addClass('second-level-dropdown');
  $(thirdLevelDropdowns).addClass('third-level-dropdown');
  $(fourthLevelDropdowns).addClass('fourth-level-dropdown');


  //   if (navigationType === navigationTypes.ElkGrove && !CheckMobile()) {
  //     //     !CheckMobile() && $(secondLevelDropdowns).removeClass('dropdown-menu');
  //     $(secondLevelDropdowns).removeClass('dropdown-menu');
  //   }

try {
  $(firstLevelNavItems).each(function (index) {
    let thisNavItemsHREF = $(this).children('a.nav-link').attr('href');

    if (thisNavItemsHREF === 'index.html') {
      $(this).addClass('nav-home-link');

      if (!showHome) {
        $(this).addClass('hide-home-link');
        numberOfTopNavItems++;
      }

      return false;
    }
  });

  if (useMoreDropdown && firstLevelNavItems.length > numberOfTopNavItems || allowSingleMoreDropdownLink) {
    $(firstLevelNavItems).each(function (index) {
      if (index < numberOfTopNavItems - 1) {
        $(this).addClass(`top-level-nav`);
      }
      else {
        $(this).addClass('inside-more-dropdown').removeClass('nav-item first-level-nav-item');
        $(this).children('a').removeClass('nav-link dropdown-toggle').addClass('dropdown-item').attr('data-bs-toggle', '');
      }
    });

    $('.inside-more-dropdown').wrapAll('<li class="nav-item dropdown more-dropdown top-level-nav"><ul class="dropdown-menu"></ul></li>');
    if(CheckMobile())
    {
      $('.more-dropdown ul').addClass('first-level-dropdown');
    }
    else
    {
      $('.more-dropdown ul').removeClass('first-level-dropdown');
    }

    $('.more-dropdown').prepend('<a class="nav-link dropdown-toggle" href="javascript:void(0);" target="_self" data-bs-toggle="dropdown">More<i class="fa-regular fa-ellipsis-vertical more-dropdown-ellipsis"></i></a>');
  }

  else {
    $(firstLevelNavItems).each(function (index) {
      $(this).addClass(`top-level-nav`);
    });
  }

  // Hard coded images and links inside of the dropdowns
  // const navImageVisitText = "Visit Web Page"
  // $('.navbar-nav > .top-level-nav:nth-child(2) > .first-level-dropdown').prepend(`<li><a class="dropdown-item nav-image" href="ParentsStudents/Resources-For-Parents/index.html" target="_self"><div class="card navigation-image-2"><img src="pictures/Nav Images/covid-19-dashboard.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">COVID-19<i class="fa-thin fa-chart-line"></i></h5><p class="card-text">DASHBOARD</p><p class="card-text visit-website">${navImageVisitText}<i class="fa-thin fa-arrow-right-long"></i></p></div></div></a></li>`);


  // $('.navbar-nav > .top-level-nav:nth-child(2) > .first-level-dropdown').prepend(`<li><a class="dropdown-item nav-image" href="ParentsStudents/Resources-For-Parents/index.html" target="_self"><div class="card navigation-image-1"><img src="pictures/Nav Images/roadmap-to-reopening.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">ROADMAP<i class="fa-thin fa-chalkboard-user"></i></h5><p class="card-text">TO REOPENING</p><p class="card-text visit-website">${navImageVisitText}<i class="fa-thin fa-arrow-right-long"></i></p></div></div></a></li>`);

  $('.first-level-dropdown').each(function (index) {
    if ($(this).find('.second-level-dropdown').length <= 0 && !twoLevelNav) {
      $(this).addClass('no-second-level');
    }

    else if(twoLevelNav)
    {
      $(this).addClass('no-second-level');
      $(this).find('.second-level-dropdown').hide();
    }
  });

  const mobileDropdownArrow = '<i class="fa-thin fa-angle-right nav-link dropdown-toggle mobile-dropdown-arrow" data-bs-toggle="dropdown" data-bs-auto-close="outside"></i>';
  $('.dropdown-menu.second-level-dropdown').parent('li').prepend(mobileDropdownArrow);
  $('.dropdown-menu.third-level-dropdown').parent('li').prepend(mobileDropdownArrow);
  $('.dropdown-menu.fourth-level-dropdown').parent('li').prepend(mobileDropdownArrow);

  if(!useTopLevelNavDividers)
  {
    $('.navigation .navbar .navbar-nav').addClass('no-dividers');
  }
}

catch (error) {
  console.log(error);
}

function MorePagesInDropdowns() {
  if (useMoreInDropdowns && !CheckMobile()) {
    $(firstLevelDropdowns).each(function (index) {
      const thisDropdownsSubPages = $(this).find('> li');
      const hasSecondLevelDropdowns = !$(this).hasClass('no-second-level');
      if ($(thisDropdownsSubPages).length > numberOfDropdownNavItems + 1 && hasSecondLevelDropdowns) {
        $(thisDropdownsSubPages).each(function (index) {
          if (index > numberOfDropdownNavItems - 1) {
            $(this).addClass('under-more-subpage');
            $(this).find('.second-level-dropdown').hide();
          }
        });
        $(this).find('.under-more-subpage').wrapAll('<li class="more-subpages-container"><ul class="second-level-dropdown"></ul></li>');
        $(this).find('.more-subpages-container').prepend('<span class="dropdown-item more-subpages-text">More Pages<i class="fa-regular fa-ellipsis-vertical more-subpages-ellipsis"></i></span>');
      }
    });
  }
}


const firstLevelNavItemsWithDropdowns = $('.top-level-nav.dropdown > .dropdown-toggle');

$(firstLevelNavItemsWithDropdowns).on('show.bs.dropdown', function (event) {
  //   !CheckMobile() && !$(this).parent('.dropdown').hasClass('more-dropdown') && $(this).siblings('.first-level-dropdown').css('visibility', 'visible');
  mobileNavigationType !== mobileNavigationTypes.OffCanvas || !CheckMobile() && $(this).find('> i').toggleClass('fa-angle-down fa-angle-up');
});

$(firstLevelNavItemsWithDropdowns).on('hide.bs.dropdown', function (event) {
  //   !CheckMobile() && $(this).siblings('.first-level-dropdown').css('visibility', 'hidden');
  mobileNavigationType !== mobileNavigationTypes.OffCanvas || !CheckMobile() && $(this).find('> i').toggleClass('fa-angle-down fa-angle-up');
});

const mobileDropdowns = $('.mobile-dropdown-arrow');

$(mobileDropdowns).on('show.bs.dropdown', function (event) {
  $(this).toggleClass('fa-angle-right fa-angle-up');
});

$(mobileDropdowns).on('hide.bs.dropdown', function (event) {
  $(this).toggleClass('fa-angle-right fa-angle-up');
});

// Mobile
// Toggle the class mobile-nav-active when the mobile nav toggler is clicked
function MobileNavIconToX() {
$('.navbar-toggler').click(function (event) {
  try {
    $('body').css('padding-right', '');
    if($(this).find('.navbar-toggler-icon').hasClass('mobile-nav-active')) {
      $('.navigation .offcanvas').each(function() {
        const thisOne = bootstrap.Offcanvas.getInstance(this);
        thisOne?.hide();
      });
    }
    mobileNavTogglerToX && $('.navbar-toggler-icon').toggleClass('mobile-nav-active');

  } catch (error) {
    console.log(error);
  }
});
}

// Adds Font Awesome Bullets to first level nav items with dropdowns
// If the width of the window is less than 768px and there are dropdown arrows, they are changed from down arrows to arrows pointing right, otherwise right arrows are added
// The opposite happens when in sizes greater than or equal to 768px
function FontAwesomeNavigationBullets() {
  try {
    const navigationDropdownArrows = $('.top-level-nav > .dropdown-toggle i:not(".more-dropdown-ellipsis")');
    //     console.log(navigationDropdownArrows);
    const navigationDropdownArrowsExist = $(navigationDropdownArrows).length > 0;

    if (CheckMobile()) {
      if (navigationDropdownArrowsExist) {
        if ($(navigationDropdownArrows).hasClass('fa-angle-down')) {
          $(navigationDropdownArrows).toggleClass('fa-angle-down fa-angle-right');
        }
      }
      else {
        $('.top-level-nav > .dropdown-toggle').append('<i class="fa-thin fa-angle-right"></i>');
      }
    }

    else {
      $('.second-level-dropdown').addClass('fa-ul');
      $('.second-level-dropdown > li').prepend('<span class="fa-li"><i class="fa-thin fa-angle-right"></i></span>');
      if (navigationDropdownArrowsExist) {
        if ($(navigationDropdownArrows).hasClass('fa-angle-right')) {
          $(navigationDropdownArrows).toggleClass('fa-angle-down fa-angle-right');
        }
      }
      else {
        $('.top-level-nav > .dropdown-toggle').append('<i class="fa-thin fa-angle-down"></i>');
      }
    }
  }
  catch (error) {
    console.log('Navigation font awesome bullets did not work');
  }
}

function FullWidthDropdownOffset() {
  let topBarHeaderHeight = $('.top-bar-header').height();
  const topBarHeaderTopOffset = $('.top-bar-header').offset().top;
  const firstLevelDropdowns = $('.dropdown-menu.first-level-dropdown:not(.no-second-level)');
  const schoolsDropdownOffset = elkGroveheader ? $('.schools-dropdown').offset().left : 0;
  const searchFieldColumn = elkGroveheader ? $('.search-field-column') : 0;
  const searchFieldColumnOffsetLeft = elkGroveheader ? $(searchFieldColumn).offset().left : 0;
  const searchFieldColumnWidth = elkGroveheader ? $(searchFieldColumn).outerWidth() : 0;
  const searchFieldColumnOffsetRight = elkGroveheader ? $(window).width() - (searchFieldColumnOffsetLeft + searchFieldColumnWidth) : 0;
  const mainLogoOffsetLeft = $('.main-logo').offset().left;
  const searchFieldIcon = $('.search-icon');
  const searchFieldIconOffsetLeft = $(searchFieldIcon).offset().left;
  const searchFieldIconWidth = $(searchFieldIcon).outerWidth();
  const searchFieldIconOffsetRight = $(window).width() - (searchFieldIconOffsetLeft + searchFieldIconWidth);
  if (CheckMobile()) {
    $(firstLevelDropdowns).css('top', '');
    $(firstLevelDropdowns).css('left', '');
    $(firstLevelDropdowns).css('padding-left', '');
    $(firstLevelDropdowns).css('padding-right', '');
  }
  else {
    $(firstLevelDropdowns).addClass('show');
    $(firstLevelDropdowns).offset({ top: topBarHeaderTopOffset + topBarHeaderHeight - 2, left: 0 });
    //      $(firstLevelDropdowns).css('margin-top', topBarHeaderHeight);
    $(firstLevelDropdowns).css('padding-left', mainLogoOffsetLeft);
    $(firstLevelDropdowns).css('padding-right', searchFieldIconOffsetRight);
    // $('.navigation .container-xxl .navbar-nav').css('margin-right', 0);
    $(firstLevelDropdowns).removeClass('show');
  }
}

function AddMobileDropdownArrow() {
  if (CheckMobile()) {
    $('.second-level-dropdown').parent('li').addClass('nav-item dropdown');
    $('.third-level-dropdown').parent('li').addClass('nav-item dropdown');
    $('.fourth-level-dropdown').parent('li').addClass('nav-item dropdown');
  }
  else {
    $('.second-level-dropdown').parent('li').removeClass('nav-item dropdown');
    $('.third-level-dropdown').parent('li').removeClass('nav-item dropdown');
    $('.fourth-level-dropdown').parent('li').removeClass('nav-item dropdown');
  }
}

function AddMobileDropdownClass() {
  if (CheckMobile()) {
    $('.more-dropdown ul').addClass('first-level-dropdown');
    $('.first-level-dropdown').addClass('mobile-dropdown');
    $('.second-level-dropdown').addClass('mobile-dropdown').addClass('dropdown-menu');
    $('.third-level-dropdown').addClass('mobile-dropdown').show();
    $('.fourth-level-dropdown').addClass('mobile-dropdown').show();
  }
  else {
    $('.more-dropdown ul').removeClass('first-level-dropdown');
    $('.first-level-dropdown').css('visibility', '');
    $('.first-level-dropdown').removeClass('mobile-dropdown').addClass('dropdown-menu');
    $('.second-level-dropdown').removeClass('mobile-dropdown').removeClass('dropdown-menu');;
    $('.third-level-dropdown').removeClass('mobile-dropdown').addClass('dropdown-menu').hide();
    $('.fourth-level-dropdown').removeClass('mobile-dropdown').addClass('dropdown-menu').hide();
  }
}

function LoadNavImages() {
  const navItemsToCheck = $('.dropdown.first-level-nav-item');
  let navItemsWithImagesCount = 1;
  const navImageVisitText = "Visit Web Page"
  $(navItemsToCheck).each(function (index) {
    const secondLevelNavItems = $(this).children('.first-level-dropdown').children('li');
    const allNavItemsToCheck = $(secondLevelNavItems).add($(this));
    let counter = 0;
    $(allNavItemsToCheck).each(function (index) {

      const theCurrentItem = $(this);
      try {
        const currentLink = $(this).children('a');
        const currentLinksHREF = $(currentLink).attr('href');
        const currentLinksText = $(currentLink).text();
        const currentLinksTextFirstSpace = currentLinksText.indexOf(' ');
        const currentLinksFirstWord = currentLinksTextFirstSpace === -1 ? currentLinksText : currentLinksText.slice(0, currentLinksTextFirstSpace);
        const currentLinksOtherWords = currentLinksTextFirstSpace === -1 ? '' : currentLinksText.slice(currentLinksTextFirstSpace + 1, currentLinksText.length);
        const currentLinksFeaturedPhoto = $(currentLink).attr('data-featured-photo');
        const currentLinksPageIconPath = $(currentLink).attr('data-page-icon');
        const currentLinksPageIcon = currentLinksPageIconPath ? `<img src="${currentLinksPageIconPath}" class="page-icon" alt="...">` : `<i class="fa-thin fa-link-horizontal default-nav-icon"></i>`;
        const currentLinksPageTagline = $(currentLink).attr('data-page-tagline');
        const navImageDisplayClasses = showMobileNavImages ? '' : 'd-none d-md-block';
        const navImageColorOverlayClass = index === 0 ? 'left' : 'right';
        const topNavImageText = currentLinksPageTagline ? currentLinksText : currentLinksFirstWord;

        if (currentLinksFeaturedPhoto) {
              const currentLinksNewElement = `<a class="dropdown-item nav-image ${navImageDisplayClasses}" href="${currentLinksHREF}" target="_self"><div class="card navigation-image-${navItemsWithImagesCount} nav-image-color-${navImageColorOverlayClass}"><img src="${currentLinksFeaturedPhoto}" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">${topNavImageText}${currentLinksPageIcon}</h5><p class="card-text">${currentLinksPageTagline || currentLinksOtherWords}</p><p class="card-text visit-website">${navImageVisitText}<i class="fa-thin fa-arrow-right-long"></i></p></div></div></a>`;

              if ($(theCurrentItem).hasClass('first-level-nav-item')) {
                const currentLinksNewElementWrapped = `<li class="uses-nav-image first-nav-image"><a class="dropdown-item nav-image ${navImageDisplayClasses}" href="${currentLinksHREF}" target="_self"><div class="card navigation-image-${navItemsWithImagesCount} nav-image-color-${navImageColorOverlayClass}"><img src="${currentLinksFeaturedPhoto}" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">${topNavImageText}${currentLinksPageIcon}</h5><p class="card-text">${currentLinksPageTagline || currentLinksOtherWords}</p><p class="card-text visit-website">${navImageVisitText}<i class="fa-thin fa-arrow-right-long"></i></p></div></div></a></li>`;
                $(theCurrentItem).children('.first-level-dropdown').prepend(currentLinksNewElementWrapped);
              }
              else {
                $(theCurrentItem).prepend(currentLinksNewElement);

                counter === 0 && $(theCurrentItem).addClass('first-nav-image');
                if (showMobileNavImages) {
                  $(currentLink).addClass('d-none');
                }
                else {
                  $(currentLink).addClass('d-block d-md-none');
                }
              }
              $(theCurrentItem).addClass('uses-nav-image');
              $(currentLink).addClass(`uses-sub-page-nav-image-${navItemsWithImagesCount}`);
              $(this).children('.current-page-nav-image').removeClass('current-page-nav-image').addClass(`sub-page-nav-image-${navItemsWithImagesCount} loaded-nav-image`).appendTo('.nav-images .sub-page-nav-images');
              navItemsWithImagesCount++;
              counter++;
          }

      }

      catch (error) {
        console.log(error);
      }
    });
  });
}

function NoSubsSingleDropdown() {
  $('.first-level-dropdown').each(function (index) {
    if ($(this).find('.second-level-dropdown').length <= 0) {
      $(this).addClass('no-second-level');
    }
  });
}

function FirstLevelDropdownItemWidths() {
  const topLevelDropdowns = $('.first-level-dropdown').not('.no-second-level');
  $(topLevelDropdowns).each(function (index) {
    const dropdownItems = $(this).children('li');
    const numberOfDropdownItems = $(dropdownItems).length;
    const subWidth = 100 / (numberOfDropdownItems);
    CheckMobile() ? $(dropdownItems).css('width', '') : $(dropdownItems).css('width', `${subWidth}%`);
  });
}

// Moves the topbar right side links into the nav when in mobile (< 992)
let topBarLinksForNav = $('.top-bar-link');

const topBarLinksForNavFiltered = $(topBarLinksForNav).filter(function (index) {
  return $(this).find('.schools-dropdown').length <= 0 && $(this).find('.translate-dropdown').length <= 0;
});

function MoveTopBarLinksToNav() {
  try {
    ElementEmptyCheck($('.top-bar-link'), '992');

    if (CheckMobile()) {
      if ($(topBarLinksForNavFiltered).exists()) {
        $('.navbar .container-fluid').append($(topBarLinksForNavFiltered));
      }
    }

    else if($(window).width() > 992) {
      if ($(topBarLinksForNavFiltered).exists()) {
        $('.top-bar-title-wrapper').after($(topBarLinksForNavFiltered));
      }
    }
  }
  catch (error) {
    console.log('Top bar links to under banner did not work');
  }
}

function NavImageColorOverlay() {
  const navImageCards = $('.navbar .card');
    $(navImageCards).each(function (index) {
      if($(this).css('background-color') == 'rgba(0, 0, 0, 0)')
      {
        $(this).children('.card-img-top').css('opacity', '1');
      }
  });
}

function AddNavTopOnScroll() {
  const topBar = $('.top-bar-header.home-page');
  const header = $(topBar).parent('header');
  const topBarHeader = $(topBar).add($(header));
  $(topBarHeader).addClass('navTop');

  $(window).scroll(function()
  {
    if ($(window).scrollTop() >= 100)
    {
      $(topBarHeader).removeClass('navTop');
    }

    else
    {
      $(topBarHeader).addClass('navTop');
    }
  });
}

function NavTypeClasses() {
  if(navigationType === navigationTypes.InsideHeader)
  {
    if(typeof insideHeaderTransparency === 'undefined' || insideHeaderTransparency)
    {
      AddNavTopOnScroll();
    }
    $('.navigation').addClass('inside-header-nav');
    $('.top-bar-header').addClass('nav-inside');
  }
}


$(document).ready(function () {
  NavTypeClasses();
  CheckSeparateMobileNav();
  useNavImages && LoadNavImages();
  NavigationSocialLinks();
  AddMobileDropdownArrow();
  MorePagesInDropdowns();
  FontAwesomeNavigationBullets();
  AddMobileDropdownClass();
  OffCanvasMobileNav();
  MobileNavInHeader();
  separateMobileNav && MoveTopBarLinksToNav();
  MobileNavIconToX();
  CheckMobile() && MobilePlacement();
});

$(window).smartresize(function () {
  CheckMobile();
  CheckSeparateMobileNav();
  MorePagesInDropdowns();
  FullWidthDropdownOffset();
  AddMobileDropdownArrow();
  AddMobileDropdownClass();
  OffCanvasMobileNav();
  FontAwesomeNavigationBullets();
  FullWidthDropdownOffset();
  FirstLevelDropdownItemWidths();
  separateMobileNav && MoveTopBarLinksToNav();
  MobilePlacement();
});

window.addEventListener('load', (event) => {
  FullWidthDropdownOffset();
  setTimeout(FirstLevelDropdownItemWidths, 200);
  setTimeout(NavImageColorOverlay(), 200);
});