var svgZoomDoc = null;
var svgZoomRoot = null;
var svgDoc = null;
var svgRoot = null;
var activeKey = 1;
var activeDot = -1;
var command = "";
var SVGVersionNumber = 0;
var SVGMajorVersion = 0;
var SVGMinorVersion = "";
var SVGloaded = false;
var mapWidth = 266;
var mapHeight = 266;
var boxWidth = 2500000;
var boxHeight = 2500000;
var dotSize = 15000;

var rangeUnitX = 1450;
var rangeUnitY = 900;

var xmlDoc = new ActiveXObject("microsoft.xmldom");
xmlDoc.async = false;

loadProcs[loadProcs.length] = "PageLoaded()"; 

function validateSVGVersion() {
	try {
		SVGViewerVersion = svgmapzoom.getSVGViewerVersion();
		//alert(SVGViewerVersion);
		SVGVersionNumber = SVGViewerVersion.slice(SVGViewerVersion.lastIndexOf(";")+1);
		if (SVGVersionNumber.indexOf("x") != -1) {
			SVGMajorVersion = SVGVersionNumber.slice(0, SVGVersionNumber.lastIndexOf("x"));	
			SVGMinorVersion = SVGVersionNumber.slice(SVGVersionNumber.lastIndexOf("x"));	
		} 
		else {
			SVGMajorVersion = SVGVersionNumber*1; 
			SVGMinorVersion = "";
		}
		//alert(SVGVersionNumber);
		if (!isValidSVG()) {
			svgHint1.style.display = "block";
		}
	}
	catch(e) {
		svgHint1.style.display = "block";
	}
}

function isValidSVG() {
	return (SVGloaded || ((SVGMajorVersion == 3.0) && (SVGMinorVersion==""))); 
}

function PageLoaded () {
	var distance = parseInt(document.formName.range.value);
	
	textPostcode.value = "";
	
	try {
		validateSVGVersion();
		SVGloaded = true;

		OLMap = 0.47 * boxWidth;
		NBMap = 0.5 * boxHeight;
		OL = Map2OL(OLMap);
		NB = Map2NB(NBMap);
		command="clearDots(); makeFrame("+OLMap+","+NBMap+","+0.0025*(distance+4)*boxHeight+"); showGebiedenNearPoint("+OL+","+NB+"); zoomIn("+OLMap+","+NBMap+"," + 200/(distance+4)+");"
		eval(command)
	}
	catch(e) {
		SVGloaded = false;
	}
}

function repeat() {
	svgHint.style.display = "none";
}

function repeat2() {
	svgHint1.style.display = "none";
	svgHint2.style.display = "block";
}

function svgAlert() {
	alert("Er is geen (juiste) SVGviewer geinstaleerd.\nKlik links...");
}

function getRefs(object) {
	//validateSVGVersion();
	if (svgZoomDoc==null) {
		svgZoomDoc = document.svgmapzoom.getSVGDocument();
		if (svgZoomDoc!=null) svgZoomRoot = svgZoomDoc.getDocumentElement();
		gebiedZoomGroup = svgZoomRoot.getElementById("dynamic");
		//gebiedZoomGroup = svgZoomDoc.createElement('g');
		//gebiedZoomGroup.setAttribute("id", "dynamic")
		//svgZoomDoc.getDocumentElement().appendChild(gebiedZoomGroup);
	}
	if (svgDoc==null) {
		svgDoc = document.svgmap.getSVGDocument();
		if (svgDoc!=null) svgRoot = svgDoc.getDocumentElement();
		gebiedGroup = svgDoc.createElement('g');
		gebiedGroup.setAttribute("id", "dynamic")
		svgDoc.getDocumentElement().appendChild(gebiedGroup);
		svgDoc.getDocumentElement().addEventListener( "mousedown", zoomAtPoint, false );
		//svgDoc.getDocumentElement().setAttribute("onclick", "JavaScript:zoomAtPoint();");
	} 
	if (svgDoc==null | svgZoomDoc==null) {
		svgHint.style.display = "block";
	} 
	else {
	}
}


function zoomAtPoint(evt) {
	if (isValidSVG) {
		if (evt.button==0) {
			var distance = parseInt(document.formName.range.value);
			
			textPostcode.value = "";
			
			svgRoot = svgDoc.getDocumentElement();
			
			OLMap = (evt.clientX-svgRoot.currentTranslate.x)/svgRoot.currentScale / mapWidth * boxWidth;
			NBMap = (evt.clientY-svgRoot.currentTranslate.y)/svgRoot.currentScale / mapHeight * boxHeight;
			OL = Map2OL(OLMap);
			NB = Map2NB(NBMap);
			//alert(evt.clientX + ", " + evt.clientY);
			//alert(OL + ", " + NB);
			command="clearDots(); makeFrame("+OLMap+","+NBMap+","+0.0025*(distance+4)*boxHeight+"); showGebiedenNearPoint("+OL+","+NB+"); zoomIn("+OLMap+","+NBMap+","+200/(distance+4)+");"
			eval(command)
		}
	}
	else {
		svgAlert();
	}
}

function zoomAtPostcode(evt) {
	if (isValidSVG) {
		var distance = parseInt(document.formName.range.value);
		
		svgRoot = svgDoc.getDocumentElement();
		
		var postcodeObject;
		if (document.getElementById("textPostcode") != null) {
			postcodeObject = document.getElementById("textPostcode");
		}
		else {
			postcodeObject = textPostcode;
		}
		var postcode = postcodeObject.value.slice(0, 4);
		command="clearDots(); showCity('"+postcode+"');"
		eval(command)
	}
	else {
		svgAlert();
	}
}

var hiDot = "#ed0705";
var loDot = "#fd6f09";

function hiLightDot(id) {
	if (activeDot == id) return;
	oElem = svgZoomRoot.getElementById("dot"+id);
	switch (oElem.nodeName) {
		case "rect" :
			oElem.setAttribute("x", oElem.getAttribute("x") - 0.5*dotSize);
			oElem.setAttribute("y", oElem.getAttribute("y") - 0.5*dotSize);
			oElem.setAttribute("width", 2*dotSize);
			oElem.setAttribute("height", 2*dotSize);
			oElem.setAttribute("style", "cursor:pointer;stroke: "+hiDot+"; fill: "+hiDot+";");
		break
		case "circle" :
			oElem.setAttribute("r", oElem.getAttribute("r")*2);
			oElem.setAttribute("style", "cursor:pointer;stroke: "+hiDot+"; fill: "+hiDot+";");
		break
	}
	if (resultGebieden.all("a" + id)!=null) resultGebieden.all("a" + id).className = "hi";
}

function loLightDot(id) {
	if (activeDot == id) return;
	oElem = svgZoomRoot.getElementById("dot"+id); 
	switch (oElem.nodeName) {
		case "rect" :
			oElem.setAttribute("x", parseInt(oElem.getAttribute("x"),10) + 0.5*dotSize);
			oElem.setAttribute("y", parseInt(oElem.getAttribute("y"),10) + 0.5*dotSize);
			oElem.setAttribute("width", "" + dotSize);
			oElem.setAttribute("height", "" + dotSize);
			oElem.setAttribute("style", "cursor:pointer;stroke: " + hiDot + "; fill: " + loDot + ";");
		break
		case "circle" :
			oElem.setAttribute("r", oElem.getAttribute("r") / 2);
			oElem.setAttribute("style", "cursor:pointer;stroke: " + hiDot + "; fill: " + loDot + ";");
		break
	}
	if (resultGebieden.all("a" + id)!=null) resultGebieden.all("a" + id).className = "";
}

function clickDot(id, alias, xmlId) {	
	if ((activeDot > 0) && (activeDot != id)) {
		saveDot = activeDot;
		activeDot = -1;
		loLightDot(saveDot);
	}
	activeDot = id;
	//hiLightDot(id);
	
	showPopup("../asp/page.asp?id=" + xmlId + "&alias=" + alias + "&view=" + view_alias);
	if (printEnabled) {
		objIE.navigate("../asp/page.asp?id=" + xmlId + "&alias=" + alias + "&version=print");
	}	
}

// create a single dot at (x,y)
function makeGebiedDot(x, y, id, name, prefix, clr, clr2, hover, alias, xmlId, type) {
	function doIt(svg, root) {
		switch (type) {
			case "vondst" :
				var element = svg.createElement('rect')
				element.setAttribute("x", x - 0.5*dotSize);
				element.setAttribute("y", y - 0.5*dotSize);
				element.setAttribute("width", "" + dotSize);
				element.setAttribute("height", "" + dotSize);
				element.setAttribute("cursor", "pointer");
				element.setAttribute("style", "cursor:pointer;stroke: "+clr2+"; fill: "+clr+";");
			break
			case "locatie" :
				var element = svg.createElement('rect')
				element.setAttribute("x", x - 0.5*dotSize);
				element.setAttribute("y", y - 0.5*dotSize);
				element.setAttribute("width", "" + dotSize);
				element.setAttribute("height", "" + dotSize);
				element.setAttribute("cursor", "pointer");
				element.setAttribute("style", "cursor:pointer;stroke: "+clr2+"; fill: "+clr+";");
			break
			default :
				var element = svg.createElement('circle')
				element.setAttribute("cx", x);
				element.setAttribute("cy", y);
				element.setAttribute("r", dotSize);
				element.setAttribute("cursor", "pointer");
				element.setAttribute("style", "cursor:pointer;stroke: "+clr2+"; fill: "+clr+";");
			break
		}
		if (svg == svgZoomDoc && hover==true) {
			element.setAttribute("onclick", "JavaScript:clickDot("+id+", '" + alias + "', '" + xmlId + "');");
			element.setAttribute("onmouseover", "JavaScript:hiLightDot("+id+");");
			element.setAttribute("onmouseout", "JavaScript:loLightDot("+id+");");
		}	
		element.setAttribute("id", "dot"+id);
		element.setAttribute("class", "gebied");
		element.setAttribute("alt", prefix+name);
		root.appendChild(element);
	}
	doIt(svgDoc, gebiedGroup);
	doIt(svgZoomDoc, gebiedZoomGroup);
}

// create a single dot at (x,y)
function makePostcodeDot(x, y, id, name, prefix, clr, clr2) {
	function doIt(svg, root) {
		var element = svg.createElement('circle')
		element.setAttribute("cx", x);
		element.setAttribute("cy", y);
		element.setAttribute("r", 0.66*dotSize);
		element.setAttribute("cursor", "pointer");
		element.setAttribute("style", "cursor:pointer; stroke: "+ "black" +"; fill: " + "black" + ";");
		element.setAttribute("id", "dot"+id);
		element.setAttribute("class", "postcode");
		element.setAttribute("alt", prefix+name);
		if (svg == svgZoomDoc) {
			txtElement = svgZoomRoot.getElementById("plaatstext");
			//var txtElement = svg.createElement('text')
			txtElement.setAttribute("x", parseInt(x) + 0.66*dotSize);
			txtElement.setAttribute("y", y);
			//txtElement.setAttribute("style", "font-family: Arial;font-size:120000;fill:black");
			txtElement.firstChild.nodeValue = name;
			//svg.getDocumentElement().appendChild(txtElement);
		}	
		root.appendChild(element);
	}
	doIt(svgDoc, gebiedGroup);
	doIt(svgZoomDoc, gebiedZoomGroup);
}

// creates a rectangle showing the zoom area
function makeFrame(x, y, range) {
	var element = svgDoc.createElement('rect');
	element.setAttribute("x", x-range);
	element.setAttribute("y", y-range);
	element.setAttribute("width", 2*range);
	element.setAttribute("height", 2*range);
	element.setAttribute("style", "cursor:hand");
	element.setAttribute("stroke", "#EF2849");
	element.setAttribute("stroke-width", 1.5*boxWidth / mapWidth);
	element.setAttribute("id", "rect");
	element.setAttribute("fill", "none");
	gebiedGroup.appendChild(element);
}

// zooms in at point (x,y) with zoom scaling
function zoomIn(x, y, zoom) {
	getRefs(); 
	if (!isValidSVG) return;
	elem = svgZoomRoot.getElementById("plaatsen");
	style = elem.getAttribute("style");
	if (style.indexOf(";visibility:hidden")!=-1) {
		style = style.slice(0, style.indexOf(";visibility:hidden")-1) + style.slice(style.indexOf(";visibility:hidden")+18);
		elem.setAttribute("style", style);
	}
	elem = svgZoomRoot.getElementById("plaatsnamen");
	style = elem.getAttribute("style");
	if (style.indexOf(";visibility:hidden")!=-1) {
		style = style.slice(0, style.indexOf(";visibility:hidden")-1) + style.slice(style.indexOf(";visibility:hidden")+18);
		elem.setAttribute("style", style);
	}
	svgZoomRoot.currentScale = 1;
	svgZoomRoot.currentScale = zoom*svgZoomRoot.currentScale;
	svgZoomRoot.currentTranslate.x = (0.5*mapWidth - svgZoomRoot.currentScale*x/(boxWidth / mapWidth));
	svgZoomRoot.currentTranslate.y = (0.5*mapHeight - svgZoomRoot.currentScale*y/(boxHeight / mapHeight));
}

// removes all variable elements from svg's
function clearDots() {
	function doIt(root) {
		while (root.getElementsByTagName("circle").length>0) {
			root.removeChild(root.getElementsByTagName("circle").item(0));
		}
		while (root.getElementsByTagName("rect").length>0) {
			root.removeChild(root.getElementsByTagName("rect").item(0));
		}
	}
	getRefs();
	activeDot = -1;
	doIt(gebiedZoomGroup);
	doIt(gebiedGroup);
}
			
function showCity(postcode) {
	if (!isValidSVG) {
		alert("Deze versie van de SVG viewer is niet geschikt voor deze applicatie");
		return;
	}
	var distance = parseInt(document.formName.range.value);
	xmlDoc.load("../asp/page.asp?alias="+site_alias+"&id=i000001&postcode=" + postcode + "&aliases=" + aliases() + "&rx=" + rangeUnitX*distance + "&ry=" + rangeUnitY*distance );
	if (xmlDoc.documentElement!=null) {

		if (xmlDoc.documentElement.selectSingleNode("/results/plaatsen/plaats")==null) {
			resultGebieden.innerHTML = "";
			alert("Postcode niet gevonden!")
		} 
		else {
			makePostcodeDot(OL2Mape5(xmlDoc.documentElement.selectSingleNode("/results/plaatsen/plaats/ol").text), NB2Mape5(xmlDoc.documentElement.selectSingleNode("/results/plaatsen/plaats/nb").text), xmlDoc.documentElement.selectSingleNode("/results/plaatsen/plaats/id").text, xmlDoc.documentElement.selectSingleNode("/results/plaatsen/plaats/naam").text,"",hiDot,hiDot);

			gebieden = xmlDoc.documentElement.selectNodes("/results/gebieden/gebied");
			sGebieden = "<table width='100%' height='*' border='0' align='left' style='padding-left: 5; padding-right: 5; padding-top: 0; padding-bottom: 0; padding: 0 5 5 0;' valign='top'>";
			for (var i = 0; i < gebieden.length; i++) {
				with (gebieden.item(i)) {
					ID = selectSingleNode("id").text;
					beheer = gebiedBeheer(selectSingleNode("alias").text);								
					makeGebiedDot(OL2Mape5(selectSingleNode("ol").text), NB2Mape5(selectSingleNode("nb").text), ID, selectSingleNode("naam").text, selectSingleNode("vvg").text, loDot, hiDot, true, selectSingleNode("alias").text, selectSingleNode("xmlid").text, selectSingleNode("type").text);

					//gebiedTitle = (selectSingleNode("naam").text.length>28)?selectSingleNode("naam").text.slice(0, 28) + "...":selectSingleNode("naam").text;
					gebiedTitle = selectSingleNode("naam").text;
					sGebieden += "<tr><td><a onfocus='blur()' href='#' id='a" + ID + "' onclick='javascript:clickDot(" + 
					ID + ', "' + selectSingleNode("alias").text + '", "' + selectSingleNode("xmlid").text	+ '"'	+ ")' onmouseover='javascript:hiLightDot(" + ID + ")' onmouseout='javascript:loLightDot(" +		 
					ID + ")'>" + gebiedTitle + "</a> <span class='small'>" + beheer + "</span></td></tr>";
				}
			}


			OLMap = OL2Mape5(xmlDoc.documentElement.selectSingleNode("/results/plaatsen/plaats/ol").text)
			NBMap = NB2Mape5(xmlDoc.documentElement.selectSingleNode("/results/plaatsen/plaats/nb").text)

			makeFrame(OLMap, NBMap, 0.0025*(distance+4)*boxWidth); 
			zoomIn(OLMap, NBMap, 200/(distance+4));
			
			//resultPreFix.innerHTML = "";//"Natuurgebieden in de buurt:<br/><font size='1'><br/></font>";
			resultGebieden.innerHTML = sGebieden + "</table>";
		}
	}
	else {
		alert("Postcode zoeken: er is geen verbinding met database")
	}
}


function showGebiedenNearPoint(x, y) {
	var distance = parseInt(document.formName.range.value);
	xmlDoc.load("../asp/page.asp?alias="+site_alias+"&id=i000001&x=" + x + "&y=" + y + "&rx=" + rangeUnitX*distance + "&ry=" + rangeUnitY*distance + "&aliases=" + aliases());
	if (xmlDoc.documentElement!=null) {
		gebieden = xmlDoc.documentElement.selectNodes("/results/gebieden/gebied");
		sGebieden = "<table width='100%' height='*' border='0' align='left' style='padding-left: 5; padding-right: 5; padding-top: 0; padding-bottom: 0; padding: 0 5 5 0;' valign='top'>";
		for (var i = 0; i<gebieden.length; i++) {
			with (gebieden.item(i)) {
				ID = selectSingleNode("id").text;
				beheer = gebiedBeheer(selectSingleNode("alias").text);	
				makeGebiedDot(OL2Mape5(selectSingleNode("ol").text), NB2Mape5(selectSingleNode("nb").text), ID, selectSingleNode("naam").text, selectSingleNode("vvg").text, loDot, hiDot, true, selectSingleNode("alias").text, selectSingleNode("xmlid").text, selectSingleNode("type").text);

				//gebiedTitle = (selectSingleNode("naam").text.length>28)?selectSingleNode("naam").text.slice(0, 28) + "...":selectSingleNode("naam").text;
				gebiedTitle = selectSingleNode("naam").text;
				sGebieden += "<tr><td><a onfocus='blur()' href='#' id='a" + ID + "' onclick='javascript:clickDot(" + 
				ID + ', "' + selectSingleNode("alias").text + '", "' + selectSingleNode("xmlid").text	+ '"'	+ ")' onmouseover='javascript:hiLightDot(" + ID + ")' onmouseout='javascript:loLightDot(" +		 
				ID + ")'>" + gebiedTitle + "</a> <span class='small'>" + beheer + "</span></td></tr>";
			}
		}
		
		//resultPreFix.innerHTML = "";//"Natuurgebieden in de buurt:<br/><font size='1'><br/></font>";
		resultGebieden.innerHTML = sGebieden	+ "</table>";
	}
	else {
		alert("Locatie zoeken: er is geen verbinding met database")
	}
}

function gebiedBeheer(alias) {
	var alias;
	if (alias == "kvn.landschappen") { 
		alias = "- provinciale landschappen";
	}
	if (alias == "kvn.natuurmonumenten") { 
		alias = "- vereniging natuurmonumenten";
	}
	if (alias == "kvn.gooisnatuurreservaat") { 
		alias = "- gooisnatuurreservaat";
	}
	if (alias == "kvn.nationaleparken") { 
		alias = "- nationale parken";
	}
	if (alias == "kvn.vogelbescherming") { 
		alias = "- vogelbescherming nederland";
	}
	if (alias == "kvn.staatsbosbeheer") { 
		alias = "- staatsbosbeheer";
	}
	return alias;
}