var dragged =  null;
var droparea = { width: 0, height: 0 };
var draggable_count = 0;
var bgImage = { src: "", width: "", height: ""};

//limitni rozmery obrazku na pozadi
var bgLimits = { width: 1000, height: 800}

var textMaxLength = 0, textMaxChars = 0;

var insertPoint = { x: 20, y: 20}

var coords = { x: 0, y: 0}

var actualDraggable = null, 
actualInstance = null,
xOffset = 0,
yOffset = 0;

var actConnector = null;
var connectors = { width: 3, color: "#000"};
var svgNS = "http://www.w3.org/2000/svg";
var connectorCount = 0;


function initApplication() {
    $(".sidebar").draggable()
    $("#shower").draggable()

    var isInDroparea = false;

    var qArea = document.getElementById("qArea");
    qArea.ondragover = dragOverEvent;
    qArea.ondragleave = dragLeaveEvent;
    qArea.ondrop = dropEvent;

    $("#qArea .ui-right").draggable();

    var drags = document.querySelectorAll("#dragbase .draggable");
    for (var i = 0; i < drags.length; i++) {
        drags[i].ondragstart = dragStartEvent;
        drags[i].ondragend = dragEndEvent;
    }

    $("#dialog-addText").dialog({
        autoOpen: false,
        height: "auto",
        width: 450,
        modal: true,
        resizable: false,
        buttons: {
            "Přidat popisek": function () {
                var bValid = true;
                $("#new_text").removeClass("ui-state-error");

                var txt = $("#new_text").attr("value")
                if (txt != "") {
                    addDraggableText(txt)

                }
                $(this).dialog("close");
            },
            "Zrušit": function () {
                $(this).dialog("close");
            }
        },
        close: function () {
            $("#new_text").val("").removeClass("ui-state-error");
        }
    });

    $("#dialog-setBgImage").dialog({
        autoOpen: false,
        height: 250,
        width: 800,
        modal: true,
        resizable: false,
        buttons: {

            "Nahrát obrázek": function () {
                loadImage();
                $(this).dialog("close");
            },
            "Zavřít": function () {
                $(this).dialog("close");
            }
        },
        close: function () {
            $("#pic_url").val("").removeClass("ui-state-error");
        }
    });

    $("#dialog-importCode").dialog({
        autoOpen: false,
        height: 400,
        width: 800,
        modal: true,
        resizable: false,
        buttons: {

            "Importovat kód": function () {
                importCode();
                $(this).dialog("close");

            },
            "Zavřít": function () {
                $(this).dialog("close");
            }
        },
        close: function () {
            $("#import_code").val("").removeClass("ui-state-error");
        }
    });
    $("input[type=button], button")
        .button()
        .click(function (event) {
            event.preventDefault();
        });

    $("#tabs").tabs();

    // fix the classes
    $(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *")
        .removeClass("ui-corner-all ui-corner-top")
        .addClass("ui-corner-bottom");
    // move the nav to the bottom
    $(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");

    $("#tabs").on("tabsactivate", function (event, ui) {
        var pid = ui.newPanel.attr("id")
        if (pid == "tabs-2") generatePreview();
        if (pid == "tabs-3") generateCode();
    });

    document.getElementById("connector-width").value = 3;
    document.getElementById("connector-color").value = "#000000";

    var bgTest = document.getElementById("bg_test")
    bgTest.addEventListener("load", bgTestLoad);
    bgTest.addEventListener("error", bgTestError);

    //loadImage("https://is.muni.cz/auth/do/rect/el/storage/utils/descriptors/demo/bunka_nolines.png")
}
  
function report(text) {
  console.log(text);
  }
  
function setMainMode(mode) {
    
}
  
function getCoords(evt ) {
   var rect = /*document.querySelector("#qArea")*/ evt.target.getBoundingClientRect() //evt.target
     
     var mouseX = Math.round( evt.clientX - rect.left )
     var mouseY = Math.round( evt.clientY - rect.top )
     
    coords =  { x: mouseX, y: mouseY}
    
    report("x: " + coords.x + ", y:" + coords.y )
    
  }
  
function dragStartEvent(e) {
          var rodic = this.parentNode
      
    
      puvRodic = this.parentNode
       var dname = this.nodeName.toLowerCase();
       var novy =  document.createElement("SPAN") //dragged.cloneNode(true)
       if (dname == "img") {
        novy =  document.createElement("img")
        novy.src = this.src;
        novy.setAttribute("data-id", this.getAttribute("data-id"));
        }      
       //novy.setAttribute("draggable", "true")
       //novy.setAttribute("class", "draggable")
       novy.innerHTML = this.innerHTML
       
       var popis = document.createElement("span")
       popis.style.position = "absolute"       
       popis.style.top = Math.round(coords.y - this.height/2 - 2) + "px"
       popis.style.left = Math.round(coords.x - this.width/2 - 2) + "px"
       popis.style.width = droparea.width  + "px"
       popis.style.height = droparea.height  + "px"
       popis.style.lineHeight = (droparea.height-2)  + "px"
      
       popis.className = "droparea"
       popis.appendChild(novy)
       //EventHelpers.addEvent(novy, 'dragstart', dragStartMoveEvent);
       //EventHelpers.addEvent(novy, 'dragend', dragEndCloneEvent);
       rodic.appendChild(popis)
       //dragged.style.visibility = "hidden" 
       
       
       popis.onclick = selectItem
       document.getElementById("qArea").appendChild(popis)
       dragged = popis;
       $(popis).draggable()
   }                    
   
  
function dragOverEvent(e) {
    isInDroparea = true;
    getCoords(e)
   	EventHelpers.preventDefault(e);
   }
   
function dragEndEvent(e) {
    var puvRodic = dragged.parentNode;
    //alert (isInDroparea)
    if (!isInDroparea) {
       dragged = null;         
      //puvRodic.removeChild(dragged);
    }
   	else { //var coords = getCoords(e);
   	 report("drop pokus na " + coords.x + ", " + coords.y)
     /* 
      dragged.style.position = "absolute";
      dragged.style.top = -coords.y + "px"
      dragged.style.left = -coords.x + "px"
      alert(coords.y)
      */
      dragged = null; 
      }
     EventHelpers.preventDefault(e);
   }
   
function dragLeaveEvent(e) {
   isInDroparea = false;
   	EventHelpers.preventDefault(e);   	
   }
   
function dropEvent(e) {
   	 
  EventHelpers.preventDefault(e);
   	 //alert("Zkouska pridani")
    //var content = e.dataTransfer.getData('Text' )
     var puvRodic = dragged.parentNode; 
 
     var rodic = this; 
      
    /*
    if (puvRodic.className.indexOf("droparea") > -1 && rodic.className.indexOf("droparea") > -1 ) { 
       
      rodic.appendChild(puvRodic.removeChild(dragged))
      
      }
     */
      if (puvRodic.className == "dragbase" ) { }
        
      
       
	    
      //pretahovani prvku zpet do vychozi dragbase 
      if (puvRodic.className.indexOf("droparea") > -1 && rodic.className.indexOf("dragbase") > -1 ) { 
        /*   
        puvRodic.removeChild(dragged);
        
        var dname = dragged.nodeName.toLowerCase()
        var ditems = rodic.querySelectorAll(dname);
        for (var k = 0; k < ditems.length; k++) {
           if (dname == "span" && ditems[k].firstChild.nodeValue == content) ditems[k].style.visibility = "visible"
           if (dname == "img" && ditems[k].src == dragged.src) { 
              ditems[k].style.visibility = "visible"
            }
          }
          */
       }
     
   	 
   
   }
 
 
 
function initDragging(evt, ui) {
   //xOffset = $("#qArea").offset().left - ui.helper.offset().left; 
   //yOffset = $("#qArea").offset().top - ui.helper.offset().top ;
   //alert(typeof ui.helper)
   selectDraggable((ui.helper)[0])
      
 }
 
 function stopDragging(evt, ui) {
    var novy = ui.helper[0].cloneNode(true) //dragged.cloneNode(true)
    //novy.style.position = "static";


    novy.className = ""
    novy.removeAttribute("draggable")

    var popis = document.createElement("span")
    popis.style.position = "absolute"

    var cx = Math.round(evt.pageX - $("#qArea").offset().left - ui.helper.width() / 2  )  
    var cy = Math.round(evt.pageY - $("#qArea").offset().top - ui.helper.height() / 2 )

    popis.style.top = (cy) + "px"
    popis.style.left = (cx) + "px"
    popis.style.width = droparea.width + "px"
    popis.style.height = droparea.height + "px"

    popis.className = "droparea"
    popis.onmouseover = showContextHelp;
    
    popis.appendChild(novy)

    document.getElementById("qArea").appendChild(popis)
    $(popis).draggable({
        start: initDragging,
        drag: updateConnectors
    }).click(function (evt) {
        selectDraggable(this)
        
        if (evt.altKey) { alert("pokus o vymaz")
            deleteSelectedDraggable()
            return;
        }
        actualInstance = this;
    })
    
    selectDraggable(popis)
}
 
function addInstanceOf(dadNode, posX, posY) {
    var novy = dadNode.cloneNode(true) //dragged.cloneNode(true)
    novy.style.position = "static";
    novy.className = "desc-content"

    var plocha = document.getElementById("img_placeholder")

    var popis = document.createElement("span")
    popis.style.position = "absolute"

    var cx = (posX == undefined) ? plocha.scrollLeft + 20 : posX
    var cy = (posY == undefined) ? plocha.scrollTop + 20 : posY

    popis.style.top = (cy) + "px"
    popis.style.left = (cx) + "px"
    popis.style.width = droparea.width + "px"
    popis.style.height = "18px" //droparea.height + 

    popis.className = "droparea"
    
    draggable_count++;
    popis.setAttribute("data-id", "drag_" + draggable_count);
    
    popis.appendChild(novy)
    plocha.appendChild(popis)
    $(popis).draggable({
        start: initDragging,
        drag: updateConnectors
    }).click(function (evt) {
        selectDraggable(this)
       
        if (evt.altKey) { 
            deleteSelectedDraggable()
            return;
        }
        
        actualInstance = this;
    });
    popis.ondblclick = editTitle;
    popis.onmouseover = showContextHelp;
    getInputMaxLength();
    
     unifyDraggables();
    selectDraggable(popis)
}


function addDraggableText(txt) {
    
    var vals = txt.split("<br>");
    var adder = document.getElementById("add_draggable");
    
    for (var i = 0; i < vals.length; i++) {
        var val = vals[i];
                
        if (val == "") continue;
        
        var novy = document.createElement("span");
        novy.innerHTML = val;

        novy.setAttribute("alt", "draggable text");


        if (adder) {
            adder.parentNode.insertBefore(novy, adder)
        } else {
            document.getElementById("dragbase").appendChild(novy)
        }
    }
    
     var novy = document.createElement("span");
    novy.innerHTML = txt;

    novy.setAttribute("alt", "draggable text");

    addInstanceOf(novy, insertPoint.x, insertPoint.y);

   
}
 
 function deleteSelectedDraggable() {
     if (!actualDraggable) return;

     var did = actualDraggable.getAttribute("data-id");

     var cons = document.querySelectorAll("[data-ref=" + did + "]");
     for (var i = 0; i < cons.length; i++) {
         var con = cons[i];
         var end = document.querySelector("[data-endof=" + cons[i].getAttribute("data-end") + "]")
         deleteNode(con);
         deleteNode(end);
     }


     deleteNode(actualDraggable);

     actualDraggable = null;

     unifyDraggables();

 }

function getDraggableById(did) {
  $("span[data-id]").removeClass("actual")
   var sought = $("#dragbase span[data-id='" + did +"']")[0];
   $("span[data-id='" + did +"']").addClass("actual")
    if (sought) { selectDraggable(sought); }
}

 function selectDraggable(node) {
   
    if (actualDraggable) actualDraggable.classList.remove("actual");

    actualDraggable = node;
     
    var ad = $(actualDraggable);
    ad.addClass("actual");
    if (!ad.attr("data-orig-width")) {
        ad.attr("data-orig-width", ad.width());
        ad.attr("data-orig-height", ad.height());
    }

   
}

function selectEdit(evt) {
    var node = evt.target;
    node.setAttribute("contenteditable", "true");
}

function updateDgText() {
    var newContent = document.getElementById("dg_text").value
    actualDraggable.innerHTML = newContent
    //update instances
    $("#qArea [data-id='" + actualDraggable.getAttribute("data-id") + "']").html(newContent)
    unifyDraggables()
    getInputMaxLength();
}

function updateDgWidth() {
  actualDraggable.width = $("#dg_width").spinner( "value" );
  var ow = parseFloat(actualDraggable.getAttribute("data-orig-width"));
  var oh = parseFloat(actualDraggable.getAttribute("data-orig-height"));
  actualDraggable.height = Math.round(oh*parseFloat(actualDraggable.width)/ow)  
  $("#dg_height").spinner( "value", actualDraggable.height )  
  unifyDraggables() 
}

function updateDgHeight() {
  actualDraggable.height = $("#dg_height").spinner( "value" ); 
  var ow = parseFloat(actualDraggable.getAttribute("data-orig-width"));
  var oh = parseFloat(actualDraggable.getAttribute("data-orig-height"));
  actualDraggable.width = Math.round(ow*parseFloat(actualDraggable.height)/oh)  
  $("#dg_width").spinner( "value", actualDraggable.width )  
  unifyDraggables() 
}

//sjednoceni rozmeru dropareas 
 function unifyDraggables() {
  var drags = $(".draggable, .droparea span")
  
  droparea.width = 0; //droparea.height = 0;
  for (var i = 0; i < drags.length; i++) {
   
    droparea.width = Math.max( droparea.width, $(drags[i]).width() )
    droparea.height = Math.max( droparea.height, $(drags[i]).height() )
  }
     var das = document.querySelectorAll(".droparea");
     
     for (var i = 0; i < das.length; i++) {
         var da = das[i];
         da.style.width = (droparea.width + 5) + "px";
         //da.style.height = droparea.height + "px";
         da.style.lineHeight = (droparea.height-2) + "px";
         
         updateConnectorsOfDesc(da);
     }
     
//  $(".droparea").css( { "width": droparea.width + "px", "height": droparea.height + "px", "line-height": (droparea.height-2) + "px"} )
 }

function getInputMaxLength() {
    var maxLength = 0;
    var maxChars = 0;
    var tisT = document.querySelectorAll(".testitem.t .option");

    for (var i = 0; i < tisT.length; i++) {
        maxLength = Math.max(maxLength, $(tisT[i]).width());
        maxChars = Math.max(maxChars, tisT[i].innerHTML.length);
    }

    tisT = document.querySelectorAll(".droparea span");
    for (var i = 0; i < tisT.length; i++) {
        maxLength = Math.max(maxLength, $(tisT[i]).width());
        maxChars = Math.max(maxChars, tisT[i].innerHTML.length)
    }

    maxLength += 10
    textMaxLength = maxLength;
    textMaxChars = maxChars;
   
}

 /**** konektory - pridavani, mazani, upravy *****/ 
  
 function addConnectorAt(evt) {

    var img = document.getElementById("img_placeholder").getBoundingClientRect()
    var cx = evt.clientX - img.left
    var cy = evt.clientY - img.top

    if (evt.ctrlKey == 1) addConnector(cx, cy)
    if (evt.shiftKey) {
     //addDraggableText("p", cx, cy)   
        insertPoint.x = cx;
        insertPoint.y = cy;
        
        $('#dialog-addText').dialog('open');
    }
}
  
 function addConnector(cx, cy, node) {
     if (node == undefined) {
         node = actualDraggable;
     }
    if (!node) return;

    var did = node.getAttribute("data-id");
    var box = node.getBoundingClientRect();
    var da = node;

     var x1 = da.style.left;
    x1 = parseFloat(x1.substring(0, x1.indexOf("px")));

    var y1 = da.style.top;
    y1 = parseFloat(y1.substring(0, y1.indexOf("px")));

    var svg = document.getElementById("connectors")
    var connector = svg.appendChild(document.createElementNS(svgNS, "line"))
    connector.setAttribute("x1", x1 + box.width / 2);
    connector.setAttribute("y1", y1 + box.height / 2);

    var x2 = (cx != undefined && !isNaN(cx)) ? cx : x1 + box.width / 2
    var y2 = (cy != undefined && !isNaN(cy)) ? cy : y1 + 100

    connector.setAttribute("x2", x2);
    connector.setAttribute("y2", y2);

    var style = "stroke-width: " + connectors.width + "; stroke: " + connectors.color + "; stroke-linecap: round";
    connector.setAttribute("style", style);

    connector.setAttribute("data-ref", did);
    connector.setAttribute("data-end", did + "_" + ++connectorCount);

    connector.onclick = deleteConByClick

    var end = document.createElement("span");
    end.innerHTML = " ";
    end.setAttribute("data-endof", did + "_" + connectorCount);
    end.style.position = "absolute"
    end.className = "connector-end"
    end.style.top = "" + (y2 - 8) + "px"
    end.style.left = "" + (x2 - 8) + "px"
    end.onmouseover = showContextHelp;
     
    document.getElementById("img_placeholder").appendChild(end)
    $(end).draggable({
        start: initConnectorEnd,
        drag: updateConnectorEnd,
        stop: stopConnectorEnd
    })

    end.addEventListener("click", deleteConByClick);

}

 
 function deleteConnector(index) {
  
 }

function deleteConByClick(evt) {
    if (!evt.altKey) return;
    var cil = evt.target;
    var end = null,
        line = null;

    if (cil.nodeName == "SPAN") {
        end = cil;
        line = document.querySelector("[data-end=" + cil.getAttribute("data-endof") + "]")
    }


    if (cil.nodeName == "line") {
        end = document.querySelector("[data-endof=" + cil.getAttribute("data-end") + "]")
        line = cil;
    }
    if (!end || !line) return
    end.parentNode.removeChild(end);
    line.parentNode.removeChild(line);
}



function initConnectorEnd(evt, ui) {
 // alert(ui.helper.attr("data-ref"))
}
  
function stopConnectorEnd(evt, ui) {
  }
  
function updateConnectors(evt, ui) {
    
    var did = actualDraggable.getAttribute("data-id");
    var box = actualDraggable.getBoundingClientRect();
    var da = actualDraggable;
    
    var x1 = da.style.left;
    x1 = parseFloat(x1.substring(0, x1.indexOf("px")));

    var y1 = da.style.top;
    y1 = parseFloat(y1.substring(0, y1.indexOf("px")));
   
    
    $("line[data-ref=" + did + "]").attr("x1", x1 + box.width / 2).attr("y1", y1 + box.height / 2)
}

function updateConnectorsOfDesc(desc) {
    
    var did = desc.getAttribute("data-id");
    var box = desc.getBoundingClientRect();
   
    var x1 = desc.style.left;
    x1 = parseFloat(x1.substring(0, x1.indexOf("px")));

    var y1 = desc.style.top;
    y1 = parseFloat(y1.substring(0, y1.indexOf("px")));
   
    
    $("line[data-ref=" + did + "]").attr("x1", x1 + box.width / 2).attr("y1", y1 + box.height / 2)
}
  
function updateConnectorEnd(evt, ui) {
    var line = $("line[data-end=" + ui.helper.attr("data-endof") + "]")
    line.attr("x2", "" + (ui.position.left + 8) + "px").attr("y2", "" + (ui.position.top + 8) + "px")
}

//nastaveni barvy spojnic 
function setConnectorWidth(width) {
    var lines = document.querySelectorAll("#connectors line");

    connectors.width = width;
    for (var i = 0; i < lines.length; i++) {

        lines[i].style.strokeWidth = width;
    }

}

//nastaveni tloustky spojnic 
function setConnectorColor(color) {
    var lines = document.querySelectorAll("#connectors line");

    connectors.color = color;
    for (var i = 0; i < lines.length; i++) {

        lines[i].style.stroke = color;
    }

}
  
function createTestItem() {
    var qItems = ""
    var range = window.getSelection().getRangeAt(0)
    var novy = document.createElement("SPAN")
    novy.setAttribute("class", "droparea");

    range.surroundContents(novy);

    checkItems()

}
  
function checkItems() {
    var base = document.getElementById("dragbase");
    base.innerHTML = ""

    var items = document.getElementById("qArea").querySelectorAll(".droparea");
    for (var i = 0; i < items.length; i++) {
        var item = document.createElement("SPAN");
        item.setAttribute("class", "testitem");
        item.setAttribute("draggable", "true");
        item.innerHTML = items[i].innerHTML;
        base.appendChild(item)
    }
    initDrag()

    checkLatex(document.getElementById("qArea"))
}

function clearFormat() {
    document.execCommand("removeFormat", false, null)
    checkItems()

}
 
function setQuestionType(typ) {
    document.getElementById("dragbase").style.display = (typ == "dad") ? "block" : "none"
} 
   
function showPreview() {
    var qType = document.getElementById("question_type").value;
    var q = document.createElement("div");
    var trida = ""
    if (qType == "dad") {
        trida = " dad_move_sc"

    }
    q.setAttribute("class", "question" + trida)

    var qTitle = document.createElement("div");
    qTitle.setAttribute("class", "title")

    var task = document.createElement("div");
    task.setAttribute("class", "task")

    var dragbase = document.createElement("div");
    dragbase.setAttribute("class", "dragbase")

    var content = document.createElement("div");
    content.setAttribute("class", "content")

    q.appendChild(qTitle)
    q.appendChild(task)
    if (qType == "dad") q.appendChild(dragbase)
    q.appendChild(content)

    qTitle.innerHTML = document.getElementById("edit_title").innerHTML
    task.innerHTML = document.getElementById("edit_task").innerHTML
    content.innerHTML = document.getElementById("qArea").innerHTML

    var sc = document.getElementById("shower-content")
    sc.innerHTML = ""
    sc.appendChild(q)


    var items = sc.querySelectorAll(".droparea");
    var maxLength = 0;
    for (var i = 0; i < items.length; i++) {
        maxLength = Math.max(maxLength, items[i].innerHTML.length)
    }

    for (var i = 0; i < items.length; i++) {

        if (qType == "dad") {
            
            var vals = items[i].innerHTML.split("<br>")
            for (var j = 0; j < vals.length; j++) {
                if (vals[j] == "") continue;
                
                var item = document.createElement("SPAN");
                item.setAttribute("class", "draggable");
                item.setAttribute("draggable", "true");
                item.innerHTML = vals[j];
                dragbase.appendChild(item)
                
            }
            

            items[i].className = "droparea_move_sc"

            var tk = 0.5 //0.5
            items[i].setAttribute("style", "width: " + (maxLength * tk) + "em")
        } else items[i].className = "droparea_move_sc"
        items[i].innerHTML = ""

        var field = document.createElement("input");
        field.setAttribute("type", "text")
        field.setAttribute("style", "width: " + (maxLength * tk) + "em")
        items[i].appendChild(field)
            //EventHelpers.addEvent(items[i], 'dragover', dragOverMoveSCEvent);
            //EventHelpers.addEvent(items[i], 'drop', dropMoveSCEvent);
    }
    if (qType == "dad") initDrag()

    document.getElementById("shower").style.left = "700px"
}
   
function showCode() {
    /* pocet_a = 0;
     pocet_b = 0;
     pocet_c = 0;
     pocet_l = 0;
     pocet_m = 0;
     pocet_n = 0;
     pocet_r = 0;
     pocet_t = 0;
     pocet_v = 0;
     */
    var qType = document.getElementById("question_type").value;

    var pocet_t = 0;

    var area = document.createElement("textarea");
    area.setAttribute("rows", "10")
    area.setAttribute("cols", "70")

    var vystup = "<HTML>\n"
    vystup += "<style type=\"text/css\"> @import \"https://is.muni.cz/auth/do/1499/el/storage/styles/testovy.css\";\n .popisovaci { font-family: Arial, sans-serif; font-size: 12px } <\/style>\n";
    vystup += "<script src=\"https://is.muni.cz/auth/do/rect/el/storage/utils/dad/EventHelpers.js\" type=\"text/javascript\"><\/script>\n"
    vystup += "<script src=\"https://is.muni.cz/auth/do/rect/el/storage/utils/dad/DragDropHelpers.js\" type=\"text/javascript\"><\/script>\n"
    vystup += "<script src=\"https://is.muni.cz/auth/do/rect/el/storage/utils/dad/dragAndDrop_05.js\" type=\"text/javascript\"><\/script>\n"

    var trida = ""
    if (qType == "dad") trida = " dad_clone"
    vystup += "<div class='question" + trida + "'>\n"

    var qTitle = document.getElementById("edit_title").innerHTML
    if (qTitle != "") vystup += "<div class=\"title\">" + qTitle + "<\/div>\n"
    var qTask = document.getElementById("edit_task").innerHTML
    if (qTask != "") vystup += "<div class=\"task\">" + qTask + "<\/div>\n"

    var dragitems = "";
    var dropareas = ""




    var contentWidth = 0;
    var contentHeight = 0;
    var maxWidth = 0;
    var maxHeight = 0;
    var spravne = ""

    var drops = document.querySelectorAll(".droparea"); // , #qArea img

    for (var i = 0; i < drops.length; i++) {
        var posX = drops[i].style.left;
        posX = parseInt(posX.substring(0, posX.indexOf("px")))
        var posY = drops[i].style.top;
        posY = parseInt(posY.substring(0, posY.indexOf("px")))

        contentWidth = Math.max(contentWidth, drops[i].offsetWidth + posX)
        contentHeight = Math.max(contentHeight, drops[i].offsetHeight + posY)

        var dropX = drops[i].style.left
        dropX = parseInt(dropX.substring(0, dropX.indexOf("px"))) + 0

        var dropY = drops[i].style.top
        dropY = parseInt(dropY.substring(0, dropY.indexOf("px"))) + 2

        var source = drops[i].firstChild.getAttribute("data-id");
        
        var sprs = source.split(/\<br\>/g);
        console.log("Source split: " + sprs)
        for (var j = 0; j < sprs.length; j++) {
            var spr = sprs[j].trim();
            if (spr != "") {
               spravne += ":t" + (i + 1) + "=\"" + spr + "\" ok\n" 
            }
        }
        

        dropareas += " <span class=\"droparea_clone\" style=\"position: absolute; top: " + dropY + "; left: " + dropX + "; width: " + droparea.width + "px; height: " + droparea.height + "px; line-height: " + (droparea.height - 2) + "px \"> :t" + (i + 1) + " </span>\n"


    }

   // var bgImage = document.querySelector("#qArea img");
    if (!bgImage) return; // neni nastaveny obrazek na pozadi

    //contentWidth = Math.max(contentWidth, bgImage.offsetWidth)
    //contentHeight = Math.max(contentHeight, bgImage.offsetHeight)
    
    contentWidth = Math.max(contentWidth, bgImage.width)
    contentHeight = Math.max(contentHeight, bgImage.height)

    var drags = document.querySelectorAll(".draggable");

    for (var i = 0; i < drags.length; i++) {
        if (drags[i].nodeName.toLowerCase() == "span") {
            dragitems += " <span class=\"draggable\" draggable=\"true\">" + drags[i].firstChild.nodeValue + "<\/span>\n";
            
        }
        if (drags[i].nodeName.toLowerCase() == "img") {

            dragitems += " <img class=\"draggable\" data-id=\"" + drags[i].getAttribute("data-id") + "\" draggable=\"true\" src=\"" + drags[i].src + "\" alt=\"draggable item\"/>\n";

        }
    }

    var dragbase = "<div class=\"dragbase\">" + dragitems + "</div>\n"

    if (qType == "dad") vystup += dragbase

    vystup += "<div class=\"content\">\n"
    var obr = document.querySelector("#qArea img")

    vystup += "<div class=\"popisovaci\" style=\"position: relative; width: " + contentWidth + "px; height: " + contentHeight + "px; background: url(" + obr.getAttribute("src") + ") " + obr.style.left + "  " + obr.style.top + " no-repeat\">\n"
    vystup += dropareas;
    vystup += "<\/div>\n"
    vystup += "<\/div>\n"

    //vystup += "<p><script>updateDraggables();DragDropHelpers.fixVisualCues = true<\/script><\/p>\n"

    vystup += spravne

    if (!document.getElementById("mode_auth").checked) vystup = vystup.replace(/https:\/\/is.muni.cz\/auth/g, "http://is.muni.cz")

    else {
        vystup = vystup.replace(/http:\/\/is.muni.cz/g, "https://is.muni.cz/auth")
    }

    $('#code_shower').val(vystup)
    $('#dialog-showCode').dialog('open')
    
}
   
function hidePreview() {
    document.getElementById("shower").style.left = "-10000px"
}
   
 /****************** pomocne funkce *****************/  
   
function randomizer(a1, a2) {
    return Math.floor(3 * Math.random()) - 1
}

// zjištění hodnoty prvky s daným id
/*   function getValue(nodeId) {
      return document.getElementById(nodeId).value;
    } 
           */
//nastavení hodnoty porvku s daným id
 function setValue(nodeId, code) {
      document.getElementById(nodeId).value = code;
    }
    
    // vložení HTML kódu do uzlu s daným id
function setHTML(nodeId, code) {
    document.getElementById(nodeId).innerHTML = code;
}
    
    //zjištění HTML kodu uvnitř daného uzlu 
function getHTML(nodeId) {
    return document.getElementById(nodeId).innerHTML;
}

var actual = {
    width: "",
    height: "",
    node: null
};
var maxim = {
    width: 0,
    height: 0
};

function selectItem(evt) {
    var uzel = evt.target;
    if (actual.node) actual.node.style.borderColor = "#bbb"
    actual.node = uzel;
    uzel.style.borderColor = "red"
    var content = (uzel.nodeName.toLowerCase() == "span") ? uzel.firstChild.nodeValue : uzel.src
    document.querySelector("#item_content").value = content
}

function updateTestItem() {
    if (!actual.node) return;
    var obsah = document.querySelector("#item_content").value
    obsah = obsah.replace(/\n/g, "")
    actual.node.firstChild.nodeValue = obsah
}



function recordSize(uzel) {
    actual.width = uzel.style.width;
    actual.height = uzel.style.height;

}

function checkSize(uzel) {
    if (uzel.style.width != actual.width || uzel.style.height != actual.height) {
        //alert("zmena velikosti")
        var popisy = document.querySelectorAll(".popis-t")
        for (var i = 0; i < popisy.length; i++) {
            if (popisy[i] == uzel) continue;
            popisy[i].style.width = uzel.style.width
            popisy[i].style.height = uzel.style.height
        }
    }
}

function unifySize() {
    var popisy = document.querySelectorAll(".popis-t")
    for (var i = 0; i < popisy.length; i++) {
        popisy[i].style.width = maxim.width + "px"
       // popisy[i].style.height = maxim.height + "px"
    }
}

function bgTestError(evt) {
    alert("Během načítání obrázku na pozadí došlo k chybě.");

}
function bgTestLoad(evt) {
    var img = evt.target;
    bgImage.width = img.width;
    bgImage.height = img.height;
    bgImage.src = img.src;
    
    
    if (img.width > bgLimits.width) {
        alert("Vkládáný obrázek na pozadí je příliš široký. Maximální šířka obrázku je " + bgLimits.width + " pixelů");
        return;
    }
    
    if (img.height > bgLimits.height) {
        alert("Vkládáný obrázek na pozadí je příliš vysoký. Maximální výška obrázku je " + bgLimits.height + " pixelů");
        return;
    }
    
    
    setBgImage(img.src);
}

function loadImage(adresa) {
    if (adresa == undefined) adresa = document.querySelector("#pic_url").value
    if (adresa == "") return;
    if (adresa.indexOf("is.muni.cz") == -1) {
        if (!confirm("Obrázek se nachází mimo doménu is.muni.cz. Chcete přesto obrázek načíst?")) {
            return

        }

    }
    
    var backImage = new Image();
    backImage.addEventListener("load", bgTestLoad);
    backImage.addEventListener("error", bgTestError);
    
    backImage.src = adresa;
    
    var init = document.querySelector("#bg-init")
    var img = document.querySelector("#qArea img")

    if (init.style.display != "none") {
        init.style.display = "none";
        img = document.createElement("img");

        svg = init.parentNode.insertBefore(document.createElementNS(svgNS, "svg"), init)
        svg.setAttribute("xmlns", svgNS);
        svg.setAttribute("version", "1.1");

        svg.setAttribute("id", "connectors");
        svg.style.position = "absolute";
        svg.style.left = "0px";
        svg.style.top = "0px";
        svg.style.width = "100%";
        svg.style.height = "100%";
        svg.onclick = addConnectorAt;
        svg.onmouseover = showContextHelp;
        
        init.parentNode.insertBefore(img, svg);

    }
    
    //document.getElementById("bg_test").src = adresa;
}

function setBgImage(adresa) {

    var img = document.querySelector("#qArea img")

    img.setAttribute("src", adresa);

}

function deleteItem() {
    if (!actual.node) return;

    actual.node.parentNode.removeChild(actual.node);
    actual.node = null;
    document.querySelector("#item_content").value = ""
}

function deleteInstance() {

    if (!actualInstance) return;
    actualInstance.parentNode.removeChild(actualInstance);
    actualInstance = null;

    document.getElementById("dg_text").value = ""
}

function deleteAllItems() {
    $("#qArea .droparea").remove()

    document.getElementById("dg_text").value = ""
} 

function editTitle(evt) {
    var uzel = evt.target;
    
    uzel.style.width = "auto"
     uzel.setAttribute("contenteditable", "true");
        uzel.focus();
        uzel.onkeydown = updateTitle;
        uzel.onblur = updateTitle;
        
    
}
 
 function updateTitle(evt) {
    var area = evt.target.parentNode;
    area.style.width = "auto";
    
    unifyDraggables()
 }
 
function deleteNode(node) {
    if (node && node.parentNode) {
        node.parentNode.removeChild(node);    
    }
}


/**************** kontextova napoveda ***********/

function showContextHelp(evt) {
    var help = document.getElementById("context-help");
    help.innerHTML = "";
    
    var node = evt. target;
    var hc= "";
    if (node.nodeName == "svg") {
        hc = "<p>Přidat popisek – <kbd>SHIFT</kbd> + kliknutí</p>";
        if (actualDraggable) {
            hc += "<p>Přidat konektor k aktuálnímu popisku – <kbd>CTRL</kbd> + kliknutí</p>"
        }
    }
    
    if (node.nodeName == "SPAN" && (node.className.indexOf("droparea") > -1 || node.className.indexOf("desc-content") > -1 ) ) {
        hc = "<p>Upravit text – dvojklik</p>" + 
        "<p>Smazat popisek – <kbd>ALT</kbd> + klik</p>";
    }
    
    if (node.nodeName == "SPAN" &&  node.hasAttribute("data-endof")) { //
       
        hc ="<p>Smazat konektor – <kbd>ALT</kbd> + klik</p>" ;
    }
    
    
    help.innerHTML = hc;
    
}