class FCMenu extends HTMLElement {
    #rollBack;

    connectedCallback() {
        const windowsChangeEvent = ('onorientationchange' in window) ? 'orientationchange':'resize';
        window.addEventListener(windowsChangeEvent, this.closeMenu.bind(this));
    }

    toggleHorizontal() {
        this.classList.remove('closing');
        for(const element of this.querySelectorAll('.fc-toggle-menu')) {
            element.classList.toggle('pure-menu-horizontal');
        }
    }

    toggleMenu() {
        // Set timeout so that the panel has a chance to roll up before the menu switches states.
        if (this.classList.contains('open')) {
            this.classList.add('closing');
            this.#rollBack = setTimeout(this.toggleHorizontal.bind(this), 500);
        }
        else {
            if (this.classList.contains('closing')) {
                clearTimeout(this.#rollBack);
            } else {
                this.toggleHorizontal();
            }
        }
        this.classList.toggle('open');
    };

    closeMenu() {
        if (this.classList.contains('open')) {
            this.toggleMenu();
        }
    }
}
window.customElements.define('fc-menu', FCMenu)

class FCMenuToggleButton extends HTMLElement {
    connectedCallback() {
        this.addEventListener('click', this.onClick.bind(this))
    }

    onClick() {
        const menu = this.closest("fc-menu");
        console.assert(menu != null);
        menu.toggleMenu();
        e.preventDefault();
    }
}
window.customElements.define('fc-menu-toggle-button', FCMenuToggleButton)