Array.prototype.shuffle = function() {
  var i = this.length, j, temp;
  if ( i == 0 ) return this;
  while ( --i ) {
     j = Math.floor( Math.random() * ( i + 1 ) );
     temp = this[i];
     this[i] = this[j];
     this[j] = temp;
  }
  return this;
}

var actLang = "cs"; //jazyk cviceni, cs nebo en
var html = document.querySelector("html");
if (html && html.hasAttribute("lang")) {
	actLang = html.getAttribute("lang") || "cs";
}

var i18n = {
	cs: {
		select_chapter: "Vyberte alespoň jednu kapitolu atlasu",
		correct: "Správná odpověď",
		your_answer: "Vaše odpověď",
		not_assigned: "Některé preparáty nejsou přiřazeny, přesto vyhodnotit?",
		all_correct: "Výborně, všechny preparáty jsou správně přiřazeny.",
		some_wrong: "Ne všechny preparáty se Vám podařilo zařadit. Správné odpovědi si můžete zobrazit kliknutím na náhled."
        
	},
	en: {
		select_chapter: "Select at least one chapter",
		correct: "Correct answer",
		your_answer: "Your answer",
		not_assigned: "Some slides are not assigned, OK to evaluate the test?",
		all_correct: "Excellent, all slides are assigned correctly.",
		some_wrong: "Some slides were not assigned correctly. Click on slide previews to show answers."
	}
}


function initTest(evt) {
    var pic = document.getElementById("prep-image");
    
    document.getElementById("prep-image2").addEventListener("load", recognizeSize);
    hookEvent('prep-image', 'mousewheel', resizePic);

    pic.addEventListener("mousedown", startDrag);
    pic.addEventListener("mousemove", dragMove);
    pic.addEventListener("mouseup", stopDrag);
    pic.addEventListener("mouseout", stopDrag);

    pic.addEventListener("touchstart", touchStart);
    pic.addEventListener("touchmove", touchPan);
    pic.addEventListener("touchend", touchEnd);
	
	generateToc();
	sortItemsToChapters();
	
	var check = document.getElementById("select-all")
	check.addEventListener("click", toggleAllChecks);
	check.checked = false;

}

var response = {
    answers: [],
    correct: []
}

var test = {
	organs: [], // senzam organu - pro prirazeni
	selectedChapters: [], // indexy vybranych kapitol
	selectedItems: [], //pole s vybranymi preparaty
	selCount: 10, // pocet vybiranych preparatu;
	actitem: -1,
}

function generateToc() {
	var div = document.querySelector("div.toc");
	
	for (var i = 0; i < chapters.length; i++) {
		div.appendChild(getCheckWithLabel("toc" + i, reviseChecks, "" + (i+1) + " " + chapters[i][actLang]))
	}
}

function showIntro() {
	showSection("intro");
    hideSection("test");
}

function sortItemsToChapters() {
	for (var i = 0; i < items.length; i++) {
		
		var item = items[i];
		if (item.chapter.length == 0) continue;
		var chap = getChapterByID(item.chapter[0]);
		chap.items = chap.items || [];
		chap.items.push(item);
			
	}
}

function getChapterByID(cid) {
    
    for (var i = 0; i < chapters.length; i++) {
        var chap = chapters[i];
        if (cid == chap.cid) {
            return chap;
        }
    }
    return null;
}

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

function getCheckWithLabel(id, onclick, labelContent) {
	var frag = document.createDocumentFragment();
	
	var check = addChild(frag, "input");
	check.type = "checkbox";
	check.id = id;
	
	if (onclick) {
		check.addEventListener("click", onclick);
	}
	
	var label = addChild(frag, "label");
	label.setAttribute("for", id);
	label.innerHTML = labelContent;
	
	return frag;
}

function toggleAllChecks(evt) {
	var check = evt.currentTarget;
	
	var checks = document.querySelectorAll(".toc > input");
	var allChecked = check.checked;
	for (var i = 0; i < checks.length; i++) {
		checks[i].checked = allChecked;
	}
	
}

function reviseChecks(evt) {
	var checks = document.querySelectorAll(".toc > input");
	
	
	var areAll = true;
	for (var i = 0; i < checks.length; i++) {
		if (!checks[i].checked) {
			areAll = false;
		}
	}
	
	var main = document.getElementById("select-all");
	main.checked = areAll;
}

function createExercise() {
    state = "unchecked";
    
	test.selectedItems = []; // pole vybranych preparatu
	test.selectedChapters = []; // pole vybranych kapitol
	test.organs = [];
	
	var checks = document.querySelectorAll(".toc > input");
	for (var i = 0; i < checks.length; i++) {
		if (checks[i].checked) {
			
			test.selectedChapters.push(i);
			
			test.organs = test.organs.concat( chapters[i].organs);
			
			for (var j = 0; j < chapters[i].items.length; j++){
				var item = chapters[i].items[j]
				if (item.cathegory == -1) continue;
				
				test.selectedItems.push(item);
			}
			
		}
	}
	if (test.selectedChapters.length == 0) {
		alert(i18n[actLang].select_chapter);
		return;
	}
	
	test.selectedItems.shuffle();
	makeUnique(test.organs);
	
	test.organs.sort(organTitleSorter);
	
    hideSection("intro");
    showSection("test");
    
	
    var pCount = 10 //(document.getElementById("branch-general").checked) ? 10 : 8; 
    if (isNaN(pCount)) {
        console.log( "Spatny pocet " + pCount)
        return;
        
    }
            
    test.selectedItems = test.selectedItems.slice(0, pCount);
    
    
    response.answers = [];
    response.correct = [];
    
    for (var i = 0; i <pCount; i++) {
        response.correct[i] = test.selectedItems[i].cathegory;
        response.answers[i] = -1;
    }
    
	//vytvoreni vyberu organu - seznamy dole pod obrazkem
    var lists = document.querySelectorAll(".selList");
    
	for (var i = 0; i < lists.length; i++) {
		lists[i].innerHTML = "";
	}
	
    var actIndex = 0;
    var list = lists[0];
    
    var partCount = Math.ceil(test.organs.length/lists.length);
        
	var actIndex = 0;
	console.log("Organy " + test.organs)
    for (var i = 0; i < test.organs.length; i++) {
        if (i > 0 && i % partCount == 0) {
            actIndex++;
            list = lists[actIndex];            
        }
        
        var li = list.appendChild(document.createElement("li"));
        li.setAttribute("value", i+1);
        
        var input = addChild(li, "input");
		var iid = "sel-cat" + test.organs[i];
		
        input.type = "radio";
        input.name = "sel-cathegory";
        input.value = test.organs[i];
        input.id = iid;
        input.addEventListener("click", setAnswer);
        
        var label = addChild(li, "label");
        label.setAttribute("for", iid);
        label.innerHTML = cathegories[test.organs[i]].label;
    } 
    
    //thumbnaily
    var thumbs = document.querySelector(".thumbs");
    thumbs.innerHTML = "";
    
    for (var i = 0; i < test.selectedItems.length; i++) {
        var item =  test.selectedItems[i];
        
        var fig = addChild(thumbs, "figure");
        fig.className = "thumb";
        fig.setAttribute("data-index", i);
        fig.addEventListener("click", setItem);
        
        
        var img = addChild(fig, "img");
        img.src = "pics" + item.file.replace("/cviceni/", "/cviceni/mini/");
                
        item.scale = getRandomScale();
        img.style = item.scale;
				
        var fc = addChild(fig, "figcaption");
        fc.innerHTML = (i+1);
    }
    document.querySelector(".testimage").classList.remove("checked");
    document.querySelector(".helper").classList.remove("shown");
	
    document.getElementById("check-answers").style.display = "inline";
    document.getElementById("create-new").style.display = "none";
    
     document.querySelector(".feedback").innerHTML = "";
        
   showItem(0); 
}

function makeUnique(pole) {
	pole.sort(numericSorter);
	
	var newArray = [pole[0]];
	var last = pole[0];
	
	for (var i = 1; i < pole.length; i++) {
		if (pole[i] > last) {
			last = pole[i];
			newArray.push(last);
		}
	}
	
	pole = newArray;	
}

function organTitleSorter(a,b) {
	return cathegories[a].label.localeCompare(cathegories[b].label);
}

function numericSorter(a,b) {
	if (a > b ) return 1;
	if (a < b ) return -1;
	return 0
}

function getRandomScale(img) {
	var scales = [
		"", 
		"transform: scale(-1, 1)", 
		"transform: scale(1, -1)",
		"transform: scale(-1, -1)"
	]
	var scaleIndex = Math.floor(5*Math.random());
	return scales[scaleIndex];
}

function setAnswer(evt) {
    var input = evt.currentTarget;
    var index = parseInt(input.value);
    
    var fc = document.querySelector(".testimage figcaption");
    var answer = (test.actItem +1) + " " +  cathegories[index].label;
    fc.innerHTML = answer;
    response.answers[test.actItem] = index;
    
    document.querySelectorAll(".thumb figcaption")[test.actItem].innerHTML = answer; 
    
}

function setItem(evt) {
        
    var thb = evt.currentTarget;
    var index = parseInt(thb.getAttribute("data-index"));
    showItem(index);
}

function showItem(index) {
    var thumbs = document.querySelectorAll(".thumb");
    
    if (test.actItem > -1) {
        thumbs[test.actItem].classList.remove("actual");
    }
    
    var item = test.selectedItems[index];
    var img2 = document.getElementById("prep-image2");
    img2.src = "pics" + item.file;
    document.getElementById("prep-image").style = item.scale;
    
    test.actItem = index;
    thumbs[test.actItem].classList.add("actual");
    
    var fc = document.querySelector(".testimage figcaption");
    var answer = (test.actItem +1);
    var inputs = document.querySelectorAll(".selList input");
    
    if (response.answers[test.actItem] > -1) {
        answer += " " + cathegories[response.answers[test.actItem]].label;
        document.querySelector(".selList input[value='" + response.answers[test.actItem] + "']").checked = true;
        //inputs[response.answers[actItem]].checked = true;
    }
    
    else {
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].checked = false;
        }
    }
    fc.innerHTML = answer;
		
}

function toggleHelper(helper) {
	helper.classList.toggle("shown");
}

var state = "unchecked";

function checkAnswers() {
    var isComplete = true;
    
    var score = {ok: 0, nok: 0, na: 0}
    
    for (var i = 0; i < response.answers.length; i++) {
        if (response.answers[i] == -1) {
            isComplete = false;
            break;
        }
    }
    
    if (!isComplete && !confirm(i18n[actLang].not_assigned)) {
        return;
    }
        
    
    var thumbs = document.querySelectorAll(".thumb");
    
    if (test.actItem > -1) {
        thumbs[test.actItem].classList.remove("actual");
    }
    
     var inputs = document.querySelectorAll(".selList input");
     for (var i = 0; i < inputs.length; i++) {
            inputs[i].checked = false;
        }
    
    for (var i = 0; i < response.answers.length; i++) {
		var thumb = thumbs[i];
		
        thumb.classList.remove("correct");
        thumb.classList.remove("wrong");
        thumb.removeEventListener("click", setItem);
        thumb.addEventListener("click", showFeedback);
		
        if (response.answers[i] > -1) {
            if (response.answers[i] == response.correct[i]) {
                 thumb.classList.add("correct");
                //thumbs[i].classList.add("inactive");
                score.ok++
            }
            else {
                 thumb.classList.add("wrong");
                score.nok++;
            }
        }
        else {
            score.na++;
        }
        
    }
    
    //zpetna vazba
    var fb = document.querySelector(".feedback");
    fb.innerHTML = "";
    
    if (state == "unchecked") {
        var fbText = "";
        if (score.ok == test.selectedItems.length) {
            fbText = i18n[actLang].all_correct;     
            document.getElementById("check-answers").style.display = "none";
            document.getElementById("create-new").style.display = "inline";
            return;
        }
		
        if (score.na > 0 || score.nok > 0) {
            fbText = i18n[actLang].some_wrong;
        }
		
        fb.innerHTML = fbText;
        state = "final";
		
		document.querySelector(".testimage").classList.add("checked");
		document.getElementById("check-answers").style.display = "none";
        document.getElementById("create-new").style.display = "inline";
        return;
    }    
}

function showFeedback(evt) {
	var thb = evt.currentTarget;
    var index = parseInt(thb.getAttribute("data-index"));
	showItem(index);
	
	var item = test.selectedItems[index];
	//document.querySelector(".helper-content").innerHTML = item.help[actLang];
	
	var fb = document.querySelector(".feedback");
		
	if (item.cathegory > -1 && fb) {		
		
		var out = []
		
		var correctCath = cathegories[response.correct[index]];
		var cath = cathegories[response.answers[index]];
		
		var head = document.querySelector(".testimage figcaption");
		head.innerHTML = "";
		
		//spatna nebo zadna odpoved
		if (response.answers[index] != response.correct[index]) {		
			
			out.push("<p>" + i18n[actLang].correct + ": <strong class='bi'>" + cathegories[response.correct[index]].label + "</strong></p>")
			out.push("<p>" + correctCath["desc_" + actLang] + "</p>");
			
			if (response.answers[index] > -1) { //spatna odpoved
				
				
				out.push("<div class='answer'>");
			
				out.push("<p>" + i18n[actLang].your_answer + ": <strong class='bi'>" + cath.label + "</strong>. </p><p>" + cath["desc_" + actLang] + "</p>");
			
				out.push(findFirstImageOf(response.answers[index]) );
				out.push("</div>")
			}
			
		}
		
		if (response.answers[index] > -1 && response.answers[index] == response.correct[index]) {
			out.push("<p><strong class='bi'>" + cathegories[response.correct[index]].label + "</strong></p>")
			out.push("<p>" + cath["desc_" + actLang] + "</p>")
			out.push(getFirstImgOfCath(item) );
		}

		if (response.answers[index] != response.correct[index]) {
			out.push( getFirstImgOfCath(item)) ;
		}
		
		
		fb.innerHTML = out.join("");
		
	}
	else {
		fb.innerHTML = "";
	}
}

function getFirstImgOfCath(inItem) {
	
	findFirstImageOf(inItem.cathegory)
}

function findFirstImageOf(index) {
	var item = null;
	
	for (var i = 0; i < items.length; i++) {
		if (items[i].cathegory == index) {
			item = items[i];
			break;
		}
	}
	if (item) {
		return "<img class='fbImage' src=\"pics" + item.file + "\" alt=\"Obrázek správného orgánu\" />"
	}
	return "";
}

function recognizeSize(evt) {
    var img = evt.currentTarget;
    actImg.origHeight = img.height;
    actImg.origWidth = img.width;
    
    var sf = Math.max(img.width/700, img.height/400);
    var img2 = document.getElementById("prep-image");
    
    img2.setAttribute("src", img.src);
    img2.width = Math.round(img.width/sf);
    img2.height = Math.round(img.height/sf); 
    
    img2.style.left = (700-img2.width)/2 + "px";
    img2.style.top = (400-img2.height)/2 + "px";
    
    actImg.minWidth = img2.width;
    actImg.minHeight = img2.height;
}

function showSection(sid) {
    var sect = document.getElementById(sid);
    if (!sect) return;
    
    sect.classList.remove("hidden");
}

function hideSection(sid) {
    var sect = document.getElementById(sid);
    if (!sect) return;
    
    if (!sect.classList.contains("hidden")) {
        sect.classList.add("hidden");
    }
    
}

function parseCoords(node) {
    return [parseCoord(node.style.left), parseCoord(node.style.top)]
}

function parseCoord(prop) {
     var cx = prop;
    if (!cx) cx = 0;
    else {
        cx = cx.match(/(-?\d+\.*\d*)px/)[1];
        cx= parseFloat(cx);
    }
    return cx;
}

function startDrag(evt) {
    evt.preventDefault();
    
    var pic = evt.currentTarget;
    pic.setAttribute("data-dragged", "true");
    pic.setAttribute("data-ox", evt.clientX);
    pic.setAttribute("data-oy", evt.clientY);
        
    //showPos(evt, pic);
 
}

function dragMove(evt) {
    evt.preventDefault();
    var pic = evt.currentTarget;
    if (!pic.hasAttribute("data-dragged")) return;
    
    var dx = evt.clientX - parseInt(pic.getAttribute("data-ox"));
    var dy = evt.clientY - parseInt(pic.getAttribute("data-oy"));
    
    pic.setAttribute("data-ox", evt.clientX);
    pic.setAttribute("data-oy", evt.clientY);
    
    var cx = parseCoord(pic.style.left);
    var cy = parseCoord(pic.style.top);
    var newX = cx + dx; //Math.min(cx + dx, 0) //Math.min(, 700 - pic.width);;
    var newY = cy + dy; //Math.min(cy + dy, 0) //Math.min(, 400 - pic.height);;
    
    
    
    pic.style.left = newX + "px";
    pic.style.top = newY + "px";
   
   
 
}

function stopDrag(evt) {
    
    evt.currentTarget.removeAttribute("data-dragged");
 
}

var lastTouches = [];

function touchStart(evt) {
    evt.preventDefault();
    var pic = evt.currentTarget;
   var touch = evt.touches[0];

    //pic.setAttribute("data-dragged", "true");
    pic.setAttribute("data-ox", touch.clientX);
    pic.setAttribute("data-oy", touch.clientY);

    lastTouches = [];
    for (var  i = 0; i < evt.touches.length; i++) {
        lastTouches.push({ x: evt.touches[i].pageX, y: evt.touches[i].pageY})
    }
}

function touchPan(evt) {
    evt.preventDefault();
    var pic = evt.currentTarget;
    
    if (evt.touches.length == 1) { //jeden prst se mele, posunuti obrazu
        var touch = lastTouches[0];
        var endTouch = evt.touches[0]
        var dx = endTouch.pageX - touch.x;
        var dy = endTouch.pageY - touch.y;

        touch.x = endTouch.pageX;
        touch.y = endTouch.pageY;
       
        var cx = parseCoord(pic.style.left);
        var cy = parseCoord(pic.style.top);

        var newX = cx + dx, newY = cy + dy;
        pic.style.left = newX + "px";
        pic.style.top = newY + "px";

        var svg = document.querySelector(".preparat svg");
        svg.style.left = newX + "px";
        svg.style.top = newY + "px";

        var infos = document.querySelector(".preparat .infos");
        infos.style.left = newX + "px";
        infos.style.top = newY + "px";
    }

   if (evt.touches.length == 2) {
       var img = document.getElementById("fig_preparat");
       
       var d1 = [evt.touches[0].pageX - lastTouches[0].x, evt.touches[0].pageY - lastTouches[0].y ];
       var d2 = [evt.touches[1].pageX - lastTouches[1].x, evt.touches[1].pageY - lastTouches[1].y ];
       
       var dir = 3;
       if (evt.touches[0].clientY < evt.touches[1].clientY && d1[1] < 0) dir = -3;
       if (evt.touches[0].clientY > evt.touches[1].clientY && d2[1] < 0) dir = -3;
       
       var mouseX = (evt.touches[0].clientX + evt.touches[1].clientX)/2 - getPosX(img);
       var mouseY = (evt.touches[0].clientY + evt.touches[1].clientY)/2 - getPosY(img);
       changeSize("fig_preparat", -dir, mouseX, mouseY )  
   }
    
}

function touchEnd(evt) {
    lastTouches = [];
    for (var  i = 0; i < evt.touches.length; i++) {
        lastTouches.push({ x: evt.touches[i].pageX, y: evt.touches[i].pageY})
    }
}

function hookEvent(element, eventName, callback)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
    return;
  if(element.addEventListener)
  {
    if(eventName == 'mousewheel')
      element.addEventListener('DOMMouseScroll', callback, false);  
    element.addEventListener(eventName, callback, false);
  }
  else if(element.attachEvent)
    element.attachEvent("on" + eventName, callback);
}

function cancelEvent(e)
{
  e = e ? e : window.event;
  if(e.stopPropagation)
    e.stopPropagation();
  if(e.preventDefault)
    e.preventDefault();
  e.cancelBubble = true;
  e.cancel = true;
  e.returnValue = false;
  return false;
}

function resizePic(e)
{
    cancelEvent(e);
    e.preventDefault();

    var img = e.currentTarget;
    e = e ? e : window.event;
    var raw = e.detail ? e.detail : e.wheelDelta;
    var normal = e.detail ? e.detail * -1 : e.wheelDelta / 40;

    //showPos(e, img.parentNode);
    var mouseX = e.clientX - getPosX(img)
    var mouseY = e.clientY - getPosY(img)

    changeSize(img, normal, mouseX, mouseY )  
 
}
var actImg = { origWidth: 0, origHeight: 0}

function changeSize(figure, sf, mx, my) {

    //var figure = document.getElementById(fig);
   
    var nw = figure.width + sf * 20;

    nw = Math.max(nw, actImg.minWidth);
    nw = Math.min(nw, actImg.origWidth);

    //var sfx = nw / 700;
    var sfy = actImg.origHeight /  actImg.origWidth * nw / figure.height;
    figure.height = actImg.origHeight /  actImg.origWidth * nw;
    figure.width = nw;
    
    var cx = parseCoord(figure.style.left);
    var cy = parseCoord(figure.style.top);

    mx += cx;
    my += cy;

    var newX = (sfy * (cx - mx) + mx) + "px",
        newY = (sfy * (cy - my) + my) + "px";
    figure.style.left = newX;
    figure.style.top = newY;


}

function getPosX(obj)
  {
    var curleft = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft;
    if(obj.offsetParent)
        while(1) 
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function getPosY(obj)
  {
    var curtop = - (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }

window.addEventListener("load", initTest)