/* ==========================================================================
   Navigation handler
   - Handles the showing and hiding of the overlay-menu component which has the proper classes.
 ========================================================================== */

const HeaderHoverHandler = {
    header: document.querySelector('.js-header'),
    timeout: null,
    delay: 150,

    init: function () {
        const headerHoverTrigger = document.querySelector('.js-header-hover');

        if(isset(headerHoverTrigger)){
            HeaderHoverHandler.initHeaderHover(headerHoverTrigger);
        }
    },

    initHeaderHover: function (headerHoverTrigger) {
        headerHoverTrigger.addEventListener('mouseenter', HeaderHoverHandler.setHeaderHover, false);
        headerHoverTrigger.addEventListener('mouseleave', HeaderHoverHandler.unsetHeaderHover, false);
    },

    setHeaderHover: function (event) {
        if(HeaderHoverHandler.timeout) {
            clearTimeout(HeaderHoverHandler.timeout);
        }
        HeaderHoverHandler.timeout = setTimeout(function () {
            HeaderHoverHandler.header.classList.add('is-header-light');
            HeaderHoverHandler.timeout = null;
        }, HeaderHoverHandler.delay);

    },

    unsetHeaderHover: function (event) {
        if(HeaderHoverHandler.timeout) {
            clearTimeout(HeaderHoverHandler.timeout);
            HeaderHoverHandler.timeout = null;
        } else {
            HeaderHoverHandler.header.classList.remove('is-header-light');
        }

    },
};

HeaderHoverHandler.init();