var questions = questions || null;

//Array.prototype.shuffle = function(local){
//  var a = this;
//  var newArray = typeof local === "boolean" && local ? this : [];
//  for (var i = 0, newIdx, curr, next; i < a.length; i++){
//    newIdx = Math.floor(Math.random()*i);
//    curr = a[i];
//    next = a[newIdx];
//    newArray[i] = next;
//    newArray[newIdx] = curr;
//  }
//
//  return newArray;
//};

function shuffleArray(d) {
  for (var c = d.length - 1; c > 0; c--) {
    var b = Math.floor(Math.random() * (c + 1));
    var a = d[c];
    d[c] = d[b];
    d[b] = a;
  }
  return d
}

function initPage(evt) {
	if (questions != null ) {
		initQuestions();
	}
	
	initKeyboard();
	
	initPopups();
}

function initQuestions() {
	for (var key in questions) {
		var container = document.getElementById(key);
		
		var question = questions[key];
		if (!container || !question ) continue;
		
		initQuestion(question, container);
		
		/*
		var form = getNextVariants(question);
		container.querySelector(".content").innerHTML = form;
		*/
	}
	
}

function initQuestion(question, container) {
//	
//	if (question.variants) question.variants = shuffleArray(question.variants);
//	question.position = -1;
	
	question.correct = [];
	question.correctAnswers = [];
	
	switch (question.type) {
		case "v-hinted": 
			generateElementsVHinted(question, container);
			addChecker(container);
			break;
			
		case "v-select": 
			generateElementsV(question, container);
			addChecker(container);
			break;
			
		case "t-write": 
			generateElementsT(question, container, true);
			addChecker(container);
			break;
		
		case "t-set": 
			generateElementsT(question, container, false);
			addChecker(container);
			break;
			
		case "t-tuplets": 
			generateElementsT(question, container, false);
			addChecker(container);
			break;
			
		case "r-scale": 
			generateRScales(question, container);
			addChecker(container);
			break;
			
		case "c-scale": 
			generateCScales(question, container);
			addChecker(container);
			break;
			
		case "sentences":
			initSentences(question, container);
			addChecker(container);
			break;
		
		case "sortlist":
			initSortlist(question, container);
			addChecker(container);
			break;
			
		case "sort-simple":
			initSortSimple(question, container);
			addChecker(container);
			break;
			
		case "sort-sentence":
			initSortSentence(question, container);
			addChecker(container);
			break;
			
		case "sort-drag":
			initSortDrag(question, container);
			addChecker(container);
			break;
		
		case "crossword":
			initCrossword(question, container);
			//addChecker(container);
			break;
	}
	
}

function initCrossword(question, container) {
	var rows = container.querySelectorAll(".crossword tr");
	
	for (var i = 0; i < rows.length; i++ ) {
		var tds = rows[i].querySelectorAll("td");
		
		for (var j = 0; j < tds.length; j++) {
			var td = tds[j];
			td.classList.add("cwfield");
			td.addEventListener("click", selectCWField);
			td.setAttribute("data-index", i + "_" + j);
		}
	}
	
	for (var i = 0; i < question.variants.length; i++) {
		var variant = question.variants[i];
		
		variant.index = 0;
	}
}

function selectCWField(evt) {
	var td = evt.currentTarget;
	var tid = td.getAttribute("data-index");
	
	var section = findParent(td, "section", "exercise");
	var qid = section.id;
	var question = questions[qid];
	
	for (var i = 0; i < question.variants.length; i++) {
		var variant = question.variants[i];
		if (variant.solved) continue;
		
		if (variant.solution.indexOf(tid) == variant.index) { // nalezeno aktivni pole
			
			
			if (variant.index > 0) {
				var prevTd = section.querySelector("[data-index='" + variant.solution[variant.index-1] + "']")
				setCellBorders(prevTd, variant.solution, variant.index-1, variant.border);
				
				if (variant.index == variant.solution.length-1) {
					setCellBorders(td, variant.solution, variant.index, variant.border);
				}
			}
			variant.index++;		
			if (variant.index == variant.solution.length) {
				variant.solved = true;
			}
			
			td.removeEventListener("click", selectCWField);
			td.classList.add("found");
			td.style.backgroundColor = variant.color;
		}
	}
}

function setCellBorders(cell, solution, index, color) {
	
	var borderWidth = "3px"
	if (index == 0) {
		var parts1 = solution[0].split("_");
		var x1 = parseInt(parts1[0], 10);
		var y1 = parseInt(parts1[1], 10);
		
		var parts2 = solution[1].split("_");
		var x2 = parseInt(parts2[0], 10);
		var y2 = parseInt(parts2[1], 10);
		
		var dx = x2-x1;
		var dy = y2-y1;
		console.log("" + dx + ", " + dy)
		if (dy == 1) {
			cell.style.borderTop = borderWidth +" solid " + color;
			cell.style.borderLeft = borderWidth +" solid " + color;
			cell.style.borderBottom = borderWidth +" solid " + color;
		}
		if (dy == -1) {
			cell.style.borderTop = borderWidth +" solid " + color;
			cell.style.borderRight = borderWidth +" solid " + color;
			cell.style.borderBottom = borderWidth +" solid " + color;
		}
		if (dx == 1) {
			cell.style.borderTop = borderWidth +" solid " + color;
			cell.style.borderRight = borderWidth +" solid " + color;
			cell.style.borderLeft = borderWidth +" solid " + color;
		}
		if (dx == -1) {
			cell.style.borderBottom = borderWidth +" solid " + color;
			cell.style.borderRight = borderWidth +" solid " + color;
			cell.style.borderLeft = borderWidth +" solid " + color;
		}
		
	}
	if (index > 0 && index < solution.length - 1) {
		var parts1 = solution[index].split("_");
		var x1 = parseInt(parts1[1], 10);
		var y1 = parseInt(parts1[0], 10);
		
		var partsN = solution[index+1].split("_");
		var xn = parseInt(partsN[1], 10);
		var yn = parseInt(partsN[0], 10);
		
		var partsP = solution[index-1].split("_");
		var xp = parseInt(partsP[1], 10);
		var yp = parseInt(partsP[0], 10);
				
		
		if (xp == x1 && x1 == xn) setBorders(cell, "rl", color);
		
		
		if (yp == y1 && y1 == yn) setBorders(cell, "tb", color);	
		
		if (xp < x1 && y1 < yn) setBorders(cell, "tr", color);
		if (xp < x1 && y1 > yn) setBorders(cell, "br", color);
		
		if (y1 > yp && x1 > xn) setBorders(cell, "br", color);
		
		if (x1 < xp && y1 < yn) setBorders(cell, "tl", color);
		
		if (y1 < yp && x1 > xn) setBorders(cell, "tr", color);
		if (y1 < yp && x1 < xn) setBorders(cell, "tl", color);
		
		if (y1 > yp && x1 < xn) setBorders(cell, "lb", color);	
		if (y1 > yp && x1 < xn) setBorders(cell, "lb", color);	

	}
	
	if (index == solution.length - 1) {
		var parts1 = solution[index].split("_");
		var x1 = parseInt(parts1[1], 10);
		var y1 = parseInt(parts1[0], 10);
			
		var partsP = solution[index-1].split("_");
		var xp = parseInt(partsP[1], 10);
		var yp = parseInt(partsP[0], 10);
				
		
		if (xp < x1) setBorders(cell, "tbr", color);
		if (xp > x1) setBorders(cell, "tbl", color);
		if (yp < y1) setBorders(cell, "brl", color);
		if (yp > y1) setBorders(cell, "trl", color);
		
		

	}
	
}

function setBorders(cell, directions, color) {
	var borderWidth = "3px";
	var dirs = {"t": "Top", r: "Right", b: "Bottom", l: "Left"}
	
	for (var i = 0; i < directions.length; i++) {
		cell.style["border" + dirs[directions.charAt(i)]] = borderWidth +" solid " + color;
	}
	
	
}

function initSortDrag(question, container) {
	var shuffled = getRange(0, question.options.length -1);
	
	shuffleArray(shuffled);
	
	var dragBase = container.querySelector(".dragbase");
	dragBase.addEventListener("drop", drop);
	dragBase.addEventListener("dragover", allowDrop);	
	
	for (var i = 0; i < shuffled.length; i++) {
		var dragitem = addChild(dragBase, "span", "dragitem");
		
		dragitem.id = container.id + "_" + shuffled[i];
		dragitem.setAttribute("data-index", shuffled[i]);
		dragitem.appendChild(document.createTextNode(question.options[shuffled[i]]));
		dragitem.addEventListener("dragstart", drag);
		dragitem.setAttribute("draggable", "true");	
		
		addChild(dragitem, "span", "feedback");
	}
	
	var areas = container.querySelectorAll(".droparea");
	for (var i = 0; i < areas.length; i++) {
		var area = areas[i];
		
		area.addEventListener("drop", drop);
		area.addEventListener("dragover", allowDrop);
	}
	
}

function initSortSentence(question, container) {
	
	var elems = container.querySelectorAll(".testelement");
	
	for (var i = 0; i < question.variants.length; i++) {
		var variant = question.variants[i];
		for (var j = 0; j < variant.length; j++) {
			
			var word = addChild(elems[i], "span", "sort-word");
			word.setAttribute("data-index", j);
			word.innerHTML = variant[j];
		}
		//elems[i].appendChild(document.createTextNode("."));
		
		Sortable.create(elems[i]);
	}
	
}

function initSortSimple(question, container) {
	var area = container.querySelector(".droparea");
	Sortable.create(area);
	
	var items = area.querySelectorAll(".dragitem");
	for (var i = 0; i < items.length; i++) {
		var item = items[i];
		item.setAttribute("data-index", i);
	}
	
}

function initSortlist(question, container) {
	var shuffled = getRange(0, question.movable.length-1);
	
	shuffleArray(shuffled);
		
	question.solution = getRange(0, question.movable.length -1);
	
	var frag = document.createDocumentFragment();
	
	var listFixed = addChild(frag, "ol", "sortable sort-fixed columns large-4");
	for (var i = 0; i < question.fixed.length; i++) {
		var li = addChild(listFixed, "li");
		li.innerHTML = question.fixed[i];
	}
	
	var listMovable = addChild(frag, "ol", "sortable sort-movable column column8");
	for (var i = 0; i < question.movable.length; i++) {
		var li = addChild(listMovable, "li");
		var index = shuffled[i];
		li.innerHTML = question.movable[index];
		li.setAttribute("data-index", index);
	}
	
	var sorting = container.querySelector(".sorting");
	sorting.appendChild(frag);
	
	if (question.height) {
		//container.classList.add(question.height);
		container.className +=" " + question.height;
	}
	
	
	Sortable.create(listMovable);
}

function initSentences(question, container) {
	var tasks = container.querySelectorAll(".tasks li");
	console.log("tasks: " + tasks.length);
	
	for (var i = 0; i < tasks.length; i++) {
		tasks[i].addEventListener("click", selectTask);
	}
	
	var sentences = container.querySelectorAll(".sentence");	
	for (var i = 0; i < sentences.length; i++) {
		sentences[i].addEventListener("click", selectSentence);
	}
}

function selectTask(evt) {
	var li = evt.currentTarget;
	var index = parseInt(li.getAttribute("data-index"), 10);
	console.log("new index: " + index)
	var list = li.parentNode; //findParent(li, "div", "content");
	
	if (list.hasAttribute("data-actual")) {
		var lastIndex = parseInt(list.getAttribute("data-actual"), 10);
		console.log("last index: " + lastIndex)
		var lastItem = list.querySelectorAll("li")[lastIndex];
		console.log(lastItem)
		lastItem.classList.remove("actual");
	}
	
	li.classList.add("actual");
	
	list.setAttribute("data-actual", index);
}

function selectSentence(evt) {
	var sentence = evt.currentTarget;
	
	var cont = findParent(sentence, "div", "content");
	var tasks = cont.querySelector(".tasks");
	var actual = (tasks.hasAttribute("data-actual")) ? parseInt(tasks.getAttribute("data-actual")) : -1;
	
	if (actual == -1) return;
	
	var marker = sentence.querySelector(".marker[data-index='" + actual + "']");
	if (marker) {
		sentence.removeChild(marker);
	}
	
	else {
		marker = addChild(sentence, "span", "marker");
		marker.setAttribute("data-index", actual);
		marker.innerHTML = "(" + (actual+1) + ")";
		
	}
	
	var markers = sentence.querySelectorAll(".marker");
	if (markers.length > 0) {
		sentence.classList.add("marked");
	}
	
	else {
		sentence.classList.remove("marked");
	}
}



function generateElementsVHinted(question, container) {
	var elems = container.querySelectorAll(".testelement");
	console.log(elems.length)
	for (var i = 0; i < elems.length; i++) {
		var elem = elems[i];
		elem.classList.add("hinted");
		
		var frag = document.createDocumentFragment();
		
		var parts = question.variants[i].split("|");
		
		var hint = addChild(frag, "span", "hint");
		hint.innerHTML = parts[0].trim()
		
		
		var opts = parts[1].split(";");
		
		question.correct[i] = [];
		var correct = [];
		
		var sel = addChild(frag, "select");
		
		addOption(sel, "---", "");
		for (var j = 0; j < opts.length; j++) {
			var text = opts[j].trim();
			
			if (text.startsWith("*")) {
				question.correct[i].push(j);
				text = text.substring(1);
				correct.push(text);
			}
			
			addOption(sel, j, text);			
		}
		
		
		question.correctAnswers[i] = correct.join("/");
		
		var fb = addChild(frag, "span", "feedback");
		
		elem.appendChild(frag);
		
	}
}

function generateElementsV(question, container) {
	var elems = container.querySelectorAll(".testelement");
	console.log(elems.length)
	for (var i = 0; i < elems.length; i++) {
		var elem = elems[i];
		//elem.classList.add("hinted");
		
		var frag = document.createDocumentFragment();
			
		var opts = question.variants[i].split(";");
		
		question.correct[i] = [];
		var correct = [];
		
		var sel = addChild(frag, "select");
		
		addOption(sel, "---", "");
		for (var j = 0; j < opts.length; j++) {
			var text = opts[j].trim();
			
			if (text.startsWith("*")) {
				question.correct[i].push(j);
				text = text.substring(1);
				correct.push(text);
			}
			
			addOption(sel, j, text);			
		}
		
		
		question.correctAnswers[i] = correct.join("/");
		
		var fb = addChild(frag, "span", "feedback");
		
		elem.appendChild(frag);
		
	}
	
	
}

function generateElementsT(question, container, isFeedback) {
	var elems = container.querySelectorAll(".testelement");
	
	for (var i = 0; i < elems.length; i++) {
		var elem = elems[i];		
		
		var frag = document.createDocumentFragment();
				
		if (question.solution.length > i) {
			question.correct[i] = question.solution[i];
		}
			
		var input = addChild(frag, "input");
		input.type = "text";
		input.style.width = question.maxlength + "em";
		input.addEventListener("focus", showKeyboard);
		input.addEventListener("keypress", updateCursor);
		input.addEventListener("change", updateCursor);
		input.addEventListener("click", updateCursor);
		
		//input.addEventListener("blur", hideKeyboard);
		
		
		
		
		if (isFeedback) {
			var fb = addChild(frag, "span", "feedback");	
		}
		
		
		elem.appendChild(frag);
		
	}
}


function generateRScales(question, container) {
	var elems = container.querySelectorAll(".testelement");
	
	for (var i = 0; i < elems.length; i++) {
		var elem = elems[i];
		
		var options = [];
		
		question.correct[i] = question.solution[i];
		
		if (question.sets == "single") {			
			options = question.variants[0];
		}
		
		if (question.sets == "multiple") {			
			options = question.variants[i];
		}
		
		var parent = elem;
		if (question.style == "list") {
			parent = addChild(elem, "ol", "cyril");
		}
		
		if (question.style == "inline-list") {
			parent = addChild(elem, "ol", "cyril inline-list");
		}
		
		if (question.style == "list" || question.style == "inline-list") {
			for (var j = 0; j < options.length; j++) {
				var li = document.createElement("li");

				var iid = container.id + "_" + i + "_" + j;

				var input = addChild(li, "input", "scale-input");

				input.type = "radio";
				input.name = container.id + "_" + i;
				input.id = iid;

				var label = addChild(li, "label","scale-label");
				label.setAttribute("for", iid);
				label.innerHTML = options[j];

				var fb = addChild(li, "span", "feedback");


				parent.appendChild(li);
			}
			
		}
		
		if (question.style == "line") {
			var frag = document.createDocumentFragment();
			
			for (var j = 0; j < options.length; j++) {

				var iid = container.id + "_" + i + "_" + j;

				var input = addChild(frag, "input", "scale-input");

				input.type = "radio";
				input.name = container.id + "_" + i;
				input.id = iid;

				var label = addChild(frag, "label","scale-label");
				label.setAttribute("for", iid);
				label.innerHTML = options[j];

				var fb = addChild(frag, "span", "feedback");


			}
			parent.appendChild(frag);
		}
		
		
		
		
		
	}
	
	
}

function generateCScales(question, container) {
	var elems = container.querySelectorAll(".testelement");
	
	for (var i = 0; i < elems.length; i++) {
		var elem = elems[i];
		
		var options = [];
		
		question.correct[i] = question.solution[i];
		
		if (question.sets == "single") {			
			options = question.variants[0];
		}
		
		if (question.sets == "multiple") {			
			options = question.variants[i];
		}
		
		var parent = elem;
		if (question.style == "list") {
			parent = addChild(elem, "ul");
		}
		
		if (question.style == "list") {
			for (var j = 0; j < options.length; j++) {
				var li = document.createElement("li");

				var iid = container.id + "_" + i + "_" + j;

				var input = addChild(li, "input", "scale-input");

				input.type = "checkbox";
				input.name = container.id + "_" + i;
				input.id = iid;

				var label = addChild(li, "label","scale-label");
				label.setAttribute("for", iid);
				label.innerHTML = options[j];

				var fb = addChild(li, "span", "feedback");


				parent.appendChild(li);
			}
			
		}
		
		if (question.style == "line") {
			var frag = document.createDocumentFragment();
			
			for (var j = 0; j < options.length; j++) {

				var iid = container.id + "_" + i + "_" + j;

				var input = addChild(frag, "input", "scale-input");

				input.type = "checkbox";
				input.name = container.id + "_" + i;
				input.id = iid;

				var label = addChild(frag, "label","scale-label");
				label.setAttribute("for", iid);
				label.innerHTML = options[j];

				var fb = addChild(frag, "span", "feedback");


			}
			parent.appendChild(frag);
		}
		
		
		
		
		
	}
	
	
}

function addOption(select, val, text) {
	var opt = addChild(select, "option");
	opt.setAttribute("value", val);
	opt.innerHTML = text;
	
	return opt;

}

//out.push("<p class='toolbar'>" + templates.checker + "<p>");
function addChecker(node) {
	var toolbar = addChild(node, "p", "toolbar");
	var checker = addChild(toolbar, "input", "checker");
	
	checker.type = "button";
	checker.setAttribute("value", "Проверить");
	checker.addEventListener("click", checkQuestion);
	
	return toolbar;
}
//"<input type='button' value='Проверить' class='checker' onclick='checkQuestion(this)' />"

function getOption(val, text) {
	var opt = document.createElement("option");
	opt.setAttribute("value", val);
	opt.innerHTML = text;
	
	return opt;
}

function getNextVariants(question) {
	question.correct = [];
	question.correctAnswers = [];
	
	var out = [];
	
	for (var i = 0; i < question.count; i++) {
		var index = -1;
		var variant = "";
		if (question.variants) {
			index = (++question.position % question.variants.length);
			variant = question.variants[index];
		}
		
		
		
		if (question.type == "v" ) {
			var elems = variant.match(/\{([^}]+)\}/g);			
			
			for (var j = 0; j < elems.length; j++) {
				var elem = elems[j]
				var vals = elem.substring(1, elem.length-1).trim().split(/\s*[,\|]\s*/);
				
				var text = "<span class='testelement'><select><option value='---'> </option>";
				for (var k = 0; k < vals.length; k++) {
					var optText = vals[k];
					if (optText.charAt(0) == "*") {
						question.correct.push(k);
						optText = optText.substring(1);
						question.correctAnswers.push(optText);
					}
					text += "<option value='" + k + "'>" + optText + "</option>"
					
				}
				text += "</select><span class='feedback'></span></span>";
				
				variant = variant.replace(elem, text);
				
				
				
			}
			
			if (variant.indexOf("|") > 0) {
				var vals2 = variant.split("|");
				question.feedback = vals2[1];
				variant = vals2[0];
			}
 			
			out.push("<div class='variant'>")
			out.push(variant);
			out.push("</div>");
			out.push("<p class='toolbar'>" + templates.checker + "<p>");
		}
		
		
		
		if (question.type == "vf" ) { // roletka s feedbackem
			var elems = variant.match(/\{([^}]+)\}/g);			
			
			for (var j = 0; j < elems.length; j++) {
				var elem = elems[j]
				var vals = elem.substring(1, elem.length-1).trim().split(/\s*[,\|]\s*/);
				
				var text = "<span class='testelement'><select><option value='---'> </option>";
				for (var k = 0; k < vals.length; k++) {
					var optText = vals[k];
					if (optText.charAt(0) == "*") {
						question.correct.push(k);
						optText = optText.substring(1);
						question.correctAnswers.push(optText);
					}
					text += "<option value='" + k + "'>" + optText + "</option>"
					
				}
				text += "</select><span class='feedback'></span></span>";
				
				variant = variant.replace(elem, text);
				
				
				
			}
			out.push("<div class='variant'>")
			out.push(variant);
			out.push("</div>");
			out.push("<p class='toolbar'>" + templates.checker + "<p>");
		}
		
		if (question.type == "vc" ) { // vyber z roletky s danym seznamem spolecnym pro vsechny varianty 				
			
			var text = "<span class='testelement'>" + variant[0] +" – <select><option value='---'> </option>";
			question.correct.push(variant[1]);
			question.correctAnswers.push(question.options[variant[1]]);
					
			
			for (var k = 0; k < question.options.length; k++) {
				var optText = question.options[k];				
				text += "<option value='" + k + "'>" + optText + "</option>"

			}
			text += "</select><span class='feedback'></span></span>";
				
			
			out.push("<div class='variant'>")
			out.push(text);
			out.push("</div>");
			out.push("<p class='toolbar'>" + templates.checker + "<p>");
		}
		
		if (question.type == "select_word" ) { // vyber slova ve vete, vyber z roletky s danym seznamem spolecnym pro vsechny varianty 				
			
			var words = variant.split(/\s+/g);
			var sentence = []
			
			for (var j = 0; j < words.length; j++) {
				var word = words[j];
				var affix = "";
				
				if (endsWith( word, ".,;?!")) {
					affix = word.charAt(word.length-1);
					word = word.substring(0, word.length-1);
				}			
				
				if (word.startsWith("{")) {
									
					var parts = word.replace(/[\{\}]/g, "").split(/\|/)
					
					parts.push(j); // pidani indexu slova - na pozici 3
					parts[1] = parts[1].split("/");
					
					question.correct.push(parts);
					console.log(parts[0] + " - " + parts[2] + " - " + question.options[parts[2]])
					question.correctAnswers.push(question.options[parts[2]]);
					
					word = parts[0];
				}
				else {
					question.correct.push("");
					question.correctAnswers.push("");
				}
				if (word == "-" && word == "–") {
					sentence.push(word);
				}
				else {					
					sentence.push("<span class='word' onclick='toggleWord(this)' data-index='" + j + "'>" + word + "</span>" + affix);
				}				
				
			}		
			
						
			var text = "<div class='sentence'>" + sentence.join(" ") + "</div><div class='results'></div>";
					
			out.push("<div class='variant'>")
			out.push(text);
			out.push("</div>");
			out.push("<p class='toolbar'>" + templates.checker + "<p>");
		}
		
		
		if (question.type == "th" ) {
			var elems = variant.match(/\{([^}]+)\}/g);			
			
			for (var j = 0; j < elems.length; j++) {
				var elem = elems[j]
				var vals = elem.substring(1, elem.length-1).trim().split(/\s*\|\s*/);
				var textLength = "" + Math.ceil(vals[1].length*1) + "em";
				var text = "<span class='testelement hinted'><span class='hint'>(" + vals[0]+ ")</span> <input type='text' class='longtext' style='width: " + textLength + "' />";
				
				var cors = vals[1].split(/\//);
				trimValues(cors);
				
				question.correct.push(cors);
				
				text += "<span class='feedback'></span></span>";
				
				variant = variant.replace(elem, text);
				
				
				
			}
			out.push("<div class='variant'>")
			out.push(variant);
			out.push("</div>");
			out.push("<p class='toolbar'>" + templates.checker + "<p>");
		}
		
		if (question.type == "thf" ) {
			var elems = variant.match(/\{([^}]+)\}/g);			
			
			for (var j = 0; j < elems.length; j++) {
				var elem = elems[j]
				var vals = elem.substring(1, elem.length-1).trim().split(/\s*\|\s*/);
				var textLength = "" + Math.ceil(vals[1].length*0.65) + "em";
				var text = "<span class='testelement hinted'><span class='hint'>(" + vals[0]+ ")</span> <input type='text' class='longtext' style='width: " + textLength + "' />";
				
				var cors = vals[1].split(/\//);
				trimValues(cors);
				
				question.correct.push(cors);
				question.feedback = vals[2];
				
				text += "<span class='feedback'></span></span>";
				
				variant = variant.replace(elem, text) + "<div class='feedback fb2'></div>";
							
				
			}
			out.push("<div class='variant'>")
			out.push(variant);
			out.push("</div>");
			out.push("<p class='toolbar'>" + templates.checker + "<p>");
		}
		
		if (question.type == "tf" ) {
			var elems = variant.match(/\{([^}]+)\}/g);			
			
			for (var j = 0; j < elems.length; j++) {
				var elem = elems[j]
				var vals = elem.substring(1, elem.length-1).trim().split(/\s*\/\s*/);
				var textLength = "" + Math.ceil(vals[0].length*0.65) + "em";
				
				if (question.textLength) {
					textLength = question.textLength;
				}
				
				var text = "<span class='testelement fill'> <input type='text' class='longtext' style='width: " + textLength + "' />";
				
				trimValues(vals);
				
				question.correct.push(vals);
				
				text += "<span class='feedback'></span></span>";
				
				variant = variant.replace(elem, text);		
							
			}
			
			out.push("<div class='variant'>")
			out.push(variant);
			out.push("</div>");
			out.push("<p class='toolbar'>" + templates.checker + "<p>");
		}
		
		if (question.type == "tff" ) { // fill text + feedback (examples etc.)
						
			var parts = variant.split(/\s*\|\s*/);
			if (parts.length < 2) break;
			
			question.feedback = parts[1];
			variant = parts[0];
			var elems = variant.match(/\{([^}]+)\}/g);
			
			
			for (var j = 0; j < elems.length; j++) {
				var elem = elems[j]
				
				var vals = elem.substring(1, elem.length-1).trim().split(/\s*\/\s*/);
				var textLength = "" + Math.ceil(vals[0].length*0.65) + "em";
				
				if (question.textLength) {
					textLength = question.textLength;
				}
				
				if (textLength == "0em") textLength = "8em";
				
				var text = "<span class='testelement fill'> <input type='text' class='longtext' style='width: " + textLength + "' />";
				
				trimValues(vals);
				
				question.correct.push(vals);
				
				text += "<span class='feedback'></span></span>";
				
				variant = variant.replace(elem, text);		
							
			}
			
			out.push("<div class='variant'>")
			out.push(variant);
			out.push("<div class='examples'></div>");
			out.push("</div>");
			out.push("<p class='toolbar'>" + templates.checker + "<p>");
		}
		
		if (question.type == "fillin" ) {
			
			var rndIndex = Math.floor(variant.length*Math.random());
			if (variant[rndIndex][0] == "-") {
				rndIndex += (Math.random() > 0.5) ? -1 : 1;
			}
			var text = question.template;
			
			for (var i = 0; i < variant.length; i++ ) {
				var item =  variant[i].join("/")
				if (i != rndIndex) {
					item = "<span class='testelement fill'><input type='text' class='longtext' style='width: 25em' /><span class='feedback'></span></span>";
					question.correctAnswers.push(variant[i]);
				}
				
				text = text.replace("{T" + (i+1) + "}", item);
			}
			out.push("<div class='variant'>")
			out.push(text);			
			out.push("</div>");
			out.push("<p class='toolbar'>" + templates.checker + "<p>");
		}
		
		if (question.type == "translate" ) {
			var elems = variant.match(/\{([^}]+)\}/g);			
			
			for (var j = 0; j < elems.length; j++) {
				var elem = elems[j]
				var vals = elem.substring(1, elem.length-1).trim().split(/\s*[\|]\s*/);
				trimValues(vals);
								
				var text = "<div class='testelement translate'><p>" + vals[0] +"</p> <textarea class='longtext' cols='70' rows='2' ></textarea> <div class='solution'><input type='image' src='../design/key.png' onclick='toggleSolution(this)' class='solution-toggler'><div class='solution-content'>" + vals[1] + "</div></div></div>";
				
				variant = variant.replace(elem, text);		
							
			}
			
			out.push("<div class='variant'>")
			out.push(variant);
			out.push("</div>");
			out.push("<p class='toolbar'>" + templates.nexter + "<p>");
		}
		
		if (question.type == "division" ) {
			
			
			var divider = templates.divider;
			var sels = ["<option value='xxx}'></option>"]
			for (var j = 0; j < question.options.length; j++) {
				var qopt = question.options[j];
				var opt = templates.divOption.replace("{TEXT}", qopt).replace("{VALUE}", qopt);
				sels.push(opt);
			}
			
			divider = divider.replace("{OPTIONS}", sels.join(""));
			
			
			
			out.push("<div class='variant division'>");
			
			var state = "letter";
			var letterCount = 0;
			
			question.correctAnswers = [];
			question.plainText = ""
			
			var correctText = "";
			var correctPos = 0;
					
			
			var word = variant.substring(0, variant.indexOf("|")).trim();
			question.feedback = variant.substring(variant.indexOf("|")+1).trim(); 
			
			for (var j = 0; j < word.length; j++) {
				var char = word.charAt(j);
				if (state == "letter" && char != "{") {
					letterCount++;
					var qid = "div_" + i + "_" + letterCount;
					out.push(divider.replace(/\{QID\}/g, qid));
					
					out.push("<span class='letter'>" + char + "</span>");
					//state = "letter";
					question.plainText += char;
					continue;
				}
				
				if (state == "letter" && char == "{") {
					state = "option";
					
					correctPos = letterCount;
					correctText = "";
					
					
					continue;
				}
				
				if (state == "option" && char != "}") {
					correctText += char;
					continue;
				}
				
				if (state == "option" && char == "}") {
					question.correctAnswers.push([correctPos, correctText]);
					
					console.log(question.correctAnswers)
					correctText = "";
					
					state = "letter"
					continue;
				}
			}
			
			
			out.push("</div>");
			out.push("<div class='feedback'></div>");
			out.push("<p class='toolbar'>" + templates.checker + "<p>");
		}
		
		if (question.type == "sortf" ) { // tahaci trideni + feedback
			
			
			out.push("<div class='variant dragsort'>");
			
			out.push("<div class='dragbase' ondrop='drop(event)' ondragover='allowDrop(event)'>");
			
			question.items = {}
			
			var groups = [];
			var dragitems = [];
			
			for (var j = 0; j < question.groups.length; j++) {
				var grp = question.groups[j];
				var shuffled = shuffleArray(grp.variants);
				
				groups.push("<div class='dropend'>");
				groups.push("<h3 class='dropend-label'>" + grp.label + "</h3>");
				groups.push("<div class='droparea' ondrop='drop(event)' ondragover='allowDrop(event)'></div>");
				groups.push("</div>");
				
				for (var k = 0; k < question.varcount; k++) { //
					var item = shuffled[k];
					var parts = item.split("|")
					
					var iid = question.id + "_" + j + "_" + k
					
					question.items[iid] = { group: j, feedback: parts[1]}
					
					dragitems.push("<span id='" + iid + "' class='dragitem' draggable='true' ondragstart='drag(event)'>" + parts[0] + "<span class='feedback'></span></span>");
				}
				
			}
			
			out = out.concat(shuffleArray(dragitems));
			
			out.push("</div>");
			
			out = out.concat(groups);
			
			
			out.push("</div>");
			out.push("<p class='toolbar'>" + templates.checker + "<p>");
		}
		
		if (question.type == "dragf" ) { // tahaci vkladani do textu
			
			
			
			
			out.push("<div class='variant dragfill'>");
			
			out.push("<div class='dragbase' ondrop='drop(event)' ondragover='allowDrop(event)'>");
			
			
			shuffleArray(question.options);
			
			for (var j = 0; j < question.options.length; j++) {
				 var iid = question.id + "_" + j;
				 
				 out.push("<span id='" + iid + "' class='dragitem' draggable='true' ondragstart='drag(event)'>" + question.options[j] + "<span class='feedback'></span></span>");
				 }
			
			out.push("</div>"); //konec dragbase
		
			
			shuffleArray(question.variants);
			for (var j = 0; j < question.variants.length; j++) {
				var variant2 = question.variants[j];
				
				var elems = variant2.match(/\{([^}]+)\}/g);			
			
				for (var k = 0; k < elems.length; k++) {
					var elem = elems[k]
					var val = elem.substring(1, elem.length-1).trim();
					
					var text = "<span class='testelement droparea-fill' ondrop='drop(event)' ondragover='allowDrop(event)'></span>";

					question.correctAnswers.push([val]);				

					variant2 = variant2.replace(elem, text);
					
					out.push("<p>" + variant2 + "</p>")
				}
		
			}	
			
			
			out.push("</div>");	
			
		
			out.push("<p class='toolbar'>" + templates.checker + "<p>");
		}
		
		
	}
	
	return out.join("");
}

function endsWith(text, endChars) {
	for (var i = 0; i < endChars.length; i++) {
		if (text.endsWith(endChars.charAt(i)) ) {
			return true;
		}
	}	
	return false;
}

function toggleWord(elem) {
	var index = elem.getAttribute("data-index");
	
	if (elem.classList.contains("selected")) {
		
		var table = elem.parentNode.parentNode.querySelector("table[data-index=\"" + index + "\"]");
		if (table) {
			table.parentNode.removeChild(table);
		}
	}
	
	else {
		var results = elem.parentNode.parentNode.querySelector(".results");
		if (results) {
			
			var qid = elem.parentNode.parentNode.parentNode.parentNode.id;	
			
	
			var options = questions[qid].options;
			var sel = "<select><option value='---'> </option>";
			
			for (var k = 0; k < options.length; k++) {
				var optText = options[k];				
				sel += "<option value='" + k + "'>" + optText + "</option>"

			}
			sel += "</select>"
			
			var text = "<table class='result' data-index='" + index + "'><tbody>";
			text += "<tr><th>Slovo:</th><td>" + elem.innerHTML +"</td></tr>"
			text += "<tr><th>1. p. j. č.:</th><td><input type='text' class='longtext'/> <span class='feedback'></span></td></tr>"
			text += "<tr><th>Род и тип</th><td>" + sel +" <span class='feedback'></span></td></tr>"
			
			results.innerHTML += text
				
				
		}
	}
	elem.classList.toggle("selected")
}


function toggleDivider(select) {
	var sels = select.parentNode.parentNode.querySelectorAll(":checked + label + select");
	
	for (var i = 0; i < sels.length; i++) {
		sels[i].className = "level" + (i % 2 + 1)
	}
}

function trimValues(arr) {
	for (var k = 0; k < arr.length; k++) {
		arr[k] = arr[k].trim();
	}
}

function toggleSolution(input) {
	var solution = input.parentNode;
	solution.classList.toggle("shown")
}

var templates = {
	"th": "<div class='variant'>{CONTENT}</div>",
	"v": "<div class='variant'>{CONTENT}</div>",
	"divider": "<span class='divider'><input type='checkbox' id='{QID}' class='divider-check' onclick='toggleDivider(this)'><label for='{QID}'>|</label><select data-index='{INDEX}' class='{CLASS}'>{OPTIONS}</select></span>",
	"divOption": "<option value='{VALUE}'>{TEXT}</option>",
	checker: "<input type='button' value='Проверить' class='checker' onclick='checkQuestion(this)' />",
	nexter: "<input type='button' value='Продолжить' class='nexter' onclick='createNextForm(this)' />",
	icon_OK: "<img src='../pics/icons/ok.png'>",
	icon_NOK: "<img src='../pics/icons/nok.png'>",
}



function checkQuestion(evt) {
	var checker = evt.currentTarget;
	var form = checker.parentNode.parentNode;
	
	var qid = form.id;
	if (qid == "") return;
	
	var question = questions[qid];
	
	switch (question.type) {
				
		case "v":
		case "v-select":
		case "v-hinted":
			var elems = form.querySelectorAll(".testelement");
			for (var i = 0; i < elems.length; i++) {
				var elem = elems[i];
				var sel = elem.querySelector("select");
				var fb = elem.querySelector(".feedback");
				
				//sel.disabled = true;
				fb.innerHTML = "";
				elem.classList.remove("correct");
				elem.classList.remove("wrong");
				
				if (sel.value == "---") continue;
				
				var fbComment = question.feedback || "";
				
				var isOK = false;
				
				for (var j = 0; j < question.correct[i].length; j++) {
					if (sel.value == question.correct[i][j]) {
						isOK = true;
					}
				}
				
				if (isOK) {
					fb.innerHTML = templates.icon_OK + " " + fbComment;
					elem.classList.add("correct");
				}
				
				else {
					fb.innerHTML = templates.icon_NOK + " <span class='correct-answer'>(*" + question.correctAnswers[i] + ")</span> "  + fbComment;
					elem.classList.add("wrong");
				}
			}
			break;
		
			
		case "tf":	
		case "th":
		case "t-write":
			var elems = form.querySelectorAll(".testelement");
			for (var i = 0; i < elems.length; i++) {
				var elem = elems[i];
				var input = elem.querySelector("input");
				var fb = elem.querySelector(".feedback");
				
//				input.disabled = true;
				fb.innerHTML = "";
				elem.classList.remove("correct");
				elem.classList.remove("wrong");
				
				if (input.value == "") continue;
				
				var isCorrect = false;
				
				for (var j = 0; j < question.correct[i].length; j++) {
					if (input.value == question.correct[i][j]) {
						isCorrect = true;
					}
				}
				
				if (isCorrect) {
					fb.innerHTML = templates.icon_OK
					elem.classList.add("correct");
				}
				
				else {
					fb.innerHTML = templates.icon_NOK + " <span class='correct-answer'>(*" + question.correct[i].join("/") + ")</span>"
					elem.classList.add("wrong");
				}
			}
			break;
			
		case "t-set":
			var elems = form.querySelectorAll(".testelement");
			
			var used = [];
			for (var i = 0; i < elems.length; i++) {
				var elem = elems[i];
				var input = elem.querySelector("input");
				
				input.classList.remove("correct");
				input.classList.remove("wrong");
				
				var value = input.value.trim().replace(/\s+/g, " "); //.toLowerCase()
				if (value == "") continue;
				
				var isCorrect = false;
				
				var index = question.solution.indexOf(value);
				if (index > -1 && used.indexOf(index) == -1) { //spravna nepouzita odpoved
					input.classList.add("correct");
					used.push(index);
				}
				
				else {
					input.classList.add("wrong");
				}
							
			}
			break;
			
		case "t-tuplets":			
			
			var used = [];
			var rows = form.querySelectorAll(".tuplets tbody tr");
			for (var j = 0; j < rows.length; j++) {
				used[j] = -1;
				
				var elems = rows[j].querySelectorAll(".testelement");
				
				var isCorrect = false;
				
				for (var i = 0; i < elems.length; i++) {
					var elem = elems[i];
					var input = elem.querySelector("input");

					input.classList.remove("correct");
					input.classList.remove("wrong");

					var value = input.value.trim().toLowerCase().replace(/\s+/g, " ");
					if (value == "") continue;	
										
					var index = -1;
					
					for (var k = 0; k < question.solution.length; k++) {
						if (used.indexOf(k) > -1 && used.indexOf(k) != j) continue;
						
						if (question.solution[k][i] == value) {
							console.log("Index " + used.indexOf(k) )
							index = k;
							used[j] = k;
						}
					}
						
					if (index > -1) { //spravna nepouzita odpoved
						input.classList.add("correct");
						
					}

					else {
						input.classList.add("wrong");
					}

				}				
				
			}
			
			
			break;
			
		case "r-scale":
			var elems = form.querySelectorAll(".testelement");
			for (var i = 0; i < elems.length; i++) {
				var elem = elems[i];
				var inputs = elem.querySelectorAll("input");
				var fbs = elem.querySelectorAll(".feedback");
				
//				input.disabled = true;
				
				elem.classList.remove("correct");
				elem.classList.remove("wrong");
				
				var labels = elem.querySelectorAll("label");
				for (var j = 0; j < labels.length; j++) {
					var label = labels[j];
					
					label.classList.remove("correct");
					label.classList.remove("wrong");
				}
				
				
				var isCorrect = false;
				var isAnswered = false;
				
				for (var j = 0; j < inputs.length; j++) {
					var fb = fbs[j];
					
					fb.innerHTML = "";
					if (inputs[j].checked) {
						isAnswered = true;
						var label = inputs[j].nextElementSibling;
						if (j == question.correct[i]) {
							isCorrect = true;
							
						}
						
						if (isCorrect) {
							fb.innerHTML = templates.icon_OK
							elem.classList.add("correct");
							label.classList.add("correct");
						}
						
						else {
							fb.innerHTML = templates.icon_NOK;
							elem.classList.add("wrong");
							label.classList.add("wrong");
						}
					} 
					
				}
				
				
				
				
			}
			break;
			
		case "c-scale":
			var elems = form.querySelectorAll(".testelement");
			for (var i = 0; i < elems.length; i++) {
				var elem = elems[i];
				var inputs = elem.querySelectorAll("input");
				var fbs = elem.querySelectorAll(".feedback");
				
//				input.disabled = true;
				
				elem.classList.remove("correct");
				elem.classList.remove("wrong");
				
				var labels = elem.querySelectorAll("label");
				for (var j = 0; j < labels.length; j++) {
					var label = labels[j];
					
					label.classList.remove("correct");
					label.classList.remove("wrong");
				}
				
				
				var isCorrect = false;
				var isAnswered = false;
				
				for (var j = 0; j < inputs.length; j++) {
					var fb = fbs[j];
					
					fb.innerHTML = "";
					if (inputs[j].checked) {
						isAnswered = true;
						var label = inputs[j].nextElementSibling;
						if (question.correct[i].indexOf(j) > -1) {
							isCorrect = true;
							
						}
						
						if (isCorrect) {
							fb.innerHTML = templates.icon_OK
							elem.classList.add("correct");
							label.classList.add("correct");
						}
						
						else {
							fb.innerHTML = templates.icon_NOK;
							elem.classList.add("wrong");
							label.classList.add("wrong");
						}
					} 
					
				}
					
				
			}
			break;
		
		case "sortlist": 
			var lis = form.querySelectorAll(".sort-movable li") 
			for (var i = 0; i < lis.length; i++) {
				var li = lis[i];
				var index = parseInt(li.getAttribute("data-index"), 0);
				
				removeClasses(li, ["correct", "wrong"]);
				
				var liClass = "wrong"
				
				if ( i == index) {
					liClass = "correct"
				}
				
				li.classList.add(liClass);
			}
			break;
		
		case "sort-sentence":
			var elems = form.querySelectorAll(".testelement");
			
			for (var i = 0; i < elems.length; i++) {
				var words = elems[i].querySelectorAll(".sort-word");
				
				for (var j = 0; j < words.length; j++) {
					var word = words[j];
					removeClasses(word, ["correct", "wrong"]);
					
					var index = parseInt(word.getAttribute("data-index"), 10);
					
					var wClass = "wrong"
					var correct = question.solution[i][j]
					if (typeof correct == "number" && index == correct) {
						wClass = "correct";
					}
					if (typeof correct == "object" && correct.indexOf(index) > -1) {
						wClass = "correct";
					}
					
					word.classList.add(wClass);
				}
			}
			break;
		
		case "sort-drag":
			var areas = form.querySelectorAll(".droparea");
			
			for (var i = 0; i < areas.length; i++) {
				var items = areas[i].querySelectorAll(".dragitem");
				for (var j = 0; j <items.length; j++) {
					var item = items[j];
					removeClasses(item,["correct", "wrong"]);
					
					var index = parseInt(item.getAttribute("data-index"), 10);
					var correct = question.solution[index];
					var iClass = "wrong";
					if (i == correct) {
						iClass = "correct";
					}
					
					item.classList.add(iClass);
				}
			}
			break;
			
		case "sort-simple":
			
			var items = form.querySelectorAll(".dragitem");
			for (var j = 0; j <items.length; j++) {
				var item = items[j];
				removeClasses(item,["correct", "wrong"]);

				var index = parseInt(item.getAttribute("data-index"), 10);
				console.log("index " + index + ": " + question.solution[j])
				var iClass = "wrong";
				if (index == question.solution[j]) {
					iClass = "correct";
				}

				item.classList.add(iClass);
			}
			
			break;
			
		case "sentences":
			var elems = form.querySelectorAll(".sentence");
						
			question.sentenceCount = elems.length;
			
			var correctList = getListsBySentences(question);
			
			
			for (var i = 0; i < elems.length; i++) {
				var el = elems[i];
				
				removeClasses(el,["correct","wrong", "partial"]);
				var markers = el.querySelectorAll(".marker");
				
				var listOK = [];
				var listNOK = [];
				var listMissing = [];
				
				for (var j = 0; j < markers.length; j++) {
					var index = parseInt(markers[j].getAttribute("data-index"), 10);
					if (correctList[i].indexOf(index) > -1) {
						listOK.push(index);
					}
					
					else {
						listNOK.push(index)
					}
					
				}
				
				
				if (listOK.length == correctList[i].length && correctList[i].length > 0) {
					el.classList.add("correct");
				}
				
				if (listOK.length < correctList[i].length && listOK.length > 0) {
					el.classList.add("partial");
				}
				
				if (listOK.length == 0 && listNOK.length > 0) {
					el.classList.add("wrong");
				}
			}
			break;
			
		case "fillin":
			var elems = form.querySelectorAll(".testelement");
			for (var i = 0; i < elems.length; i++) {
				var elem = elems[i];
				checkText(elem, question.correctAnswers[i]);
			}
			break;			
			
		case "tff":
			var elems = form.querySelectorAll(".testelement");
			for (var i = 0; i < elems.length; i++) {
				var elem = elems[i];
				var input = elem.querySelector("input");
				var fb = elem.querySelector(".feedback");
				
				input.disabled = true;
				fb.innerHTML = "";
				elem.classList.remove("correct");
				elem.classList.remove("wrong");
				
				
				
				var isCorrect = false;
				
				for (var j = 0; j < question.correct[i].length; j++) {
					if (input.value == question.correct[i][j]) {
						isCorrect = true;
					}
				}
				
				if (input.value == "" && !isCorrect) continue;
				
				if (isCorrect) {
					fb.innerHTML = "<img src='../design/ok.png'>"
					elem.classList.add("correct");
				}
				
				else {
					fb.innerHTML = "<img src='../design/nok.png'> <span class='correct-answer'>(*" + question.correct[i].join("/") + ")</span>"
					elem.classList.add("wrong");
				}
			
			}
			var examples = elems[0].parentNode.querySelector(".examples");
				if (examples) examples.innerHTML = question.feedback;
			break;
		
		case "thf":
			var elems = form.querySelectorAll(".testelement");
			for (var i = 0; i < elems.length; i++) {
				var elem = elems[i];
				var input = elem.querySelector("input");
				var fb = elem.querySelector(".feedback");
				
				input.disabled = true;
				fb.innerHTML = "";
				elem.classList.remove("correct");
				elem.classList.remove("wrong");
				
				if (input.value == "") continue;
				
				var isCorrect = false;
				
				for (var j = 0; j < question.correct[i].length; j++) {
					if (input.value == question.correct[i][j]) {
						isCorrect = true;
					}
				}
				var feedback = "";
				var feedback2 = "<span class='feedback-content'>" + question.feedback + "</span>"
				if (isCorrect) {
					 feedback = "<img src='../design/ok.png'>" + feedback
					elem.classList.add("correct");
				}
				
				else {
					feedback = "<img src='../design/nok.png'> <span class='correct-answer'>(*" + question.correct[i].join("/") + ")</span>" + feedback
					elem.classList.add("wrong");
				}
				fb.innerHTML = feedback;
				var fb2 = elem.parentNode.querySelector(".fb2");
				if (fb2) {
					fb2.innerHTML = feedback2;
				}
			}
			break;
			
		case "select_word":
			var words = form.querySelectorAll(".word");		
			
			
			for (var i = 0; i< words.length; i++) {
				var word = words[i];
				var windex =  word.getAttribute("data-index");
				
				word.onclick = null;
								
				if (word.classList.contains("selected")) {
					var table = form.querySelector(".result[data-index=\"" + windex + "\"]")
					var correct = question.correct[i];
					var correctOption = question.correctAnswers[i];
					
					if (correct != "") {
						word.classList.add("correct");
						correct.push(true);
						var tds = table.querySelectorAll("td");
						checkText(tds[1], correct[1]);
						checkSelect(tds[2], correct[2], correctOption);
						
					}
					
					else {
						word.classList.add("wrong");
						table.classList.add("wrong");
						
					}
					
					
				}
				
				
			}
					
			for (var i = 0; i < question.correct.length; i++) {
				var cor = question.correct[i];
				if (cor.length > 0 && cor.length < 5) {
					
					var div = form.querySelector(".results");
					var table = addChild(div, "table", "result missed");
					var tbody = addChild(table, "tbody");
					var tr = addChild(tbody, "tr");
					var th = addChild(tr, "th");
					th.innerHTML = "Slovo:";
					var td = addChild(tr, "td");
					td.innerHTML = cor[0];
					
					tr = addChild(tbody, "tr");
					th = addChild(tr, "th");
					th.innerHTML = "1. p. j. č.:";
					td = addChild(tr, "td");
					td.innerHTML = cor[1];
					
					tr = addChild(tbody, "tr");
					th = addChild(tr, "th");
					th.innerHTML = "Род и тип:";
					td = addChild(tr, "td");
					td.innerHTML = question.correctAnswers[i];
					
				 	words[i].classList.add("missed");
					}
				}
					
			
			
			break;
		
		case "division":
			var text = question.plainText;
			
			var out = "<table>";
			var row1 = "<tr>", row2 = "<tr>";
			
			for (var i = 0; i < question.correctAnswers.length; i++) {
				var answer = question.correctAnswers[i];
				row1 += "<td>" + answer[1] + "</td>"
				
				var start = answer[0];
				if (i < question.correctAnswers.length-1) {
					row2 += "<td class='center'>" + text.substring(answer[0], question.correctAnswers[i+1][0]) + "</td>"
				}
				else {
					row2 += "<td class='center'>" + text.substring(answer[0]) + "</td>"
				}
				
			}
			
			out += row1 + "</tr>" + row2 + "</tr></table>";
			out += "<p class='feedback'>" + question.feedback + "</p>";
			
			var fb = form.querySelector(".feedback");
			if (fb) fb.innerHTML = out;
			
			
			break;
		
		case "dragf": 
			var drops = form.querySelectorAll(".droparea-fill");
			
			for (var i = 0; i < drops.length; i++) {
				var drop = drops[i];
				
				drop.ondragend = null;
				
				var item = drop.querySelector(".dragitem");
				
				if (item) {
					item.ondrag = null;
					checkText(item, question.correctAnswers[i]);
				}
			}
			
			break;
			
		case "sortf": 
			var drops = form.querySelectorAll(".droparea");
			
			isEmpty = true;
			for (var i = 0; i < drops.length; i++) {
				if (drops[i].querySelectorAll(".dragitem").length > 0) {
					isEmpty = false;
				}
			}
			
			if (isEmpty) {
				break;
			}
			
			for (var i = 0; i < drops.length; i++) {
				var items = drops[i].querySelectorAll(".dragitem");
				for (var j = 0; j < items.length; j++) {
					var item = items[j];
					var iid = item.id;
					
					var fb = item.querySelector(".feedback");
					var fb_content = "";
										
					if (i == question.items[iid].group) {
						fb_content = "<img src='../design/ok.png'>"
						item.classList.add("correct");
					}
					
					else {
						fb_content = "<img src='../design/nok.png'>";
						item.classList.add("wrong");
					}
					
					fb_content += " <span class='comment'>" + question.items[iid].feedback + "</span>"
					
					fb.innerHTML = fb_content;
				}
			}
	}
	/*
	var toolbar = form.querySelector(".toolbar");
	if (toolbar) {
		toolbar.innerHTML = templates.nexter;
	}
	*/
}


function getListsBySentences(question) {
	var list = [];
	
	for (var i = 0; i < question.sentenceCount; i++) {
		list[i] = [];
	}
	
	for (var i = 0; i < question.solution.length; i++) {
		
		for (var j = 0; j < question.solution[i].length; j++) {
			list[question.solution[i][j]].push(i);
		}
	}
	
	return list;
}

function checkText(elem, correct) {
	console.log(elem)
	var input = elem.querySelector("input");
	var val = "";
	if (input) {
		val = input.value.trim();
		val = val.replace(/\s+/g, " ")
		
	}
	
	if (elem.classList.contains("dragitem")) {
		input = elem.firstChild;
		val = input.nodeValue.trim();
	}
	
	if (val == "") return;
	
	var fb = elem.querySelector(".feedback");

	//input.disabled = true;
	fb.innerHTML = "";
	elem.classList.remove("correct");
	elem.classList.remove("wrong");
	
	

	var isCorrect = false;

	for (var j = 0; j < correct.length; j++) {
		
		if (val == correct[j]) {
			isCorrect = true;
		}
	}
	var feedback = "";
	
	if (isCorrect) {
		 feedback = "<img src='../design/ok.png'>" + feedback
		elem.classList.add("correct");
	}

	else {
		feedback = "<img src='../design/nok.png'> <span class='correct-answer'>(*" + correct.join("/") + ")</span>"
		elem.classList.add("wrong");
	}
	fb.innerHTML = feedback;
}

function checkSelect(elem, correct, correctAnswer) {
	var sel = elem.querySelector("select");
	var fb = elem.querySelector(".feedback");

	//sel.disabled = true;
	fb.innerHTML = "";
	elem.classList.remove("correct");
	elem.classList.remove("wrong");

	//if (sel.value == "---") return;

	var fbComment = "";


	if (sel.value == correct) {
		fb.innerHTML = "<img src='../design/ok.png'>";
		elem.classList.add("correct");
	}

	else {
		fb.innerHTML = "<img src='../design/nok.png'> <span class='correct-answer'>(*" + correctAnswer + ")</span> "  + fbComment;
		elem.classList.add("wrong");
	}
}

function createNextForm(nexter) {
	var content = nexter.parentNode.parentNode;
	var form = content.parentNode;
	
	var question = questions[form.id];
	content.innerHTML = getNextVariants(question);	
}


function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.currentTarget.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
	
    ev.currentTarget.appendChild(document.getElementById(data));
}

function togglePopup (evt) {
    var icon = evt.currentTarget;
    
    var popup = icon.parentNode;
    
    if (popup.classList.contains("shown")) {
        popup.setAttribute("title", "Close popup") 
        
    } 
    
    else {
        popup.setAttribute("title", "Show popup") 
        
    }
    popup.classList.toggle("shown")
   
}

function closePopup(evt) {
    var popup = evt.currentTarget.parentNode.parentNode;
    popup.classList.remove("shown");
}

function initPopups() {
    var pops = document.querySelectorAll(".popup");
    for (var i = 0; i < pops.length; i++) {
        var pop = pops[i];
        
		var content = pop.innerHTML;
		var label = "";
		
		if (content.indexOf("|")>-1) {
			var parts = content.split("|");
			label = parts[0].trim();
			content = parts[1].trim();
		}
		pop.innerHTML = "";
		
		var icon = pop.appendChild(document.createElement("span"));
        icon.className = "popup-label";
		
		if (label == "") {
			icon.classList.add("simple");			
		}
		else {
			icon.classList.add("textual");
			icon.innerHTML = label;
		}		
		
        icon.addEventListener("click", togglePopup);
		
		var cont = pop.appendChild(document.createElement("span"));
        cont.className = "popup-content";
		cont.innerHTML = content;
		
        var closer = cont.appendChild(document.createElement("span"));
        closer.className = "closer";
        closer.innerHTML = "×";
        closer.addEventListener("click", closePopup);
        
        
    }
}

function addChild(parent, childName, childClass) {
	var child = parent.appendChild(document.createElement(childName));	
	if (childClass != undefined) {
		child.className = childClass;
	}
	
	return child;
}

function removeClasses(node, list) {
	for (var i = 0; i < list.length; i++) {
		node.classList.remove(list[i]);
	}
}

function findParent(node, parentName, parentClass) {
	
	var parent = node.parentNode;
	parentName = parentName.toLowerCase();
	
	while( parent.nodeName.toLowerCase() != parentName || !parent.classList.contains(parentClass)) {
		parent = parent.parentNode;
	}
	
	return parent;
}

function getRange(min, max) {
	if (min > max) return []
	
	var array = []
	for (var i = min; i < max+1; i++) {
		array.push(i)
	}
	
	return array;
}

function seekVideo(node, time) {
	var section = findParent(node, "section", "exercise");
	var video = section.querySelector("video");
	
	if (video) {
		video.currentTime = time;
		video.play();
	}
}


/****** vitualni klavesnice *****/
// ёйцуенгшщзхъ ЁЙЦУЕНГШЩЗХЪ
// фывапролджэ
// ячсмитьбю

var keyboard = null;
var actField = null;
var carPos = -1;


function initKeyboard() {
	var chars = [
		"ё й ц у к е н г ш щ з х ъ",
		"ф ы в а п р о л д ж э",
		"я ч с м и т ь б ю , ."
	]
	
	var main = document.querySelector(".main");
	
	keyboard = document.createElement("div");
	keyboard.className = "keyboard";
	
	var closer = addChild(keyboard, "span", "kb-letter closer");
	closer.innerHTML = "×"
	closer.addEventListener("click", hideKeyboard);
	closer.title = "Skrýt klávesnici";
	
	for (var i = 0; i < chars.length; i++ ) {
		var row = addChild(keyboard, "div", "kb-line");
		var letters = chars[i].split(/\s+/);
		
		for (var j = 0; j < letters.length; j++) {
			var letter = letters[j];
			var btn = addChild(row, "span", "kb-letter");
			btn.innerHTML = letter;
			btn.setAttribute("data-char", letter);
			btn.addEventListener("click", insertChar2);
		}
	}
	
	var row = addChild(keyboard, "div", "kb-line");
	var btn = addChild(row, "span", "kb-letter kb-shift");
	btn.innerHTML = "SHIFT";
	btn.setAttribute("data-set", 0);
	btn.addEventListener("click", toggleShift);
	
	btn = addChild(row, "span", "kb-letter kb-space");
	btn.innerHTML = "&#160;";
	btn.setAttribute("data-char", " ");
	btn.addEventListener("click", insertChar2);
	
	btn = addChild(row, "span", "kb-letter kb-shift");
	btn.innerHTML = "SHIFT";
	btn.setAttribute("data-set", 0);
	btn.addEventListener("click", toggleShift);
	
	main.appendChild(keyboard);
	
	hideKeyboard(null);
}

function toggleShift(evt) {
	var shifts = keyboard.querySelectorAll(".kb-shift");
	
	var isShifted = evt.currentTarget.classList.contains("locked");
	
	for (var i = 0; i < shifts.length; i++) {
		
		if (isShifted) {
			shifts[i].classList.remove("locked");
			setShiftKeyboard(false);
		}
		else {
			shifts[i].classList.add("locked");
			setShiftKeyboard(true);
		}
	}
	
}

function setShiftKeyboard(lock) {
	var letters = keyboard.querySelectorAll(".kb-letter");
	
	for (var i = 0; i < letters.length; i++) {
		var letter = letters[i];
		
		if (letter.classList.contains("kb-shift") || letter.classList.contains("kb-space") ) continue;
		
		var char = letter.getAttribute("data-char") || "";
		var inner = letter.innerHTML;
		
		if (lock) {
			char = char.toUpperCase();
			inner = inner.toUpperCase();
		}
		
		else {
			char = char.toLowerCase();
			inner = inner.toLowerCase();
		}
		
		letter.innerHTML = inner;
		letter.setAttribute("data-char", char);
	}
}

function insertChar2(evt) {
	
	var char = evt.currentTarget.getAttribute("data-char");
    
	if (actField == null) return
    var val = actField.value;
    var zacatek = (carPos > 0) ? val.substring(0, carPos) : ""
    var konec = (carPos > 0) ? val.substring(carPos) : val

    actField.value = zacatek + char + konec;
    carPos += char.length;
    doSetCaretPosition(actField, carPos)

}

function getCaretPosition(oField) {

    // Initialize
    var iCaretPos = 0;

    // IE Support
    if (document.selection) {

        // Set focus on the element
        oField.focus();

        // To get cursor position, get empty selection range
        var oSel = document.selection.createRange();

        // Move selection start to 0 position
        oSel.moveStart('character', -oField.value.length);

        // The caret position is selection length
        iCaretPos = oSel.text.length;
    }

    // Firefox support
    else if (oField.selectionStart || oField.selectionStart == '0')
        iCaretPos = oField.selectionStart;

    // Return results
    var vystup = iCaretPos

    return iCaretPos;
}


function doSetCaretPosition(oField, iCaretPos) {

    // IE Support
    if (document.selection) {

        // Set focus on the element
        oField.focus();

        // Create empty selection range
        var oSel = document.selection.createRange();

        // Move selection start and end to 0 position
        oSel.moveStart('character', -oField.value.length);

        // Move selection start and end to desired position
        oSel.moveStart('character', iCaretPos);
        oSel.moveEnd('character', 0);
        oSel.select();
    }

    // Firefox support
    else if (oField.selectionStart || oField.selectionStart == '0') {
        oField.selectionStart = iCaretPos;
        oField.selectionEnd = iCaretPos;
        oField.focus();
    }
}

function setIpas() {
    var divs = document.querySelectorAll(".question");
    var questions = new Array()
    for (var i = 0; i < divs.length; i++) {
        if (divs[i].hasAttribute("data-ready")) {
            continue;
        }
        var inputs = divs[i].querySelectorAll("input[type='text'], textarea");
        for (var j = 0; j < inputs.length; j++) {
           
            inputs[j].setAttribute("onclick", "setActualField(this);updateCaretPosition(this)");
            inputs[j].setAttribute("onchange", "updateCaretPosition(this)");
            inputs[j].setAttribute("onkeypress", "updateCaretPosition(this)");
            inputs[j].addEventListener("focus", showKeyboard);
//            inputs[j].addEventListener("blur", hideKeyboard);
            
           
        }

        var keybs = divs[i].querySelectorAll(".klavesnice")
        for (var k = 0; k < keybs.length; k++) { // generovani klavesnice
            if (keybs[k].getElementsByTagName("SPAN").length > 0) continue;
            if (!keybs[k].hasAttribute("data-chars")) continue;
            
            var closer = keybs[k].appendChild(document.createElement("span"));
            closer.className = "closer";
            closer.innerHTML = "×";
            closer.setAttribute("onclick", "this.parentNode.style.display = 'none'");
            closer.title = "Skrýt klávesnici";

            
            var tbs = keybs[k].getAttribute("data-chars");
            tbs = tbs.replace(/\|\|/g, "$$");
            tbs = tbs.split("|");
            for (var kk = 0; kk < tbs.length; kk++) {
                if (kk > 0) keybs[k].appendChild(document.createElement("br"));
                var chars = tbs[kk].split(" ");
                for (var kkk = 0; kkk < chars.length; kkk++) {
                    if (chars[kkk] == "") continue;
                    if (chars[kkk] == "$") chars[kkk] = "|";
                    var span = document.createElement("span");
                    span.className = "apl";
                    span.setAttribute("onclick", "insertChar2(\'" + chars[kkk] + "\')")
                    span.innerHTML = chars[kkk];

                    keybs[k].appendChild(span);
                }
            }

        }

        // <span class="apl" onclick="insertChar2('ʃ')">ʃ</span>  
    }
}

function showKeyboard(evt) {
    var input = evt.currentTarget;
    var content = getParent(input, "testelement");
	
	content.appendChild(keyboard);
	actField = input;
    //var keyboard = content.querySelector(".klavesnice");
    
    var boxC = content.getBoundingClientRect();
    var boxI = input.getBoundingClientRect();
    
    keyboard.style.display = "block";
    
    var boxK = keyboard.getBoundingClientRect();
    
    var posLeft = Math.max(0, boxI.left-boxC.left - (boxK.width-boxI.width)/2 )
   // keyboard.style.left = (posLeft) + "px";
   // keyboard.style.top = (boxI.top-boxC.top - boxK.height - 10) + "px";
    
    
}

function hideKeyboard(evt) {
   //var input = evt.currentTarget;
    //var content = getParent(input, "testelement");
    //var keyboard = content.querySelector(".klavesnice");
    keyboard.style.display = "none";
}

function updateCursor(evt) {
	var input = evt.currentTarget;
	
	actField = input;
	updateCaretPosition(input);
	
}

/*
inputs[j].setAttribute("onclick", "setActualField(this);updateCaretPosition(this)");
            inputs[j].setAttribute("onchange", "updateCaretPosition(this)");
            inputs[j].setAttribute("onkeypress", "updateCaretPosition(this)");
*/



function getParent(node,cName) {
    var parent = node;
    console.log(parent.nodeName);
    while (!parent.classList.contains(cName) && parent.nodeName != "BODY") {        
         console.log(parent.classList + " - " + parent.classList.contains(cName));
        parent = parent.parentNode;
       
    }
    return parent;
}

function setActualField(uzel) {
    actField = uzel;

}

function updateCaretPosition(pole) {
    carPos = getCaretPosition(pole)
}

window.addEventListener("load", initPage);