var lib = {
	searchList: [],
	toc: [null, null, null, null],
	
	actItem: null, //aktualni polozka - objekt
	actItemId: "", // actualni polozka - id
	actPhase: "", // aktualne zobrazena faze - id
	actPicIndex: -1, // aktualni obrazek 
	actPic: null, 
	pics: [], // pole obrazku dane polozky [ file, title, phase]
	phases: [0, 0, 0, 0, 0, 0, 0] // indikace pritomnosti fazi
}


function initApp(evt) {
	
	initAlgorithm();
	//fillSearchList();
	initPhaseMenu();
	
	createTocTree();
	
	var search = document.getElementById("muscle-search");
//	search.addEventListener("keyup", searchPhrase);
	search.addEventListener("keyup", searchPhrase);
	document.getElementById("searcher").addEventListener("click", searchPhrase);
	
	document.querySelector(".pic-prev").addEventListener("click", prevPic);
	document.querySelector(".pic-next").addEventListener("click", nextPic);
	//setItem("ssv");
}

function initPhaseMenu() {
	var links = document.querySelectorAll(".phases [data-ref]");
	
	for (var i = 0; i < links.length; i++) {
		var link = links[i];
		link.addEventListener("click", showPhase);
	}
}

function createTocTree() {
	var roots = items.root.children //;
	lib.toc = [null, null, null, null];
	
	var frag = getTocLevel(items.root, 0)
	
	var toc = document.querySelector("div.tocmenu");
	toc.innerHTML = "";
	toc.appendChild(frag);
}

function createTocLevel(evt) {
	var node = evt.currentTarget;
	var pid = node.getAttribute("data-ref");
	var level = parseInt(node.getAttribute("data-level"))
	
	var parent = items[pid]
		 
	if (!parent || !parent.children || isNaN(level) ) return null;
	
	if (lib.toc[level] && lib.toc[level] != node) {
		lib.toc[level].classList.remove("actual");
	}
	
	lib.toc[level] = node;
	lib.toc[level].classList.add("actual");
	
	setTocDiv(getTocLevel(parent, level), level)	
}

function setTocDiv(frag, level) {
	var tocs = document.querySelectorAll("div.tocmenu");
	
	for (var i = level; i < tocs.length; i++) {
		var toc = tocs[i];	
		toc.innerHTML = "";
		if (i == level) {
			toc.appendChild(frag);
		}
	}
	
}

function getTocLevel(parent, level, actual) {
	var frag = document.createDocumentFragment();
	
	for (var i = 0; i < parent.children.length; i++) {
		var childId = parent.children[i];
		var node = items[childId];
		
		var head = addChild(frag, "div", "menuitem");
		
		// vyznaceni aktualniho uzlu pri konstrukci stromu
		if (actual != undefined && actual == childId) {
			head.classList.add("actual");
			lib.toc[level] = head;
		}
		
		var name = node.name;
		
		head.setAttribute("data-ref", childId);
		head.setAttribute("data-level", level+1);
		
		if (node.children) {
			head.addEventListener("click", createTocLevel);
			head.classList.add("folder");			
		}
		
		else {
			head.addEventListener("click", showItem);
			head.classList.add("item");
			if (node.plural) name = "mm. " + name;
			else {
				if (name.indexOf("á") > 0 || name == "semisvaly") {
					
				}
				else {name = "m. " + name}
			}
		}
		
		head.innerHTML = name;
		
	}
	return frag;
}

function createNodeList(node, level) {
	var frag = document.createDocumentFragment();
	console.log(node.name)
		
	if (node.children && node.children.length > 0) { 
		var list = addChild(frag, "ul");
		list.className = "level" + level;
		
		for (var i = 0; i < node.children.length; i++) {
			var child = items[node.children[i]];
			
			if (!child) {
				console.log("Spatny id: " + node.children[i])
			}
			var li = addChild(list, "li");
			
			var link = addChild(li, "a");
			link.innerHTML = child.name;
			link.className = (child.children == undefined) ? "toc-leaf" : "toc-branch";
			link.setAttribute("data-ref", node.children[i]);
			
			li.appendChild(createNodeList(child), level+1);
		}
		
	}
	
	return frag;
}

function showItem(evt) {
	var item = evt.currentTarget
	var iid = item.getAttribute("data-ref");
	cancelFormerSelection();
	item.classList.add("actual");
	
	setItem(iid);
}

function showFoundItem(evt) {
	var iid = evt.currentTarget.getAttribute("data-ref");
	
	var path = [iid];
	var item = items[iid];
	while (item.parent) {
		path.push(item.parent);
		item = items[item.parent];		
	}
	path.reverse();
	var tocs = document.querySelectorAll(".tocmenu");
	
	var parent = items.root;
	for (var i = 0; i < path.length; i++) {
		if (i > 0) parent = items[path[i-1]];
		
		var frag = getTocLevel(parent, i, path[i]);
		tocs[i].innerHTML = "";
		tocs[i].appendChild(frag);
	}
	
	for (var i = path.length; i < tocs.length; i++) {
		tocs[i].innerHTML = "";
	}
	
	setItem(iid);
}

function cancelFormerSelection() {
	if (lib.actItemId != "") {
		var item = document.querySelector(".tocmenu [data-ref='" + lib.actItemId + "']");
		if (item) item.classList.remove("actual");
	}
}

function setItem(iid) {
	var item = items[iid];
	if (!item) {
		console.log("Polozka nenalezena: " + iid);
		return;
	}
	
	lib.actItem = item;
	lib.actItemId = iid;
	
	createImgSequence(item);
	createThumbs(item);
	createMuscleDesc(item)
	var head = document.getElementById("item-title");
	
	head.innerHTML = completeName(item.name);
	
	clearPhases(item);
	
	showSection("#viewer")
	//setPhase("anatomy");
	
	showPicByIndex(0);
	//lib.actPicIndex = 0;
}

function createMuscleDesc(item) {
	var out = [];
	if (item.begin) {
		out = out.concat(createDescList(item.begin, "Začátek"));		
	}
	
	if (item.upon) {
		out = out.concat(createDescList(item.upon, "Úpon"));		
	}
	if (item.inervation) {
		out = out.concat(createDescList(item.inervation, "Inervace"));		
	}
	if (item.effect) {
		out = out.concat(createDescList(item.effect, "Funkce"));		
	}
	if (item.therapy) {
		out = out.concat(createDescList(item.therapy, "Terapie TrPs"));		
	}
	
	document.getElementById("muscle-desc").innerHTML = out.join("");
}

function createDescList(list, heading) {
	var out = [];
	
	out.push("<h3>" + heading +"</h3>")
	out.push("<ul><li>");
	if (typeof list == "string") {
		out.push(list);
	}
	else {		
		out.push(list.join("</li><li>"));
		
	}
	out.push("</li></ul>");
	return out;
}

function completeName(name) {
	if (name.indexOf("á") > 0 || name == "semisvaly" ) {
		return name.charAt(0).toUpperCase() + name.substring(1);
	}
	if (lib.actItem.plural) {
		return "Musculi " + name;
	}
	return "Musculus " + name;
}

function createImgSequence(item) {
	if (item.pics) return;
	
	item.pics = [];
	addPhasePics(item, "anatomy");
	addPhasePics(item, "sides");
	addPhasePics(item, "clearing");
	addPhasePics(item, "palpation");
	addPhasePics(item, "PIR");
	addPhasePics(item, "pressure");
	
	console.log(item.pics);
}

function addPhasePics(item, series) {
	if (!item[series]) return;
	
	item.pics = item.pics || [];
		
	for (var i = 0; i < item[series].length; i++) {
		var pic = item[series][i];
		var seqPic = [pic.file, pic.title, series, false];
		if (pic.complete) seqPic[3] = true;
	 	item.pics.push(seqPic );
	}
}

function clearPhases(item) {
	var phases = ["anatomy", "sides", "clearing", "palpation",  "PIR", "pressure", "ed", "retreatment"];
	
	for (var i = 0; i < phases.length; i++) {
		var phase = phases[i];
		var link = document.querySelector(".phases [data-ref='" + phase  + "']");
		if (!link) continue;
		
		link.classList.remove("inactive");
		link.classList.remove("actual");
		if (!item[phase] || item[phase].length == 0) {
			link.classList.add("inactive");
			
		}
		
	}
}

function showPhase(evt) {
	var link = evt.currentTarget;
	
	var pid = link.getAttribute("data-ref");
	console.log("Pokus o fazi: " + pid)
	setPhase(pid);
}

function setPhase(pid) {
	if (!lib.actItem) return;
	
	showPhaseDesc(pid);
	/*
	var pics = lib.actItem[pid];
	if (!pics) return;
	*/
	
	highlightPhase(pid);
}

function highlightPhase(pid) {
	if (lib.actPhase == pid) return;
	
	if (lib.actPhase != "") {
		var phase = document.querySelector(".phase[data-ref='" + lib.actPhase + "']");
		if (phase) {
			phase.classList.remove("actual");
		}
	}
	lib.actPhase = pid;
	document.querySelector(".phase[data-ref='" + lib.actPhase + "']").classList.add("actual");
}


function createThumbs(item) {
	var pics = item.pics;
	
	var cont = document.getElementById("thumbs");
	cont.innerHTML = "";
	
	var frag = document.createDocumentFragment();
	
	var lastSection = "";
	var section = null;
	
	for (var i = 0; i< pics.length; i++) {
		var pic = pics[i];
		console.log(pic[2])
		if (pic[2] != lastSection) {
			lastSection = pic[2];
			
			section = addThumbSection(frag, lastSection);
		}
		
		var fig = addChild(section, "figure", "thumb");
		fig.setAttribute("data-phase", pic[2]);
		fig.setAttribute("data-index", i);
		
		fig.addEventListener("click", showBigPicture);
		
		var img = addChild(fig, "img");
		var src = pic[0]; //pic.file;
		if (!pic[3]) src =  lib.actItemId + "_" + src;
		img.src = "pics/mini/" + src;
		
		
		var fc = addChild(fig, "figcaption");
		fc.innerHTML = pic[1]; //pic.title;
		
		if (i == 0) {
			lib.actPic = fig;
			fig.classList.add("actual");
			setBigPicture(img, pic[1]); // title
		}
	}
	cont.appendChild(frag);
}

function addThumbSection(parent, titleCode) {
	var titles = {
		"anatomy": "Anatomická korelace",
		"palpation": "Palpace",
		"PIR": "Postizometrická relaxace",
		"clearing": "Ozřejmění",
		"sides": "Výběr strany",
		"pressure": "Presura"
	}
	
	var section = addChild(parent, "div", "thumbs-section");
	
	
	var head = addChild(section, "h3", "thumbs-label");
	
	head.innerHTML = titles[titleCode];
	
	return section;
}

var citations = [
	"Netter, F. H. (2005). <em>Anatomický atlas člověka (překlad 3. vyd.)</em>. Grada Publishing, a.s.: Praha.",

"Travell, J. G., Simons, D. G. (1983). <em>Myofascial Pain and Dysfunction, Volume 1, The Trigger Point Manual, The Upper Extremities</em>. Williams and Wilkins: Baltimore.",

"Travell, J. G., Simons, D. G. (1992). <em>Myofascial Pain and Dysfunction, Volume 2, The Trigger Point Manual, The Lower Extremities</em>. Williams and Wilkins: Baltimore.",

"Kendall, F.P., Kendall McCreary, R., Provance, P.G. (1993). <em>Muscles testing and function with posture and pain (4th Ed.)</em>. Williams and Wilkins: Baltimore."
	
]

function showBigPicture(evt) {
	var fig = evt.currentTarget;
	/*
	if (lib.actPic) {
		lib.actPic.classList.remove("actual");
	}
	
	lib.actPic = fig;
	lib.actPic.classList.add('actual');
	*/
	
	var index = parseInt(fig.getAttribute("data-index"), 10);
	//lib.actPicIndex = index;
	
	
	showPicByIndex(index);
	/*
	var img = fig.querySelector("img");
	if (!img) return;
	var title = fig.querySelector("figcaption").innerHTML;
	
	setBigPicture(img,title);
	*/
	
	var phaseId = fig.getAttribute("data-phase");
	setPhase(phaseId);
//	hideSection("#descriptions");
}

function setBigPicture(img, title) {
	
	var newSrc = img.src.replace("mini/", "big/");
	document.getElementById("bigOne").src = newSrc;
	
	var imgDesc = document.getElementById("item-title").innerHTML + " – " + title;
	
	
	if (title.indexOf("Kendall") > -1) {
		imgDesc = citations[3];
	}
	if (title.indexOf("Netter") > -1) {
		imgDesc = citations[0];
	}
	
	if (title.indexOf("Travell") > -1) {
		imgDesc =  (hasParent(lib.actItem, "dk") || lib.actItem.name == "quadratus lumborum") ? citations[2] : citations[1]	;	
	}
		
	document.getElementById("img-desc").innerHTML = imgDesc;
	
	showSection("#viewport");
}

function showPicByIndex(index) {
	if (index == lib.actPicIndex) {
		console.log("Stejny index");
		return;
	}
	
	var prev = document.querySelector(".thumb[data-index='" + lib.actPicIndex + "']");
	if (prev) {
		prev.classList.remove("actual");
	}
	lib.actPicIndex = index;
	var newActual = document.querySelector(".thumb[data-index='" + lib.actPicIndex + "']");
	newActual.classList.add("actual");
	
	var img = newActual.querySelector("img");
	if (!img) return;
	var title = newActual.querySelector("figcaption").innerHTML;
	
	setBigPicture(img, title);
	
	setPrevNextOf(lib.actPicIndex);
	showPhaseDesc(lib.actItem.pics[lib.actPicIndex][2]);
}

function nextPic(evt) {
	var link = evt.currentTarget;
	if (link.classList.contains("inactive")) {
		return;
	}
	
	showPicByIndex(lib.actPicIndex+1);
	
}

function prevPic(evt) {
	var link = evt.currentTarget;
	if (link.classList.contains("inactive")) {
		return;
	}
			
	showPicByIndex(lib.actPicIndex-1);
	
}

function setPrevNextOf(index) {
	var prev = document.querySelector(".pic-prev");
	var next = document.querySelector(".pic-next");
	
	prev.classList.remove("inactive");
	next.classList.remove("inactive");
	
	var item =lib.actItem;
	if (index == item.pics.length -1 ) {
		next.classList.add("inactive");
	}
	if (index == 0) {
		prev.classList.add("inactive");
	}
}


function hasParent(item, parentId) {
	
	if (item.parent) {
		if (item.parent == parentId) return true;
		else return hasParent(items[item.parent], parentId);
	} 
	return false;
}

function showPhaseDesc(pid) {
	var descs = document.querySelectorAll("#descriptions .section");
	for (var i = 0; i < descs.length; i++) {
		var desc = descs[i];
		desc.classList.remove("actual");
		
		if (desc.id == "desc-" + pid) {
			desc.classList.add("actual");
		}
	}
}

function fillSearchList() {
	lib.searchList = [];
	
	for (var itemKey in items) {
		var node = items[itemKey];
		if (!node.anatomy ) continue;
		
		lib.searchList.push([node.name, itemKey]);
	}
	
	lib.searchList.sort(searchSorter);
	
	var frag = document.createDocumentFragment();
	for (var i = 0; i < lib.searchList.length; i++) {
		var item = lib.searchList[i];
		var opt = addChild(frag, "option");
		opt.value = item[0];
		//opt.textContent = item[0];
	}
	
	document.getElementById("muscles").appendChild(frag);
}
 
function searchSorter(a, b) {
	return a[0].localeCompare(b[0]);
}

function initAlgorithm() {
	var sections = document.querySelectorAll(".algorithm .section"); 
	
	for (var i = 0; i < sections.length; i++) {
		var head = sections[i].querySelector("h3");
		var text = head.innerHTML;
		
		head.innerHTML = "";
		var exp = head.appendChild(document.createElement("span"));
		exp.className = "expander";
		exp.addEventListener("click", toggleSection);
		exp.innerHTML = "+"
		
		
		var cont = head.appendChild(document.createElement("span"))
		cont.className = "title";
		cont.addEventListener("click", showPhase)
		cont.innerHTML = text;
		
	}
}

function toggleSection(evt) {
	var btn = evt.currentTarget;
	var section = btn.parentNode.parentNode;
	
	if (section.classList.contains("expanded")) {
		section.classList.remove("expanded")
		btn.innerHTML = "+"
	}
	else {
		section.classList.add("expanded")
		btn.innerHTML = "−"
	}
}

/***** vyhledavani ***********/

function searchPhrase(evt) {
	var phrase = document.getElementById("muscle-search").value.trim().toLowerCase();
	
	if (phrase.length < 2) return;
	
	var results = []
	for (var itemKey in items) {
		var item = items[itemKey];
		if (!item.anatomy) continue;
		
		if (item.name.indexOf(phrase) > -1) {
			results.push(itemKey);
		}
	}
	
	makeResultList(results)
}

function makeResultList(results) {
	var list = document.querySelector(".results");
	list.innerHTML = "";
	
	var frag = document.createDocumentFragment();
	for (var i  = 0; i < results.length; i++) {
		var item = items[results[i]];
		
		var res = addChild(frag, "div", "result-item");
		res.innerHTML = item.name;
		res.setAttribute("data-ref", results[i]);
		res.addEventListener("click", showFoundItem);
	}
	
	if (results.length == 0) {
		var fb = addChild(frag, "p", "feedback");
		fb.innerHTML = "Žádný název neobsahuje zadanou frázi."
	}
	
	list.appendChild(frag);
}

/**** pomocne funkce - DOM ****/
function $(cssRule) {
	return document.querySelectorAll(cssRule);
}

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

function removeNode(node) {
    
    var parent = node.parentNode;
    if (parent) {
        return parent.removeChild(node);
    }
    return null;
}

function setHTML(cssRule, content) {
	var node = document.querySelector(cssRule);
	if (node) {
		node.innerHTML = content;
	}
	
	//node.appendChild(content);
}

function showSection(sectRule) {
	var section = document.querySelector(sectRule);
	if (section) {
		section.classList.remove("hidden");
	}
}
	
function hideSection(sectRule) {
	var section = document.querySelector(sectRule);
	if (section) {
		section.classList.add("hidden");
	}
}


window.addEventListener("load", initApp);