/**
 * Menu
 */
 class Menu {

    /**
     * 
     * @param {*} container_selector 
     * @param {*} button_selector 
     */
    constructor( container_selector = '.menu-panel', button_selector = '#hamburger' ){

        this.container = document.querySelector(container_selector);
        this.button    = document.querySelector(button_selector);

        this.isopen = false;

        this.toggle= this.toggle.bind(this);

        this.button.addEventListener( 'click', evt => { this.toggle() });
    }
    
    open() {
        
        this.container.classList.add('open'); 
        this.button.classList.add('isOpen');

        document.body.classList.add('noscroll');

        this.isopen = true;
    };

    close() {
        this.container.classList.remove('open');
        this.button.classList.remove('isOpen');

        document.body.classList.remove('noscroll');

        this.isopen = false;
    };

    toggle() {

        this.isopen = !this.isopen;

        if( this.isopen ) 
            this.open();
        else
            this.close();
    };
}

class SearchButton {

    /**
     * 
     * @param {*} container_selector 
     * @param {*} button_selector 
     */
    constructor( container_selector = '.search-panel', button_selector = '.open-search' ){

        this.container = document.querySelector(container_selector);
        this.button    = document.querySelector(button_selector);

        this.isopen = false;

        this.toggle= this.toggle.bind(this);

        this.button.addEventListener( 'click', evt => { this.toggle() });
    }
    
    open() {
        
        this.container.classList.add('open'); 
        this.button.innerHTML = '<i class="ui-add rotate"></i>'

        document.body.classList.add('noscroll');

        this.isopen = true;
    };

    close() {
        this.container.classList.remove('open');
        this.button.innerHTML = '<i class="icon-search"></i>'

        document.body.classList.remove('noscroll');

        this.isopen = false;
    };

    toggle() {

        this.isopen = !this.isopen;

        if( this.isopen ) 
            this.open();
        else
            this.close();
    };
}


class TrendBar {

    /**
     * 
     * @param {*} container_selector 
     */
    constructor( container_selector = '.category-menu' ){

        this.container = document.querySelector(container_selector);
    }
    
    open()  { this.container.classList.remove('hidden'); };
    close() { this.container.classList.add('hidden');    };
}



class BarManager {
    
    constructor() {

        this.menu         = new Menu();        
        this.search       = new SearchPanel('.search-panel');
        this.searchbtn    = new SearchButton();
        this.trend        = new TrendBar();

        this.menu.button.addEventListener('click', evt => {
            
            this.search.close();
            this.searchbtn.close();
            
            if( this.menu.isopen )
                this.trend.close();
            else
                this.trend.open();
        }); 

        this.search.button.addEventListener('click', evt => this.menu.close() );
    }
}


let blz_bar_mgr = new BarManager();