class ScrollActions {

    constructor() {

        this.body          = document.querySelector("body");
        this.navbar        = document.querySelector(".navbar");
        this.menu          = document.querySelector(".menu");
        this.menuIcon      = document.querySelector(".menu-icon");
        this.search_button = document.querySelector(".search-button");
        this.searchPanel   = document.querySelector(".search-panel");
        this.menuPanel     = document.querySelector(".menu-panel");

        this.scrolled = false;

        this.top    = this.initScrollCheck( 0 );
        this.bottom = this.initScrollCheck( window.innerHeight + 100 );

        this.enableTrigger( this.top,    this.reset );
        this.enableTrigger( this.bottom, this.setScrolled );

    }


    initScrollCheck( level ) {

        let div = document.createElement('div');
        div.style.width  = 1;
        div.style.height = 1;
        div.style.zIndex = -1;
        div.style.opacity = 0;
        div.style.position = 'absolute';
        div.style.display  = 'block';
        div.style.top = level + 'px';

        document.body.style.position = 'relative';
        document.body.insertAdjacentElement( 'afterbegin', div );

        return div;
    }


    setScrolled() {
        
        if( this.scrolled ) return;

        this.body.classList.add("scrolled");
        this.navbar.classList.add("scrolled");
        this.searchPanel.classList.add("scrolled");
        this.menuPanel.classList.add("scrolled");
        this.menu.classList.add("visible");            
        if(this.menu_drawer)   this.menu_drawer.classList.remove("open");

        this.scrolled = true;
    }


    reset() {

        if( !this.scrolled ) return;

 
        this.body.classList.remove("scrolled");
        this.navbar.classList.remove("scrolled");
        this.searchPanel.classList.remove("scrolled");
        this.menuPanel.classList.remove("scrolled");
        this.menu.classList.remove("visible");
        this.menuIcon.classList.remove('isOpen');

        this.scrolled = false;
    }

    
    /** 
     * set the trigger to sense the loadMore in Viewport
     * and execute the callback
     */
     enableTrigger( trigger, callback ) {

        trigger.callback = callback.bind( this );

        /// setup the observer
        this.observer = new IntersectionObserver( ( entries, observer ) => {
                
                entries.forEach( entry => {
                  
                    if( entry.isIntersecting ) { 

                        entry.target.callback( entry.target.dataset ); /// call the callback
                    }                  
                });            
        });

        /// start observing
        this.observer.observe( trigger );
    }


}

new ScrollActions();


var scrollToH2 = document.querySelector('.scrollToH2');

if( scrollToH2 ) {
    
    scrollToH2.addEventListener('click', scrollToH2section);
    function scrollToH2section(){
        var scrollTo = new SmoothScroll();
        var anchor = document.querySelectorAll('h2[id]')[1];
    
        var options = { offset: 80 };
        scrollTo.animateScroll(anchor, null, options);
    }
}