// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
// % 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 menuMode = false;
var panelOn = true;
var firstState = 0;

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("showConsole", "sc", to_bool, true)
    .treat("showOverview", "so", to_bool, true)
    .treat("showGraphics", "sg", to_bool, true) // false)
    .treat("hideRightPart", "hr", to_bool, false)
    .treat("showAsync", "sa", to_bool, false)

function loadFirstBlocks() {

    if (showMain) pushInitCommand("getblock?path=main&", "main")
    if (showConsole) pushInitCommand("console?", "console")
    if (nColumns == 1) { // probably mobile phone}
        if (showGraphics) pushInitCommand("gettime?time=-1800,0&", "graphics")
        if (showOverview) pushInitCommand("getblock?path=_overview&", "overview")
    } else {
        if (showOverview) pushInitCommand("getblock?path=_overview&", "overview")
        if (showGraphics) pushInitCommand("gettime?time=-1800,0&", "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;
    if (location.hash) { // there was a #hash part
      var slideNames = location.hash.substr(1);
      gotoGroups(slideNames);
    }
    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();
    // Create swiper-instances.
    for (var s = 0; s < MAXBLOCK; s++) {
        swiper[s] = insertSwiper(s);
    }
    var homeButton = document.getElementById("home-icon");
    homeButton.onclick = function () {
        window.location = "http://" + location.hostname + ":8800/";
    };
    buildUpdateConnection();
    if (location.hash) {
      console.log("hash in url", location.hash);
      initSlides = location.hash.substring(1);
    } else {
      initSlides = "";
    }
    // Initialisation will be continued, when SSE-connection is established
    // and id-message is obtained.
    // (see also at SEAWebClientCommunication.js)
    addEventListener("popstate", function (e) {
	  if (e.state) {
	    if (loadingShown) {
	      if (initSlides != e.state.funarg) {
            console.log("hash mismatch", initSlides, e.state.funarg);
	        initSlides = e.state.funarg;
	      }
	    } else {
	      console.log("popstate", e.state.func, e.state.funarg);
	      window[e.state.func](e.state.funarg);
	    }
	  } else {
        document.title = "SEA "+ clientTitle;
        for (var s=0; s<MAXBLOCK; s++) {
          swiper[s].slideTo(defaultSlidePos(s));
        }
	  }
	})
};

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