//Smart Outline
smartOutline.init();


/* Product Page Sticky Bar */
function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if (Date.now() - lastRan >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}


document.addEventListener("DOMContentLoaded", function () {
  var productAnchors = document.querySelector(".section--page-anchors");
  var productName = document.querySelector(".h2--product-name");
  var thresholdSmallScreens = 1199;
  var scrollThreshold = 73;

  window.addEventListener("scroll", function () {
    var rect = productAnchors.getBoundingClientRect();

    if (window.innerWidth > 0 && window.innerWidth <= thresholdSmallScreens) {
      // On screens smaller than or equal to 1199px, update styles when it hits the top
      if (rect.top <= 0) {
        productAnchors.style.zIndex = "1050";
        if (productName) {
         // productName.style.display = "block";
        }
      } else {
        productAnchors.style.zIndex = "";
        if (productName) {
          //productName.style.display = "none";
        }
      }
    } else if (window.innerWidth > thresholdSmallScreens) {
      // On screens larger than 1199px, update styles when productAnchors is 80px from the top
      if (rect.top > 0 && rect.top <= scrollThreshold) {
        productAnchors.style.zIndex = "1050";
        if (productName) {
          productName.style.display = "none";
        }
      } else if (rect.top <= 0) {
        productAnchors.style.zIndex = "1050";
        if (productName) {
          productName.style.display = "block";
        }
      } else {
        // Reset styles if conditions are not met
        productAnchors.style.zIndex = "";
        if (productName) {
          productName.style.display = "none";
        }
      }
    } else {
      // Reset styles if conditions are not met
      productAnchors.style.zIndex = "";
      productName.style.display = "none";
    }
  });
});




//AOS - Animate on Scroll
// AOS.init({
//   duration: 700,
//   offset: 50,
//   once: true
// });



//Swiper
var swiper = new Swiper(".swiperPagination", {
  effect: "fade",
  /*autoplay: {
    delay: 5000,
  },*/
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + "</span>";
    },
  },
});



var swiper = new Swiper(".swiperNavigation", {
  slidesPerView: 1,
  spaceBetween: 32,
  centerInsufficientSlides: true, 
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  breakpoints: {
    768: {
      slidesPerView: 2,
    },
    1200: {
      slidesPerView: "auto",
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    },
    1680: {
      slidesPerView: "auto",
      spaceBetween: 48,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    },
  },
});

var swiper = new Swiper(".swiperVideoThumbs", {
  spaceBetween: 10,
  slidesPerView: 4,
  freeMode: true,
  watchSlidesProgress: true,
});
var swiper2 = new Swiper(".swiperVideo", {
  spaceBetween: 10,
  thumbs: {
    swiper: swiper,
  },
});


//Fixed Header - change styling on scroll 
var scrollPosition = window.scrollY;
var logoContainer = document.getElementsByClassName('header')[0];

window.addEventListener('scroll', function() {

    scrollPosition = window.scrollY;

    if (scrollPosition >= 30) {
        logoContainer.classList.add('header--scroll');
    } else {
        logoContainer.classList.remove('header--scroll');
    }

});

if (scrollPosition >= 30) {
  logoContainer.classList.add('header--scroll');
}


//Header Mobile - Off Canvas
function darken_screen(yesno){
  if( yesno == true ){
    document.querySelector('.screen-darken').classList.add('active');
  }
  else if(yesno == false){
    document.querySelector('.screen-darken').classList.remove('active');
  }
}

function close_offcanvas(){
  darken_screen(false);
  document.querySelector('.mobile-offcanvas.show').classList.remove('show');
  document.body.classList.remove('offcanvas-active');
}

function show_offcanvas(offcanvas_id){
  darken_screen(true);
  document.getElementById(offcanvas_id).classList.add('show');
  document.body.classList.add('offcanvas-active');
}

document.addEventListener("DOMContentLoaded", function(){
  document.querySelectorAll('[data-trigger]').forEach(function(everyelement){
    
    let offcanvas_id = everyelement.getAttribute('data-trigger');
    
    everyelement.addEventListener('click', function (e) {
      e.preventDefault();
          show_offcanvas(offcanvas_id);
        
    });
  });

  document.querySelectorAll('.btn-close').forEach(function(everybutton){
    
    everybutton.addEventListener('click', function (e) {
      e.preventDefault();
          close_offcanvas();
      });
  });

  document.querySelector('.screen-darken').addEventListener('click', function(event){
    close_offcanvas();
  });
    
}); 



//This script is to allow for dropdown toggle elements to function as a link themselves
var processDropdownNav = function(e){
  var targetHref = e.target.getAttribute("href"),
      ignoreHrefs = ['','#'];

  if(!e.target.classList.contains("icon-arrow") && !ignoreHrefs.includes(targetHref)){
    if(e.target.classList.contains("dropdown-toggle")){ //top level bootstrap item
      if(this.classList.contains("show")){
        window.location = e.target.href;
      }
    }else if(e.target.classList.contains("dropdown-item") || e.target.classList.contains('nav-link')){ //menukit item
      var submenu = e.target.parentElement.querySelector(".submenu");
      if(submenu !== undefined){ //only bother running if this has a submenu
        if(submenu.offsetParent !== null){ //submenu is already visible
          window.location = e.target.href;
        }
      }
    }
  }
}

var dropdownItems = document.querySelectorAll(".dropdown-toggle, .dropdown-item, .nav-link");
for (var i = 0; i < dropdownItems.length; i++) {
  dropdownItems[i].addEventListener('click', processDropdownNav, true);
}

// Mega menu 
document.addEventListener("DOMContentLoaded", function () {
    var thresholdSmallScreens = 1199;
    if (window.innerWidth > thresholdSmallScreens) {
    document.querySelectorAll('.product__group').forEach(function (element) {
        element.addEventListener('click', function (e) {
            e.preventDefault();

            var productDiv = document.querySelectorAll(".megamenu__products")[0];
            productDiv.innerHTML = "";

            document.querySelectorAll(".product__group").forEach(function (element) {
                element.classList.remove("active");
            });
            element.classList.add("active");

            document.querySelectorAll(".product__subgroup_div").forEach(function (element) {
                element.classList.add("d-none");
            });
            document.querySelectorAll("div[data-id='" + element.dataset.id + "']").forEach(function (element) {
                element.classList.remove("d-none");
            });
        });
    });
    document.querySelectorAll('.product__subgroup').forEach(function (element) {
        element.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelectorAll('.product__subgroup').forEach(function (element) {
                element.classList.remove("active");
            });
            element.classList.add("active");

            var productDiv = document.querySelectorAll(".megamenu__products")[0];
            productDiv.innerHTML = "";

            const xhttp = new XMLHttpRequest();
            xhttp.open("GET", window.location.protocol + "//" + window.location.host + "/product-menu.aspx?r=" + element.dataset.region + "&l=" + element.dataset.lang + "&g=" + element.dataset.group + "&s=" + element.dataset.subgroup, false)
            xhttp.send();
            productDiv.innerHTML = xhttp.responseText;
        });
    });
    }
});


// Sidenav 
document.addEventListener("DOMContentLoaded", function(){

  document.querySelectorAll('.sidenav .nav-link').forEach(function(element){

    element.addEventListener('click', function (e) {

      let nextEl = element.nextElementSibling;
      let parentEl  = element.parentElement;  

      if(nextEl) {
        e.preventDefault(); 
        let mycollapse = new bootstrap.Collapse(nextEl);

          if(nextEl.classList.contains('show')){
            mycollapse.hide();
          } else {
            mycollapse.show();
            // find other submenus with class=show
            var opened_submenu = parentEl.parentElement.querySelector('.submenu.show');
            // if it exists, then close all of them
          if(opened_submenu){
            new bootstrap.Collapse(opened_submenu);
          }

          }
        }

    });
  })

});



//Sidenav - Collapse at mobile sizes
var sideNavContainer = document.getElementsByClassName('sidenav')[0];

if(sideNavContainer){
  document.addEventListener("DOMContentLoaded", function(){
    const mediaQuery = window.matchMedia('(max-width: 992px)')

    function handleTabletChange(e) { 
      if (mediaQuery.matches) {
         sideNavContainer.classList.add('collapse');
      } else {
        sideNavContainer.classList.remove('collapse');
      }
    }

    // Register event listener
    mediaQuery.addListener(handleTabletChange)

    // Initial check
    handleTabletChange(mediaQuery)
  }); 
}



//To Top Button - check to see if the window is top if not then display button
var scrollToTopBtn = document.querySelector(".to-top")
var rootElement = document.documentElement
var TOGGLE_RATIO = 0.50

function handleScroll() {
  // do something on scroll
  var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight
  if ((rootElement.scrollTop / scrollTotal) > TOGGLE_RATIO) {
    //show button
    scrollToTopBtn.classList.add("show")
  } else {
    //hide button
    scrollToTopBtn.classList.remove("show")
  }
}

function scrollToTop() {
  //scroll to top logic
  rootElement.scrollTo({
    top: 0,
    behavior: "smooth"
  })
}
scrollToTopBtn.addEventListener("click", scrollToTop)
document.addEventListener("scroll", handleScroll)



//Block to remove the need for ids on accordion items. Dynamically assigns classes to be used instead
var accordions = [].slice.call(document.querySelectorAll('.accordion'));
for(i = 0; i < accordions.length; i++){
  var oldAccordionID = accordions[i].getAttribute("id");
  var accordionID = "customAccordion"+i;
  accordions[i].setAttribute("id", accordionID);

  var accordionItems = accordions[i].querySelectorAll('.accordion-item');
  for(x = 0; x < accordionItems.length; x++){
    var accordionButton = accordionItems[x].querySelector('.accordion-button'),
        accordionHeader = accordionItems[x].querySelector('.accordion-header'),
        accordionCollapse = accordionItems[x].querySelector('.accordion-collapse');

    if(accordionButton && accordionHeader && accordionCollapse){
      var accordionCollapseID = accordionID+"-collapse"+x,
          accordionHeaderID = accordionID+"-header"+x;

      accordionHeader.setAttribute("id", accordionHeaderID);

      accordionButton.setAttribute("data-bs-toggle", "collapse");
      accordionButton.setAttribute("data-bs-target", "#"+accordionCollapseID);
      accordionButton.setAttribute("aria-controls", accordionCollapseID);

      accordionCollapse.setAttribute("id", accordionCollapseID);
      //Dont include an empty data-bs-parent attribute if want siblings to remain open when another item is opened
      if(accordionCollapse.hasAttribute("data-bs-parent")){
        accordionCollapse.setAttribute("data-bs-parent", "#"+accordionID);
      }
      accordionCollapse.setAttribute("aria-labelledby", accordionHeaderID);
    }
  }

  if(oldAccordionID != undefined && oldAccordionID != ""){
    accordions[i].innerHTML = "<div id='"+oldAccordionID+"'>"+accordions[i].innerHTML+"</div>"
  }
}

//MatchHeight
(function matchHeight(){
  //Grab divs with the class name 'match-height'
  var getDivs = document.getElementsByClassName('match-height');

  //Find out how my divs there are with the class 'match-height' 
  var arrayLength = getDivs.length;
  var heights = [];

  //Create a loop that iterates through the getDivs variable and pushes the heights of the divs into an empty array
  for (var i = 0; i < arrayLength; i++) {
      heights.push(getDivs[i].offsetHeight);
  }

   //Find the largest of the divs
  function getHighest() {
    return Math.max(...heights);
  }

  //Set a variable equal to the tallest div
  var tallest = getHighest();

  //Iterate through getDivs and set all their height style equal to the tallest variable
  for (var i = 0; i < getDivs.length; i++) {
      getDivs[i].style.height = tallest + "px";
  }
})();