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

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

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

function getGroup(s, name) {
    var found = false;
    if (name == "") {
      swiper[s].slideTo(defaultSlidePos(s));
      return;
    }
    for (var i = 0; i < swiper[s].slides.length; i++) {
        var slideType = swiper[s].slides[i].getAttribute("slide-type");
        if (slideType == name) {
            found = true;
            swiper[s].slideTo(i);
        }
    }
    if (!found && name != "console" && name != "graphics") {
        // Server-request for group.
        reqJSON(s, "http://" + hostPort + "/getblock?path=" + name
                + "&id=" + clientID, successHandler, errorHandler);
    }
}

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

function createContent(s, 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.setAttribute("class", "content");
    // Process components of the message
    for (var i = 0; i < message.components.length; i++) {
        var component = message.components[i];
        var name = component.name;
        var type = component.type;
        var title = name;
        if ("title" in component)
            title = component.title;
        var info = component.info;
        switch (type) {
        case "group":
            content.appendChild(createLink(s, name, title));
            break;
        case "rdonly":
            if ("link" in component) {
              content.appendChild(createReadOnlyInstrLink(s, name, title,
                    component.link, info));
            } else {
              content.appendChild(createReadOnly(s, name, title, info));
            }
            break;
        case "rdlink":
            content.appendChild(createReadOnlyGroupLink(s, name, title, info));
            break;
        case "input":
            content.appendChild(createInput(s, name, title,
                    info));
            break;
        case "checkbox":
            content.appendChild(createCheckbox(s, name, title,
                    info));
            break;
        case "enum":
            content.appendChild(createSelection(s, name, title,
                    component.enum_names, info));
            break;
        case "pushbutton":
            console.log(component);
            console.log(component.info);
            content.appendChild(createPushButton(s, name, title,
                    info));
            break;
        default:
            break;
        }
    }
    return content;
}

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 createLink(s, name, title) {
    // Creates row-element containing link.

    var row = document.createElement('row');
    row.setAttribute("id", name);
    row.setAttribute("name", title);
    row.setAttribute("class", "interactive row link");
    row.setAttribute("tabindex", 0);

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

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

function createReadOnly(s, name, title, info) {
    // Creates row-element containing read-only-item.

    var left = createTitle(title, info);

    var right = document.createElement('span');
    right.setAttribute("class", "col-right");
    right.setAttribute("name", name);
    right.setAttribute("__ctype__", "rdonly");

    return appendToContent(info, left, right);
}

function createReadOnlyGroupLink(s, name, title, info) {
    // Creates row-element containing link AND read-only-item.
    // for secop

    var left = createTitle(title, info);

    left.setAttribute("id", name);
    left.setAttribute("name", title);
    left.setAttribute("class", "interactive link");

    left.onclick = function () {
        getGroup(s, title);
    }

    var right = document.createElement('span');
    right.setAttribute("class", "col-right");
    right.setAttribute("name", name);
    right.setAttribute("__ctype__", "rdonly");

    return appendToContent(info, left, right);
}

function createReadOnlyInstrLink(s, name, title, link, info) {
    // Creates row-element containing link AND read-only-item.

    // var left = createTitle(title, info);
    var left = document.createElement('a');
    left.setAttribute("class", "col-left");
    left.innerHTML = title;

    left.setAttribute("id", name);
    left.setAttribute("name", title);
    left.setAttribute("class", "interactive link");

    var right = document.createElement('span');
    right.setAttribute("class", "col-right");
    right.setAttribute("name", name);
    right.setAttribute("__ctype__", "rdonly");

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

    row.setAttribute("class", "row clickable");
    return row;
}

function createPushButton(s, name, title, info) {
    // Creates row-element containing a push button

    var left = createTitle(title, info);
    console.log(info);
    
    left.setAttribute("id", name);
    left.setAttribute("name", title);

    var right = document.createElement('span');
    right.setAttribute("class", "col-right clickable push-button");
    right.setAttribute("name", name);
    right.setAttribute("__ctype__", "rdonly");

    row = appendToContent(info, left, right);
    right.onclick = function () {
        if (writePermission) {
            var row = left.parentNode;
            right.style.backgroundColor = "orangered";
            // Request for command
            sendCommand(s, name);
        } 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, name);
                        prompt = false;
                    }, function () {
                        // User decided to cancel
                        prompt = false;
                    });
        }
    }

    row.setAttribute("class", "row");
    return row;
}

function createInput(s, name, title, info) {
    // Creates row-element containing input-item.

    if (info) {
        var infoBox = createInfo(title, info);
    }
    var left = createTitle(title, info);

    var input = document.createElement('input');
    input.setAttribute("type", "text");
    input.setAttribute("class", "input-text");
    input.setAttribute("name", name);
    input.setAttribute("__ctype__", "input");
    input.style.width = "100px";

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

    input.onfocus = function () {
        input.setAttribute("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;
        var oldValue = input.getAttribute("oldValue") || value;
        if (!input.hasAttribute("actualValue")) {
            input.setAttribute("actualValue", oldValue);
        }
        var actualValue = input.getAttribute("actualValue");
        if (value === actualValue || value === 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, name + " " + value);
            resizeTextfield(input);
            prompt = false;
        }, function () {
            // User decided to cancel
            input.value = input.getAttribute("actualValue");
            resizeTextfield(input);
            row.style.backgroundColor = "white";
            prompt = false;
        });
    }

    var form = document.createElement('form');
    form.onsubmit = function (e) {
        e.preventDefault();
        // remove following check: sometimes we want to send a command even with an unchanged value
        //if (input.value === input.getAttribute("oldValue")) {
        //    // nothing to do.
        //    return false;
        //}
        if (writePermission) {
            var row = left.parentNode;
            row.style.backgroundColor = "orangered";
            // Request for command
            sendCommand(s, name + " " + input.value);
        } 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";
                        // Request for command
                        sendCommand(s, name + " " + value);
                        resizeTextfield(input);
                        prompt = false;
                    }, function () {
                        // User decided to cancel
                        input.value = input.getAttribute("oldValue");
                        resizeTextfield(input);
                        prompt = false;
                    });
        }
    };
    form.appendChild(input);

    var right = document.createElement('span');
    right.setAttribute("class", "col-right");
    right.appendChild(form);
    return appendToContent(info, left, right);
}

function posTextfield(s, left) {
    var content = swiper[s].slides[swiper[s].activeIndex].childNodes[1];
    var row = left.parentNode;
    content.scrollTop = row.offsetTop - 30;
}

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

function createCheckbox(s, name, title, info) {
    // Creates row-element containing checkbox-item

    var left = createTitle(title, info);

    var input = document.createElement('input');
    input.setAttribute("type", "checkbox");
    input.setAttribute("name", name);
    input.setAttribute("__ctype__", "checkbox");
    input.setAttribute("class", "parameter-checkbox");

    input.onkeyup = function (e) {
        if (e.keyCode === 32) {
            handleCheckbox();
        }
    }

    var label = document.createElement('label');
    label.setAttribute("for", input);
    label.setAttribute("class", "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, name + " " + 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, name + " " + value);
                    }, function () {
                        // User decided to cancel
                    });
        }
    };

    var right = document.createElement('span');
    right.setAttribute("class", "col-right");
    right.appendChild(input);
    right.appendChild(label);
    return appendToContent(info, left, right);
}

function createSelection(s, name, title, buttons, info) {
    // Creates row-element containing dropdown-selection.

    var left = createTitle(title, info);

    var select = document.createElement('select');
    select.setAttribute("name", name);
    select.setAttribute("__ctype__", "enum");
    select.setAttribute("class", "select-params");

    select.onfocus = function () {
        select.setAttribute("oldIndex", select.selectedIndex);
    }

    select.oninput = function () {
        if (writePermission && title != "device config") {
            var row = left.parentNode;
            row.style.backgroundColor = "orangered";
            // Request for command
            sendCommand(s, name + " " + 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, name + " " + select.value);
                    }, function () {
                        // User decided to cancel
                        select.value = select.options[select
                                .getAttribute("oldIndex")].value;
                    });
        }
    };

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

    var right = document.createElement('span');
    right.setAttribute("class", "col-right");
    right.appendChild(select);
    return appendToContent(info, left, right);
}

function createTitle(title, info) {
    // Creates left side of row-tag containing title. Title may hold additional
    // information, which is shown, when title-tag is clicked.

    var left = document.createElement('span');
    if (info) {
        left.setAttribute("class", "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 = title + "<sup><b>(i)</b></sup>";
    } else {
        left.setAttribute("class", "col-left");
        left.innerHTML = title;
    }
    return left;
}

function createInfo(info) {
    // Creates info-box, which isn't visible by default but can be displayed.

    var infoBox = document.createElement('div');
    infoBox.setAttribute("class", "info-box");

    infoBox.onclick = function () {
        infoBox.style.display = "none";
    }

    infoBox.innerHTML = info;
    return infoBox;
}

function appendToContent(info, left, right) {
    // Cretees row-tag containing infoBox (not visible by default), left side
    // (span)
    // and right side (span).

    var row = document.createElement('div');
    row.setAttribute("class", "row");
    if (info) {
        row.appendChild(createInfo(info));
    }
    for (var i = 1; i < arguments.length; i++)
        if (arguments[i]) {
            row.appendChild(arguments[i]);
        }
    return row;
}