/* ==========================================================================
   Scroll handler
 ========================================================================== */

/**
 * Handler the objects which are bind on scroll events or visible in viewport
 */
var ScrollHandler = {

    // Variables for debounce and throttle effects
    time: Date.now(),
    timeout: null,
    waitThrottle: 1000,
    waitDebounce: 300,

    // Variables for scroll direction
    lastScrollTopPosition: 0,
    scrollDirectionDown: true,
    scrollDirectionUp: false,

    //Initialisation
    init: function () {

        // Trigger start on start up
        ScrollHandler.triggerOnInit();

        // Throttle scroll
        window.addEventListener('scroll', function () {
            if ((ScrollHandler.time + ScrollHandler.waitThrottle - Date.now()) < 0) {
                ScrollHandler.triggerThrottle();
                ScrollHandler.time = Date.now();
            }
        });

        // Smooth scroll
        window.addEventListener('scroll', function () {
            ScrollHandler.triggerSmooth();
        });

        // Debounce scroll
        window.addEventListener('scroll', function () {
            if(ScrollHandler.isset(ScrollHandler.timeout)) clearTimeout(ScrollHandler.timeout);
            ScrollHandler.timeout = setTimeout(ScrollHandler.triggerDebounce, ScrollHandler.waitDebounce);
        });
    },

    // Trigger on start up
    triggerOnInit: function () {
        ScrollHandler.triggerElementInViewportAnimation();
    },

    // Trigger scroll functions with throttle (preferred)
    triggerThrottle: function () {
        // console.log('Throttled scroll');
        ScrollHandler.triggerElementInViewportAnimation();
    },

    // Trigger scroll on debounce
    triggerDebounce: function () {
        // console.log('Debounce scroll');
    },

    // Trigger scroll on the flight
    triggerSmooth: function () {
        // console.log('Smooth scroll');
        ScrollHandler.detectScrollDirection();
        ScrollHandler.toggleStickyNavigation();
    },

    // Detect if part of a given element is visible in the viewport
    // El must be a node element
    detectIfElementIsPartlyInViewport: function(el)
    {
        if(ScrollHandler.isset(el)){

            var rect = el.getBoundingClientRect();
            // DOMRect { x: 8, y: 8, width: 100, height: 100, top: 8, right: 108, bottom: 108, left: 8 }
            var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
            var windowWidth = (window.innerWidth || document.documentElement.clientWidth);

            var vertInView = (rect.top <= (windowHeight)) && ((rect.top + rect.height) >= 0);
            var horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);

            return (vertInView && horInView);
        }
    },

    // Detect if a given element is fully visible in the viewport
    // El must be a node element
    detectIfElementIsFullyInViewport: function(el)
    {
        if(ScrollHandler.isset(el)){
            var rect = el.getBoundingClientRect();

            return (
                rect.top >= 0 &&
                rect.bottom <= window.innerHeight
            );
        }
    },

    detectScrollDirection: function () {
        var scrollTopPosition = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
        if (scrollTopPosition >= ScrollHandler.lastScrollTopPosition){
            ScrollHandler.scrollDirectionDown = true;
            ScrollHandler.scrollDirectionUp = false;
        } else {
            ScrollHandler.scrollDirectionDown = false;
            ScrollHandler.scrollDirectionUp = true;
        }
        ScrollHandler.lastScrollTopPosition = scrollTopPosition;
    },

    // Trigger animation on elements that have 'element-in-viewport' and that are in the viewport
    // These animation can only be triggered once, if you want more then that you should write an specific function for this
    triggerElementInViewportAnimation: function () {
        var elements = document.querySelectorAll('.element-in-viewport');
        var elementsLength = elements.length;

        for(var e = 0; e < elementsLength; e++){

            var element = elements[e];
            if(ScrollHandler.detectIfElementIsPartlyInViewport(element)){
                element.classList.remove('element-in-viewport');
            }
        }

    },

    // ------------------------------ CUSTOM SCROLL HANDLERS ------------------------------------

    // Hide or show sticky navigation when header isn't visible
    toggleStickyNavigation: function () {

        var mainNavigation = document.querySelector('body >header');
        var stickyNavigation = document.getElementById('sticky-navigation');
        if(ScrollHandler.isset(stickyNavigation) && ScrollHandler.isset(mainNavigation)){

            // Show sticky navigation
            if(!ScrollHandler.detectIfElementIsFullyInViewport(mainNavigation) && ScrollHandler.scrollDirectionUp){
                stickyNavigation.classList.add('active');
            }

            // Hide sticky navigation
            if(ScrollHandler.scrollDirectionDown || ScrollHandler.detectIfElementIsPartlyInViewport(mainNavigation)){
                stickyNavigation.classList.remove('active');
            }
        }
    },

    isset : function(obj)
    {
        return typeof obj !== 'undefined' && obj !== null;
    }

};

ScrollHandler.init();