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

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

function initApplication() 
{
$( "#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()
      if (pid == "tabs-4") generateCodeNewDesign()
      //if (ui.newTab) 
    //
    } 
    );
    
  $("#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");
        }
    });   
  }
 
function resetAll() {
     /*
    $("#editForms section").remove();
    addPlainArea();
    
    $(".droparea").remove()
    $("#dragbase .draggable").remove()
    document.getElementById("edit_title").innerHTML = ""
    document.getElementById("edit_task").innerHTML = ""
    
    var bgImg = document.querySelector("#img_placeholder img");
    if (bgImg) bgImg.parentNode.removeChild(bgImg)
    var bgInit = document.getElementById("bg-init");
    bgInit.style.display = "block";
    
    $( "#tabs" ).tabs( "option", "active", 0 );
    
    deleteMedia();  
    */
   // $("#br-init").html("").click(function() { $('#dialog-setBgImage' ).dialog( 'open' ) })
    
}

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

    function setMode(mode) {
       resetAll()
    
       document.getElementById("main_select").style.display = "none"
       document.getElementById("edit_panes").style.display = "block"
       
       mainMode = mode;
       /*
       var demo = document.getElementById("demos");
       demo.style.display = ( demos[mainMode].length > 0) ? "block" : "none"
       
       $("#demos input").remove();
       
       for (var i = 0; i < demos[mainMode].length; i++) {
         var input = demo.appendChild(document.createElement("input"));
         input.type = "button";
         input.value = (i+1);
         input.onclick = showDemo;
         input.className = "ui-button ui-widget ui-state-default ui-corner-all";
         input.setAttribute("data-index", i)
       }             
       */
       switch (mode) {
          case "gap_input":
            document.getElementById("dragbase").style.display = "none"
            
            document.getElementById("browser_warning").style.display = "none"
            document.getElementById("form_relative").style.display = "block";
            CKEDITOR.inline( 'edit_title', configEdit );
            CKEDITOR.inline( 'edit_task', configEdit );
            
            
            document.getElementById("insert_t").style.display = "inline"
            document.getElementById("insert_n").style.display = "inline"
            document.getElementById("insert_v").style.display = "inline"
            document.getElementById("insert_a").style.display = "inline"          
            
            document.getElementById("replace_t").style.display = "inline"
            document.getElementById("replace_n").style.display = "inline"
            document.getElementById("replace_v").style.display = "inline"
            
            document.getElementById("form_absolute").style.display = "none"
          break;
          
          case "gap_select":
            document.getElementById("dragbase").style.display = "none"
            document.getElementById("browser_warning").style.display = "none"
            document.getElementById("form_relative").style.display = "block"
            document.getElementById("insert_t").style.display = "none"
            document.getElementById("insert_n").style.display = "none"
            document.getElementById("insert_v").style.display = "inline"
            document.getElementById("insert_a").style.display = "none"          
            
            document.getElementById("replace_t").style.display = "none"
            document.getElementById("replace_n").style.display = "none"
            document.getElementById("replace_v").style.display = "inline"
            
            document.getElementById("form_absolute").style.display = "none"
          break;
          
          case "gap_dad":
            document.getElementById("browser_warning").style.display = "block"
            document.getElementById("dragbase").style.display = "none"
            document.getElementById("form_relative").style.display = "block"
            document.getElementById("insert_t").style.display = "inline"
            document.getElementById("insert_n").style.display = "none"
            document.getElementById("insert_v").style.display = "none"
            document.getElementById("insert_a").style.display = "none"          
            
            document.getElementById("replace_t").style.display = "inline"
            document.getElementById("replace_n").style.display = "none"
            document.getElementById("replace_v").style.display = "none"
            
            document.getElementById("form_absolute").style.display = "none"
          break;
          
          case "desc_input":
            document.getElementById("browser_warning").style.display = "none"
            document.getElementById("dragbase").style.display = "none"
            document.getElementById("form_relative").style.display = "none"
            
            document.getElementById("delSelectedDraggable").style.display = "none"            
            document.getElementById("form_absolute").style.display = "block"
            document.getElementById("insert_t_dad").style.display = "inline"
            document.getElementById("insert_pic_dad").style.display = "none"
            
            document.getElementById("imgSize").style.display = "none"
            document.getElementById("textValue").style.display = "block"
            
          break;
          
          case "desc_dad":
            document.getElementById("browser_warning").style.display = "block"
            document.getElementById("dragbase").style.display = "none"
            document.getElementById("form_relative").style.display = "none"
            
            document.getElementById("delSelectedDraggable").style.display = "none"             
            document.getElementById("form_absolute").style.display = "block"
            document.getElementById("insert_t_dad").style.display = "inline"
            document.getElementById("insert_pic_dad").style.display = "none"
            
            document.getElementById("imgSize").style.display = "none"
            document.getElementById("textValue").style.display = "block"
          break;
          
          case "pic_dad":
          document.getElementById("browser_warning").style.display = "block"
             document.getElementById("dragbase").style.display = "block"
            document.getElementById("form_relative").style.display = "none"
                        
            document.getElementById("form_absolute").style.display = "block"
            document.getElementById("insert_t_dad").style.display = "none"
            document.getElementById("insert_pic_dad").style.display = "inline"
            
            document.getElementById("imgSize").style.display = "block"
            document.getElementById("textValue").style.display = "none"
          break;
          
          case "match_multiple":
            document.getElementById("dragbase").style.display = "none"
            
            document.getElementById("browser_warning").style.display = "none"
            document.getElementById("form_relative").style.display = "block";
            CKEDITOR.inline( 'edit_title', configEdit );
            CKEDITOR.inline( 'edit_task', configEdit );
            
            
            document.getElementById("insert_t").style.display = "none"
            document.getElementById("insert_n").style.display = "none"
            document.getElementById("insert_v").style.display = "none"
            document.getElementById("insert_a").style.display = "none"          
            
            document.getElementById("replace_t").style.display = "none"
            document.getElementById("replace_n").style.display = "none"
            document.getElementById("replace_v").style.display = "none"
            
            document.getElementById("form_absolute").style.display = "none"
          break;
          
          default: 
          break;
       }
    }


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.
	var eButtons = document.getElementById( 'eButtons' );
	if (eButtons) {
		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!' );
		
	
}

function addSubquestion(node) {
  
  var section = node.parentNode.insertBefore(document.createElement("section"), node);
  section.className = "subquestion"
  
  var task = section.appendChild(document.createElement("h4"))
  task.setAttribute("contenteditable", "true");
  task.innerHTML = "zadání"
  
  var div = section.appendChild(document.createElement("div"));
  div.setAttribute("contenteditable", "true");
  div.innerHTML = "&nbsp;";
  div.className = "editArea"
  
  var toolbar = section.appendChild(document.createElement("fieldset"));
  toolbar.className = "toolbar"
  
  var input = toolbar.appendChild(document.createElement("input"));
  input.type = "button";
  input.value = "Smazat podotĂĄzku";
  input.className = "deleter"
  input.onclick = function () { deleteSubquestion(this) }
  
  CKEDITOR.inline(div, configEdit)
  CKEDITOR.inline(task, configEdit)
}

function addSubquestionRC(node, type) {
  var varCount = parseInt(document.getElementById("count_sq" + type).value );
  if (varCount == undefined || isNaN(varCount)) varCount = 3;
  var section = node.parentNode.insertBefore(document.createElement("section"), node);
  section.className = "subquestion choicer"
  
  var task = section.appendChild(document.createElement("h4"))
  task.setAttribute("contenteditable", "true");
  task.innerHTML = "zadání"
  
  var list = section.appendChild(document.createElement("ol"));
  
  for (var i =0; i < varCount; i++) {
    list.appendChild(createRCVariant(type));
    
  }
  var appender = section.appendChild(document.createElement("input"));
    appender.type = "button";
    //appender.src = "design/add_option.png";
    appender.value = "Přidat položku";
    appender.title = "Přidat položku"
    appender.className = "itemAppender";
    appender.onclick = function () { appendRCVariant(this) }
  
    var toolbar = section.appendChild(document.createElement("fieldset"));
    toolbar.className = "toolbar"
    
    var input = toolbar.appendChild(document.createElement("input"));
    input.type = "button";
    input.value = "Smazat podotĂĄzku";
    input.className = "deleter"
    input.onclick = function () { deleteSubquestion(this) }
  
}

function appendRCVariant(node) {
  var list = node.parentNode.querySelector("ol");
  var type = list.querySelector(".checker").type
  list.appendChild(createRCVariant(type.charAt(0)));
} 

function deleteRCVariant(node) {
  var item = node.parentNode;
  item.parentNode.removeChild(item);  
}

function createRCVariant(type) {
  var li = document.createElement("li");
    
    var deleter = li.appendChild(document.createElement("input"));
    deleter.type = "image";
    deleter.value = "x";
    deleter.src= "design/delete_option.png"
    deleter.title = "Smazat poloĹžku"
    deleter.className = "deleter";
    deleter.onclick = function () { deleteRCVariant(this) } 
                                     
    var editer = li.appendChild(document.createElement("span"));
    editer.className = "editer";
    
    var check = editer.appendChild(document.createElement("input"));
    check.type = (type == "r") ? "radio" : "checkbox";
    
     check.setAttribute("name", type + "c");
    check.className = "checker";
    
    var scorer = editer.appendChild(document.createElement("input"));
    scorer.type = "text";
    scorer.placeholder = "body"
    scorer.size = 3;
    
    var editArea = li.appendChild(document.createElement("div"));
    editArea.setAttribute("contenteditable", "true");
    editArea.innerHTML = "&nbsp;";
    editArea.className = "editArea" 
    CKEDITOR.inline(editArea, configEdit);
    
    return li;
}

function addPlainArea(node) {
    
  if (node == undefined) {
    node = document.getElementById("editForms").firstChild;
  }
  
  var section = node.parentNode.insertBefore(document.createElement("section"), node);
  
  section.className = "subquestion"
  
  var div = section.appendChild(document.createElement("div"));
  div.setAttribute("contenteditable", "true");
  div.innerHTML = "&nbsp;";
  div.className = "editArea"
  
  var toolbar = section.appendChild(document.createElement("fieldset"));
  toolbar.className = "toolbar"
  
  var input = toolbar.appendChild(document.createElement("input"));
  input.type = "button";
  input.value = "Smazat podotĂĄzku";
  input.className = "deleter"
  input.onclick = function () { deleteSubquestion(this) }
 
  currentEditor = CKEDITOR.inline(div, configEdit)
 
}

function deleteSubquestion(node) {
  if (confirm("Opravdu smazat podotĂĄzku?")) {
  var sq = node.parentNode.parentNode;
  sq.parentNode.removeChild(sq);
  }  
}


function insertTestItem(itype) {
	// vlozit testovou polozku
	//var editor = CKEDITOR.instances.editor1;
	var editor = CKEDITOR.currentInstance;
	
	// Check the active editing mode.
	if ( editor.mode == 'wysiwyg' )
	{
		// Insert HTML code.
		// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml
		
		var selection = editor.document.getSelection();
    if (selection.getType() == CKEDITOR.SELECTION_ELEMENT ) return;
   
    if (selection.getType() == CKEDITOR.SELECTION_TEXT) {
      var content = (selection.getRanges(true)[0].collapsed) ? "text" : selection.getSelectedText()
      var opts = content.split(/\s*[|\/]\s*/g)
         
      var ti = "<span class=\"testitem " + itype + "\" contenteditable=\"false\" data-type=\"" + itype + "\">"
      for (var oi =0; oi < opts.length; oi++) {
        var spravna = ""
        if (opts[oi].indexOf("*") == 0 && itype == "v") {
          spravna = " data-correct='ok' ";
          opts[oi] = opts[oi].substring(opts[oi].indexOf("*") + 1);
        }
        ti += "<span class=\"option\" data-feedback=\"\" data-score=\"\" " + spravna +">" + opts[oi] + "<\/span>"
      
      }
		 ti += "<\/span>"
		
		 editor.insertHtml(ti)
		 }
     //if (selection.getType() == CKEDITOR.SELECTION_NONE) 
     else {
      var content = "text"
       
      var ti = editor.insertElement("span");
      ti.appendText(content)
      
      editor.insertHtml(ti)
    }
	}
	else
		alert( 'You must be in WYSIWYG mode!' );
		
	getInputMaxLength()
}

var defaultTI = {
                a : "<textarea data-type='a' class='testitem a' contenteditable=\"false\" rows='2' cols='70' ></textarea>",
                t : "<span class=\"testitem t\" contenteditable=\"false\" data-type=\"t\"><span class=\"option\" data-feedback=\"\" data-score=\"\">text</span></span>",
                n : "<span class=\"testitem n\" contenteditable=\"false\" data-type=\"n\"><span class=\"option\" data-feedback=\"\" data-score=\"\">12.3</span></span>",
                v : "<span class=\"testitem v\" contenteditable=\"false\" data-type=\"v\"><span class=\"option\" data-feedback=\"\" data-score=\"\" data-correct=\"ok\">varianta 1</span><span class=\"option\" data-feedback=\"\" data-score=\"\">varianta 2</span><span class=\"option\" data-feedback=\"\" data-score=\"\">varianta 3</span></span>"
                }

function readTestitem(node) {
 var iform = document.getElementById("edited_testitem");
 iform.parentNode.style.display = "block"; 
  iform.innerHTML = "";
  
  var itype = node.className.substring(node.className.indexOf(" ") +1);
  if (itype == "t" || itype == "n" || itype == "v") {
      var opts = node.querySelectorAll(".option");
      var table = iform.appendChild(document.createElement("table"));
      
        var thead = table.appendChild(document.createElement("tr"))
        var th = thead.appendChild(document.createElement("th"))
        th = thead.appendChild(document.createElement("th"))
        th.innerHTML = "OK"
        th = thead.appendChild(document.createElement("th"))
        th.innerHTML = "Hodnota"
        th = thead.appendChild(document.createElement("th"))
        th.innerHTML = "Body"
        
        th = thead.appendChild(document.createElement("th"))
        th.innerHTML = "Feedback"
        
        iform.appendChild(table)
        
        for (var i = 0; i < opts.length; i++) {
        var tr = table.appendChild(   document.createElement("tr") )
        
        var td = tr.appendChild(document.createElement("td"))
        var input = td.appendChild(document.createElement("input"));
        input.value = "Odstranit variantu";
        input.title = "Odstranit variantu";
        input.type = "image";
        input.src = "design/delete_option.png";
        input.onclick = removeTIOption;
        
        var isOK = (itype == "t" || itype == "n") ? true : opts[i].hasAttribute("data-correct")
        td = tr.appendChild(document.createElement("td"))
        input = td.appendChild(document.createElement("input"));
        input.value = "Varianta je OK";
        input.title = "Varianta je OK";
        input.type = "checkbox";
        input.checked = isOK;
        input.onchange = function () { updateTestitem() }
        if (isOK && itype == "v") tr.className = "correct"
                        
        td = tr.appendChild(document.createElement("td"))
        var input1 = document.createElement("input");
        input1.value = opts[i].innerHTML;
        input1.onchange = function () { updateTestitem() }
        input1.onkeyup = function () { updateTestitem() }
        td.className = "ti_value"
        td.appendChild(input1)
        
        td = tr.appendChild(document.createElement("td"))
        var input2 = document.createElement("input");
        input2.value = opts[i].getAttribute("data-score");
        input2.onchange = function () { updateTestitem() }
        input2.onkeyup = function () { updateTestitem() }
        td.className = "ti_score"
        td.appendChild(input2)
        
        td = tr.appendChild(document.createElement("td"))
        var input3 = document.createElement("input");
        input3.value = opts[i].getAttribute("data-feedback");
        input3.onchange = function () { updateTestitem() }
        input3.onkeyup = function () { updateTestitem() }
        td.className = "ti_feedback"
        td.appendChild(input3)
       
      }
      var adder =  iform.appendChild(document.createElement("input"));
      adder.type = "image"
      adder.src = "design/add_option.png"
      adder.title = "Přidat variantu"
      adder.value = "Přidat variantu"
      adder.onclick = function () { addTIOption(); updateTestitem() } 
    
      
      var updater =  document.createElement("input");
      updater.type = "button"
      updater.title = "Uložit změny a zavřít"
      updater.value = "OK"
      updater.onclick = function (evt) { updateTestitem(evt); this.parentNode.parentNode.style.display = 'none' }
      iform.appendChild(updater)
      }
      
      
      
    if (itype == "a") {
      var label = iform.appendChild(document.createElement("label"))
      label.appendChild(document.createTextNode("Šířka: "))
      var input = label.appendChild(document.createElement("input"))
      input.type = "text"
      input.value = node.cols
      input.setAttribute("data-min", "40");
      input.setAttribute("data-max", "120");
      input.setAttribute("data-target", "cols");
      var inc = label.appendChild(document.createElement("input"))
      inc.type = "button"
      inc.value = "+"
      inc.setAttribute("data-change", "10");
      inc.onclick = changeValue;
      
      var dec = label.appendChild(document.createElement("input"))
      dec.type = "button"
      dec.value = "-"
      dec.setAttribute("data-change", "-10");
      dec.onclick = changeValue;
      
      label = iform.appendChild(document.createElement("label"))
      label.appendChild(document.createTextNode("Výťka: "))
      input = label.appendChild(document.createElement("input"))
      input.type = "text"
      input.value = node.rows
      input.setAttribute("data-min", "1");
      input.setAttribute("data-max", "15");
      input.setAttribute("data-target", "rows");
      
      inc = label.appendChild(document.createElement("input"))
      inc.type = "button"
      inc.value = "+"
      inc.setAttribute("data-change", "1");
      inc.onclick = changeValue;
      
      dec = label.appendChild(document.createElement("input"))
      dec.type = "button"
      dec.value = "-"
      dec.setAttribute("data-change", "-1");
      dec.onclick = changeValue; 
  }

}

function updateTestitem() {
  if (!actSelected) return;
  actSelected.innerHTML = "";
  
  var opts = document.querySelectorAll("#edited_testitem tr");
  for (var i = 1; i < opts.length; i++) {
      
      var fields = opts[i].querySelectorAll("input");
      var opt = actSelected.appendChild(document.createElement("span"));
      opt.className = "option";
      if (fields[1].checked) opt.setAttribute("data-correct", "ok");
      opt.innerHTML = fields[2].value;
      opt.setAttribute("data-score", fields[3].value);
      opt.setAttribute("data-feedback", fields[4].value);
      
  
  }
  
  getInputMaxLength()
}

function addTIOption() {
var table = document.querySelector("#edited_testitem table")
    var tr = table.appendChild(document.createElement("tr"))
    
    var td = tr.appendChild(document.createElement("td"))
     var input = td.appendChild(document.createElement("input"));
    input.value = "Odstranit variantu";
    input.title = "Odstranit variantu";
    input.type = "image";
    input.src = "design/delete_option.png";
    input.onclick = removeTIOption;
    
    td = tr.appendChild(document.createElement("td"))
    input = td.appendChild(document.createElement("input"));
    input.value = "Varianta je OK";
    input.title = "Varianta je OK";
    input.type = "checkbox";
    input.checked = false;
    input.onclick = function () { updateTestitem() }
    input.onchange = function () { updateTestitem() }
    
    
    td = tr.appendChild(document.createElement("td"))
    var input1 = document.createElement("input");
    input1.value = "";
    input1.onkeyup = function () { updateTestitem() }
    input1.onchange = function () { updateTestitem() }
    td.className = "ti_value"
    td.appendChild(input1)
    
    td = tr.appendChild(document.createElement("td"))
    var input2 = document.createElement("input");
    input2.value = "";
    input2.onkeyup = function () { updateTestitem() }
    input2.onchange = function () { updateTestitem() }
    td.className = "ti_score"
    td.appendChild(input2)
    
    td = tr.appendChild(document.createElement("td"))
    var input3 = document.createElement("input");
    input3.value = "";
    input3.onkeyup = function () { updateTestitem() }
    input3.onchange = function () { updateTestitem() }
    td.className = "ti_feedback"
    td.appendChild(input3)
}

function removeTIOption(evt) {
  var tr = evt.currentTarget;
  if (tr.nodeName.toLowerCase() == "input") tr = tr.parentNode.parentNode;
  
  var rodic = tr.parentNode;
  if (rodic.querySelectorAll("tr").length > 2) {
      rodic.removeChild(tr);
      updateTestitem();
  }
  else { alert("V prvku musí zůstat alespoň jedna varianta"); return;  }
  
  
}

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 == "gap_input") q_content = GapInput.getCode() 
   if (mainMode == "gap_select") q_content = getGapSelectCode()
   if (mainMode == "gap_dad") q_content = getGapDadCode()
   if (mainMode == "desc_input") q_content = getDescInputCode()
   if (mainMode == "desc_dad") q_content = getDescDadCode()
   if (mainMode == "pic_dad") q_content = getPicDadCode()
   
   if (mainMode == "match_multi") q_content = MatchMultiple.getCode()
   
   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\"; " 
    if (mainMode =="match_multi") vystup +=  "@import \"/do/rek/el/storage/utils/matching/matching.css\"; ";
    vystup += "<\/style>\n"
    
    var classDAD = ""
    if (mainMode =="gap_dad" || mainMode =="desc_dad" || mainMode =="pic_dad"  ) {
        vystup += "<script src=\"https://is.muni.cz/auth/do/rect/el/storage/utils/dad/EventHelpers.js\" type=\"text/javascript\"></script>\n" + 
        "<script src=\"https://is.muni.cz/auth/do/rect/el/storage/utils/dad/DragDropHelpers.js\" type=\"text/javascript\"></script>" + 
        "<script src=\"https://is.muni.cz/auth/do/rect/el/storage/utils/dad/dragAndDrop_04.js\" type=\"text/javascript\"></script>\n";
        classDAD = " dad_move_sc"
    }
   
   if (mainMode =="pic_dad") {
    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_04.js\" type=\"text/javascript\"><\/script>\n"
    classDAD = " dad_clone" 
   }
    
     if (mainMode =="match_multi") {
    vystup += " <script src=\"/do/rek/el/storage/utils/matching/matching.js\"></script>\n"; 
   }
    
    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 //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"
    }

    if ( mainMode == "pic_dad") {
        vystup += "<div class=\"dragbase\">\n";
        var spans = q_content.draggables //document.querySelectorAll("#dragbase span")
        for (var i = 0; i < spans.length; i++) {
            vystup += "<img class=\"draggable\" draggable=\"true\" data-id=\"" +  spans[i].id + "\" src=\"" + spans[i].src + "\" width=\"" + spans[i].width + "\" height=\"" + spans[i].height + "\" alt=\"draggable item\" \>\n"
        }   

        vystup += "<\/div>\n"
    }
   
    //audio nebo video v otazce
    var figure = document.querySelector("#multimedia_insert figure");
    if (figure) {
        vystup += "\n<figure>" + figure.innerHTML + "</figure>\n\n"
    }
    
   vystup += "<div class=\"content\">\n"
   vystup += q_content.content + "\n</div>\n</div>\n"
   
   if (mainMode.indexOf("dad") > -1) {
        vystup += "<p><script>updateDraggables();DragDropHelpers.fixVisualCues = true</script></p>\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")   
     $('#code_shower' ).val(vystup)
   // $('#dialog-showCode' ).dialog( 'open' )
   //document.getElementById("question_code").value = vystup;
}

function generateCodeNewDesign() {
    var q_content;
   if (mainMode == "gap_input") q_content = GapInput.getCode() 
   if (mainMode == "gap_select") q_content = getGapSelectCode()
   if (mainMode == "gap_dad") q_content = getGapDadCode()
   if (mainMode == "desc_input") q_content = getDescInputCode()
   if (mainMode == "desc_dad") q_content = getDescDadCode()
   if (mainMode == "pic_dad") q_content = getPicDadCode()
   
   if (mainMode == "match_multi") q_content = MatchMultiple.getCodeNew()
   
   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>"
 
   
   if (qTask != "") vystup += "\n\n::" + qTask +"::\n\n"
     
   
  
   vystup += q_content.content + "\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")   
     $('#code_shower_new' ).val(vystup)
   // $('#dialog-showCode' ).dialog( 'open' )
   //document.getElementById("question_code").value = vystup;
}

var GapInput = {
   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;
        }

    
}

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 getGapInputCode() {
   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}
    // zjisteni max. delky pouziteho retezce
   /*
    var maxLength = 0;
    var tisT = obsah.querySelectorAll(".testitem.t .option");
    for (var i = 0; i < tisT.length; i++) {
        maxLength = Math.max(maxLength, tisT[i].innerHTML.length);
    }
    */
    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])
        }
       
      
    }
    
   result.content = obsah.innerHTML
   return result;  
}

function getGapSelectCode() {
   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}
    // zjisteni max. delky pouziteho retezce
    var maxLength = 0;
        
    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 == "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 getGapDadCode() {
   var result = { content: "", ok: "", draggables : [] }
   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}
    // zjisteni max. delky pouziteho retezce
     var tisT = document.querySelectorAll(".testitem.t .option");
    for (var i = 0; i < tisT.length; i++) {
        result.draggables.push(tisT[i].innerHTML)
    }
   
    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] + "  "
            var newTi = document.createElement("span");
            newTi.setAttribute("style", "width: " + textMaxLength + "px;")
            newTi.className = "droparea_move_sc"
            newTi.appendChild(document.createTextNode( " :t" + ti_counts[type] + "  ")); 
            tis[i].parentNode.insertBefore(newTi, 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_ += "_"
  
    
    
    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 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;
           result.ok += ":t" + ti_counts[type] + "=\"" + tis[i].innerHTML +"\" ok " + score + "\n"
           var positionTop = tis[i].parentNode.style.top;
           positionTop = parseFloat(positionTop.substring(0, positionTop.indexOf("px")))
           positionTop += 8
           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 += " :t" + ti_counts[type] + t_ + " "
           result.content += "</div>\n"
           
           
        }
       
      
    }
    
  
   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_ += "_"
  
    
    
    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 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;
           result.ok += ":t" + ti_counts[type] + "=\"" + tis[i].innerHTML +"\" ok " + score + "\n"
           result.draggables.push(tis[i].innerHTML)
           
           var positionTop = tis[i].parentNode.style.top;
           positionTop = parseFloat(positionTop.substring(0, positionTop.indexOf("px")))
           var positionLeft = tis[i].parentNode.style.left;
           positionLeft = 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) + ";width: " + (textMaxLength +0)+ "px\">"
           result.content += " :t" + ti_counts[type] + t_ + " "
           result.content += "</div>\n"
           
           
        }
       
      
    }
    
  
   return result;  
}

function getPicDadCode() {
   var result = { content: "", ok: "", draggables : [], dropareas: [] } 
  
   var dragitems = "";
   var dropareas = ""
 
   var contentWidth = 0;
   var contentHeight = 0;
   var maxWidth = 0;
   var maxHeight = 0;
   var spravne = ""
   
   var drops = $(".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")
    
        result.ok  += ":t" + (i+1) + "=\"" + source +"\" 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"
           
      }
 
    if (!bgImage.src || bgImage.src == "") {
       alert("ChybĂ­ podkladovĂ˝ obrĂĄzek otĂĄzky!")
       return "\n\n\nChybĂ­ podkladovĂ˝ obrĂĄzek otĂĄzky!\n\n\n"
    }
    
    contentWidth = Math.max(contentWidth, bgImage.offsetWidth)   
    contentHeight = Math.max(contentHeight, bgImage.offsetHeight)
    
    var drags = $(".draggable");
    
    for (var i = 0; i < drags.length; i++) {
            
       if (drags[i].nodeName.toLowerCase() == "img") {
               
        var dragitem = { id: drags[i].getAttribute("data-id"), src: drags[i].src, width: drags[i].width, height: drags[i].height  }
        result.draggables.push(dragitem) 
        
          }
        }
      
    var dragbase = "<div class=\"dragbase\">" + dragitems + "</div>\n"
  
     
    result.content += "<div class=\"popisovaci\" style=\"position: relative; width: " + bgImage.width +"px; height: " + bgImage.height +"px; background: url(" + bgImage.src + ") no-repeat\">\n"
    result.content += dropareas; 
    result.content += "<\/div>\n"
    
    if (!document.getElementById("mode_auth").checked) result.content = result.content.replace(/https:\/\/is.muni.cz\/auth/g, "http://is.muni.cz")
   
   else { result.content = result.content.replace(/http:\/\/is.muni.cz/g, "https://is.muni.cz/auth") }
   
   return result;
   }

function generatePreview() {
    var q_content;
   if (mainMode == "gap_input") q_content = GapInput.getPreview() 
   if (mainMode == "gap_select") q_content = getGapSelectPreview()
   if (mainMode == "gap_dad") q_content = getGapDadPreview()
   if (mainMode == "desc_input") q_content = getDescInputPreview()
   if (mainMode == "desc_dad") q_content = getDescDadPreview()
   if (mainMode == "pic_dad") q_content = PicDad.getPreview()
   
   if (mainMode == "match_multi") q_content = MatchMultiple.getPreview()
   
   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/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_04.js\" type=\"text/javascript\"><\/script>\n"
        classDAD = " dad_move_sc"
    }
    
    if (mainMode =="pic_dad") {
    classDAD = " dad_clone" 
   }
    
    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 //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"
    }

    if ( mainMode == "pic_dad") {
        vystup += "<div class=\"dragbase\">\n";
        var spans = q_content.draggables //document.querySelectorAll("#dragbase span")
        for (var i = 0; i < spans.length; i++) {
            vystup += "<img class=\"draggable\" draggable=\"true\" data-id=\"" +  spans[i].id + "\" src=\"" + spans[i].src + "\" width=\"" + spans[i].width + "\" height=\"" + spans[i].height + "\" alt=\"draggable item\" \>\n"
        } 
    }
   
    //audio nebo video v otazce
    var figure = document.querySelector("#multimedia_insert figure");
    if (figure) {
        vystup += "<figure>" + figure.innerHTML + "</figure>"
    }
    
  
   vystup += "<div class=\"content\">\n"
   
   vystup += q_content.content
  
   vystup = vystup.replace(/td style="[^"]+"/g, "td") 
   //if (mainMode.indexOf("desc") > -1 || mainMode == "pic_dad" ) vystup += q_content.content
   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;
     if (mainMode.indexOf("dad") > -1) {
        vystup += "<p><script>updateDraggables();DragDropHelpers.fixVisualCues = true</script></p>\n";
          updateDraggables()
     DragDropHelpers.fixVisualCues = true
   }
   
//    document.getElementById("dialog-showPreview").style.display = "block"; 
    //$('#dialog-showPreview' ).dialog( 'open' )
   //document.getElementById("question_code").value = vystup;
}

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;
    //alert(textMaxChars) 
}

function getGapInputPreview() {
   var result = { content: "" } 
   var obsah = document.createElement("div");
   obsah.innerHTML = CKEDITOR.instances.editor1.getData();
  
    // zjisteni max. delky pouziteho retezce
   
    
 
    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])
        }
       
      
    }
   result.content = obsah.innerHTML  
   return result;  
}

function getGapSelectPreview() {
   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}
    // zjisteni max. delky pouziteho retezce
    var maxLength = 0;
        
    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 == "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;  
}

function getGapDadPreview () {
    var result = { content: "", draggables: [] } 
   var obsah = document.createElement("div");
   obsah.innerHTML = CKEDITOR.instances.editor1.getData();
  
    // zjisteni max. delky pouziteho retezce
    
    var tisT = $(".testitem.t .option");
    for (var i = 0; i < tisT.length; i++) {
        
        result.draggables.push(tisT[i].innerHTML)
    }
  
    
 
    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("span");
            newTi.setAttribute("style", "width: " + textMaxLength + "px;")
            newTi.className = "droparea_move_sc";
            
            var field = newTi.appendChild(document.createElement("input"));
            field.type = "text"
            field.value = ""
            
                        
            tis[i].parentNode.insertBefore(newTi, tis[i]);
            tis[i].parentNode.removeChild(tis[i])
        }
       
      
    }
   result.content = obsah.innerHTML
   return result;  
}

function getDescInputPreview() {
   var result = { content: "", ok: "", draggables : [] }
   
    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 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 : [] }
   
    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 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.push(tis[i].innerHTML)
           var positionTop = tis[i].parentNode.style.top;
           positionTop = parseFloat(positionTop.substring(0, positionTop.indexOf("px")))
           var positionLeft = tis[i].parentNode.style.left;
           positionLeft = 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 getPicDadPreview() {
   var result = { content: "", ok: "", draggables : [], dropareas: [] } 
  
  var dropareas = ""
 
   var contentWidth = 0;
   var contentHeight = 0;
   var maxWidth = 0;
   var maxHeight = 0;
   
   var drops = $(".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")
    
        dropareas += " <span class=\"droparea_clone\" style=\"position: absolute; top: " + dropY + "px; left: " +  dropX + "px; width: " + droparea.width +"px; height: " +  droparea.height +"px; line-height: " +  (droparea.height -2) + "px \"><input type='text'/></span>\n"
           
      }   
 
    if (!bgImage.src || bgImage.src == "") {
       alert("ChybĂ­ podkladovĂ˝ obrĂĄzek otĂĄzky!")
       return "\n\n\nChybĂ­ podkladovĂ˝ obrĂĄzek otĂĄzky!\n\n\n"
    }
    
    contentWidth = Math.max(contentWidth, bgImage.offsetWidth)   
    contentHeight = Math.max(contentHeight, bgImage.offsetHeight)
    
    var drags = $(".draggable");
    
    for (var i = 0; i < drags.length; i++) {
            
       if (drags[i].nodeName.toLowerCase() == "img") {
               
        var dragitem = { id: drags[i].getAttribute("data-id"), src: drags[i].src, width: drags[i].width, height: drags[i].height  }
        result.draggables.push(dragitem) 
        
          }
        }
      
   // var dragbase = "<div class=\"dragbase\">" + dragitems + "</div>\n"
  
     
    result.content += "<div class=\"popisovaci\" style=\"position: relative; width: " + bgImage.width +"px; height: " + bgImage.height +"px; background: url(" + bgImage.src + ") no-repeat\">\n"
    result.content += dropareas; 
    result.content += "<\/div>\n"
    
    if (!document.getElementById("mode_auth").checked) result.content = result.content.replace(/https:\/\/is.muni.cz\/auth/g, "http://is.muni.cz")
   
   else { result.content = result.content.replace(/http:\/\/is.muni.cz/g, "https://is.muni.cz/auth") }
  
   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 = ""
}

//************************   vkladani a editace multimedii - video, audio *********/
var actMedia = null;

var video_widths = [360, 480, 600];
var video_ratios = [1.333, 1.778];

function insertVideo(url, w, h) {
    var mmedia = document.getElementById("multimedia_insert")
    var figure = mmedia.querySelector("figure");
    if (!figure) figure = mmedia.insertBefore( document.createElement("figure"),mmedia.firstChild);
    if (w == undefined) w= 480; 
    if (h == undefined) h= 360;
    if (url == undefined) url = "https://is.muni.cz/do/1499/el/nastroje/gem/media/info-odpovedniky.flv"
    var ratio = w/h;
    
    figure.innerHTML = "<object height=\"" + h +"\" width=\"" + w + "\" data=\"https://is.muni.cz/auth/do/1499/el/storage/players/player_city.swf\" type=\"application/x-shockwave-flash\">" + 
"<param value=\"sameDomain\" name=\"allowScriptAccess\" />" +
"<param value=\"https://is.muni.cz/auth/do/1499/el/storage/players/player_city.swf\" name=\"movie\" />" +
"<param name=\"flashVars\" value=\"klip=" + url +"&amp;autoplay=false&amp;loop=false\" />" +
"<param value=\"false\" name=\"menu\" />" +
"<param value=\"best\" name=\"quality\" />" +
"<param value=\"true\" name=\"allowFullScreen\" />  </object>";
    
    actMedia = {type: "video", width: w, height: h, url: url, ratio: ratio} //16:9 = 1:0.5625
    
    document.getElementById("vsize").value = 1;
    document.getElementById("vratio").value = 1.333;
    
    document.getElementById("video_url").innerHTML = url;
    
    document.getElementById("media_insert").style.display = "none"
    document.getElementById("video_settings").style.display = "block"
    document.getElementById("audio_settings").style.display = "none"
}

function setVideoSize(index) {
   var obj = document.getElementById("multimedia_insert").querySelector("object");
   if (!obj || !actMedia || actMedia.type != "video") return;
   if (actMedia.width == video_widths[index]) return;
    
    actMedia.width = video_widths[index];
    actMedia.height = Math.round(video_widths[index]/actMedia.ratio)
    obj.setAttribute("width", actMedia.width);
    obj.setAttribute("height", actMedia.height);
    
}

function setVideoRatio(ratio) {
  
    var obj = document.getElementById("multimedia_insert").querySelector("object");
    if (!obj || !actMedia || actMedia.type != "video" ) return;
    
    if (typeof ratio == "string") ratio = parseFloat(ratio)
    if (isNaN(ratio)) return;
    
    actMedia.ratio = ratio;
    actMedia.height = Math.round(actMedia.width/ratio)
        
    obj.setAttribute("width", actMedia.width);
    obj.setAttribute("height", actMedia.height);
    
}

function insertAudio(url) {
    var mmedia = document.getElementById("multimedia_insert")
    var figure = mmedia.querySelector("figure");
    if (!figure) figure = mmedia.insertBefore( document.createElement("figure"),mmedia.firstChild);
    var w= 300; 
    var h= 70;
    if (url == undefined) url = "https://is.muni.cz/do/1499/el/nastroje/gem/media/elportal.mp3"
   
    
    figure.innerHTML = "<object height=\"" + h +"\" width=\"" + w + "\" data=\"https://is.muni.cz/auth/do/1499/el/storage/players/soundplayer_auto.swf\" type=\"application/x-shockwave-flash\">" + 
"<param value=\"sameDomain\" name=\"allowScriptAccess\" />" +
"<param value=\"https://is.muni.cz/auth/do/1499/el/storage/players/soundplayer_auto.swf\" name=\"movie\" />" +
"<param name=\"flashVars\" value=\"klip=" + url +"&amp;autoplay=false&amp;loop=false\" />" +
"<param value=\"false\" name=\"menu\" />" +
"<param value=\"best\" name=\"quality\" />" +
"</object>";
    
    actMedia = {type: "audio", url: url}
    document.getElementById("audio_url").innerHTML = url;
    document.getElementById("media_insert").style.display = "none"
    document.getElementById("video_settings").style.display = "none"
    document.getElementById("audio_settings").style.display = "block"
    
}

function deleteMedia() {
   var mmedia = document.getElementById("multimedia_insert")
   var figure = mmedia.querySelector("figure");
   if (figure) figure.parentNode.removeChild(figure); 
    
    document.getElementById("media_insert").style.display = "block"
    document.getElementById("video_settings").style.display = "none"
    document.getElementById("audio_settings").style.display = "none"
    
}