// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
// % RESPONSIVITY

// local debugging: print the name of every executed funtion to the console
var debug_responsivity_daniel = 0;

var nColumns = 1; // Viewport is subdivided in nColumns columns.
var nRows = 1; // Viewport is subdivided in nRows rows.
var gridCountGraphics = 2; // Number of displayed graphics-swipers.
var MINWIDTH = 400; // Minimal width of block.
var MINHEIGHT = 700; // Minimal height of block.

function createGrid() {
    if (debug_responsivity_daniel) {
        console.log("%cfunction: createGrid", "color:white;background:olive");
    }

    // Creates grid-elements. By default only the first one is shown
    // and
    // takes the whole viewport.
    var elements = [];
    for (var i = 0; i < 4; i++) {
        var element = document.createElement('div');
        element.classList.add("grid-element");
        document.getElementById("center").appendChild(element);
        elements.push(element);
    }
    return elements;
}

function determineViewportSize() {
    if (debug_responsivity_daniel) {
        console.log("%cfunction: determineViewportSize", "color:white;background:olive");
    }

    // Number of columns 'nColumns' and rows 'nRows' is determined depending on available
    // viewport-size.

    var width = window.innerWidth || document.documentElement.clientWidth
            || document.body.clientWidth;
    var height = window.innerHeight || document.documentElement.clientHeight
            || document.body.clientHeight;
    nColumns = 1;
    if (width > MINWIDTH * 1.8) {
        nColumns = 2;
    }
    if (width > MINWIDTH * 2.5) {
        nColumns = 3;
    }
    if (width > MINWIDTH * 3.5) {
        nColumns = 4;
    }
    nRows = 1;
    if (height > MINHEIGHT) {
        nRows = 2;
    }
    if (menuMode) {
      nRows = 1;
      nColumns = 1;
    }
}

function sizeChange() {
    if (debug_responsivity_daniel) {
        console.log("%cfunction: sizeChange", "color:white;background:olive");
    }

    determineViewportSize();
    adjustGrid();
}

function adjustGrid() {
    if (debug_responsivity_daniel) {
        console.log("%cfunction: adjustGrid", "color:white;background:olive");
    }

    // Determines size of grid-elements depending on number of columns 'nColumns' and
    // rows 'nRows'

    var width = window.innerWidth || document.documentElement.clientWidth
            || document.body.clientWidth;
    var height = window.innerHeight || document.documentElement.clientHeight
            || document.body.clientHeight;

    if (window["hideRightPart"] || window["wideGraphs"]){
        style(0,"100vw","100vh");
        style(1); // hide
        style(2); // hide
        style(3); // hide
        return
    }

    switch (nColumns) {
    case 1:
        if (menuMode) {
            leftWidth = Math.min(100, MINWIDTH / width * 100);
            style(0,leftWidth + "vw","100vh");
        } else {
            // we may want to switch to 90vh on safari ios (workaround)
            style(0,"100vw","100vh");
        }    


        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
        }
        break;
    case 2:
        rightWidth = Math.min(50, MINWIDTH / width * 100);
        leftWidth = 100 - rightWidth;
        if (nRows == 1 || !window['showConsole']) {
            if (showParams) {
                style(0,leftWidth + "vw","100vh");
                style(1); // hide
                style(2,rightWidth + "vw","100vh");
                style(3); // hide
            } else {
                style(0,leftWidth + "vw","100vh");
                style(1,rightWidth + "vw","100vh");
                style(2); // hide
                style(3); // hide
            }
        } else {
            if (showParams) {
                style(0,leftWidth + "vw","100vh");
                style(1); // hide
                style(2,rightWidth + "vw","50vh");
                style(3,rightWidth + "vw","50vh");
            } else {
                style(0,leftWidth + "vw","100vh");
                style(1,rightWidth + "vw","50vh");
                style(2); // hide
                style(3,rightWidth + "vw","50vh");
            }
        }
         break;
    case 3:
        rightWidth = MINWIDTH / width * 100;
        leftWidth = 100 - rightWidth;
        if (nRows == 1 || !window['showConsole']) {
            if (showParams) {
                style(0,leftWidth + "vw","100vh");
                style(1); // hide
                style(2,rightWidth + "vw","100vh");
                style(3); // hide
            } else {
                style(0,leftWidth + "vw","100vh");
                style(1,rightWidth + "vw","100vh");
                style(2); // hide
                style(3); // hide
            }
        } else {
            if (showParams) {
                style(0,leftWidth + "vw","100vh");
                style(1); // hide
                style(2,rightWidth + "vw","50vh");
                style(3,rightWidth + "vw","50vh");
            } else {
                style(0,leftWidth + "vw","100vh");
                style(1,rightWidth + "vw","50vh");
                style(2); // hide
                style(3,rightWidth + "vw","50vh");
            }
        }
        break;
    case 4:
        rightWidth = MINWIDTH / width * 100;
        leftWidth = 100 - 2 * rightWidth;
        if (nRows == 1 || !window['showConsole']) {
            style(0,leftWidth + "vw","100vh");
            style(1,rightWidth + "vw","100vh");
            if (window['showConsole']) {
              style(2); // hide
              style(3,rightWidth + "vw","100vh");
            } else {
              style(2,rightWidth + "vw","100vh");
              style(3); // hide
            }
        } else {
            style(0,leftWidth + "vw","100vh");
            style(1,rightWidth + "vw","50vh");
            style(2,rightWidth + "vw","50vh");
            style(3,(2 * rightWidth) + "vw","50vh");
        }
        break;
    default:
        break;
    }
}

function style(s, width, height) {
    if (debug_responsivity_daniel) {
        console.log("%cfunction: style", "color:white;background:olive");
    }

    if (width) {
        elements[s].style.display = "inline-block";
        elements[s].style.width = width;
    } else {
        elements[s].style.display = "none";
    }
    if (height) {
        elements[s].style.height = height;
    }
    elements[s].style.float = "left";
}

let isTouchDevice = !!('ontouchstart' in window) || !!('msmaxtouchpoints' in window.navigator);