// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
// % INIT

var MAXBLOCK = 4; // max number of blocks
var elements = []; // grid elements
// var swiper = []; // This array contains main-swiper-Instances.
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 writePermission = false;
var panelOn = true;
var firstState = 0;
var showParams = false;
var showConsole = false;

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")

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();

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

    let logIcon = document.getElementsByClassName("log-icon-container")[0];
    logIcon.onclick = function(){
        if (showConsole) {
            showConsole = false;
        } else {
            showConsole = true;
        }
        adjustGrid();
    }

    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;
}
