// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
// % GROUP

var writePermissionTimeout; // Sets writePermission to 'false,
// restarts by user-interaction.

var prompt = false // True while a prompt is opened.

function getGroup(s, name) {
    console.log('name: ',name, ', id: '.ClientID);
    reqJSON(s, "http://" + hostPort + "/getblock?path=" + name
            + "&id=" + clientID, successHandler, errorHandler);
}

function sendCommand(s, command) {
    reqJSON(s, "http://" + hostPort + "/sendcommand?command=" + encodeURIComponent(command)
            + "&id=" + clientID, successHandler, errorHandler);
}

function createContent(message) {
    // Depending on the message received from the server the content of the
    // group is created dynamically. Handles draw-message.

    var content = document.createElement('div');
    content.classList.add("content");
    // Process components of the message
    for (var i = 0; i < message.components.length; i++) {
        var component = message.components[i];
        if (!("title" in component))
            component.title = component.name;
        if (!("command" in component))
            component.command = component.name;

        if (message.title == 'modules') {
            let row = create_row_for_modules(component);
            content.appendChild(row);
        } else {
            let row = create_row_for_parameters(component);
            content.appendChild(row);
        }
    }
    return content;
}

/* ---------------------------------------------------------------------------------- */


function create_row_for_modules(component) {
    // Creates row-element containing link AND read-only-item.
    let name = component.name;
    let status = component.statusname;

    let left = createTitle(component, 1);
    left.id = component.name;
    left.name = component.title;  // or setAttribute('name'.. ?
    let right = createParElement(component);
    let edit = document.createElement('img');
    edit.setAttribute('src', 'res/icon_edit.png');
    edit.classList.add('modules-icon');
    edit.classList.add('edit-icon');
    let row = appendToContent(component, left, right, edit);
    row.onclick = function () {
            getGroup(s, component.title);
    }
    row.classList.add('row-clickable');
    return row;
}

function create_row_for_parameters(component) {
    let left = createTitle(component);
    let right = document.createElement('span');
    right.classList.add('col-right-parameters');
    let value = document.createElement('span');
    value.classList.add('rdonly');
    value.setAttribute('name', component.name);
    value.__ctype__ = 'rdonly';
    right.appendChild(value);
    
    if (component.type == 'input' ||
        component.type == 'pushbutton' ||
        component.type == 'checkbox' ||
        component.type == 'enum'
    ) {
        value.classList.add('col-right-parameters-value');
        let edit = document.createElement('img');
        edit.setAttribute('src', 'res/icon_edit.png');
        edit.classList.add('modules-icon');
        edit.classList.add('edit-icon');
        createFunc = window['create_' + component.type]
        let hidden_elem = createFunc(component);
        hidden_elem.classList.add('hidden-input-element');
        edit.onclick = function () {
            hidden_elem.classList.toggle('hidden-input-element');
        }
        right.appendChild(edit);
        right.appendChild(hidden_elem);
    }
    return appendToContent(component, left, right);
}

/* ---------------------------------------------------------------------------------- */
// input elements

function create_pushbutton(component) {
    // Creates row-element containing a push button
    var name = component.name;
    var command = component.command;
    var elem = createParElement(component);
    elem.classList.add("clickable", "push-button");
    elem.onclick = function () {
        // if (writePermission) {
            let row = elem.closest('div');
            elem.style.backgroundColor = "orangered";
            // Request for command
            sendCommand(s, command);
        // } else {
        //     prompt = true;
        //     alertify.confirm("", "You are connected with <b>" + clientTitle
        //             + "</b>. <br>"
        //             + "Are you sure you want to modify things here?",
        //             function () {
        //                 // User decided to proceed.
        //                 writePermission = true;
        //                 writePermissionTimeout = setTimeout(function () {
        //                     writePermission = false;
        //                 }, 3600000);
        //                 let row = elem.closest('div');
        //                 row.style.backgroundColor = "orangered";
        //                 // Request for command
        //                 sendCommand(s, command);
        //                 prompt = false;
        //             }, function () {
        //                 // User decided to cancel
        //                 prompt = false;
        //             });
        // }
    }
    return elem;
}

function create_input(component) {
    // Creates row-element containing input-item.
    var name = component.name;
    var command = component.command;
    var input = createParElement(component, 'input', 'input-text');
    input.type = "text";
    input.style.width = "100px";
    input.addEventListener("focus", function(evt) {
        let elm = evt.target;
        setTimeout(function(){elm.setSelectionRange(0, elm.value.length);},0);
    });

    input.onkeydown = function (e) {
        if (e.which === 27 || e.key == "Escape") {
            // User decided to cancel
            input.value = intput.oldValue;
            resizeTextfield(input);
            var row = input.closest('div');
            row.style.backgroundColor = "white";
        }
    }

    input.onfocus = function () {
        input.oldValue = input.value;

        if (isTouchDevice)
            setTimeout(function () {
                posTextfield(s, left);
            }, 1);
    }

    input.onblur = function () {
        if (prompt) {
            return false;
        }
        var row = input.closest('div');
        var value = input.value;
        let oldValue = 'oldValue' in input ? input.oldValue : value;
        if (!('actualValue' in input)) input.actualValue = oldValue;
        actualValue = input.actualValue;
        if (value == actualValue || value == oldValue ||
            parseFloat(value) == parseFloat(actualValue) || parseFloat(value) == parseFloat(oldValue)) {
            input.value = actualValue;
            // nothing to do.
            row.style.backgroundColor = "white";
            return false;
        }
        // User changed value and moved focus to other object.
        alertify.confirm("", "You changed a field without pressing the return key.<br>"
                + "Hint: press ESC for leaving a field unchanged.<b>"
                + "You are connected with <b>" + clientTitle + "</b>.<br>"
                + "Are you sure you want to change the value of<br><b>"
                + name + "</b> from <b>" + actualValue
                + "</b> to <b>" + value + "</b>?", function () {
            // User decided to proceed.
            // writePermission = true;
            // writePermissionTimeout = setTimeout(function () {
            //     writePermission = false;
            // }, 3600000);
            row.style.backgroundColor = "orangered";
            // Request for command
            sendCommand(s, command + " " + value);
            resizeTextfield(input);
            prompt = false;
            input.closest('form').classList.toggle('hidden-input-element');
        }, function () {
            // User decided to cancel
            input.value = input.actualValue;
            resizeTextfield(input);
            row.style.backgroundColor = "white";
            prompt = false;
            input.closest('form').classList.toggle('hidden-input-element');
        });
    }

    var form = document.createElement('form');
    form.onsubmit = function (e) {
        e.preventDefault();
        // if (writePermission) {
            var row = form.closest('div');
            row.style.backgroundColor = "orangered";
            // Request for command
            input.actualValue = input.value;
            sendCommand(s, name + " " + input.value);
            input.blur();
            form.classList.toggle('hidden-input-element');
        // } else {
        //     var value = input.value
        //     prompt = true;
        //     alertify.confirm("", "You are connected with <b>" + clientTitle
        //             + "</b>. <br>"
        //             + "Are you sure you want to modify things here?",
        //             function () {
        //                 // User decided to proceed.
        //                 writePermission = true;
        //                 writePermissionTimeout = setTimeout(function () {
        //                     writePermission = false;
        //                 }, 3600000);
        //                 var row = form.closest('div');
        //                 row.style.backgroundColor = "orangered";
        //                 input.actualValue = value;
        //                 // Request for command
        //                 sendCommand(s, command + " " + value);
        //                 resizeTextfield(input);
        //                 prompt = false;
        //             }, function () {
        //                 // User decided to cancel
        //                 input.value = input.oldValue;
        //                 resizeTextfield(input);
        //                 prompt = false;
        //             });
        // }
    };
    form.appendChild(input);
    return form;

    function posTextfield(s, left) {
        if (debug_group_daniel) {
            console.log("%cfunction: posTextfield", "color:white;background:salmon");
        }
    
        // var content = swiper[s].slides[swiper[s].activeIndex].childNodes[1];
        // var row = left.parentNode;
        // content.scrollTop = row.offsetTop - 30;
    
        // ---------------------> Not working anymore since swiper was removed!!!
    }
}

function create_checkbox(component) {
    // Creates row-element containing checkbox-item
    var command = component.command;
    var input = createParElement(component, 'input', 'parameter-checkbox');
    input.type = "checkbox";
    input.onkeyup = function (e) {
        if (e.keyCode === 32) {
            handleCheckbox();
        }
    }

    var label = document.createElement('label');
    label.for = input;
    label.classList.add("parameter-label");

    label.onclick = function () {
        handleCheckbox();
    }

    function handleCheckbox() {
        // if (writePermission) {
            var row = input.closest('div');
            row.style.backgroundColor = "orangered";
            if (input.checked) {
                var value = "0";
                input.checked = false;
            } else {
                var value = "1";
                input.checked = true;
            }
            // Request for command
            sendCommand(s, command + " " + value);
            input.closest('span').classList.toggle('hidden-input-element');
        // } else {
        //     alertify.confirm("", "You are connected with <b>" + clientTitle
        //             + "</b>. <br>"
        //             + "Are you sure you want to modify things here?",
        //             function () {
        //                 // User decided to proceed.
        //                 writePermission = true;
        //                 writePermissionTimeout = setTimeout(function () {
        //                     writePermission = false;
        //                 }, 3600000);
        //                 var row = input.closest('div');
        //                 row.style.backgroundColor = "orangered";
        //                 if (input.checked) {
        //                     var value = "0";
        //                     input.checked = false;
        //                 } else {
        //                     var value = "1";
        //                     input.checked = true;
        //                 }
        //                 // Request for command
        //                 sendCommand(s, command + " " + value);
        //             }, function () {
        //                 // User decided to cancel
        //             });
        // }
    };

    var right = document.createElement('span');
    right.appendChild(input);
    right.appendChild(label);
    return right;
}

function create_enum(component) {
    // Creates row-element containing dropdown-selection.
    var name = component.name;
    var command = component.command;
    var buttons = component.enum_names;
    var select = createParElement(component, 'select', 'select-params');
    select.onfocus = function () {
        select.oldIndex = select.selectedIndex;
    }

    select.oninput = function () {
        if (writePermission && component.title != "device config") {
            var row = select.closest('div');
            row.style.backgroundColor = "orangered";
            // Request for command
            sendCommand(s, command + " " + this.value);
        } else {
            alertify.confirm("", "You are connected with <b>" + clientTitle
                    + "</b>. <br>"
                    + "Are you sure you want to modify things here?",
                    function () {
                        // User decided to proceed.
                        writePermission = true;
                        writePermissionTimeout = setTimeout(function () {
                            writePermission = false;
                        }, 3600000);
                        var row = select.closest('div');
                        row.style.backgroundColor = "orangered";
                        // Request for command
                        sendCommand(s, command + " " + select.value);
                    }, function () {
                        // User decided to cancel
                        select.value = select.options[select.oldIndex].value
                    });
        }
    };

    for (var i = 0; i < buttons.length; i++) {
        var option = document.createElement('option');
        option.type = "enum";
        option.classList.add("option-params");
        option.value = buttons[i].value;
        option.appendChild(document.createTextNode(buttons[i].title));
        select.add(option);
    }
    select.style.display = "none";

    var right = document.createElement('span');
    right.appendChild(select);
    return right;
}

/* ---------------------------------------------------------------------------------- */
// obsolete...

function create_pushbutton_row(component) {
    // Creates row-element containing a push button
    var name = component.name;
    var command = component.command;
    var left = createTitle(component);
    
    left.id = component.name;
    left.name = component.title;

    var right = createParElement(component);
    right.classList.add("clickable", "push-button");

    row = appendToContent(component, left, right);
    right.onclick = function () {
        if (writePermission) {
            var row = left.parentNode;
            right.style.backgroundColor = "orangered";
            // Request for command
            sendCommand(s, command);
        } else {
            prompt = true;
            alertify.confirm("", "You are connected with <b>" + clientTitle
                    + "</b>. <br>"
                    + "Are you sure you want to modify things here?",
                    function () {
                        // User decided to proceed.
                        writePermission = true;
                        writePermissionTimeout = setTimeout(function () {
                            writePermission = false;
                        }, 3600000);
                        var row = left.parentNode;
                        row.style.backgroundColor = "orangered";
                        // Request for command
                        sendCommand(s, command);
                        prompt = false;
                    }, function () {
                        // User decided to cancel
                        prompt = false;
                    });
        }
    }

    row.classList.add("row");
    return row;
}

function create_input_row(component) {
    // Creates row-element containing input-item.
    var name = component.name;
    var command = component.command;
    var left = createTitle(component);

    var input = createParElement(component, 'input', 'input-text');
    input.type = "text";
    input.style.width = "100px";
    input.addEventListener("focus", function(evt) {
        let elm = evt.target;
        setTimeout(function(){elm.setSelectionRange(0, elm.value.length);},0);
    });

    input.onkeydown = function (e) {
        if (e.which === 27 || e.key == "Escape") {
            // User decided to cancel
            input.value = intput.oldValue;
            resizeTextfield(input);
            var row = left.parentNode;
            row.style.backgroundColor = "white";
        }
    }

    input.onfocus = function () {
        input.oldValue = input.value;

        if (isTouchDevice)
            setTimeout(function () {
                posTextfield(s, left);
            }, 1);
    }

    input.onblur = function () {
        if (prompt) {
            return false;
        }
        var row = left.parentNode;
        var value = input.value;
        let oldValue = 'oldValue' in input ? input.oldValue : value;
        if (!('actualValue' in input)) input.actualValue = oldValue;
        actualValue = input.actualValue;
        if (value == actualValue || value == oldValue ||
            parseFloat(value) == parseFloat(actualValue) || parseFloat(value) == parseFloat(oldValue)) {
            input.value = actualValue;
            // nothing to do.
            row.style.backgroundColor = "white";
            return false;
        }
        // User changed value and moved focus to other object.
        alertify.confirm("", "You changed a field without pressing the return key.<br>"
                + "Hint: press ESC for leaving a field unchanged.<b>"
                + "You are connected with <b>" + clientTitle + "</b>.<br>"
                + "Are you sure you want to change the value of<br><b>"
                + name + "</b> from <b>" + actualValue
                + "</b> to <b>" + value + "</b>?", function () {
            // User decided to proceed.
            writePermission = true;
            writePermissionTimeout = setTimeout(function () {
                writePermission = false;
            }, 3600000);
            row.style.backgroundColor = "orangered";
            // Request for command
            sendCommand(s, command + " " + value);
            resizeTextfield(input);
            prompt = false;
        }, function () {
            // User decided to cancel
            input.value = input.actualValue;
            resizeTextfield(input);
            row.style.backgroundColor = "white";
            prompt = false;
        });
    }

    var form = document.createElement('form');
    form.onsubmit = function (e) {
        e.preventDefault();
        if (writePermission) {
            var row = left.parentNode;
            row.style.backgroundColor = "orangered";
            // Request for command
            input.actualValue = input.value;
            sendCommand(s, name + " " + input.value);
            input.blur();
        } else {
            var value = input.value
            prompt = true;
            alertify.confirm("", "You are connected with <b>" + clientTitle
                    + "</b>. <br>"
                    + "Are you sure you want to modify things here?",
                    function () {
                        // User decided to proceed.
                        writePermission = true;
                        writePermissionTimeout = setTimeout(function () {
                            writePermission = false;
                        }, 3600000);
                        var row = left.parentNode;
                        row.style.backgroundColor = "orangered";
                        input.actualValue = value;
                        // Request for command
                        sendCommand(s, command + " " + value);
                        resizeTextfield(input);
                        prompt = false;
                    }, function () {
                        // User decided to cancel
                        input.value = input.oldValue;
                        resizeTextfield(input);
                        prompt = false;
                    });
        }
    };
    form.appendChild(input);
    var right = createParElement(component);
    right.appendChild(form);
    return appendToContent(component, left, right);

    function posTextfield(s, left) {
        if (debug_group_daniel) {
            console.log("%cfunction: posTextfield", "color:white;background:salmon");
        }
    
        // var content = swiper[s].slides[swiper[s].activeIndex].childNodes[1];
        // var row = left.parentNode;
        // content.scrollTop = row.offsetTop - 30;
    
        // ---------------------> Not working anymore since swiper was removed!!!
    }
}

function create_checkbox_row(component) {
    // Creates row-element containing checkbox-item
    var command = component.command;
    var left = createTitle(component);
    var input = createParElement(component, 'input', 'parameter-checkbox');
    input.type = "checkbox";
    input.onkeyup = function (e) {
        if (e.keyCode === 32) {
            handleCheckbox();
        }
    }

    var label = document.createElement('label');
    label.for = input;
    label.classList.add("parameter-label");

    label.onclick = function () {
        handleCheckbox();
    }

    function handleCheckbox() {
        if (writePermission) {
            var row = left.parentNode;
            row.style.backgroundColor = "orangered";
            if (input.checked) {
                var value = "0";
                input.checked = false;
            } else {
                var value = "1";
                input.checked = true;
            }
            // Request for command
            sendCommand(s, command + " " + value);
        } else {
            alertify.confirm("", "You are connected with <b>" + clientTitle
                    + "</b>. <br>"
                    + "Are you sure you want to modify things here?",
                    function () {
                        // User decided to proceed.
                        writePermission = true;
                        writePermissionTimeout = setTimeout(function () {
                            writePermission = false;
                        }, 3600000);
                        var row = left.parentNode;
                        row.style.backgroundColor = "orangered";
                        if (input.checked) {
                            var value = "0";
                            input.checked = false;
                        } else {
                            var value = "1";
                            input.checked = true;
                        }
                        // Request for command
                        sendCommand(s, command + " " + value);
                    }, function () {
                        // User decided to cancel
                    });
        }
    };

    var right = document.createElement('span');
    right.classList.add("col-right");
    right.appendChild(input);
    right.appendChild(label);
    return appendToContent(component, left, right);
}

function create_enum_row(component) {
    // Creates row-element containing dropdown-selection.
    var name = component.name;
    var command = component.command;
    var buttons = component.enum_names;
    var left = createTitle(component);
    var select = createParElement(component, 'select', 'select-params');
    select.onfocus = function () {
        select.oldIndex = select.selectedIndex;
    }

    select.oninput = function () {
        if (writePermission && component.title != "device config") {
            var row = left.parentNode;
            row.style.backgroundColor = "orangered";
            // Request for command
            sendCommand(s, command + " " + this.value);
        } else {
            alertify.confirm("", "You are connected with <b>" + clientTitle
                    + "</b>. <br>"
                    + "Are you sure you want to modify things here?",
                    function () {
                        // User decided to proceed.
                        writePermission = true;
                        writePermissionTimeout = setTimeout(function () {
                            writePermission = false;
                        }, 3600000);
                        var row = left.parentNode;
                        row.style.backgroundColor = "orangered";
                        // Request for command
                        sendCommand(s, command + " " + select.value);
                    }, function () {
                        // User decided to cancel
                        select.value = select.options[select.oldIndex].value
                    });
        }
    };

    for (var i = 0; i < buttons.length; i++) {
        var option = document.createElement('option');
        option.type = "enum";
        option.classList.add("option-params");
        option.value = buttons[i].value;
        option.appendChild(document.createTextNode(buttons[i].title));
        select.add(option);
    }
    select.style.display = "none";

    var right = document.createElement('span');
    right.classList.add("col-right");
    right.appendChild(select);
    return appendToContent(component, left, right);
}

// ...obsolete
/* ---------------------------------------------------------------------------------- */
// The following two functions seem unreachable

/* ########## Is this function used? How? Where? ########## */
function create_group_row(component) {
    // Creates row-element containing link.
    var title = component.title;
    var row = document.createElement('row');
    row.id = component.name;
    row.name = title;
    row.classList.add("interactive", "row", "link");
    row.tabIndex = "0";

    console.log('createGroupRow');

    row.onclick = function () {
        var slideNames = getSlideNames();
        slideNames[0] = component.name;
        document.title = "SEA "+ clientTitle + " " + slideNames.join(" ");
        history.pushState({func: "gotoGroups", funarg: slideNames.join("%20")}, document.title, "#" + slideNames.join("%20"));
        getGroup(s, component.name);
    }

    if (title === "console" || title === "device config") {
        row.classList.add("interactive", "row", "link", "link-static");
        row.innerHTML = "console";
    }
    row.innerHTML = title;
    return row;
}

/* ########## Is this function used? How? Where? ########## */
function create_rdonly_row(component) {
    // Creates row-element containing link AND read-only-item.
    var link = component.link;
    if (!link)  // simple rdonly
        return appendToContent(component, createTitle(component),
                               createParElement(component));

    // with link
    var left = document.createElement('a');
    left.classList.add("col-left");
    left.innerHTML = component.title;

    console.log('ccc')

    left.id = component.name;
    left.name = component.title;
    left.classList.add("interactive", "link");

    row = appendToContent(component, left, createParElement(component));
    row.onclick = function () {
        this.style.backgroundColor = "orangered";
        left.click();
    }
    if (link.charAt(0) == ':') {
      left.href = "http://" + location.hostname + link + "/";
    } else {
      left.href = link;
    }

    row.classList.add("row", "clickable");
    return row;
}

/* ---------------------------------------------------------------------------------- */

function createTitle(component, modules) {
    // Creates left side of row-tag containing title. Title may hold additional
    // information, which is shown, when title-tag is clicked.
    // At the modules-block a status-icon is added

    var left = document.createElement('span');
    // if (component.info) {
    //     left.classList.add("col-left", "event-toggle-info");

    //     left.onclick = function () {
    //         var infoBox = left.parentNode.childNodes[0];
    //         if (infoBox.style.display == "none") {
    //             infoBox.style.display = "block";
    //         } else {
    //             infoBox.style.display = "none";
    //         }
    //     }

    //     left.innerHTML = component.title + "<sup><b>(i)</b></sup>";
    // }

    var title = component.title;
    if (modules) {
        var icon_status = '<img name = ' + title + ':status class = "modules-icon status-icon" src="res/icon_status.png">';
        if (component.statusname) {
            left.innerHTML = icon_status;
        }
        left.innerHTML += '<span class = "modules-title">' + title + '</span>';
        if (component.statusname) {
            let name = title + '-info'
            left.innerHTML += '<span name = ' + name + ' class = "status-info"></span>';
        }
    } else {
        left.innerHTML = component.title;
    }
    return left;
}

function createParElement(component, tag='span', cls='col-right-modules') {
    var right = document.createElement(tag);
    if (cls)
        right.classList.add(cls);
    // right.name = is not sufficient, getElementsByName would not work
    right.setAttribute('name', component.name);
    // Add DOM-property
    right.__ctype__ = component.type;
    right.classList.add(component.type);
    return right;
}

function appendToContent(component, left, right, edit) {
    // Creates row-tag containing infoBox (not visible by default), left side
    // (span) and right side (span).
    var row = document.createElement('div');
    row.classList.add("row");
    if (component.info) {
        row.appendChild(createInfo(component));
    }
    row.appendChild(left);
    row.appendChild(right);
    if (edit) {
        row.appendChild(edit);
    }
    return row;

    function createInfo(component) {
        // Creates info-box, which isn't visible by default but can be displayed.
        var infoBox = document.createElement('div');
        infoBox.classList.add("info-box");
    
        infoBox.onclick = function () {
            infoBox.style.display = "none";
        }
    
        infoBox.innerHTML = component.info;
        return infoBox;
    }
}

/* ---------------------------------------------------------------------------------- */

function appendToGridElement(s, title, type, content) {
    var panel = document.createElement('div');
    panel.classList.add("panel");

    titlewrapper = document.createElement('span');
    titlewrapper.innerHTML = title;
    panel.appendChild(titlewrapper);

    var gridContainer = document.createElement('div');
    gridContainer.classList.add("grid-container");
    // Store type so it can be found easiely later.
    gridContainer.slideType = type;
    gridContainer.appendChild(panel);
    gridContainer.appendChild(content);

    var gridelements = document.getElementsByClassName('grid-element');
                    gridelements[s].innerHTML = "";
                    gridelements[s].appendChild(gridContainer);
}

/* ---------------------------------------------------------------------------------- */

function resizeTextfield(input) {
    if (input.value.length > input.size * 12 / 20) {
        var str0 = window.getComputedStyle(input).fontSize;
        var str1 = str0.substring(0, str0.length - 2);
        if (input.value.length < 43) {
            input.style.width = input.value.length * str1 * 12 / 20 + "px";
        }
    } else {
        input.style.width = "100px";
    }
}