// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
// % INIT
var hostPort = ""; // Address and port of static html-file.
var clientID = ""; // ID given by server when SSE-connection is established.
var clientTitle = ""; // Contains name of instrument and device.
var getUpdates = true;
var getUpdatesGraphics = true;
var initCommands = [];
var loadingShown = true;
var panelOn = true;

function Settings() {
    // get key/value pairs from search part of the URL and fill into query
    var qstr = location.search;
    // console.log(qstr);
    if (qstr) {
        var a = (qstr[0] === '?' ? qstr.substr(1) : qstr).split('&');
        for (var i = 0; i < a.length; i++) {
            var b = a[i].split('=');
            key = decodeURIComponent(b[0]);
            value = decodeURIComponent(b.slice(1).join("=").replace(/\+/g, '%20'));
            this[key] = value;
        }
    }
    this.treat = function (variable, shortcut, convert, defaultValue) {
        // the third argument should be:
        //    None or omitted   for a string
        //    to_bool           for converting to boolean
        //    Number            for converting to a number
        if (shortcut in this) {
            value = this[shortcut];
            if (convert) {
                value = convert(value);
            }
        } else {
            value = defaultValue;
        }
        //console.log(variable, value);
        window[variable] = value;
        return this;
    }
    this.add_init = function (shortcut, command, defaultValue) {
        if (shortcut in this) {
            value = to_bool(this[shortcut]);
            console.log(shortcut, value);
        } else {
            value = defaultValue;
            console.log(shortcut, value);
        }
        if (value) {
            initCommands.push(command);
        }
        return this;
    }
}

function to_bool(string) {
    // everything else than false, 0 or an empty string is considered as true
    return !/^(false|FALSE|False|0|)$/.test(string);
}

// example: localhost:5000/SEAWebClient.html?hp=ldmzolliker:5000&dc=1
// hostPort given and debugCommunication switched on
new Settings()
    .treat("debugCommunication", "dc", 0, 0)  // 1: debug synchronous comm. 2: debug syn and asyn comm
    .treat("debugGraphics", "dg", to_bool, false)
    .treat("hostPort", "hp", 0, location.hostname + ":" + location.port)
    .treat("showMain", "sm", to_bool, true)
    .treat("initConsole", "ic", to_bool, true)
    .treat("showGraphics", "sg", to_bool, true) // false)
    .treat("hideRightPart", "hr", to_bool, false) //used to completely disable the right part
    .treat("wideGraphs", "wg", to_bool, false) //used to toggle the size of the graphs part
    .treat("showAsync", "sa", to_bool, false)
    .treat("device", "device", 0, "")
    .treat("stream", "stream", 0, "")
    .treat("instrument", "instrument", 0, "")
    .treat("timerange", "time", 0, "-1800,0")
    .treat("lazyPermission", "wr", to_bool, true);


if (window.instrument) {
    window.clientTags = "&instrument=" + window.instrument;
} else {
    let args = '';
    if (window.stream) { args += "&stream=" + window.stream; }
    if (window.device) { args += "&device=" + window.device; }
    window.clientTags = args;
}

// console.log('TAGS', window.clientTags);

function loadFirstBlocks() {
    if (showMain) pushInitCommand("getblock?path=main&", "main")
    if (initConsole) pushInitCommand("console?", "console")
    if (nColumns == 1) { // probably mobile phone}
        if (showGraphics) pushInitCommand("gettime?time=" + window.timerange + "&", "graphics")
        var goFS = document.getElementById('header');
        goFS.addEventListener(
            'click',
            function () {
              document.body.requestFullscreen();
            },
            false,
        );
    } else {
        if (showGraphics) pushInitCommand("gettime?time=" + window.timerange + "&", "graphics")
        // last is shown first
    }
}

function nextInitCommand() {
    // do the next init request
    if (initCommands.length > 0) {
        next = initCommands.shift();
        cmd = next[0]
        text = next[1]
        var loadingSpan = document.getElementsByClassName("loading-span")[0];
        loadingSpan.innerHTML = loadingSpan.innerHTML + "<br>loading " + htmlEscape(text) + " ...";
        reqJSON(0, "http://" + hostPort + "/" + cmd + "id=" + clientID, successHandler, errorHandler);
    } else if (loadingShown) {
        var loadingScreen = document.getElementsByClassName("loading-div")[0];
        loadingScreen.style.display = "none";
        loadingShown = false;
        console.log("loading finished");
    }
}

function pushInitCommand(cmd, text) {
    initCommands.push([cmd, text]);
}

window.onload = function() {
    // Executed when loading of page is completed.

    // Create grid-elements. (see also at
    // 'SEAWebClientResponsivity.js')
    elements = createGrid();
    // Number of shown columns 'm' and rows 'n' is determined depending on
    // available viewport-size.
    determineViewportSize();
    // Determine size of grid-elements depending on number of columns 'm' and
    // rows 'n'
    adjustGrid();

    /* ----------------------------------------------------------------------------------------------------- */
    /* MIAN ICONS */

    let icon_close_container    = document.getElementsByClassName("icon-close-container")[0];
    let icon_log_container      = document.getElementsByClassName("icon-log-container")[0];
    let icon_lock_container     = document.getElementsByClassName("icon-lock-container")[0];
    
    if (window.hideRightPart){
      document.body.removeChild(icon_close_container);
    } else {
        icon_close_container.onclick = function(){
        if (showParams) {
            showParams = false;
            // icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_sinus.png">';
            icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_close.png">';
        } else {
            if (window.wideGraphs) {
                window.wideGraphs = false;
                document.getElementsByClassName('graphics')[0].classList.remove('panel-graphics-wide');
                // icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_sinus.png">';
                icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_close.png">';
                icon_log_container.classList.remove("icon-main-container-hidden");
            } else {
                window.wideGraphs = true;
                document.getElementsByClassName('graphics')[0].classList.add('panel-graphics-wide');
                // icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_modules.png">';
                icon_close_container.innerHTML = '<img class = "icon-main icon-close" src="res/icon_close.png">';
                icon_log_container.classList.add("icon-main-container-hidden");
            }
        }
        adjustGrid();
      }
    }

    icon_log_container.onclick = function(){
        if (showConsole) {
            showConsole = false;
        } else {
            showConsole = true;
        }
        adjustGrid();
    }

    function changeWritePermission(flag) {
        let array_icon_edit = document.getElementsByClassName('icon-edit');
        let array_pushbutton = document.getElementsByClassName('push-button');
        let array_col_right_value = document.getElementsByClassName('col-right-value');

        writePermission = flag;
        if (writePermission) {
            icon_lock_container.innerHTML = '<img class = "icon-main icon-lock" src="res/icon_lock_open.png">';
            for(i = 0; i < array_icon_edit.length; i++) {
                array_icon_edit[i].classList.remove('icon-edit-hidden');
            }
            for(i = 0; i < array_pushbutton.length; i++) {
                array_pushbutton[i].classList.add('push-button-active');
            }
            for (let i = 0; i < array_col_right_value.length; i++) {
                array_col_right_value[i].classList.add('col-right-value-with-write-permission');
            }
        } else {
            icon_lock_container.innerHTML = '<img class = "icon-main icon-lock" src="res/icon_lock_closed.png">';
            for(i = 0; i < array_icon_edit.length; i++) {
                array_icon_edit[i].classList.add('icon-edit-hidden');
            }
            for(i = 0; i < array_pushbutton.length; i++) {
                array_pushbutton[i].classList.remove('push-button-active');
            }
            for (let i = 0; i < array_col_right_value.length; i++) {
                array_col_right_value[i].classList.remove('col-right-value-with-write-permission');
            }
        }
    }

    if (window.lazyPermission) {
        changeWritePermission(true);
    }

    icon_lock_container.onclick = function(){
        if (writePermission == false) {
            if (window.lazyPermission) {
                changeWritePermission(true);
            } else {
                alertify.prompt( "WRITE PERMISSION", "Current device: <b>"+ window.device + "</b><p>Please confirm the instrument:", ""
                , function(evt, value) {
                    // User decided to proceed
                    if (window.instrument.toUpperCase() == value.toUpperCase()) {
                        changeWritePermission(true);
                    }
                }
                , function() {
                    // User decided to cancel
                    prompt = false;
                });
            }
        } else {
            changeWritePermission(false);
        }
    }


    var homeButton = document.getElementById("home-icon");
    
    homeButton.onclick = function () {
        window.location = "/select_experiment";
    };
    buildUpdateConnection();
};

function toggleHeader() {
    // Show and hide box showing name of the current device ('see also
    // SEAWebClient.html')
    var main_panel = document.getElementById("main-panel");
    panelOn = !panelOn;
    if (panelOn) {
        // header.innerHTML = clientTitle
        /* header.style.width = "auto;"; */
        main_panel.style.display = "block";
    } else {
       /* header.style.width = "30px"; */
        main_panel.style.display = "none";
    }
    return true;
}