var MatchMultiple = {
   getPreview: function () {
       var result = { content: "" } 
       var vystup = "<div class='matching_m'>"
      
        var tis = document.querySelectorAll("#editForms .base li");
       vystup += "<ol class='base'>"        
        for (var i = 0; i < tis.length-1; i++) {
          vystup += "<li>" + tis[i].querySelector(".editArea").innerHTML + "</li>";
          
        }
      vystup += "<li></li></ol>" 
      
      tis = document.querySelectorAll("#editForms .variants li"); 
       vystup += "<ol class='variants'>"
        for (var i = 0; i < tis.length-1; i++) {
          vystup += "<li>" + tis[i].querySelector(".editArea").innerHTML + "</li>";
          
        }
      vystup += "<li></li></ol>" 
      
      vystup += "</div>";  
       result.content = vystup
       return result;  
   },
    
    getCode: function () {
      
      var result = { content: "", ok: "" }
           
      var base = document.querySelector("#editForms .base");
      var blis = base.querySelectorAll("li");
        
      var variants = document.querySelector("#editForms .variants");
      var vlis = variants.querySelectorAll("li");
      
      var vars = {};
      var vClass = variants.className.replace(/\s?(edit|connect)/, "")
      var varList = "<ol class=\"" + vClass + "\">\n"
      for (var i = 0; i < vlis.length-1; i++) {
        var vid = vlis[i].getAttribute("data-id");
       
         var cont = vlis[i].querySelector(".editArea").innerHTML;
         if (vlis[i].className && vlis[i].className.indexOf("img")>-1) {
             varList += " <li class=\"img\"><img src=\"" + cont + "\" alt=\"matching item\" /></li>\n";
         }
          else varList += " <li>" + cont + "</li>\n";
          
         
        vars[vid] = i+1;
      }
      varList += "<ol>"
            
      var bondCount = 0;
      var bClass = base.className.replace(/\s?(edit|connect)/, "")
      var baseList = "<ol class=\"" + bClass +"\">\n"
      
      var pairing = "<div class=\"pairing\"> "
      for (var i = 0; i < blis.length-1; i++) {
        
         var cont = blis[i].querySelector(".editArea").innerHTML;
         if (blis[i].className && blis[i].className.indexOf("img")>-1) {
             baseList += "<li class=\"img\"><img src=\"" + cont + "\" alt=\"matching item\" /></li>\n";
         }
          else baseList += " <li>" + cont + "</li>\n";
          
                
        
        var bonds = blis[i].getAttribute("data-bonds");
        
        for (var j = 0; j < vlis.length-1; j++) {
            var vid = vlis[j].getAttribute("data-id");
            if (bonds.indexOf(vid) > -1) {
            result.ok += "\n:c" + (j+1) + "" + String.fromCharCode(i+97) + " ok  scoreOK";
            }
            else {
           result.ok += "\n:c" + (j+1) + "" + String.fromCharCode(i+97) + " scoreNOK"; 
            }  
            pairing += " :c" + (j+1) + String.fromCharCode(i+97) + " ";
        }
        result.ok += "\n"  
         pairing += "\n"    
        }
        
      
      baseList += "</ol>"
      
      var scoreOK = document.getElementById("score_ok_amount").value;
      if (document.getElementById("score_ok_units").value == "%") scoreOK += "%"; 
      
      var scoreNOK = document.getElementById("score_nok_amount").value;
      if (document.getElementById("score_nok_units").value == "%") scoreNOK += "%";
      if (document.getElementById("score_nok_units").value == "nop") scoreNOK = "0";
     
      result.ok = result.ok.replace( /scoreOK/g, scoreOK);
      result.ok = result.ok.replace(/scoreNOK/g, scoreNOK); 
      pairing += "</div>\n";
        
        
        
       result.content = "<div class=\"matching_m \">\n" + baseList + varList + pairing + "\n</div>\n";
       return result;
        },
	
	getCodeNew: function () {
      
      var result = { content: "", ok: "" }
           
      var base = document.querySelector("#editForms .base");
      var blis = base.querySelectorAll("li");
        
      var variants = document.querySelector("#editForms .variants");
      var vlis = variants.querySelectorAll("li");
      
      var vars = {};
      var vClass = variants.className.replace(/\s?(edit|connect)/, "")
      var varList = "\n<ol class=\"is_odp_variants\">\n"
      for (var i = 0; i < vlis.length-1; i++) {
        var vid = vlis[i].getAttribute("data-id");
       
         var cont = vlis[i].querySelector(".editArea").innerHTML;
         if (vlis[i].className && vlis[i].className.indexOf("img")>-1) {
             varList += " <li class=\"img\"><img src=\"" + cont + "\" alt=\"matching item\" /></li>\n";
         }
          else varList += " <li>" + cont + "</li>\n";
          
         
        vars[vid] = i+1;
      }
      varList += "</ol>"
            
      var bondCount = 0;
      var bClass = base.className.replace(/\s?(edit|connect)/, "")
      var baseList = "\n<ol class=\"is_odp_base\">\n"
      
      var pairing = "\n<div class=\"is_odp_pairing\"> "
      for (var i = 0; i < blis.length-1; i++) {
        
         var cont = blis[i].querySelector(".editArea").innerHTML;
         if (blis[i].className && blis[i].className.indexOf("img")>-1) {
             baseList += "<li class=\"img\"><img src=\"" + cont + "\" alt=\"matching item\" /></li>\n";
         }
          else baseList += " <li>" + cont + "</li>\n";
          
                
        
        var bonds = blis[i].getAttribute("data-bonds");
        
        for (var j = 0; j < vlis.length-1; j++) {
            var vid = vlis[j].getAttribute("data-id");
            if (bonds.indexOf(vid) > -1) {
            result.ok += "\n:c" + (j+1) + "" + String.fromCharCode(i+97) + " ok  scoreOK";
            }
            else {
           result.ok += "\n:c" + (j+1) + "" + String.fromCharCode(i+97) + " scoreNOK"; 
            }  
            pairing += " :c" + (j+1) + String.fromCharCode(i+97) + " ";
        }
        result.ok += "\n"  
         pairing += "\n"    
        }
        
      
      baseList += "</ol>"
      
      var scoreOK = document.getElementById("score_ok_amount").value;
      if (document.getElementById("score_ok_units").value == "%") scoreOK += "%"; 
      
      var scoreNOK = document.getElementById("score_nok_amount").value;
      if (document.getElementById("score_nok_units").value == "%") scoreNOK += "%";
      if (document.getElementById("score_nok_units").value == "nop") scoreNOK = "0";
     
      result.ok = result.ok.replace( /scoreOK/g, scoreOK);
      result.ok = result.ok.replace(/scoreNOK/g, scoreNOK); 
      pairing += "</div>\n";
        
        
        
       result.content = "<div class=\"is_odp_matching_m \">\n" + baseList + varList + pairing + "\n</div>\n";
       return result;
        }

    
}

function initMatchingEditor() {
  resetMatching();
  
  setEditMode("edit")
  
}

function resetMatching() {
    document.getElementById("edit_title").innerHTML = "";
    document.getElementById("edit_task").innerHTML = "";
    
    initMatching();
    setEditMode("edit")
}

var editMode = "edit";

function setEditMode(mode) {
  if (mode == editMode) return;
  
  editMode = mode;
 var base = document.querySelector(".base");
    base.classList.remove("edit");
    base.classList.remove("connect");
     base.classList.add(mode);
    
    var vars = document.querySelector(".variants");
    vars.classList.remove("edit");
    vars.classList.remove("connect");
     vars.classList.add(mode);
    
  var editAreas = document.querySelectorAll(".editArea");
   
  if (mode == "edit") {
    document.getElementById("mode_edit").checked = true;
    for (var i = 0; i < editAreas.length; i++) {
      editAreas[i].setAttribute("contentEditable", "true");
      editAreas[i].parentNode.onclick = null;
      
      editAreas[i].addEventListener( "keydown", function (evt) { } )
    }
    
  }
  
  if (mode == "connect") {
  document.getElementById("mode_connect").checked = true;
    for (var i = 0; i < editAreas.length; i++) {
      var ea = editAreas[i]; 
      ea.removeAttribute("contentEditable");
      ea.blur();
      var li =  ea.parentNode
      li.onclick = (li.hasAttribute("data-bonds")) ? function () { toggleBaseTerm(this);  } : function () { toggleVariant(this);  };
    }
    
  }
  
}

function showImportDialog() {
    
     $('#dialog-importCode' ).dialog( 'open' );
}


function importCode() {
    /*
    {
  title: "",
  task: "Свържете съществителните с прилагателните:",
  base: "апетит\nболка\nлекар\nпреглед\nпулс\nтемпература",
  variants: "викам\nгубя\nзаписвам се\nимам\nмеря\nпипам\nсвалям\nусещам",
  solution: [  [1, 3], [6, 7], [0, 2], [2], [5], [4, 6] ]
  },
   */
    
    var question = {
  title: "",
  task: "",
  base: "",
  variants: "",
  solution: [ ]  
    }
    
     var vstup = document.getElementById("import_code").value;
    if (vstup == "") return;
    
    var isOld = true;
    if (vstup.indexOf("::") > -1) {
        
            var qTask = vstup.match(/::[^:]+::/)
            console.log(qTask);
            if (qTask)  question.task = qTask[0].replace(/::/g, "");
        vstup = vstup.replace(/::([^:]+)::/, "<div class='task'>$1</div>");
        isOld = false;
    }
   
    var qText = (isOld) ? vstup.substring(vstup.indexOf("<div class='question"), vstup.indexOf("\n:")) : vstup.substring(vstup.indexOf("<div class=\"is_odp_matching_m"), vstup.indexOf("\n:"));
    
    var solution = vstup.substring(vstup.indexOf("\n:"));
    /*
    if (qText.indexOf("<div class=\"question") == -1) {
        alert("Tento typ otázky editor nepodporuje.")
        return;
    }
*/
  
   
    //qText = qText.substring(qText.indexOf("<div class=\"is_odp_matching_m"))
    
    
    //nacitani prvku z 
    
    var div = document.createElement("div");
    div.innerHTML = qText;
   
    var qTitle = div.querySelector(".title");
    if (qTitle) question.title = qTitle.innerHTML;
    
    var qTask = div.querySelector(".task");
    if (qTask) question.task = qTask.innerHTML;
    
    var bases = div.querySelectorAll(".is_odp_base li");
    if (isOld) {
        bases = div.querySelectorAll(".base li");
    }
    var bOut = []
    for (var i = 0; i < bases.length; i++) {
        bOut.push(bases[i].innerHTML);
        question.solution.push([]);
    }
    
    question.base = bOut.join("\n");
    
    var vars = div.querySelectorAll(".is_odp_variants li");
     if (isOld) {
        vars = div.querySelectorAll(".variants li");
    }
    var vOut = []
    for (var i = 0; i < vars.length; i++) {
        vOut.push(vars[i].innerHTML);
    }
    question.variants = vOut.join("\n");
    
    var lines = solution.split("\n") 
    
    for (var i = 0; i < lines.length; i++) {
        var line = lines[i].trim();
        if (line.indexOf("ok") > -1) {
            var prefix = line.substring(0, line.indexOf(" "));
            var last = prefix.charCodeAt(prefix.length-1) - 97;
            var index = parseInt(prefix.match(/\d+/), 10)-1;
            
            console.log("B " + last + ", " + index)
            question.solution[last].push(index);
        } 
        
    }
    
    
 if (question.title != "") document.getElementById("edit_title").innerHTML = question.title;
 if (question.task != "") document.getElementById("edit_task").innerHTML = question.task;
 
 setEditMode("edit");
 
 initMatching(question.base, question.variants);
 
 var blis = document.querySelectorAll(".base li");
 var vlis = document.querySelectorAll(".variants li");
 /*  */
 
 actBonds = [];
 
 for (var i = 0; i < question.solution.length; i++) {
 actBonds.push([]);
 for (var j = 0; j < vlis.length; j++) {
  actBonds[i].push(0);
 }
  var bonds = "";
  for (var j = 0; j < question.solution[i].length; j++) {
    var bindex = question.solution[i][j]; 
    //alert("" + i + ", " + bindex)
    actBonds[i][bindex] = 1;
    if (j > 0) bonds += " ";
    bonds += vlis[bindex].getAttribute("data-id");
  }
  blis[i].setAttribute("data-bonds", bonds);
 }
 
 
 redrawBonds();
}

function addMatchingMultiple(node) {
  var baseCount = 3;
  var varCount = 5; //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 matching_m"
  
    
  var list = section.appendChild(document.createElement("ol"));
  list.className = "base"
  for (var i =0; i < baseCount; i++) {
    blist.appendChild(createMatchVariant("base"));
    
  }
  
  list = section.appendChild(document.createElement("ol"));
  list.className = "variants"
  for (var i =0; i < varCount; i++) {
    list.appendChild(createMatchVariant("variant"));
    
  }
  
  var appender = section.appendChild(document.createElement("input"));
    appender.type = "button";
    //appender.src = "design/add_option.png";
    appender.value = "Přidat položku 1";
    appender.title = "Přidat položku 1 "
    appender.className = "itemAppender";
    appender.onclick = function () { appendMatchVariant(this, "base") }
    
    appender = section.appendChild(document.createElement("input"));
    appender.type = "button";
    //appender.src = "design/add_option.png";
    appender.value = "Přidat položku 2";
    appender.title = "Přidat položku 2"
    appender.className = "itemAppender";
    appender.onclick = function () { appendMatchVariant(this, "variant") }
  
  /*
    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 deleteMatchVariant(node) {
  var item = node.parentNode;
  /*if (item.hasAttribute("data-id")) {
    var vid = item.getAttribute("data-id");
    
    var blis = document.querySelectorAll(".base li");
    
    for (var i = 0; i < blis.length; i++) {
      var bonds =  blis[i].getAttribute("data-bonds");
    
      blis[i].setAttribute("data-bonds", bonds.replace( new RegExp(vid), ""  ));
    }
   }   */
  item.parentNode.removeChild(item);
  
  resizeCanvas();
  
}

function appendMatchVariant(type, content, image) {
 if (content == undefined) content = "položka";
var isImage = false;
if (image != undefined) isImage = image;
  var list = document.querySelector("ol." + type);
 
 var li = list.appendChild(document.createElement("li"));
    
    var deleter = 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 () { deleteMatchVariant(this) } 
    
    var editArea = document.createElement("div");
    editArea.innerHTML = content;
    editArea.className = "editArea" 
    if (editMode == "edit" ) {
      editArea.setAttribute("contenteditable", "true")
      editArea.onkeyup = function () { redrawBonds() }
      }
    
    
    if (type == "base") {
      bCounter++; 
      li.appendChild(deleter);
        if (isImage) {
            var img = li.appendChild(document.createElement("img"));
            img.src= content;
            img.alt = "Přiřazovací položka";
            li.className = "img";
                   
        }
      li.appendChild(editArea);
      li.setAttribute("data-bonds", "")
      if (editMode == "connect") li.onclick = function () { toggleBaseTerm(this);  };
    }
    
    else {
      vCounter++;
        if (isImage) {
            var img = li.appendChild(document.createElement("img"));
            img.src= content;
            img.alt = "Přiřazovací položka";
            li.className = "img";
                   
        }
      li.appendChild(editArea);
       li.appendChild(deleter);
       li.setAttribute("data-id", "v" + vCounter + "x");
       if (editMode == "connect") li.onclick = function () { toggleVariant(this);  };
    }
    
    
    //CKEDITOR.inline(editArea, configEdit);
    var lis = list.querySelectorAll("li");
    var nova = null;
    if (lis.length == 0) {
        nova = list.appendChild(li);
    }
    else nova = list.insertBefore(li, lis[lis.length-2]);
    
     resizeCanvas();
    
    return nova;
}

var bCounter = 0, vCounter = 0;

function initMatching(baseItems, variantItems) {
    if (baseItems == undefined) baseItems = "";
    if (variantItems == undefined) variantItems = "";
    bCounter = 0;
    vCounter = 0;
    
    document.getElementById("import_base").value = baseItems;
    document.getElementById("import_variants").value = variantItems;
    
    importItems();
}

function importItems(append) {
  if (append == undefined) append = false;
 
 setEditMode("edit")
 closeImporter();
  
  var list = document.querySelector(".matching_m .base");
  if (!append) { 
    list.innerHTML = "";
    document.querySelector(".matching_m .variants").innerHTML = "";
    actBonds = [];
   
  var last = list.appendChild(document.createElement("li"));
  var adder = last.appendChild(document.createElement("img"));
  adder.src = "design/textfield_add.png";
  adder.title = "Přidat textovou položku";
  adder.onclick = function () { var newtext = prompt("Vložte text položky:"); if (newtext != "" && newtext != null ) appendMatchVariant("base", newtext) ; };
  
  adder = last.appendChild(document.createElement("img"));
  adder.src = "design/image_add.png";
  adder.title = "Přidat položku s obrázkem";
  adder.alt = "Přidat položku s obrázkem";
  adder.onclick = function () { 
    var newtext = prompt("Vložte adresu obrázku:"); 
      if (newtext != "" && newtext != null ) appendMatchVariant("base", newtext, true); 
  };
      
      
  last =  document.querySelector(".matching_m .variants").appendChild(document.createElement("li"));
  adder = last.appendChild(document.createElement("img"));
  adder.src = "design/textfield_add.png";
  adder.title = "Přidat textovou položku";
  adder.onclick = function () { var newtext = prompt("Vložte text položky:"); if (newtext != "" && newtext != null ) appendMatchVariant("variants", newtext); }
                               
  adder = last.appendChild(document.createElement("img"));
  adder.src = "design/image_add.png";
  adder.title = "Přidat položku s obrázkem";
  adder.alt = "Přidat položku s obrázkem";
  adder.onclick = function () { 
    var newtext = prompt("Vložte adresu obrázku:"); 
      if (newtext != "" && newtext != null ) appendMatchVariant("variants", newtext, true); 
  };
     
  }
  
  var bItems = document.getElementById("import_base").value.split(/\n+/);
   
  for (var i = 0; i < bItems.length; i++) {
    bItem = bItems[i].replace(/^\s+/, "")
    bItem = bItem.replace(/\s+$/, "")
    if (bItems == "") continue;
    
    item = appendMatchVariant("base", bItem);
    
  }
  
  
   var vItems = document.getElementById("import_variants").value.split(/\n+/);
   
  for (var i = 0; i < vItems.length; i++) {
    vItem = vItems[i].replace(/^\s+/, "")
    vItem = vItem.replace(/\s+$/, "")
    if (vItems == "") continue;
    
    item = appendMatchVariant("variants", vItem);
    
  }
  
  
  
  resizeCanvas();
  
  
} 

function openImporter() { 
  document.getElementById("itemImporter").style.display = "block"; 
  document.querySelector(".matching_m").style.visibility = "hidden"
  }

function closeImporter() { 
  document.getElementById("itemImporter").style.display = "none"; 
  document.querySelector(".matching_m").style.visibility = "visible"
}

function resizeCanvas() {
   var matching =  document.querySelector(".matching_m"); 
   var mbox = matching.getBoundingClientRect();
  var canvas = matching.querySelector(".matching_m canvas");
  
  canvas.width = mbox.width ;
  canvas.height = mbox.height;  
  
  redrawBonds();  
} 


function alignColumn(col, type) {
    var column = document.querySelector("."+col);
    column.classList.remove("left");
    column.classList.remove("right");
    column.classList.remove("center");
    column.classList.add(type);
    
    
}
//************* Vybirani uzlu a kresleni spojnic

var actBase = null;
var actVariant = null;
var actBonds = [];

function toggleBaseTerm(li) {
    if (!actBase) {
        actBase = li;
        actBase.classList.add("actual");
        redrawBonds();
        return; 
    }
    
    if (actBase && actBase == li) {
        actBase.classList.remove("actual");
        actBase = null;
        redrawBonds();
        return;
    }
    
    if (actBase && actBase != li) {
        actBase.classList.remove("actual");
        actBase = li;
        actBase.classList.add("actual");
        redrawBonds();
        return;
    }
    
}

function toggleVariant(li) {
    if (!actBase) return; //neni vybrany zakladni pojem, koncime
    
    var bonds = actBase.getAttribute("data-bonds");
    var vid = li.getAttribute("data-id");
        
    if (bonds.indexOf(vid) == -1 ) {
       bonds += " " + vid;
        
    }
    else {
        bonds = bonds.replace(new RegExp("\\s*" + vid), "");
    }
    
    actBase.setAttribute("data-bonds", bonds);
    redrawBonds();
}

function redrawBonds() {
   var matching = document.querySelector(".matching_m");
    var canvas = matching.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    
    var totalBonds = 0;
    
    ctx.fillStyle="white";
    ctx.fillRect(0,0,9999,9999);
    
    var blis = matching.querySelectorAll(".base li")
    var vlis = matching.querySelectorAll(".variants li")
       
    for (var i = 0; i < vlis.length; i++) {
        vlis[i].classList.remove("actual");
    }
    
    var checks = matching.querySelectorAll("input[type=checkbox]");
    
    
    var mbox = matching.getBoundingClientRect();
    for (var i = 0; i < blis.length; i++) {
      var bonds =  blis[i].getAttribute("data-bonds");
      if (!bonds) continue;
      bonds = bonds.replace(/^\s+/, "")
      bonds = bonds.replace(/\s+$/, "")
      
      bonds = bonds.split(/\s+/);
      var bbox = blis[i].getBoundingClientRect();
     
     for (var j = 0; j < bonds.length; j++) { 
        if (bonds[j] == "") continue;
             var vli = document.querySelector("[data-id=" + bonds[j] + "]")
             if (!vli) continue;
             var vbox = vli.getBoundingClientRect();
              
              ctx.beginPath() ;
              ctx.lineWidth = 1;
              ctx.strokeStyle = "#444";
              
              if (actBase && blis[i] == actBase) {
                  ctx.lineWidth=3;
                  ctx.strokeStyle = "#000"
                  vli.classList.add("actual");
              }
              totalBonds++;
         
              ctx.moveTo(bbox.left - mbox.left + bbox.width, bbox.top - mbox.top  + bbox.height/2 );
              ctx.lineTo(vbox.left - mbox.left, vbox.top - mbox.top + vbox.height/2 );
              ctx.stroke();
              
         
      }
    }
  
    setAutomaticScore(totalBonds);
     checkNoBonds();
}

/***** Bodovani *****/

function changeScoreUnits(sel) {
    if (sel.id == "score_ok_units") {
        var amnt = document.getElementById("score_ok_amount");
        if(sel.value == "nop") {
            amnt.disabled = true;
            amnt.value = "";
        }
        if(sel.value == "%") {
            amnt.disabled = true;
            redrawBonds();
            //amnt.value = "123";
        }
        if(sel.value == "body") {
            amnt.disabled = false;
            //amnt.value = "1";
        }
    }
    
    if (sel.id == "score_nok_units") {
        var amnt = document.getElementById("score_nok_amount");
        if(sel.value == "nop") {
            amnt.disabled = true;
            amnt.value = "";
        }
        if(sel.value == "%") {
            amnt.disabled = false;
            amnt.value = "-25";
        }
        if(sel.value == "body") {
            amnt.disabled = false;
            amnt.value = "-1";
        }
    }
}

function setAutomaticScore(amnt) {
    if (document.getElementById("score_ok_units").value != "%") return;
    
    var score = (amnt == 0 ) ? 0 : Math.round(10*100/amnt)/10;
    
    document.getElementById("score_ok_amount").value = score;
        
}

function checkNoBonds() {
  var count = 0;
  var blis = document.querySelectorAll(".base li")
  for (var i =0; i< blis.length-1; i++) {
    var bonds = ""
    if (blis[i].hasAttribute("data-bonds")) bonds = blis[i].getAttribute("data-bonds").replace(/\s/g, "");
      if (bonds == "") count++;
  }
    var fb = document.getElementById("feedback");
    fb.className = "";
    var result = true;
  
 if (count > 0) {
     result = false;
     fb.className = "warning";
    var pad = "1 položka v levém sloupci není spojená";
     if (count >1 && count < 5) pad = "" + count + " položky v levém sloupci nejsou spojeny"
     if (count > 4) pad = "" + count + " položek v levém sloupci není spojeno"
   pad += " s žádnou položkou v pravém sloupci.";
     fb.innerHTML = pad;
  }
    
    if (result) fb.innerHTML = "Vše je v pořádku.";
    return result
}

/**** DEMO ********/

var demos = [
  {
  title: "",
  task: "Свържете съществителните с прилагателните:",
  base: "апетит\nболка\nлекар\nпреглед\nпулс\nтемпература",
  variants: "викам\nгубя\nзаписвам се\nимам\nмеря\nпипам\nсвалям\nусещам",
  solution: [  [1, 3], [6, 7], [0, 2], [2], [5], [4, 6] ]
  },
  
  {
  title: "",
  task: "Match the words on the left with the words they collocate with on the right.",
  base: "to contemplate\nto dismiss\nto do\nto dribble\nto have\nto make\nto pay\nto plead\nto set\nto shuffle\nto waste\nto wind",
  variants: "a worker\na mistake\na good time\nyour future\na rope\na compliment\ninnocence\ncards\nsome gardening\nan opportunity\na ball\nan example",
  solution: [  [3], [0], [8], [10], [2], [1], [5], [6], [11], [7], [9], [4] ]
  }

];

function showDemo(index) {
 var demo = demos[index];
 if (demo.title != "") document.getElementById("edit_title").innerHTML = demo.title;
 if (demo.task != "") document.getElementById("edit_task").innerHTML = demo.task;
 
 setEditMode("edit");
 
 initMatching(demo.base, demo.variants);
 
 var blis = document.querySelectorAll(".base li");
 var vlis = document.querySelectorAll(".variants li");
 /*  */
 
 actBonds = [];
 
 for (var i = 0; i < demo.solution.length; i++) {
 actBonds.push([]);
 for (var j = 0; j < vlis.length; j++) {
  actBonds[i].push(0);
 }
  var bonds = "";
  for (var j = 0; j < demo.solution[i].length; j++) {
    var bindex = demo.solution[i][j]; 
    //alert("" + i + ", " + bindex)
    actBonds[i][bindex] = 1;
    if (j > 0) bonds += " ";
    bonds += vlis[bindex].getAttribute("data-id");
  }
  blis[i].setAttribute("data-bonds", bonds);
 }
 
 
 redrawBonds();
 
}