/* ==========================================================================
   Overlay Nav handler
   - Handles the overlay nav component which has the proper classes.
 ========================================================================== */

const overlayNavHandler = {

    init: function () {
        const overlayNavList = document.querySelectorAll('.js-overlay-nav-trigger');
        const overlayNavListCount = overlayNavList.length;

        if(isset(overlayNavList) && overlayNavListCount !== 0){
            for(let i = 0; i < overlayNavListCount; i++){
                const overlayNav = overlayNavList[i];
                overlayNavHandler.initOverlayNav(overlayNav);
            }
        }
    },

    initOverlayNav: function (overlayNavTrigger) {
        overlayNavTrigger.addEventListener('click', overlayNavHandler.toggleOverlayNav, false);
    },

    toggleOverlayNav: function (event) {
        const item = event.target.parentNode;
        const itemList = item.parentNode.children;
        const activeClass = 'is-active';

        // Check if the this one has a overlay nav
        if (!item.querySelector('.js-overlay-nav')) return;

        // Prevent default link behavior
        event.preventDefault();

        // If the item is already active, collapse it and quit
        if (item.classList.contains(activeClass)) {
            item.classList.remove(activeClass);
            return;
        }

        // Loop through all open overlay nav items, and close them
        for (var i = 0; i < itemList.length; i++) {
            itemList[i].classList.remove(activeClass);
        }

        // Toggle our content by setting the active class
        item.classList.toggle(activeClass);
        item.offsetParent.scroll({top: 0});
    }
};

overlayNavHandler.init();