// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
// % 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;
var showParams = 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("showConsole", "sc", 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", "dev", 0, "")
    .treat("server", "srv", 0, "")
    .treat("instrument", "instrument", 0, "")
    .treat("timerange", "time", 0, "-1800,0")

if (window.instrument) {
    window.clientTags = "&instrument=" + window.instrument;
} else {
    let args = '';
    if (window.server) { args += "&stream=" + window.server; }
    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 (showConsole) 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;
        /* Not working without swiper, necessary??? */
        // if (location.hash) { // there was a #hash part
        //     var slideNames = location.hash.substr(1);
        //     gotoGroups(slideNames);
        // }
        console.log("loading finished");

        // function gotoGroups(slideNames) {
        
        //     slideNames = slideNames.split("%20");
        //     var l = Math.min(MAXBLOCK,slideNames.length);
        //     document.title = "SEA "+ clientTitle + " " + slideNames.join(" ");
        //     for (var s=0; s<l; s++) {
        //       getGroup(s, slideNames[s]);
        //     }
        // }
    }
}

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">';
            } else {
                window.wideGraphs = true;
                document.getElementById('close-cross').innerHTML = '<img class = "icon-close" src="res/icon_modules.png">';
            }
        }
        if (elements[0].style.display == "inline-block") {          // only graphics is visible
                elements[0].style.display = "none";                         // hide graphics
                elements[1].style.display = "inline-block";                 // show modules
                elements[2].style.display = "none";                         // hide parameters
            } else if (elements[1].style.display == "inline-block") {   // only modules are visible
                elements[0].style.display = "inline-block";                 // show graphics
                elements[1].style.display = "none";                         // hide modules
                elements[2].style.display = "none";                         // hide parameters
            } else if (elements[2].style.display == "inline-block") {   // only parameters are visible
                elements[0].style.display = "none";                         // hide graphics
                elements[1].style.display = "inline-block";                 // show modules
                elements[2].style.display = "none";                         // hide parameters
            }
        adjustGrid();
      }
    }

    let logIcon = document.getElementById("log-icon-container");
    logIcon.onclick = function(){
        elements[3].classList.toggle('grid-element-3-visible');
      }

    var homeButton = document.getElementById("home-icon");
    
    homeButton.onclick = function () {
        window.location = "/select_experiment";
    };
    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;
}