var maps = [

    { 
        title: "Přírodní poměry České republiky",
        id: "map1",
        legend: {
            title: "Fyzicko-geografická mapa",
            vscale: ["a0ce9f", "b3d38a", "f9f391", "f4c996", "cbb1a4"],
            axis: [1600, 1100, 800, 700, 400, 0],
            
        }   
    },
    { 
        title: "Podnebné oblasti",
        id: "map8",
        legend: {
            title: "Oblasti mírného pásu",
            items: [
                { type: "rect", title: "velmi teplá", color: "f9706f"},
                { type: "rect", title: "teplá", color: "fdbb88"},
                { type: "rect", title: "mírně teplá", color: "fde7ba"},
                { type: "rect", title: "chladná", color: "bbd0fd"},
                { type: "rect", title: "velmi chladná", color: "789bf1"},
                ]
        }   
    },
    
    { 
        title: "Půdy",
        id: "map9",
        legend: {
            title: "Půdní typ",
            items: [
                { type: "rect", title: "hnědozemě", color: "e59a09"},
                { type: "rect", title: "kambizemě nižších poloh", color: "fdeaaf"},
                { type: "rect", title: "kambizemě vyšších poloh", color: "fdd27f"},
                { type: "rect", title: "nivní půda", color: "bad2ba"},
                { type: "rect", title: "podzol", color: "6f9759"},
                { type: "rect", title: "rendziny", color: "fcbee7"},
                { type: "rect", title: "černozemě", color: "ab3a05"},
                ]
        }   
    }
]

function initProgress(evt) {
    var maps = document.querySelectorAll(".map");
    
    var pgs = document.querySelectorAll(".progress");
    for (var i = 0; i < pgs.length; i++) {
        var pg = pgs[i];
        pg.addEventListener("click", changeOpacity);
        pg.addEventListener("mousedown", startPgDrag);
        pg.addEventListener("mousemove", movePg);
        pg.addEventListener("mouseup", stopPgDrag);
//        pg.addEventListener("mouseout", stopPgDrag);
        
        var bar = pg.querySelector(".bar");
        bar.style.width = "100%";
        
    }
    
    var grefs = document.querySelectorAll("[data-ref]");
    for (var i = 0; i < grefs.length; i++) {
        var gref = grefs[i];
        gref.addEventListener("click", toggleGroup);
    }
    
    var qs = document.querySelectorAll(".questions");
    for (var i = 0; i <qs.length; i++ ) {
        var sid = document.createElement("div");
        sid.className = "sidebar";
        var label = sid.appendChild(document.createElement("label"));
        label.innerHTML = "Zpět na stránku";
        label.setAttribute("for", "closer" + i);
        
        var inp = sid.appendChild(document.createElement("input"));
        inp.type = "button";
        inp.id = "closer" + i;
        inp.value = "×";
        inp.className = "closer";
        inp.addEventListener("click", shrinkMap);
        
        qs[i].parentNode.insertBefore(sid, qs[i]);
    }
    
	var galleries = document.querySelectorAll(".questions .gallery");
	for (var i = 0; i < galleries.length; i++) {
		var gal = galleries[i];
		var fsImage = document.createElement("div");
		fsImage.className = "full-image";
		var inp = fsImage.appendChild(document.createElement("input"));
        inp.type = "button";
        inp.value = "×";
        inp.className = "closer";
		inp.onclick = function() { this.parentNode.classList.add("hidden");}
		var img = fsImage.appendChild(document.createElement("img"));
		img.className = "fullsized";
		
		gal.parentNode.insertBefore(fsImage, gal);
		
		var imgs = gal.querySelectorAll("img");
		for (var j = 0; j < imgs.length; j++) {
			imgs[j].addEventListener("click", showFullImage);
		}
	}
	
	var inp = document.querySelector("main").appendChild(document.createElement("input"));
        inp.type = "button";
        
        inp.value = "Připravit pro tisk";
        inp.className = "printer";
		inp.addEventListener("click", preparePrint)
	
    var fp = document.querySelector("body").appendChild(document.createElement("aside"));
    fp.className = "printed";
        
	var draws = document.querySelectorAll(".simple-draw");
	for (var i = 0; i < draws.length; i++ ) {
		createDrawingCanvas(draws[i]);
	}
	
	var mss = document.querySelectorAll("[data-legref]");
	for (var i = 0; i < mss.length; i++) {
		mss[i].addEventListener("click", selectMap);
	}
		
    window.addEventListener("keydown", resolveKeys);
}

function preparePrint(evt) {
	var fp = document.querySelector("aside.printed");
	fp.innerHTML = "";
	
	var cont = fp.appendChild(document.createElement("div"));
	cont.className = "content";
	
	var nodes = document.querySelector("main").childNodes;
	
	var heads = ["h1", "h2", "h3", "ol", "p", ];
	var blacklist1 = ["figure.gallery", ".full-image", ".fig"];
	var blacklist2 = ["img.icon", "div.legend", "div.sidebar", "div.drawbar"];
	for (var i = 0; i < nodes.length; i++) {
		var node = nodes[i];
		if (node.nodeType != 1) continue;
		
		var name = node.nodeName.toLowerCase();
		if (heads.indexOf(name) > -1) {
			var newNode = cont.appendChild(node.cloneNode(true));
			cleanseNode(newNode, blacklist1);
			continue;
		}
		
		if (name == "div" && node.hasAttribute("contenteditable")) {
			var newNode = cont.appendChild(node.cloneNode(true));
			continue;
		}
		
		if (name == "section" && node.hasAttribute("data-drawer")) {
			var newNode = cont.appendChild(node.cloneNode(true));
			cleanseNode(newNode, blacklist2);
			showObjects(newNode, node);
			
			
			continue;
		}
		if (name == "section" && node.className == "map clicker") {
			var newNode = cont.appendChild(node.cloneNode(true));
			cleanseNode(newNode, blacklist2);
			showObjects(newNode, node);
			continue;
		}
		
		if (name == "section" && node.className == "map" && !node.hasAttribute("data-drawer")) {
			var newNode = cont.appendChild(node.querySelector(".questions").cloneNode(true));
			cleanseNode(newNode, blacklist1);
			continue;
		}
	}
	var tools = fp.appendChild(document.createElement("div"));
	tools.className = "tools";
	addButton(tools, "Tisk", "Vytisknout cvičení", printPage);
	addButton(tools, "Zrušit", "Zpět na stránku", cancelPrint);
	fp.classList.add("shown");
}

function addButton(parent, value, title, clicker) {
	var btn = parent.appendChild(document.createElement("input"));
	btn.type = "button";
	btn.title = title;
	btn.value = value;
	btn.addEventListener("click", clicker);
}

function showObjects(newNode, oldNode) {
	var objs = newNode.querySelectorAll("object");
	var widths = [], heights = [];
	var maxWidth = 0, maxHeight = 0;
	
	for (var i = 0; i < objs.length; i++) {
		var obj = objs[i];
		var newW = obj.hasAttribute("data-maxwidth") ? 500 : parseFloat(obj.getAttribute("data-maxwidth"));
		maxWidth = Math.max(newW, maxWidth);
		
		var newH = obj.hasAttribute("data-maxheight") ? 285 : parseFloat(obj.getAttribute("data-maxheight"));
		maxHeight = Math.max(newH, maxHeight);
		
	}
	
	for (var i = 0; i < objs.length; i++) {
		var obj = objs[i];
		var sf = 500/maxWidth
		var newW = Math.round(widths[i]*sf);
		var newH = Math.round(heights[i]*sf);
		
		obj.style.display = "block";
		/*
		obj.style.width = "" + newW +"pt"
		obj.style.height = ""  + newH + "pt"
		*/
	}
	
	var oldCanvas = oldNode.querySelector("canvas");
	var newCanvas = newNode.querySelector("canvas");
			
	if (oldCanvas && newCanvas) {
		newCanvas.getContext("2d").drawImage(oldCanvas, 0,0);
		
		var cw = parseFloat(oldCanvas.getAttribute("data-maxwidth"))
		var ch = parseFloat(oldCanvas.getAttribute("data-maxheight"))
		var sf = 500/maxWidth;
		var newW = Math.round(cw*sf);
		var newH = Math.round(ch*sf);
		/**/
	}
	/**/
	if (objs.length > 0) {
		var parent = objs[0].parentNode;
		parent.style.width = "500pt"
	}
	
}

function cleanseNode(node, blacklist) {
	for (var i = 0; i < blacklist.length; i++) {
		var sels = node.querySelectorAll(blacklist[i]);
		for (var j = 0; j < sels.length; j++) {
			sels[j].parentNode.removeChild(sels[j]);
		}
	}
}

function printPage(evt) {
	window.print();
	cancelPrint()
}

function cancelPrint(evt) {
	var printed = document.querySelector(".printed")

	printed.classList.remove("shown");
	printed.innerHTML = "";
		
}

function selectMap(evt) {
	var inp = evt.currentTarget;
	var newMap = inp.getAttribute("data-legref").trim();
	
	var actualMap = inp.parentNode.getAttribute("data-actual");
	if (actualMap == newMap) return;
	
	if (actualMap != "") {
		var map0 = document.querySelector("[data-map=\"" + actualMap + "\"]");
		map0.classList.add("shrunk");		
		var leg0 = document.querySelector("[data-id=\"" + actualMap + "\"]");
		leg0.classList.add("shrunk")
	}
	
	actualMap = newMap;
	var map0 = document.querySelector("[data-map=\"" + actualMap + "\"]");
	map0.classList.remove("shrunk");	
	var leg0 = document.querySelector("[data-id=\"" + actualMap + "\"]");
	leg0.classList.remove("shrunk");
	
	inp.parentNode.setAttribute("data-actual", actualMap);
	
}

function showFullImage(evt) {
	var img = evt.currentTarget
	var src = img.src.replace("-mini", "");
	var fs = img.parentNode.previousElementSibling;
	fs.classList.remove("hidden");
	var fsi = fs.querySelector(".fullsized");
	fsi.src = src;
}

function setOpacity(mapId, value) {
   var mapObj = document.querySelector("[data-map='" + mapId + "']");
    if (!mapObj) return;
    
    mapObj.style.opacity = value;
   
    var bar = document.querySelector("[data-id='" + mapId + "'] .bar");
    bar.style.width = "" + (value*100) + "%";
}

function setMapOpacity(btn, value) {
    var mapId = btn.parentNode.parentNode.parentNode.getAttribute("data-id");
   var mapObj = document.querySelector("[data-map='" + mapId + "']");
    if (!mapObj) return;
    
    mapObj.style.opacity = value;
   
    var bar = document.querySelector("[data-id='" + mapId + "'] .bar");
    bar.style.width = "" + (value*100) + "%";
}



function changeOpacity(evt) {
    var pg = evt.currentTarget;
      
    var box1 = pg.getBoundingClientRect();
    var newVal = (evt.clientX - box1.left)/box1.width;
    
    
    var mapId = pg.parentNode.parentNode.parentNode.getAttribute("data-id");
    setOpacity(mapId, newVal);
}

function startPgDrag(evt) {
    var bar = evt.currentTarget.querySelector(".bar");
    bar.setAttribute("data-dragged", "true");
    changeOpacity(evt);
}
function movePg(evt) {
    var bar = evt.currentTarget.querySelector(".bar");
    if (bar.hasAttribute("data-dragged")) {
        changeOpacity(evt);
    }
}

function stopPgDrag(evt) {
    var bar = evt.currentTarget.querySelector(".bar");
    bar.removeAttribute("data-dragged");
}


window.addEventListener("load", initProgress);

var origW = 0,
    origH = 0,
    origX = 0,
    origY = 0;
var stepW = 0,
    stepH = 0,
    stepX = 0,
    stepY = 0;
var steps = 30;
var actMap = null;

function expandMap(mapa) {
    if (actMap == mapa) return;
    
    var box = mapa.getBoundingClientRect();

    origW = box.width;
    origH = box.height;

    origX = box.left;
    origY = box.top;

    stepW = (window.innerWidth - box.width) / steps;
    stepH = (window.innerHeight - box.height) / steps;
    //    alert(stepH)
    mapa.setAttribute("data-ox", origX);
    mapa.setAttribute("data-oy", origY);
    mapa.setAttribute("data-ow", origW);
    mapa.setAttribute("data-oh", origH);

    mapa.style.position = "fixed";
    mapa.classList.add("maxed");
    stepX = -origX / steps;
    stepY = -origY / steps;
    actMap = mapa;
    
    var next = actMap.nextElementSibling;
    if (next.nodeName != "DIV" || next.nodeName != "placeholder") {
        
        
    }
    next.style.height = "" + box.height + "px";
    next.style.display = "block";
    
    animateMap()

}

function shrinkMap() {
    var mapa = actMap;
    if (!mapa) return;
    
    var box = mapa.getBoundingClientRect();
    var relPosX = box.left / window.innerWidth * 100;
    var relPosY = box.top / window.innerHeight * 100;
    origW = window.innerWidth;
    origH = window.innerHeight;

    origX = 0;
    origY = 0;

    stepW = -(window.innerWidth - parseFloat(mapa.getAttribute("data-ow"))) / steps;
    stepH = -(window.innerHeight - parseFloat(mapa.getAttribute("data-oh"))) / steps;

    stepX = parseFloat(mapa.getAttribute("data-ox")) / steps;
    stepY = parseFloat(mapa.getAttribute("data-oy")) / steps;
    actMap.classList.remove("maxed");
    actMap = mapa;
    
    var objs = actMap.querySelectorAll("object");
    for (var i = 0; i < objs.length; i++) {
        objs[i].style.display = "none";
    }
    var legend = actMap.querySelector(".legend");
    if (legend) {
        legend.style.opacity = 0;
        legend.style.zIndex = -1;
    }
	var icon = actMap.querySelector("figure img");
	if (icon) {
		icon.style.opacity = 1;
		icon.style.height = "auto";
	}
    
    
    animateMap()
}

var counter = 0;

function animateMap() {
    counter = -1;
    step()

}

function step() {
    counter++;
    if (counter < steps) {
        origX += stepX;
        origY += stepY;
        origW += stepW;
        origH += stepH;

        actMap.style.left = "" + origX + "px";
        actMap.style.top = "" + origY + "px";
        actMap.style.width = "" + origW + "px";
        actMap.style.height = "" + origH + "px";

        window.requestAnimationFrame(step);
    } else { // konec animace
        if (stepX > 0) {

            actMap.style.position = "static";
            actMap.style.width= "auto";
            actMap.style.height= "auto";
            var next = actMap.nextElementSibling;
            next.style.display = "none";
            actMap = null;
            
            
        }
        else { //mapa zvetsena na max
            var objs = actMap.querySelectorAll("object");
            for (var i = 0; i < objs.length; i++) {
				var obj = objs[i];
                obj.style.display = "block";
				var box = obj.getBoundingClientRect();
				obj.setAttribute("data-maxwidth", box.width);
				obj.setAttribute("data-maxheight", box.height);
            }
            if (objs.length > 0) {
				var icon = actMap.querySelector("figure img");
				if (icon) {
					icon.style.opacity = 0;
					icon.style.height = 0;
				}
			}
            
            var legend = actMap.querySelector(".legend");
            if (legend) {
                legend.style.opacity = 1;
                legend.style.zIndex = 10;
            }
            if (actMap.hasAttribute("data-drawer") && !actMap.querySelector("canvas")) {
                var layers  = actMap.querySelector(".layers")
                var box = layers.getBoundingClientRect();
                
                var canvas = document.createElement("canvas");
                canvas.id = actMap.getAttribute("data-drawer");
                canvas.width = box.width; //window.innerWidth*0.8;
                canvas.height = box.height; //window.innerWidth*0.6;
                
				canvas.setAttribute("data-maxwidth", box.width);
				canvas.setAttribute("data-maxheight", box.height);
				
				initDrawing(canvas);
                
                layers.appendChild(canvas);
                layers.appendChild(createDrawToolbar(actMap));
              
              
            }
			
			
           
        }
    }


}

function createDrawingCanvas(map) {
	
	var layers  = map.querySelector(".layers")
	var box = layers.getBoundingClientRect();

	var canvas = document.createElement("canvas");
	canvas.id = map.getAttribute("data-drawer");
	canvas.width = box.width; //window.innerWidth*0.8;
	canvas.height = box.height; //window.innerWidth*0.6;
	initDrawing(canvas);

	layers.appendChild(canvas);
	layers.appendChild(createDrawToolbar(map));
}

function createDrawToolbar(map) {
    var bar = document.createElement("div");
    bar.className = "drawbar";
    var did = "mapa";
	if (map) did = map.getAttribute("data-drawer");
	
    var colors = ["f00", "0f0", "99f", "ff0", "f0f", "0ff", "---"];
	if (map && map.hasAttribute("data-palette")) {
		colors = map.getAttribute("data-palette").split(/\s+/);
		colors.push("---");
	}
    var palette = bar.appendChild(document.createElement("div"));
    palette.className = "palette";
    for (var i = 0; i < colors.length; i++) {
        var input = palette.appendChild(document.createElement("input"))
        input.type = "radio";
        input.name = did + "_colors";
        input.value = colors[i];
        input.id = did + "_color" + i;
        input.addEventListener("click", changeColor);
        if (i == 0) input.checked = true;
        
        var label = palette.appendChild(document.createElement("label"));
        label.className = "color";
        if (colors[i] == "---" ) {
            label.className = "color rubber";
            label.title = "Guma";
        }
        label.setAttribute("for", did + "_color" + i);
        label.style.backgroundColor = "#" + colors[i];
        
    }
    
    var widths = [2, 4, 6];
    palette = bar.appendChild(document.createElement("div"));
    palette.className = "palette widths";
    
    for (var i = 0; i < widths.length; i++) {
        var input = palette.appendChild(document.createElement("input"))
        input.type = "radio";
        input.name = did + "_widths";
        input.value = widths[i];
        input.id = did + "_width" + i;
        
        input.addEventListener("click", changeLineWidth);
        if (i == 1) input.checked = true;
        
        var label = palette.appendChild(document.createElement("label"));
        label.className = "width";
        label.setAttribute("for", did + "_width" + i);
        label.className = "width" + i;
    }
    
    
    /*
   var wdt = bar.appendChild(document.createElement("input")); 
    wdt.className = "stroker";
    wdt.type = "number";
    wdt.addEventListener("click", changeLineWidth);
    wdt.addEventListener("keydown", changeLineWidth);
    wdt.min = 1;
    wdt.max = 10;
   wdt.value = 3
    */
    
    var clearer = bar.appendChild(document.createElement("input")); 
    clearer.className = "clearer";
    clearer.type = "image";
    clearer.src = "../design/edit-clear-32.png";
    clearer.addEventListener("click", clearCanvas);
    clearer.title = "Vymazat kresbu";
    
    
return bar;
}

function changeColor(evt) {
    var inp = evt.currentTarget;
    var canvas = inp.parentNode.parentNode.parentNode.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    var color = (inp.value == "---") ? "transparent" : "#" + inp.value;
    if (inp.value == "---") {
        if (!canvas.classList.contains("erasing")) canvas.classList.add("erasing");
        canvases[canvas.id].origLineWidth = canvases[canvas.id].lineWidth
        canvases[canvas.id].lineWidth = 30;
        ctx.globalCompositeOperation = "destination-out";
        ctx.strokeStyle = "rgba(0,0,0,1)";
    }
    
    else {
        if (canvases[canvas.id].lineWidth == 30) canvases[canvas.id].lineWidth = canvases[canvas.id].origLineWidth;
        canvas.classList.remove("erasing");
        ctx.globalCompositeOperation = "source-over";
        ctx.strokeStyle = color;
        canvases[canvas.id].color = color;
    }
    
    //if (!actDrawer) return;
    
    //actDrawer.color = "#" + inp.value;
    //console.log("Zmena barvy: " + actDrawer.color)
}

function changeLineWidth(evt) {
    var inp = evt.currentTarget;
    var canvas = inp.parentNode.parentNode.parentNode.querySelector("canvas");
   
    canvases[canvas.id].lineWidth = parseInt(inp.value, 10);
    
}
function clearCanvas(evt) {
    var inp = evt.currentTarget;
    var canvas = inp.parentNode.parentNode.querySelector("canvas");
   
    canvas.getContext("2d").clearRect(0,0,5000,5000);
    //if (!actDrawer) return;
    
    //actDrawer.color = "#" + inp.value;
    //console.log("Zmena barvy: " + actDrawer.color)
}

function resolveKeys(evt) {
    if (evt.keyCode == 27 && actMap != null) {
        evt.preventDefault();
        shrinkMap();
    }
	
	var printed = document.querySelector(".printed")
	if (evt.keyCode == 27 && printed.classList.contains("shown")) {
		printed.classList.remove("shown");
		printed.innerHTML = "";
		}
}

 function toggleStroke(ckb) {
     var mapId = (ckb.hasAttribute("data-id")) ? ckb.getAttribute("data-id") : ckb.parentNode.parentNode.getAttribute("data-id");
     
        var mapa = document.querySelector("[data-map='" +  mapId +"']");
        
        var paths = mapa.contentDocument.querySelectorAll("path");
        for (var  i = 0; i < paths.length; i++) {
            var path = paths[i];
            if (path.style.fillOpacity && path.style.fillOpacity < 1) {
                 
                path.style.stroke = path.getAttribute("orig-stroke");
                
                var sw = path.getAttribute("orig-stroke-width");
                path.style.strokeWidth = sw //+ "px";
                path.style.fill = path.getAttribute("orig-fill");;
                path.style.fillOpacity = 1;
            }
            else {
                var stroke = (path.hasAttribute("stroke")) ? path.getAttribute("stroke") : path.parentNode.style.stroke;
                var strokeWidth = "";
                if (path.hasAttribute("stroke-width")) strokeWidth = path.getAttribute("stroke-width");
                if (strokeWidth == "" && path.style.strokeWidth) strokeWidth = path.style.strokeWidth;
                if (strokeWidth == "" && path.parentNode.style.strokeWidth) strokeWidth = path.parentNode.style.strokeWidth;
                
                
                if (strokeWidth.indexOf("px") > -1) {
                    strokeWidth = strokeWidth.substring(0, strokeWidth.indexOf("px"));
                }
                strokeWidth = parseFloat(strokeWidth);
                if (isNaN(strokeWidth)) strokeWidth = 1;
                path.setAttribute("orig-stroke-width", strokeWidth);
                
                if (path.style.stroke) stroke = path.style.stroke;
                
                path.setAttribute("orig-stroke", stroke);
                var fill = (path.hasAttribute("fill")) ? path.getAttribute("fill") : path.parentNode.style.fill || path.style.fill;
                path.setAttribute("orig-fill", fill);
                
                path.style.stroke = stroke;
                path.style.strokeWidth = "" + (5*strokeWidth) //+ "px";
                path.style.fillOpacity = 0;
            }
            
        }
    }

function toggleGroup(evt) {
    var item = evt.currentTarget;
    var mapId = (item.hasAttribute("data-id")) ?item.getAttribute("data-id") : item.parentNode.parentNode.getAttribute("data-id");
    
    var mapa = document.querySelector("[data-map='" + mapId +"']");
	

    var grp = mapa.contentDocument.getElementById(item.getAttribute("data-ref"));
    if (!grp) return;
    
    if (!grp.style.opacity || grp.style.opacity != 0) {
        grp.style.opacity = 0;
        item.classList.add("hidden");
    }
    else {
        grp.style.opacity = 1;
        item.classList.remove("hidden");
    }
}

//window.requestAnimationFrame(step);