document.getElementById("widesearchbutton").addEventListener("click", function(){
    setTimeout(function() { jQuery('#focusonoverlayinputwide').focus() }, 50);
});
const trapFocus = (element, prevFocusableElement = document.activeElement) => {
    const focusableElements = Array.from(
    element.querySelectorAll(
    'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="search"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'
    )
    );
    const firstFocusableElement = focusableElements[0];
    const lastFocusableElement = focusableElements[focusableElements.length - 1];
    let currentFocusElement = null;

    firstFocusableElement.focus();
    currentFocusElement = firstFocusableElement;

    const handleFocus = e => {
    e.preventDefault();
    if (focusableElements.includes(e.target)) {
        currentFocusElement = e.target;
    } else {
    if (currentFocusElement === firstFocusableElement) {
        lastFocusableElement.focus();
    } else {
        firstFocusableElement.focus();
    }
    currentFocusElement = document.activeElement;
    }
    };
    document.addEventListener("focus", handleFocus, true);
    return {
    onClose: () => {
    document.removeEventListener("focus", handleFocus, true);
    prevFocusableElement.focus();
    }
    };
    };
    const toggleModal = ((e) => {
    const modal = document.getElementById("modalContainer");
    if (modal.classList != ('amberd-search-overlay-show-on-click')) {
    modal.classList.toggle("amberd-search-overlay-show-on-click");
    trapped = trapFocus(modal);
    } else {
    trapped.onClose();
    } 
})

/* Search Overlay for mobile devices */
document.getElementById("smallsearchbutton").addEventListener("click", function(){
    setTimeout(function() { jQuery('#focusonoverlayinputsmall').focus() }, 50);
});

const trapFocusSmall = (element, prevFocusableElement = document.activeElement) => {
    const focusableElements = Array.from(
    element.querySelectorAll(
      'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="search"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'
    )
    );
    const firstFocusableElement = focusableElements[0];
    const lastFocusableElement = focusableElements[focusableElements.length - 1];
    let currentFocusElement = null;
    
    firstFocusableElement.focus();
    currentFocusElement = firstFocusableElement;
    
    const handleFocus = e => {
    e.preventDefault();
    if (focusableElements.includes(e.target)) {
        currentFocusElement = e.target;
    } else {
      if (currentFocusElement === firstFocusableElement) {
        lastFocusableElement.focus();
      } else {
        firstFocusableElement.focus();
      }
      currentFocusElement = document.activeElement;
    }
    };
    document.addEventListener("focus", handleFocus, true);
    return {
    onClose: () => {
      document.removeEventListener("focus", handleFocus, true);
      prevFocusableElement.focus();
    }
    };
    };
    
    const toggleModalSmall = ((e) => {
    const modalsmall = document.getElementById("modalContainerSmall");
    if (modalsmall.classList != ('amberd-search-overlay-show-on-click')) {
    modalsmall.classList.toggle("amberd-search-overlay-show-on-click");
    trapped = trapFocusSmall(modalsmall);
    } else {
    trapped.onClose();
    } 
})