var positioning = "rel";
var dad = "classic"
var mainMode = "desc_input";

var textMaxLength = 0;
var textMaxChars = 0;
var currentEditor = null;

function resetAll() {

    $("#editForms section").remove();
    

    $(".droparea").remove();
    $("#dragbase .draggable").remove();
    document.getElementById("edit_title").innerHTML = ""
    document.getElementById("edit_task").innerHTML = ""
    $("#img_placeholder img").remove();
    $("#img_placeholder svg").remove();
    
    var bgInit = document.getElementById("bg-init");
    bgInit.style.display = "block";

    $("#tabs").tabs("option", "active", 0);
    
    actualDraggable = null;
    draggable_count = 0;
    
}

function confirmReset() {
    if (window.confirm("Všechny popisky budou smazány. Opravdu pokračovat?")) {
        resetAll()
    }
}

function gotoMainSelect() {
    document.getElementById("main_select").style.display = "block"
    document.getElementById("edit_panes").style.display = "none"
}

function setMode(mode) {
    //resetAll()

    
    document.getElementById("edit_panes").style.display = "block"

    mainMode = mode;

    
    switch (mode) {


    case "desc_input":

        document.getElementById("form_absolute").style.display = "block"
        document.getElementById("mainmode_input").checked = true;

        break;

    case "desc_dad":

        document.getElementById("form_absolute").style.display = "block"
        document.getElementById("mainmode_dad").checked = true;


        //document.getElementById("textValue").style.display = "block"
        break;


    default:
        break;
    }
    
    var activeTab = $( "#tabs" ).tabs( "option", "active" );
    if (activeTab == 1) generatePreview();
    if (activeTab == 2) generateCode();
    
}

function setDad(val) {
    dad = val;

    if (val == "dad") {
        document.getElementById("dragbase").style.display = "block";
    } else {
        document.getElementById("dragbase").style.display = "none";
    }
}

// The instanceReady event is fired, when an instance of CKEditor has finished
// its initialization.

CKEDITOR.on('instanceReady', function (ev) {
    // Show the editor name and description in the browser status bar.
    document.getElementById('eMessage').innerHTML = 'Instance <code>' + ev.editor.name + '<\/code> loaded.';

    // Show this sample buttons.
    //document.getElementById( 'eButtons' ).style.display = 'block';
});

var configEdit = {
    allowedContent: true,
    toolbar: [
        {
            name: 'basicstyles',
            groups: ['basicstyles', 'cleanup'],
            items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']
        },
     ['NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],
     ['FontSize', 'TextColor', 'BGColor'],
        {
            name: 'paragraph',
            groups: ['indent', 'blocks', 'align'],
            items: ['Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
        },
        {
            name: 'insert',
            items: ['Table', 'HorizontalRule', 'SpecialChar']
        },
      ['NewPage']
    ],
    on: {
        focus: onFocus,
        blur: onBlur,


        selectionChange: function (evt) {
            document.getElementById("testitem_content").style.display = "none";
            var selected = evt.editor.getSelection().getStartElement().$
            var name = selected.nodeName.toLowerCase()
            document.getElementById('eMessage').innerHTML = selected.nodeName + "." + selected.className
                // document.getElementById("txtArea").value = selected.nodeName.toLocaleLowerCase() + "." + selected.className
            if (selected.className.indexOf("testitem") > -1) {
                if (name == "img") {
                    var novy = document.createElement("span");
                    novy.className = selected.className;
                    var obsah = "text"
                    if (selected.hasAttribute("data-type") && selected.getAttribute("data-type") == "n") obsah = "123"
                    novy.innerHTML = "<span class='option' data-type='" + selected.getAttribute("data-type") + "'>" + obsah + "</span>";
                    selected.parentNode.insertBefore(novy, selected);
                    selected.parentNode.removeChild(selected);

                }
            }
            if (name == "span" && selected.className == "option") {
                actSelected = selected.parentNode; //alert("Option")
                readTestitem(selected.parentNode);
            }
            if (name == "span" && selected.className.indexOf("testitem") > -1) {
                actSelected = selected;
                readTestitem(selected);

            }
            if (name == "textarea" && selected.className.indexOf("testitem") > -1) {
                actSelected = selected;
                readTestitem(selected);

            }


            document.getElementById('eMessage').innerHTML = name + "." + selected.$.className

        }

    }
};

function InsertHTML(content) {
    // Get the editor instance that we want to interact with.
    var editor = CKEDITOR.currentInstance; //instances.editor1;


    // Check the active editing mode.
    if (editor.mode == 'wysiwyg') {
        // Insert HTML code.
        // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml
        editor.insertHtml(content);
    } else
        alert('You must be in WYSIWYG mode!');


}

var actSelected = null;

function changeValue(evt) {
    var input = evt.currentTarget
    var change = parseInt(input.getAttribute("data-change"))


    var cil = input.parentNode.querySelector("input");
    var min = parseInt(cil.getAttribute("data-min"));
    var max = parseInt(cil.getAttribute("data-max"));
    var target = cil.getAttribute("data-target");
    var current = parseInt(cil.value);

    var newValue = Math.max(min, current + change);
    newValue = Math.min(max, newValue);

    actSelected.setAttribute(target, newValue);
    cil.value = newValue
}

function generateCode() {
    var q_content;
    if (mainMode == "desc_input") q_content = getDescInputCode();
    if (mainMode == "desc_dad") q_content = getDescDadCode();

    var qTitle = document.getElementById("edit_title").innerHTML;
    if (qTitle == "Titulek otázky") qTitle = "";

    var qTask = document.getElementById("edit_task").innerHTML;
    if (qTask == "Zadání otázky") qTask = "";

    var vystup = "<HTML>\n<style type=\"text/css\"> @import \"/do/rek/el/storage/styles/testovy.css\"; <\/style>\n";
    var classDAD = " desc_input";
    if (mainMode == "desc_dad") {
        vystup += "<style type=\"text/css\"> @import \"/do/rek/el/storage/utils/jquery-ui/jquery-ui_min.css\"; </style>\n" + 
         "<script src=\"/do/rek/el/storage/utils/jquery/jquery-2.2.4.min.js\" type=\"text/javascript\"></script>" + 
          "<script src=\"/do/rek/el/storage/utils/jquery-ui/jquery-ui_min.js\" type=\"text/javascript\"></script>" + 
        "<script src=\"/do/rek/el/storage/utils/jquery-ui/jquery_ui_touch-punch.js\" type=\"text/javascript\"></script>" + 
        "<script src=\"/do/rek/el/storage/utils/dad/dragAndDrop_07.js\" type=\"text/javascript\"></script>\n";
        classDAD = " dad_move_sc"
    }


    vystup += "<div class=\"question" + classDAD + "\">\n"


    if (qTitle != "") vystup += "<div class=\"title\">" + qTitle + "<\/div>\n"
    if (qTask != "") vystup += "<div class=\"task\">" + qTask + "<\/div>\n"

    if (mainMode == "desc_dad") {
        vystup += "<div class=\"dragbase\">\n";
        var spans = q_content.draggables //document.querySelectorAll("#dragbase span")
        for (var i = 0; i < spans.length; i++) {
            vystup += "<span class=\"draggable\" draggable=\"true\">" + spans[i] + "</span>\n"
        }
        vystup += "<\/div>\n"
    }


    vystup += "<div class=\"content\">\n"
    vystup += q_content.content + "\n<\/div>\n<\/div>\n"

    vystup += q_content.ok + "\n";
    vystup = vystup.replace(/table\>\s+\<tbody/g, "table><tbody")
    vystup = vystup.replace(/tbody\>\s+\<tr/g, "tbody><tr")
    vystup = vystup.replace(/tr>\s+\<tr/g, "tr><tr")
    vystup = vystup.replace(/tr>\s+\<td/g, "tr><td")
    vystup = vystup.replace(/td>\s+\<td/g, "td><td")
    vystup = vystup.replace(/td>\s+\<\/tr/g, "td></tr")
    vystup = vystup.replace(/tr>\s+\<\/tbody/g, "tr><\/tbody")
    vystup = vystup.replace(/tbody>\s+\<\/table/g, "tbody><\/table")
    vystup = vystup.replace(/t([dh]) style="[^"]+"/g, "t$1");
    
    //auth/noauth mody
    
    var isAuth = document.getElementById("mode_auth").checked;
    if (isAuth) {
        vystup = vystup.replace(/http:\/\/is\.slu\.cz\//g, "https://is.slu.cz/auth/");
    }
    else {
        vystup = vystup.replace(/https:\/\/is\.slu\.cz\/auth\//g, "/");
    }
   
    $('#code_shower').val(vystup)

}


var DADSorting = {
    getPreview: function () {
        var result = {
            content: ""
        }
        var obsah = document.createElement("div");
        obsah.innerHTML = CKEDITOR.instances.editor1.getData();

        var tis = obsah.querySelectorAll(".testitem");

        for (var i = 0; i < tis.length; i++) {
            var type = tis[i].getAttribute("data-type");
            var opts = tis[i].querySelectorAll(".option");

            if (type == "t") {
                var newTi = document.createElement("input");
                newTi.setAttribute("style", "width: " + textMaxLength + "px;")
                newTi.type = "text";
                newTi.value = ""

                tis[i].parentNode.insertBefore(newTi, tis[i]);
                tis[i].parentNode.removeChild(tis[i])
            }

            if (type == "v") {
                var newTi = document.createElement("select");
                newTi.appendChild(document.createElement("option"))
                for (var j = 0; j < opts.length; j++) {
                    var opt = newTi.appendChild(document.createElement("option"));
                    opt.innerHTML = opts[j].innerHTML

                }

                tis[i].parentNode.insertBefore(newTi, tis[i]);
                tis[i].parentNode.removeChild(tis[i])
            }

        }
        result.content = obsah.innerHTML
        return result;
    },

    getCode: function () {
        var result = {
            content: "",
            ok: ""
        }
        var obsah = document.createElement("div");
        obsah.innerHTML = CKEDITOR.instances.editor1.getData();

        var ti_counts = {
            a: 0,
            c: 0,
            l: 0,
            m: 0,
            n: 0,
            r: 0,
            s: 0,
            t: 0,
            v: 0
        }

        var t_ = "";
        for (var i = 0; i < textMaxChars; i++) t_ += "_"

        var tis = obsah.querySelectorAll(".testitem");

        for (var i = 0; i < tis.length; i++) {
            var type = tis[i].getAttribute("data-type");
            var opts = tis[i].querySelectorAll(".option");
            ti_counts[type] ++;

            if (type == "t") {
                for (var j = 0; j < opts.length; j++) {
                    var score = opts[j].getAttribute("data-score");
                    result.ok += ":t" + ti_counts[type] + "=\"" + opts[j].innerHTML + "\" ok " + score + "\n"
                }
                var ti_replace = " :t" + ti_counts[type] + t_ + " "
                tis[i].parentNode.insertBefore(document.createTextNode(ti_replace), tis[i]);
                tis[i].parentNode.removeChild(tis[i])
            }
            if (type == "v") {
                for (var j = 0; j < opts.length; j++) {
                    var score = opts[j].getAttribute("data-score");
                    var is_ok = (opts[j].hasAttribute("data-correct") && opts[j].getAttribute("data-correct") == "ok") ? " ok " : " "
                    result.ok += ":v" + (j + 1) + String.fromCharCode(96 + ti_counts[type]) + "=\"" + opts[j].innerHTML + "\" " + is_ok + score + "\n"
                }
                var ti_replace = " :v1" + String.fromCharCode(96 + ti_counts[type]) + " "
                tis[i].parentNode.insertBefore(document.createTextNode(ti_replace), tis[i]);
                tis[i].parentNode.removeChild(tis[i])
            }

        }

        result.content = obsah.innerHTML
        return result;
    }


}

function getDescInputCode() {
    var result = {
        content: "",
        ok: "",
        draggables: []
    }


    var ti_counts = {a: 0,c: 0,l: 0,m: 0,n: 0,r: 0,s: 0,t: 0,v: 0}
    var t_ = "";
    for (var i = 0; i < textMaxChars; i++) t_ += "_"

    //var bgImage = document.querySelector("#img_placeholder img");
    if (!bgImage || bgImage.src == "") {
        alert("Chybí podkladový obrázek otázky!")
        return "\n\n\nChybí podkladový obrázek otázky!\n\n\n"
    }
    result.content += "<div class=\"popisovaci\" style=\"position: relative; width: " + bgImage.width + "px; height: " + bgImage.height + "px; \">\n"
    result.content += "<img src=\"" + bgImage.src + "\" alt=\"Podkladový obrázek\" width=\"" + bgImage.width + "\" height=\"" + bgImage.height + "\" style=\"position: absolute; left: 0px; top: 0px; \"/>\n"

    var svg = document.querySelector("#img_placeholder svg");
    var svgOut = ""
    var lines = svg.querySelectorAll("line");
    if (lines.length > 0) {
        svgOut += "<svg width=\"100%\" height=\"100%\" style=\"position: absolute; top: 0; left: 0\">"
        var lineStyle = (lines[0].hasAttribute("style")) ? " style=\"" + lines[0].getAttribute("style") + "\"" : ""
        svgOut += "<g" + lineStyle + ">"

        for (var i = 0; i < lines.length; i++) {
            var line = lines[i]
            var x1 = Math.round(parseFloat(line.getAttribute("x1")));
            var y1 = Math.round(parseFloat(line.getAttribute("y1")));
            var x2 = Math.round(parseFloat(line.getAttribute("x2")));
            var y2 = Math.round(parseFloat(line.getAttribute("y2")));
            svgOut += "<line x1=\"" + x1 + "\" y1=\"" + y1 + "\" x2=\"" + x2 + "\" y2=\"" + y2 + "\" />\n"
        }
        svgOut += "</g>"
        svgOut += "</svg>\n";
    }

    result.content += svgOut;

    var tis = document.querySelectorAll("#qArea .droparea span");
    for (var i = 0; i < tis.length; i++) {
        var type = "t" //tis[i].getAttribute("data-type");

        ti_counts[type] ++;

        if (type == "t") {
            var score = 1;
            
            var sprs = tis[i].innerHTML.split(/\<br\>/g);
            console.log("Source split: " + sprs)
            for (var j = 0; j < sprs.length; j++) {
                var spr = sprs[j].trim();
                if (spr != "") {
                  result.ok += ":t" + ti_counts[type] + "=\"" + spr + "\" ok\n"
                }
            }
            
            //result.ok += ":t" + ti_counts[type] + "=\"" + tis[i].innerHTML + "\" ok\n" // " + score + "
            var positionTop = getStylePos(tis[i].parentNode.style.top);
            
            var positionLeft = getStylePos(tis[i].parentNode.style.left);
            
            result.content += "<div class=\"popis-t\" style=\"background-color: #ccd; text-align: left; position: absolute; top: " + positionTop + "px; left: " + positionLeft + "px\">"
            result.content += " :t" + ti_counts[type] + t_ + " "
            result.content += "</div>\n"


        }


    }


    return result;
}

// parsovani hodnoty pozice -- top, bottom, left, right;
function getStylePos(property) {
    var result = property;
    result = Math.round(parseFloat(result.substring(0, result.indexOf("px"))))
    return result;
}

function getDescDadCode() {
    var result = {
        content: "",
        ok: "",
        draggables: []
    }


    var ti_counts = {a: 0,c: 0,l: 0,m: 0,n: 0,r: 0,s: 0,t: 0,v: 0}

    var t_ = "";
    for (var i = 0; i < textMaxChars; i++) t_ += "_"


    //var bgImage = document.querySelector("#img_placeholder img");
    if (!bgImage.src || bgImage.src == "") {
        alert("Chybí podkladový obrázek otázky!")
        return "\n\n\nChybí podkladový obrázek otázky!\n\n\n"
    }
    result.content += "<div class=\"popisovaci\" style=\"position: relative; width: " + bgImage.width + "px; height: " + bgImage.height + "px; \">\n"
    result.content += "<img src=\"" + bgImage.src + "\" alt=\"Podkladovy obrazek\" width=\"" + bgImage.width + "\" height=\"" + bgImage.height + "\" style=\"position: absolute; left: 0px; top: 0px; \"/>\n"
    
    var svg = document.querySelector("#img_placeholder svg");
    var svgOut = ""
    var lines = svg.querySelectorAll("line");
    if (lines.length > 0) {
        svgOut += "<svg width=\"100%\" height=\"100%\" style=\"position: absolute; top: 0; left: 0\">"
        var lineStyle = (lines[0].hasAttribute("style")) ? " style=\"" + lines[0].getAttribute("style") + "\"" : ""
        svgOut += "<g" + lineStyle + ">"

        for (var i = 0; i < lines.length; i++) {
            var line = lines[i]
            var x1 = Math.round(parseFloat(line.getAttribute("x1")));
            var y1 = Math.round(parseFloat(line.getAttribute("y1")));
            var x2 = Math.round(parseFloat(line.getAttribute("x2")));
            var y2 = Math.round(parseFloat(line.getAttribute("y2")));
            svgOut += "<line x1=\"" + x1 + "\" y1=\"" + y1 + "\" x2=\"" + x2 + "\" y2=\"" + y2 + "\" />\n"
        }
        svgOut += "</g>"
        svgOut += "</svg>\n";
    }

    result.content += svgOut;

    var tis = document.querySelectorAll("#qArea .droparea span");
    for (var i = 0; i < tis.length; i++) {
        var type = "t" //tis[i].getAttribute("data-type");

        ti_counts[type] ++;

        if (type == "t") {
            var score = 1;
            var sprs = tis[i].innerHTML.split(/\<br\>/g);
            console.log("Source split: " + sprs)
            for (var j = 0; j < sprs.length; j++) {
                var spr = sprs[j].trim();
                if (spr != "") {
                  result.ok += ":t" + ti_counts[type] + "=\"" + spr + "\" ok\n"
                  result.draggables.push(spr)
                }
            }
            
             // " + score + "
            

            var positionTop = tis[i].parentNode.style.top;
            positionTop = Math.round(parseFloat(positionTop.substring(0, positionTop.indexOf("px"))))
            var positionLeft = tis[i].parentNode.style.left;
            positionLeft = Math.round(parseFloat(positionLeft.substring(0, positionLeft.indexOf("px"))));
                //positionTop += 8
            result.content += "<div class=\"popis-t droparea_move_sc\" style=\"position: absolute; top: " + positionTop + "px; left: " + (positionLeft - 0) + "px;width: " + (Math.round(textMaxLength + 0)) + "px\">"
            result.content += " :t" + ti_counts[type] + t_ + " "
            result.content += "</div>\n"


        }


    }
    result.content += "</div>\n"

    return result;
}




function generatePreview() {
    var q_content;
    if (mainMode == "desc_input") q_content = getDescInputPreview();
    if (mainMode == "desc_dad") q_content = getDescDadPreview();

    var qTitle = document.getElementById("edit_title").innerHTML;
    if (qTitle == "Titulek otázky") qTitle = "";

    var qTask = document.getElementById("edit_task").innerHTML;
    if (qTask == "Zadání otázky") qTask = "";

    var vystup = "";
    var classDAD = "";
    if (mainMode.indexOf("dad") > -1) {
        vystup += "<script src=\"https://is.muni.cz/do/rect/el/storage/utils/dad/EventHelpers.js\" type=\"text/javascript\"><\/script>\n";
        vystup += "<script src=\"https://is.muni.cz/do/rect/el/storage/utils/dad/DragDropHelpers.js\" type=\"text/javascript\"><\/script>\n";
        vystup += "<script src=\"https://is.muni.cz/do/rect/el/storage/utils/dad/dragAndDrop_05.js\" type=\"text/javascript\"><\/script>\n";
        classDAD = " dad_move_sc";
    }


    vystup += "<div class=\"question" + classDAD + "\">\n"
    if (qTitle != "") vystup += "<div class=\"title\">" + qTitle + "<\/div>\n"
    if (qTask != "") vystup += "<div class=\"task\">" + qTask + "<\/div>\n"
    if (mainMode == "gap_dad" || mainMode == "desc_dad") {
        vystup += "<div class=\"dragbase\">\n";
        var spans = q_content.draggables;
        for (var i = 0; i < spans.length; i++) {
            vystup += "<span class=\"draggable\" draggable=\"true\">" + spans[i] + "</span>\n";
        }
        vystup += "<\/div>\n";
    }


    vystup += "<div class=\"content\">\n";

    vystup += q_content.content;

    vystup = vystup.replace(/td style="[^"]+"/g, "td");
    vystup += "\n<\div>\n</div>\n";

    if (mainMode.indexOf("dad") > -1) {
        vystup += "<p><script>updateDraggables();DragDropHelpers.fixVisualCues = true</script></p>\n";
    }


    document.getElementById("preview_content").innerHTML = vystup;
    updateDraggables();
    DragDropHelpers.fixVisualCues = true;

}

function getDescInputPreview() {
    var result = {
        content: "",
        ok: "",
        draggables: []
    }
    //var bgImage = document.querySelector("#img_placeholder img");
    if (!bgImage.src || bgImage.src == "") {
        alert("Chybí podkladový obrázek otázky!")
        return "\n\n\nChybí podkladový obrázek otázky!\n\n\n"
    }
    result.content += "<div class=\"popisovaci\" style=\"position: relative; width: " + bgImage.width + "px; height: " + bgImage.height + "px; \">\n"
    result.content += "<img src=\"" + bgImage.src + "\" alt=\"Podkladový obrázek\" width=\"" + bgImage.width + "\" height=\"" + bgImage.height + "\" style=\"position: absolute; left: 0px; top: 0px; \"/>\n";
    
    var svg = document.querySelector("#img_placeholder svg");
    var svgOut = ""
    var lines = svg.querySelectorAll("line");
    if (lines.length > 0) {
        svgOut += "<svg width=\"100%\" height=\"100%\" style=\"position: absolute; top: 0; left: 0\">"
        var lineStyle = (lines[0].hasAttribute("style")) ? " style=\"" + lines[0].getAttribute("style") + "\"" : ""
        svgOut += "<g" + lineStyle + ">"

        for (var i = 0; i < lines.length; i++) {
            var line = lines[i]
            var x1 = Math.round(parseFloat(line.getAttribute("x1")));
            var y1 = Math.round(parseFloat(line.getAttribute("y1")));
            var x2 = Math.round(parseFloat(line.getAttribute("x2")));
            var y2 = Math.round(parseFloat(line.getAttribute("y2")));
            svgOut += "<line x1=\"" + x1 + "\" y1=\"" + y1 + "\" x2=\"" + x2 + "\" y2=\"" + y2 + "\" />\n"
        }
        svgOut += "</g>"
        svgOut += "</svg>\n";
    }

    result.content += svgOut;

    var tis = document.querySelectorAll("#qArea .droparea span");
    for (var i = 0; i < tis.length; i++) {
        var type = "t" //tis[i].getAttribute("data-type");

        if (type == "t") {
            var score = 1;

            var positionTop = tis[i].parentNode.style.top;
            positionTop = parseFloat(positionTop.substring(0, positionTop.indexOf("px")))
            positionTop += 0
            result.content += "<div class=\"popis-t\" style=\"background-color: #ccd; text-align: left; position: absolute; top: " + positionTop + "px; left: " + tis[i].parentNode.style.left + "\">"
            result.content += "<input type='text' style='width: " + (textMaxLength) + "px' />"
            result.content += "</div>\n"


        }


    }


    return result;
}

function getDescDadPreview() {
    var result = {
        content: "",
        ok: "",
        draggables: []
    }
    
    //var bgImage = document.querySelector("#img_placeholder img");
    if (!bgImage.src || bgImage.src == "") {
        alert("Chybí podkladový obrázek otázky!" +  bgImage.src + "$")
        return "\n\n\nChybí podkladový obrázek otázky!\n\n\n"
    }
    result.content += "<div class=\"popisovaci\" style=\"position: relative; width: " + bgImage.width + "px; height: " + bgImage.height + "px; \">\n"
    result.content += "<img src=\"" + bgImage.src + "\" alt=\"Podkladový obrázek\" width=\"" + bgImage.width + "\" height=\"" + bgImage.height + "\" style=\"position: absolute; left: 0px; top: 0px; \"/>\n";
    
    var svg = document.querySelector("#img_placeholder svg");
    var svgOut = ""
    var lines = svg.querySelectorAll("line");
    if (lines.length > 0) {
        svgOut += "<svg width=\"100%\" height=\"100%\" style=\"position: absolute; top: 0; left: 0\">"
        var lineStyle = (lines[0].hasAttribute("style")) ? " style=\"" + lines[0].getAttribute("style") + "\"" : ""
        svgOut += "<g" + lineStyle + ">"

        for (var i = 0; i < lines.length; i++) {
            var line = lines[i]
            var x1 = Math.round(parseFloat(line.getAttribute("x1")));
            var y1 = Math.round(parseFloat(line.getAttribute("y1")));
            var x2 = Math.round(parseFloat(line.getAttribute("x2")));
            var y2 = Math.round(parseFloat(line.getAttribute("y2")));
            svgOut += "<line x1=\"" + x1 + "\" y1=\"" + y1 + "\" x2=\"" + x2 + "\" y2=\"" + y2 + "\" />\n"
        }
        svgOut += "</g>"
        svgOut += "</svg>\n";
    }

    result.content += svgOut;

    var tis = document.querySelectorAll("#qArea .droparea span");
    for (var i = 0; i < tis.length; i++) {
        var type = "t" //tis[i].getAttribute("data-type");

        if (type == "t") {
            var score = 1;
            
            result.draggables = result.draggables.concat(tis[i].innerHTML.split("<br>"));
            
            var positionTop = tis[i].parentNode.style.top;
            positionTop = Math.round(parseFloat(positionTop.substring(0, positionTop.indexOf("px"))));
            var positionLeft = tis[i].parentNode.style.left;
            positionLeft = Math.round(parseFloat(positionLeft.substring(0, positionLeft.indexOf("px"))))

            //positionTop += 8
            result.content += "<div class=\"popis-t droparea_move_sc\" style=\"position: absolute; top: " + positionTop + "px; left: " + (positionLeft - 0) + "px; width: " + (textMaxLength * 0.9 + 0) + "px\">"
            result.content += "<input type='text'/>"
            result.content += "</div>\n"


        }


    }

    //alert( result.content)
    return result;
}

function InsertText() {
    // Get the editor instance that we want to interact with.
    var editor = CKEDITOR.instances.editor1;
    var value = document.getElementById('txtArea').value;

    // Check the active editing mode.
    if (editor.mode == 'wysiwyg') {
        // Insert as plain text.
        // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertText
        editor.insertText(value);
    } else
        alert('You must be in WYSIWYG mode!');
}

function SetContents() {
    // Get the editor instance that we want to interact with.
    var editor = CKEDITOR.instances.editor1;
    var value = document.getElementById('htmlArea').value;

    // Set editor contents (replace current contents).
    // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData
    editor.setData(value);
}

function GetContents() {
    // Get the editor instance that you want to interact with.
    var editor = CKEDITOR.instances.editor1;

    // Get editor contents
    // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getData
    alert(editor.getData());
}

function ExecuteCommand(commandName) {
    // Get the editor instance that we want to interact with.
    var editor = CKEDITOR.instances.editor1;

    // Check the active editing mode.
    if (editor.mode == 'wysiwyg') {
        // Execute the command.
        // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-execCommand
        editor.execCommand(commandName);
    } else
        alert('You must be in WYSIWYG mode!');
}

function CheckDirty() {
    // Get the editor instance that we want to interact with.
    var editor = CKEDITOR.instances.editor1;
    // Checks whether the current editor contents present changes when compared
    // to the contents loaded into the editor at startup
    // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-checkDirty
    alert(editor.checkDirty());
}

function ResetDirty() {
    // Get the editor instance that we want to interact with.
    var editor = CKEDITOR.instances.editor1;
    // Resets the "dirty state" of the editor (see CheckDirty())
    // http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-resetDirty
    editor.resetDirty();
    alert('The "IsDirty" status has been reset');
}

function Focus() {
    CKEDITOR.instances.editor1.focus();
}

var cnt = 0

function onFocus(evt) {
    //document.getElementById( 'eMessage' ).innerHTML = '<b>' + this.name + ' is focused </b> ' //+ ++cnt + evt.currentTarget;
}

function onBlur() {
    //document.getElementById( 'eMessage' ).innerHTML = this.name + ' lost focus';
}


function clearEmptyElement(node) {
    if (node.innerHTML == "<br>") node.innerHTML = ""
}


function importCode() {
    
    resetAll();
    var code = document.getElementById("import_code").value;
    if (trim(code) == "") return;
   
    if (code. indexOf("dad_move_sc") == -1 && code. indexOf("desc_input") == -1) {
        alert("Tento typ otázky nelze do editoru importovat.");
        return;
    }
    
   //oprava stare chyby v pozicovani
    code= code.replace(/left: (-?\d+(\.\d+)?);/g, "left: $1px;");
    code= code.replace(/top: (-?\d+(\.\d+)?);/g, "top: $1px;");
    
    var lines = code.split(/\n+/);
    var state = "begin";
    var task = "";
    var title = "";
    var descs = [];
    
    for (var i = 0; i < lines.length; i++) {
        var line = lines[i];
        if (line.indexOf("<div class=\"title\"") > -1) {
            
            title = line.substring(line.indexOf(">") + 1, line.lastIndexOf("</div>"));
            continue;
            }
        if (line.indexOf("<div class=\"task\"") > -1) {
            task = line.substring(line.indexOf(">") + 1, line.lastIndexOf("</div>"));
            continue;
            }
        if (line.indexOf("<div class=\"popis-t\"") > -1) {
            descs.push("");
        }
        
        if (state == "figure") {
            figure += line;
            if (line.indexOf("</div>") > -1) {
                state = "new";
                continue;
            }
        }
        if (line.charAt(0) == ":") {
            var index = parseInt(line.substring(2, line.indexOf("=")))-1;
            var entry = line.substring(line.indexOf("\"")+1, line.lastIndexOf("\""))
            
            if (!descs[index] || descs[index] == "") {
                 descs[index] = entry;
                
            }
            
            else {
                descs[index] += "<br>" + entry 
            }
        }

    }
    
    //vypis nactenych hodnot
    document.getElementById("edit_title").innerHTML = title;
    document.getElementById("edit_task").innerHTML = task;
    
    var fig = document.createElement("div");
    fig.innerHTML = code;
    
    
    var bgImg = fig.querySelector("img");
    loadImage(bgImg.src);
    //setBgImage(bgImg.src); 
    
    //var edit_hs = document.querySelector("#hotspots");
    var fields = fig.querySelectorAll(".popis-t");
    
    for (var i = 0; i < fields.length; i++) {
        var field = fields[i]

        insertPoint.x = getCoordinate(field.style.left);
        
        insertPoint.y = getCoordinate(field.style.top);
        
        addDraggableText(descs[i]);
        
        
    }
    
    var svg = fig.querySelector("svg");
    if (svg) {
        var lines = svg.querySelectorAll("line");
        
        connectors = { width: 3, color: "#000"};
        if (lines.length > 0) {
            var sg = svg.querySelector("g");
            connectors.width = sg.style.strokeWidth;
            
            var color = sg.style.stroke;
            if (color.indexOf("rgb") > -1) {
                var rgb = color.match(/\d+/g);
                var r = parseInt(rgb[0]).toString(16);
                if (r.length < 2) r = "0" + r;
                var g = parseInt(rgb[1]).toString(16);
                if (g.length < 2) g = "0" + g;
                var b = parseInt(rgb[2]).toString(16);
                if (b.length < 2) b = "0" + b;
                color = '#' + r + g + b
            }
           
            connectors.color = color
            
        }
        
        document.getElementById("connector-color").value = connectors.color;
        document.getElementById("connector-width").value = connectors.width;
        
        for (var i = 0; i < lines.length; i++) {
            var line = lines[i];
            var startX = parseInt(line.getAttribute("x1"));
            var startY = parseInt(line.getAttribute("y1"));
            var endX = parseInt(line.getAttribute("x2"));
            var endY = parseInt(line.getAttribute("y2"));
            
            var fields = document.querySelectorAll("#img_placeholder .droparea");
            for (var j = 0; j < fields.length; j++) {
                var fd = fields[j]
                var sx = getCoordinate(fd.style.left);
                var sy = getCoordinate(fd.style.top);
                var box = fd.getBoundingClientRect();
                
                if ( startX > sx && sx + box.width > startX  && startY > sy && sy + box.height > startY) {
                    addConnector(endX, endY, fd);
                }
                    
            }
            
        }
        
        
    }
    
    var mmode = "desc_input";
    if (fig.querySelector(".dragbase")) {
        mmode = "desc_dad";
    }
   setMode(mmode);
    
    document.getElementById("import_code").value = ""
}

function getCoordinate(prop) {
    var out = prop;
    if (out.indexOf("px")>-1) {
        out = out.substring(0, out.indexOf("px"));
    }
   
    return parseFloat(out);
}

// ořezaní bílých znaků ze začátku a konce řetězce
function trim(retez) {
    retez = retez.replace(/^\s+/, "");
    retez = retez.replace(/\s+$/, "");
    
    return retez;
}