var actLang = "cs";

var doc = document.querySelector("html");
if (doc && doc.hasAttribute("lang")) {
    actLang = doc.getAttribute("lang");
}


var actual = { 
    chapter: 0, item: 0, thumb: null,
    svg: null, path: null, cons: [], graphics: null, control: null,  dragged: false
             }

var displayMode = "normal";

var svgNS = "http://www.w3.org/2000/svg";
var xlinkNS  = "http://www.w3.org/1999/xlink";

var PF = {
    startWidth: 800,
    startHeight: 700,
    bgImage: null,
    markers: null,
    connectors: null,
    graphics: null,
       
    markerCS: null,
    markerEN: null,
    markerLAT: null,
    cx: 0,
    cy: 0,
    
    actualChapter: -1,
    
    gray: false,
    lastURL: ""
}

 var sections = ["toc", "thumbs", "single"] 


var displayMode = "normal"

var i18n = {
    cs: {
        system: "systém",
        sex: "pohlavní systém",
      toc_chapter_title: "Přejít na kapitolu",  
      toc_section_title: "Přejít na sekci",
        chapter_prev: "Předchozí kapitola",
        chapter_next: "Následující kapitola",
        thumbs_title: "Náhledy",
        thumbs_goto: "Zobrazit náhledy",
        item_prev: "Přechozí preparát",
        item_next: "Následující preparát"
    },
    
    en: {
         system: "system",
        sex: "reproductive system",
      toc_chapter_title: "Go to chapter",  
      toc_section_title: "Go to section",
        chapter_prev: "Previous chapter",
        chapter_next: "Next chapter",
        thumbs_title: "Thumbnails",
        thumbs_goto: "Go to thumbnails",
        item_prev: "Previous preparate",
        item_next: "Next preparate"
    }
}

window.addEventListener("load", init)

var baseurl = this.location.href;
var basedir = baseurl.substring(0, baseurl.lastIndexOf("/"));

var maxCid = -1; // maximalni id kapitoly

function init(evt) {
                
     PF.bgImage = document.getElementById("edit-image");
     PF.graphics = document.querySelector("g.graphics");
     PF.connectors = document.querySelector("g.connectors");
     PF.markers = document.querySelector(".edit-desc");
         
     PF.titleCS = document.getElementById("edit-title-cs");
     PF.titleEN = document.getElementById("edit-title-en");
     PF.descCS = document.getElementById("edit-desc-cs");
     PF.descEN = document.getElementById("edit-desc-en");
     
     PF.markerCS = document.getElementById("edit-marker-cs");
     PF.markerEN = document.getElementById("edit-marker-en");;
     PF.markerLAT = document.getElementById("edit-marker-lat");;
  
     actual.svg = document.querySelector(".edit-cons");
    
     window.addEventListener("keydown", resolveKeys);
     sortItems();
}

function resolveURL() {
     var chapter = -1;
     var sect = -1;
     var item = -1;
     if (baseurl.indexOf("?") > -1) {
         var end = baseurl.substring(baseurl.indexOf("?")+1);
         var attrs = end.match(/[^\&]+=[^\&]+/g);
         if (attrs) {
             for (var i = 0; i < attrs.length; i++) {
                 var attr = attrs[i];
                 var name = attr.substring(0,attr.indexOf("="));
                 var val = attr.substring(attr.indexOf("=")+1);
                 if (name == "chapter") {
                     chapter = parseInt(val);
                 }
                 if (name == "item") {
                     item = parseInt(val);
                 } 
                 
                 if (name == "section") {
                     sect = parseInt(val);
                 }
                 
                 if (name == "gray") {
                     PF.gray = true;
                 }
             }
         }
       baseurl = baseurl.substring(0, baseurl.indexOf("?"))  
    }
    
    if (chapter != -1) {
        showChapter(chapter);
        
        if (sect > 0) {
        showSubsection(sect);
        }
    
        if (item > -1) {
        showPreparate(item);
        }
    
    }
    
    //new DragDivScroll('preparat');
     else {
         showSection("toc");
       // generateToc();
     }
}

function generateToc() {
    var list = document.querySelector("ul.toc");
    list.innerHTML = "";
    
    var out = ""
    
    for (var i = 0; i < chapters.length; i++) {
        var chap = chapters[i];

        out += "<li onclick='showChapter(" + i + ")' title='" + i18n[actLang].toc_chapter_title + "'>" + chap.label + " " + chap[actLang] + "</li>"
       
    }

    list.innerHTML = out;
    resolveURL();
}

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

function hideSection(sid) {

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

}
 
 function hltab(uzel) {
 var tabs = uzel.parentNode.getElementsByTagName("LI");
 
 for (var i =0; i < tabs.length; i++) {
  tabs[i].className = (tabs[i] == uzel) ? "active" : "" 
  }
 }


 function showToc() {
    showSection("toc");
     hideSection("thumbs");
     //hideSection("single");
 }


function nextChapter() {
  if (PF.actualChapter < chapters.length-1) {
  PF.actualChapter++;
  showChapter(PF.actualChapter)
  }
}
 
function prevChapter() {
  if (PF.actualChapter > 0) {
  PF.actualChapter--;
  showChapter(PF.actualChapter)
  }
} 
 
function showChapter(evt) {
	hideSection("intro");
    if (actual.mode != "big") {
        showSection("header");
        showSection("thumbs");
        showSection("chapter-desc");
    }
    
    if (document.getElementById("text").classList.contains("big")) {
        shrink("toc");
        expand("thumbs");
    }
    
    var index = 0,
        subindex = 0;

    if (typeof evt == "number") {
        index = evt;
    } else {
        var ixs = evt.currentTarget.getAttribute("data-ix").split("_");
        index = parseInt(ixs[0]);
        if (ixs.length > 1) {
            subindex = parseInt(ixs[1]);
        }

    }
    
    var tabs = document.querySelectorAll(".toc li");
    
    if (PF.actualChapter != undefined && PF.actualChapter > -1) {
        tabs[PF.actualChapter].classList.remove("actual")
    }
      tabs[index].classList.add("actual");

    if (!chapters || chapters.length < index + 1) return;

    PF.actualChapter = index;
    actualSection = subindex;

    var chapter = chapters[index];

    var vystup = ""
/*
    if (index > 0) {
        vystup += "<span class=\"apl\" id=\"prevChapter\" onclick=\"prevChapter()\"  title=\"" + i18n[actLang].chapter_prev + "\"><img src=\"design/Arrow_Left24v.png\" alt=\"" + i18n[actLang].chapter_prev + "\" /></span>"
        
    } else {
        vystup += "<img src=\"design/Arrow_Left24g.png\" alt=\"" + i18n[actLang].chapter_prev + "\" id=\"prevChapter\" />"
    }
*/
    vystup += (PF.actualChapter + 1) + " " + chapter[actLang];
    
    var grayer = document.getElementById("grayer");
    grayer.checked = PF.gray
        
        //"<span class='grayer'><input type='checkbox' id='grayer' " + ( (PF.gray) ? "checked='checked'" : "" ) + " onclick='toggleGray(this)' /><label for='grayer'>obrázky ve stupních šedi</label></span>";
    
    //vystup += grayer;
    /*
    if (index < chapters.length - 1) {
        vystup += "<span class=\"apl\" id=\"nextChapter\" onclick=\"nextChapter()\"  title=\"" + i18n[actLang].chapter_next + "\"><img src=\"design/Arrow_Right24v.png\" alt=\"" + i18n[actLang].chapter_next + "\" /></span>"
    } else {
        vystup += "<img  id=\"nextChapter\" src=\"design/Arrow_Right24g.png\" alt=\"" + i18n[actLang].chapter_next + "\"/>"
    }
    */

    document.getElementById("chaptitle").innerHTML = vystup;
    
    var desc = chapter["intro" + actLang.toUpperCase()];
    desc = replaceEntities(desc);
    desc = desc.replace(/([\s\d>])um([<\.\s\,\)])/g, "$1µm$2");
    
    desc = desc.replace(/([\s])([ksvziou])([\s])/gi, "$1$2&#160;" );
    desc = replaceGreek(desc);
    
    document.getElementById("chapter-desc").innerHTML = desc;
    
    //µ

    out = "";
      
    if (chapter.subs && chapter.subs.length > 0) {
        for (var i = 0; i < chapter.subs.length; i++) {
            var sub = subtitle.appendChild(document.createElement("span"));
            sub.className = "subitem";
            if (subindex == i) {
                sub.classList.add("actual");
            }
            sub.setAttribute("data-index", i);
            sub.addEventListener("click", changeSection);
            sub.innerHTML = chapter.subs[i][actLang];

        }
    }

    

    //showSubsection(subindex);
    generateThumbs(index)

}
 
function replaceEntities(text) {
    var t2 = text.replace(/\&gt;/g,">");
    t2 = t2.replace(/\&lt;/g,"<");
    
    return t2;
}

function replaceGreek(text) {
    var t2 = text;
    var pairs = [
        ["alpha", "α"],
        ["beta", "β"],
        ["gamma", "γ"],
        ["delta", "δ"],
        ["epsilon", "ε"],
        ["zeta", "ζ"],
        
        ["theta", "θ"],
        ["iota", "ι"],
        ["kappa", "κ"],
        ["lambda", "λ"],
        ["mu", "μ"],
        ["nu", "ν"],
        ["xi", "ξ"],
        ["omicron", "ο"],
        ["pi", "π"],
        ["rho", "ρ"],
        ["sigma", "σ"],
        ["tau", "τ"],
        ["upsilon", "υ"],
        ["phi", "φ"],
        ["chi", "χ"],
        ["psi", "ψ"],
        ["omega", "ω"],
        ["eta", "η"],
        ["micro", "µ"],
        
        ["Alpha", "Α"],
        ["Beta", "Β"],
        ["Gamma", "Γ"],
        ["Delta", "Δ"],
        ["Epsilon", "Ε"],
        ["Zeta", "Ζ"],
        ["Eta", "Η"],
        ["Theta", "Θ"],
        ["Iota", "Ι"],
        ["Kappa", "Κ"],
        ["Lambda", "Λ"],
        ["Mu", "Μ"],
        ["Nu", "Ν"],
        ["Xi", "Ξ"],
        ["Omicron", "Ο"],
        ["Pi", "Π"],
        ["Rho", "Ρ"],
        ["Sigma", "Σ"],
        ["Tau", "Τ"],
        ["Upsilon", "Υ"],
        ["Phi", "Φ"],
        ["Chi", "Χ"],
        ["Psi", "Ψ"],
        ["Omega", "Ω"],
    ];
    
    for (var i = 0; i < pairs.length ;i++) {
        t2 = t2.replace(new RegExp("\\\\" + pairs[i][0], "g"), pairs[i][1]);
    }
    
    return t2;
}

 function showSubsection(index) {
     var subs = document.querySelectorAll("#subtitle .subitem");
    
     if (actualSection > -1) {
         subs[actualSection].classList.remove("actual");
     }
     subs[index].classList.add("actual");
     
     actualSection = index;
     generateThumbs(index);
     PF.lastURL =  baseurl + "?chapter=" + PF.actualChapter + "&section=" + actualSection;
     
     if (PF.gray) {
         PF.lastURL += "&gray=true"
     }
      history.pushState({}, popis, PF.lastURL);
 } 
 
function changeSection(evt) {
    var sub = evt.currentTarget;
    var index = parseInt(sub.getAttribute("data-index"));
   
    if (index != actualSection) {
        //actualSection = index;
        showSubsection(index);
    }
    
}

function toggleGray(check) {
    var thumbs = document.getElementById("thumbs");
    var prep = document.getElementById("preparat");
    
    if (!check.checked) {
        thumbs.classList.remove("gray");
        prep.classList.remove("gray");
        
        PF.gray = false;
        PF.lastURL = PF.lastURL.replace("&gray=true", "");
    }
    
    else {
        thumbs.classList.add("gray");
        prep.classList.add("gray");
        
        PF.gray = true; 
        PF.lastURL += "&gray=true";
    }
	setLangUrl(PF.lastURL);
     history.pushState({}, "", PF.lastURL);
}

/* ************************* generovani prehledu nahledu */ 
function generateThumbs(index) {
    addMode("thumbnails");
    
   actualPrep = 0;

    showSection("thumbs");
    //hideSection("single");
    
    var thumbs = document.getElementById("thumbs");
    if (PF.gray && !thumbs.classList.contains("gray")) {
        thumbs.classList.add("gray");
    }

    var vystup = ""; //<input type=\"button\" value=\"TOC\" onclick=\"showSection('toc')\" /><menu>
    
    var sect = chapters[PF.actualChapter] //.subs[actualSection]
   // document.querySelector("#text h2").innerHTML = "" + (PF.actualChapter+1) + " " + chapters[PF.actualChapter][actLang];
   // document.querySelector("#text h3").innerHTML = "" + (PF.actualChapter+1) + "." + (actualSection+1) + " " + sect[actLang];
    
    var items = sect.items;
    var chap = chapters[PF.actualChapter]

    for (var i = 0; i < chap.order.length; i++) {
        vystup += generateThumb(chap.order[i],i);
        
    }

    //vystup += "<\/menu>";
    thumbs.innerHTML = vystup;
    
    PF.lastURL =  baseurl + "?chapter=" + PF.actualChapter;
    if (PF.gray) {
         PF.lastURL += "&gray=true";
     }
    setLangUrl(PF.lastURL);
    history.pushState({}, "popis", PF.lastURL); 
}  


function generateThumb(itemId, indexInOrder) {
    var vystup = ""
    
    var item = getItemById(itemId);
    if (!item) {
        console.log("Thumbnail - polozka nenalezena: " + itemId);
        return "";
    }
    var file = item.file || "";
    var parts = file.split(/\//);
parts[parts.length-1] = "mini/" + parts[parts.length-1];
   file = parts.join("/");

    var desc = item.title[actLang];
    var label = (PF.actualChapter +1)  ;

    desc = desc.replace(/(\s)([ksvziouKSCVZIOU])(\s)/g, "$1$2&#160;")

    if (desc.indexOf("<em>") > 0 && desc.indexOf("<\/em>") == -1) desc += "</em>"

    var type = "";
  /* */
    vystup += "<figure " + type + " onclick='showPreparate(" + indexInOrder + ")' >"
    vystup += "<img src='pics" + file + "' alt='Náhled preparátu' />"
    vystup += "<figcaption>" + label + "." + (indexInOrder+1) + " " + desc + "</figcaption>";
    vystup += "</figure>"

	/* textovy vystup popisku
	vystup += "<h2>" + label + "." + (indexInOrder+1) + " " + desc + "</h2>";
	vystup += "<table><tr><td>" + replaceEntities(item.desc.cs) + "</td><td>" + replaceEntities(item.desc.en) + "</td></tr></table>"
    */
	return vystup
} 

function getItemById(iid) {
	var item = items[iid] || null;
	return item;
//	
//    for (var i = 0; i < items.length; i++) {
//        var item = items[i];
//        if (item.id == iid) {
//            return item;
//        }
//    }
    //return null;
}

function getSubsection(sid) {
  var secs = chapters[PF.actualChapter].sekce;
  for (var i = 0; i < secs.length; i++) {
    if (secs[i].id == sid) return secs[i]
  }
  return false;
}
 
 /* *************** navigace mezi preparaty *****************/
 function nextPreparate() {
  if (actualPrep < chapters[PF.actualChapter].order.length-1) {
    actualPrep++; 
    showPreparate(actualPrep)
  }
 } 
  
function prevPreparate() {
  if (actualPrep > 0) {
    actualPrep--; 
    showPreparate(actualPrep)
  }
 }
 
function showPreparate(index) {
    addMode("big");
    shrink("thumbs");    
//    showSection("single");  
//    hideSection("thumbs");  
    
    actualPrep = index;
	
    var sect = chapters[PF.actualChapter] //.subs[actualSection];
  
    var first = (index == 0) ? "firstOn" : "firstOff";
    var last = (index == sect.order.length -1) ? "lastOn" : "lastOff";
    
    var mf = document.getElementById("mainFigure");
    mf.classList.remove("lastOn");
    mf.classList.remove("lastOff");
    mf.classList.remove("firstOn");
    mf.classList.remove("firstOff");
      
    mf.classList.add(first);
    mf.classList.add(last);
   
  var vystup = ""  
  var item = getItemById(sect.order[index]);
  
    PF.actualItem = item;
    
  var ssc = document.querySelector("#subsubsection");
  
  
  var label = "" + (PF.actualChapter+1) ;
  //vystup +=  "<span class=\"apl\" onclick=\"generateThumbs()\" title=\"" + i18n[actLang].thumbs_goto + "\"><img src=\"design/Arrow_Up24v.png\" alt=\"" + i18n[actLang].thumbs_title + "\" /></span>"
  vystup +=  label + "." + (index+1) + " " +  item.title[actLang];
    document.getElementById("figtitle").innerHTML = vystup;
    
    //generovani popisku
    
    var fig1 = document.getElementById("preparat");
        
     if (PF.gray && !fig1.classList.contains("gray")) {
        fig1.classList.add("gray");
    }
    
    var f_name = item.file.substring(0, item.file.indexOf("."))
    var f_type = item.file.substring(item.file.indexOf(".")+1)
    
    var pic = "";
    
    
    if (!item.origW || !item.origH) {
        item.origW = 2560; item.origH = 1920;
    }
    
    var box = fig1.getBoundingClientRect();
    var posX = 0, posY = 0;
    
    var sfx = item.origW/box.width;
    var sfy = item.origH/box.height;
    
    var p_width = 0 //(item.origW > item.origH) ? PF.startWidth : PF.startHeight/item.origH*item.origW ; 
        
    var p_height = 0//p_width/item.origW*item.origH;
    
    if (sfx < 0 && sfy < 0) {
       sfx = 1;
    }
    
    else {
        sfx = Math.max(sfx, sfy);
    }
    
     p_width = item.origW/sfx;
     p_height = item.origH/sfx;
    
    if (p_width < box.width) {
        posX = "" + (box.width - p_width)/2 + "px"
    }
    
    if (p_height < box.height) {
        posY = "" + (box.height - p_height)/2 + "px"
    }
 
//    
//    if (displayMode == "fullscreen") {
//        p_height = Math.min(PF.startWidth, item.origH );
//          
//    }
   
      var pic = PF.bgImage;
      var svg = fig1.querySelector("svg");
      var cons = fig1.querySelector(".connectors");
      var graphics = fig1.querySelector(".graphics"); 
      var infos = fig1.querySelector(".edit-desc");
      
      if (!pic) {
          pic = fig1.appendChild(document.createElement("img"));
            
         
         
          svg = fig1.appendChild(document.createElementNS(svgNS, "svg"));
          svg.setAttribute("pointer-events", "none");
          
          var defs = svg.appendChild(document.createElementNS(svgNS, "defs"));
          var mk = defs.appendChild(document.createElementNS(svgNS, "marker"));
          mk.setAttribute("orient","auto");
          mk.setAttribute("refY","0");
          mk.setAttribute("refX","0");
          mk.setAttribute("id","Arrow1Send");
          
          var path = mk.appendChild(document.createElementNS(svgNS, "path"));
          path.setAttribute("d", "M 0,0 L 5,-5 L -12.5,0 L 5,5 L 0,0 z ");
          path.setAttribute("style", "stroke:#9f9;stroke-width:1px;fill:#9f9");
          path.setAttribute("transform", "scale(0.2) rotate(180) translate(6,0)");
          
          mk = defs.appendChild(document.createElementNS(svgNS, "marker"));
          mk.setAttribute("orient","auto");
          mk.setAttribute("refY","0");
          mk.setAttribute("refX","0");
          mk.setAttribute("id","Arrow1Sstart");
          
          path = mk.appendChild(document.createElementNS(svgNS, "path"));
          path.setAttribute("d", "M 0,0 L 5,-5 L -12.5,0 L 5,5 L 0,0 z");
          path.setAttribute("style", "stroke:#9f9;stroke-width:1px;fill:#9f9");
          path.setAttribute("transform", "scale(0.2) translate(6,0)");
   
          graphics = svg.appendChild(document.createElementNS(svgNS, "g"));
          graphics.setAttribute("class", "graphics");
          cons = svg.appendChild(document.createElementNS(svgNS, "g"));
          cons.setAttribute("class", "connectors");
         
            
          infos = fig1.appendChild(document.createElement("div"));
          infos.className = "infos";
      }
    
     pic.id = "fig_preparat";
          
      hookEvent('fig_preparat', '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);
    
    pic.setAttribute("src", "pics" + item.file);
    pic.setAttribute("height", p_height);
    pic.setAttribute("width", p_width);
    pic.style.left = posX;
    pic.style.top = posY;
      
    pic.setAttribute("alt", item.title[actLang]);
    svg.setAttribute("width", item.origW*2);
    svg.setAttribute("height", item.origH*2);
      
    svg.style.left = posX;
    svg.style.top = posY;
    infos.style.left = posX;
    infos.style.top = posY;

  
  var sfy = p_width/PF.startWidth;
      removeNodes(".popisek");
      removeNodes(".connectors line");
     
    for (var i = 0; i < item.markers.length; i++) {
        var marker = item.markers[i];
        
        var desc = infos.appendChild(document.createElement("div"));
                
        desc.setAttribute("class", "popisek");
        
        var dcont =  marker[actLang].replace(/\|/g, "<br>");
        desc.innerHTML = dcont;
        
                  
        var cx = Math.round(marker.x * sfy),
            cy = Math.round(marker.y * sfy);
        
        desc.style.left = cx + "px";
        desc.style.top = cy + "px";
                            
        if (marker.cons && marker.cons.length > 0) { // konektory
            var boxD = desc.getBoundingClientRect();
            
            cx = Math.round(marker.x * sfy - 0) + boxD.width/2;
            cy = Math.round(marker.y * sfy - 0) + boxD.height/2 ;
            var dist = 25;
           
            for (var j = 0; j < marker.cons.length; j++) {
                var con = marker.cons[j];
                var line = document.createElementNS(svgNS, "line");
                line.setAttribute("x1", cx);
                line.setAttribute("y1", cy);
                line.setAttribute("x2", con[0]* sfy);
                line.setAttribute("y2", con[1]* sfy);
                line.setAttribute("data-index", i);
              
              
                cons.appendChild(line);
            }
        }
        
    }
    
   removeNodes(".graphics *");
    
    if (item.graphics) {
        
        for (var i = 0; i < item.graphics.length; i++) {
            var graph = item.graphics[i];
            addGraphics(graphics, graph, sfy);
        }

    }
    /*
    var tl_visible = (item.markers.length == 0) ? "hidden" : "visible"
    var labels =  document.getElementById("mainFigure").getElementsByTagName("LABEL")
    
    for (var i = 0; i < labels.length; i++) {
      labels[i].style.visibility = tl_visible;
    }
    */
        
    //spodni popis obrazku
    var popis = item.desc[actLang];
    popis = popis.replace(/(\s)([ksvziouKSVZAIOU])\s/g,"$1$2&nbsp;");
    popis = popis.replace(/\&gt;/g,">");
    popis = popis.replace(/\&lt;/g,"<");
    
    var pcont = document.getElementById("popis-content")
	pcont.innerHTML = popis ;
	pcont.style.width = box.width + "px";
    
    PF.lastURL =  baseurl + "?chapter=" + PF.actualChapter+ "&item=" + index;
    if (PF.gray) {
         PF.lastURL += "&gray=true";
     }
	
	setLangUrl(PF.lastURL)
    	
    history.pushState({}, popis, PF.lastURL);
      
   
  }

function setLangUrl(url) {
	var langUrl = url;
	if (actLang == "cs") {
		langUrl = langUrl.replace(".html", "_en.html")
	}
	else {
		langUrl = langUrl.replace("_en.html", ".html")
	}
	document.getElementById("lang-switch").setAttribute("href", langUrl);
	document.getElementById("lang-switch2").setAttribute("href", langUrl);
}

var dCount = 0;

function removeNodes(rule) {
    var nodes = document.querySelectorAll(rule);
    for (var i = 0; i < nodes.length; i++) {
        nodes[i].parentNode.removeChild(nodes[i]);
    }
}

function addGraphics(group, graph, sf) {
  
    var shape = null;
    
    if (graph.type == "ellipse") {
        shape = group.appendChild(document.createElementNS(svgNS, "ellipse"));
        shape.setAttribute("cx", graph.cx*sf);
        shape.setAttribute("cy", graph.cy*sf);
        shape.setAttribute("rx", graph.rx*sf);
        shape.setAttribute("ry", graph.ry*sf);
                    
    }
    if (graph.type == "line") {
        shape = group.appendChild(document.createElementNS(svgNS, "line"));
        shape.setAttribute("x1", graph.x1*sf);
        shape.setAttribute("x2", graph.x2*sf);
        shape.setAttribute("y1", graph.y1*sf);
        shape.setAttribute("y2", graph.y2*sf);
                    
    }
     if (graph.type == "bracket") {
        shape = group.appendChild(document.createElementNS(svgNS, "g"));
        shape.setAttribute("class", graph.type);
    
        
        var path = shape.appendChild(document.createElementNS(svgNS, "path"));
        
        path.setAttribute("d", getBracketPath(graph.coord,sf));
       
    }
    
    if (graph.type == "dblArrow") {
        shape = group.appendChild(document.createElementNS(svgNS, "g"));
        shape.setAttribute("class", graph.type);
     
        
        var path = shape.appendChild(document.createElementNS(svgNS, "path"));
        
        path.setAttribute("d", "M" + (graph.coord[0]*sf) + "," + (graph.coord[1]*sf) +  "L" + (graph.coord[2]*sf) + "," + (graph.coord[3]*sf) );
       
        
    }
   
   
   
    if (graph.transform) {
        shape.setAttribute("transform", graph.transform);
    }
    
    if (graph.style) {
        shape.setAttribute("style", graph.style);
        
        if (graph.style.indexOf("marker-start") > -1) {
            shape.setAttribute("marker-start", "url(#Arrow1Sstart)");
            
            
        } 
        
        if (graph.style.indexOf("marker-end") > -1) {
            shape.setAttribute("marker-end", "url(#Arrow1Send)");
        }
        
        if (graph.style.indexOf("marker") == -1) {
            shape.setAttribute("style", graph.style);
        }
    }
    
    if (graph.markerStart) {
        
        shape.setAttribute("marker-start", "url(#Arrow1Sstart)");
        
        if (graph.style && graph.style.indexOf("stroke: red") > -1) {
            shape.setAttribute("marker-start", "url(#Arrow1Sstart-red)");
        }
        if (graph.style && graph.style.indexOf("stroke: yellow") > -1) {
            shape.setAttribute("marker-start", "url(#Arrow1Sstart-yellow)");
        }
    }
    
    if (graph.markerEnd) {
        shape.setAttribute("marker-end", "url(#Arrow1Send)");
        
        if (graph.style && graph.style.indexOf("stroke: red") > -1) {
            shape.setAttribute("marker-end", "url(#Arrow1Send-red)");
        }
        
        if (graph.style && graph.style.indexOf("stroke: yellow") > -1) {
            shape.setAttribute("marker-end", "url(#Arrow1Send-yellow)");
        }
    }
}

 /*************************   zobrazeni/skryti popisku *******************************/ 
    
  function showInfos() {
      var section = document.getElementById("mainFigure");
      section.classList.remove("popiskyOff");
      section.classList.add("popiskyOn");
       
  }
 
  function hideInfos() {
       var section = document.getElementById("mainFigure");
      section.classList.add("popiskyOff");
      section.classList.remove("popiskyOn");
  }
  
      
    function toggleDesc(ckb) {
        var visible = !ckb.checked;
      var figure = document.getElementById("mainFigure");
      var svg = document.getElementById("desc_graphics");
      if (visible ) {
          ckb.title = "Skrýt popisky"
        showInfos();
        if (svg)  svg.style.visibility = "visible";
        figure.className = figure.className.replace("legendaOn", "legendaOff")
        figure.className = figure.className.replace("popiskyOff", "popiskyOn") 
      }
      else {
          hideInfos()
          ckb.title = "Zobrazit popisky"
        if (svg) svg.style.visibility = "hidden";
        figure.className = figure.className.replace("popiskyOn", "popiskyOff") 
      }
      
    } 
    
    function toggleLeg(bt) {
      var figure = bt.parentNode.parentNode
      
      if (bt.className == "btOn" ) {
        bt.className = "btOff";
        bt.setAttribute("title", "Skrýt legendu")
        figure.className = figure.className.replace("legendaOff", "legendaOn") 
      }
      else {
          bt.className = "btOn";
           bt.setAttribute("title", "Zobrazit legendu")
        figure.className = figure.className.replace("legendaOn", "legendaOff") 
      }
      
    } 
    
 



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;
  }

function showPos(evt, uzel) {
  
  var mouseX = evt.clientX - getPosX(uzel) 
  var mouseY = evt.clientY -  getPosY(uzel)
	
  //document.getElementById("info").innerHTML = "" + mouseX + ", " + mouseY + ", scroll: " + uzel.scrollLeft + ", " + uzel.scrollTop
}


function setScroll(uzel, sx, sy) {
uzel = document.getElementById(uzel);
uzel.scrollTop = sy
uzel.scrollLeft = sy
}

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 unhookEvent(element, eventName, callback)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
    return;
  if(element.removeEventListener)
  {
    if(eventName == 'mousewheel')
      element.removeEventListener('DOMMouseScroll', callback, false);  
    element.removeEventListener(eventName, callback, false);
  }
  else if(element.detachEvent)
    element.detachEvent("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("fig_preparat", normal, mouseX, mouseY )  
 
}

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

    var figure = document.getElementById(fig);
    var svgDesc = document.querySelector("#desc_graphics g");

    var prep = PF.actualItem; //chapters[PF.actualChapter].items[actualPrep];

    var nw = figure.width + sf * 20;

    nw = Math.max(nw, 480)
    nw = Math.min(nw, prep.origW)

    var sfx = nw / 480;
    var sfy = prep.origH / prep.origW * nw / figure.height;
    figure.height = prep.origH / prep.origW * 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;

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

    
    PF.markers.style.left = newX;
    PF.markers.style.top = newY;

    sf = figure.width / PF.startWidth;

    var descs = PF.markers.querySelectorAll(".popisek");
    //var prep =  PF.actualItem; //getItemById(chapters[PF.actualChapter].order[actualPrep]);

    for (var i = 0; i < prep.markers.length; i++) {
        var desc = prep.markers[i];
        cx = desc.x;
        cy = desc.y;
        
        descs[i].style.left = (cx * sf) + "px";
        descs[i].style.top = (cy * sf) + "px";
        
        var lines = document.querySelectorAll("line[data-index='" + i + "']")
        console.log("Linky indexu " + i)
        var box = descs[i].getBoundingClientRect();
        
        if (desc.cons && desc.cons.length > 0) {
             for (var j = 0; j < desc.cons.length; j++) {
                var line = lines[j];
                 if (!line) continue;
                 
                var con = desc.cons[j];

                line.setAttribute("x1", (cx) * sf + box.width/2);
                line.setAttribute("y1", (cy) * sf + box.height/2);
                line.setAttribute("x2", con[0] * sf);
                line.setAttribute("y2", con[1] * sf);

             }
        }
       

                
    }
    if (prep.graphics) {
        var sps = document.querySelector(".graphics");
        
        for (var i = 0; i < prep.graphics.length; i++) {
            var shape = prep.graphics[i];
            var sp = sps.childNodes[i];
            
            if (shape.type == "ellipse") {
                sp.setAttribute("cx", shape.cx*sf);
                sp.setAttribute("cy", shape.cy*sf);
                sp.setAttribute("rx", shape.rx*sf);
                sp.setAttribute("ry", shape.ry*sf);
            }
            
            if (shape.type == "line") {
                sp.setAttribute("x1", shape.x1*sf);
                sp.setAttribute("y1", shape.y1*sf);
                sp.setAttribute("x2", shape.x2*sf);
                sp.setAttribute("y2", shape.y2*sf);
            }
            
            if (shape.type == "bracket") {
               var path = sp.querySelector("path");
               path.setAttribute("d", getBracketPath(shape.coord, sf));
                
            }
            if (shape.type == "dblArrow") {
                var path = sp.querySelector("path");
                path.setAttribute("d", getBracketPath(shape.coord, sf));
            }
        }
    }
        

    if (svgDesc) {
        svgDesc.setAttribute("transform", "scale(" + sfy + ") translate(" + (-10) * (sfy - 1) + ", " + (-20) * (sfy - 1) + ")");
    }

}

function getBracketPath(coords, sf) {
        
    var d = "M" + (coords[0]*sf) + "," + (coords[1]*sf);
    var vecU = [ (coords[2]-coords[0])*sf, (coords[3]-coords[1])*sf];
    var vecN = [vecU[1], -vecU[0]];
    var velN = Math.sqrt(vecN[0]*vecN[0] + vecN[1]*vecN[1]);
    
    vecN[0] *= 20/velN;
    vecN[1] *= 20/velN;
    
    d += "l" + vecN[0] + "," + vecN[1];
    d += "l" + vecU[0] + "," + vecU[1];
    d += "l" + (-vecN[0]) + "," + (-vecN[1]);
    
    return d;
}

function report (text) {
    document.getElementById("info").innerHTML = text
}


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);
    
    pic.style.left = cx + dx + "px";
    pic.style.top = cy + dy + "px";
    
    var svg = document.querySelector(".preparat svg");
    svg.style.left = cx + dx + "px";
    svg.style.top = cy + dy + "px";
    
    
    PF.markers.style.left = cx + dx + "px";
    PF.markers.style.top = cy + dy + "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 .edit-desc");
        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 getSVGInfo(uzel) {
 alert(uzel.parentNode.getAttribute("title"))
 uzel.setAttribute("class", "selected")
 var svg = document.getElementById("fig_preparat").getSVGDocument()
 
 var doc = svg.getElementsByTagName("svg")[0]
 doc.setAttribute("class", "clickable")
 
 var objs = svg.getElementsByTagName("g");
 var titles = new Array()
 
 for (var i = 0; i < objs.length; i++) {
  if (objs[i].getAttribute("title") != undefined) titles.push(objs[i].getAttribute("title"))

 }

 }

 function toFullscreen() {
   
   displayMode = "fullscreen";
   
   window.moveTo(0, 0);
  window.resizeTo(screen.width, screen.height);
  
  document.getElementById("hmenu").style.display = "none"
   var celek = document.getElementById("single")
   celek.style.height = (screen.height-60) + "px"
   var prep = document.getElementById("preparat")
   celek.className =  "maxi";
    
    var vyska = 650 //(screen.height-60)
    prep.style.width = (screen.width - 80) + "px"
    prep.style.height = vyska + "px"
    
    var figure = document.getElementById("fig_preparat")
    var sf = Math.floor((screen.width-80-figure.width)/20)
    
    changeSize("fig_preparat", sf )  
    
  //var prep = chapters[PF.actualChapter].preparaty[actualPrep]
   
   }
  
  function toNormalSize() {
   
   displayMode = "normal";
  document.getElementById("hmenu").style.display = "block"
   var celek = document.getElementById("single")
   celek.style.height = "auto"
   var prep = document.getElementById("preparat")
   celek.className =  "normalSize";
    
    var vyska = 650 //(screen.height-60)
    prep.style.width = "642px"
    prep.style.height = "480px"
    
    var figure = document.getElementById("fig_preparat")
    var sf = Math.floor((screen.width-80-figure.width)/20)
    
    changeSize("fig_preparat", -100 )  
    
  //var prep = chapters[PF.actualChapter].preparaty[actualPrep]
   
   }



function addZeros(no) {
    return (no < 10) ?  "0" + no : "" + no;
}


function setReport(text) {
    document.getElementById("report").innerHTML = text
}

function report(text) {
    document.getElementById("report").innerHTML += text;
}


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

            item.index = i;
        }
    }


    generateToc()
}

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

function addMode(mode) {
    actual.mode = mode;
    var main = document.querySelector("main");
    if (!main.classList.contains(mode)) {
        main.classList.add(mode);     
    }
    
}

function removeMode(mode) {
    
    var main = document.querySelector("main");
    main.classList.remove(mode);     
    if (mode  == "big") {
		PF.lastURL =  baseurl + "?chapter=" + PF.actualChapter;
		if (PF.gray) {
			 PF.lastURL += "&gray=true";
		 }
		setLangUrl(PF.lastURL);
		history.pushState({}, "popis", PF.lastURL); 
	}
    
}

function toggleTOC() {
    var toc = document.getElementById("toc");
    if (toc) toc.classList.toggle("expanded");
    
    var thumbs = document.getElementById("thumbs");
    if (thumbs.classList.contains("expanded")) thumbs.classList.toggle("expanded");
}

function toggleThumbs() {
    var thumbs = document.getElementById("thumbs");
    if (thumbs) thumbs.classList.toggle("expanded");
    
    var toc = document.getElementById("toc");
    if (toc.classList.contains("expanded")) toc.classList.toggle("expanded");
    
}

function toggleText() {
    var text = document.getElementById("popis");
    if (text) text.classList.toggle("expanded");
        
}

function resolveKeys(evt) {
    if (evt.keyCode == 27) {
        
       
        
        if ( !isExpanded("thumbs") && !isExpanded("toc")) {
          removeMode("big"); 
        } 
        
        shrink("thumbs");  
        shrink("toc");  
       
    }
if (evt.keyCode == 37) {
		var isBig = document.querySelector("main").classList.contains("big");
		if (isBig) {
			prevPreparate()
		}
	}
	
	if (evt.keyCode == 39) {
		var isBig = document.querySelector("main").classList.contains("big");
		if (isBig) {
			nextPreparate()
		}
	}

}

function isExpanded(nodeId) {
   var node = document.getElementById(nodeId);
    if (node && node.classList.contains("expanded")) {
        return true;
    } 
    return false;
}

function expand(nodeId) {
     var node = document.getElementById(nodeId);
    if (node && !node.classList.contains("expanded")) {
        node.classList.add("expanded");
    }
}

function shrink(nodeId) {
     var node = document.getElementById(nodeId);
    if (node && node.classList.contains("expanded")) {
        node.classList.remove("expanded");
    }
}