class MenuPopup extends HTMLElement{
    constructor(){
        super();
    }

    hide(){
        this.style.visibility = "hidden";
    }

    show(){
        this.style.visibility = "visible";
    }

    connectedCallback(){
        this.render();        
        this.hide();
        document.getElementById("menu-popup-close").onclick = () => {this.hide()};
    }

    render(){
        this.innerHTML = `
        <div id="menu">
            <div id="menu_title_container">
                <span>Menu</span>
                <img src="res/close.png" id="menu-popup-close">
            </div>
        </div>
        `;
        let cursorDescription = `
            To remove the cursor, you can double click on any graph.
        `
        let menuContainer = document.getElementById("menu");      
        
        menuContainer.appendChild(new HorizontalDivider());

        let cursorHelp = new HelpEntry("How to remove the cursor", cursorDescription);

        menuContainer.appendChild(cursorHelp);
    }
}

customElements.define("sea-menu", MenuPopup);