class Controls {
    constructor() {
        this.name = 'controls';
    }
    showAtPos(event, id) {
        // Function to display popup output at curser.
        // Used in the chart controls to enable/disable indicators.
        var el, x, y;

        el = document.getElementById(id);
        if (window.event) {
            x = window.event.clientX + document.documentElement.scrollLeft
            + document.body.scrollLeft;
            y = window.event.clientY + document.documentElement.scrollTop +
            + document.body.scrollTop;
        }
        else {
            x = event.clientX + window.scrollX;
            y = event.clientY + window.scrollY;
        }
        // The popup hides on mouse out so the element is moved back a little to
        // ensure the mouse is still hovering over it when it gets displayed
        y = y - (10);
        x = x - (15);
        el.style.left = x + "px";
        el.style.top = y + "px";
        el.style.display = "block";
    }
    init_TP_selector(){
        var demoInput = document.getElementById('symbol');
        demoInput.value = window.UI.data.trading_pair; // set default value instead of html attribute
        demoInput.onfocus = function() { demoInput.value =''; }; // on focus - clear input
        demoInput.onblur = function() { demoInput.value = window.UI.data.trading_pair; }; // on leave restore it.
        demoInput.onchange = function() {
            var options = document.getElementById('symbols').getElementsByTagName('option');
            this.value = this.value.toUpperCase();
            for (let i=0; i < options.length; i += 1) {
                if (options[i].value == this.value){
                    document.getElementById('tp_selector').submit();
                }
            }
        };
    }
}