var boxsize = 38;
var mapWidth = 266;
var mapHeight = 266;
var boxWidth = 2500000;
var boxHeight = 2500000;
var dotOffset = 4;

gifScale = 7;
//var activeDot = -1;

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

function gifLoaded () {
	makeFrame(0.5 * mapWidth, 0.5 * mapHeight);
	var x = Map2OL(Gif2MapX(0.5 * mapWidth));
	var y = Map2NB(Gif2MapY(0.5 * mapHeight));
	showGebiedenNearPoint(x, y);
}
			
function repeat() {
	svgHint.style.display = "none";
}

function focusFrame(e) {
	var	posx;
	var posy;

	if (document.all) {
		// Code for IE browsers
		e = window.event;
	} 
	if (e.pageX || e.pageY)
	{
		var frameImgObject = getElementAll("imgContainer");
		posx = e.pageX - 220;
		posy = e.pageY - 120;
	}
	else if (e.x || e.y)
	{
		posx = e.x;
		posy = e.y;
	}
	
	//alert(posx + ", " + posy);
	
	makeFrame(posx, posy);
	var x = Map2OL(Gif2MapX(posx));
	var y = Map2NB(Gif2MapY(posy));
	showGebiedenNearPoint(x, y);
}

function getElementAll(name) {
	if (document.getElementById) {
		return document.getElementById(name);
	}
	else if (document.all) {
		return document.all(name);
	}
	else {
		return null;
	}
}

function makeFrame(x, y) {
	var frameObject = getElementAll("frame");
	var frameImgObject = getElementAll("frameImg");
	var frameImg2Object = getElementAll("frameImg2");
	var frameImg3Object = getElementAll("frameImg3");
	
	if (frameObject.style.pixelLeft) {
		frameObject.style.pixelLeft = x - 0.5 * boxsize;
		frameObject.style.pixelTop = y - 0.5 * boxsize;
		frameObject.style.pixelWidth = boxsize;
		frameObject.style.pixelHeight = boxsize;
		frameImgObject.style.pixelLeft = -frameObject.style.pixelLeft - 1;
		frameImgObject.style.pixelTop = -frameObject.style.pixelTop - 1;
		
		frameImg2Object.style.pixelLeft = -gifScale * frameObject.style.pixelLeft - 0;
		frameImg2Object.style.pixelTop = -gifScale * frameObject.style.pixelTop + 0;
		frameImg3Object.style.pixelLeft = -gifScale * frameObject.style.pixelLeft - 0;
		frameImg3Object.style.pixelTop = -gifScale * frameObject.style.pixelTop + 0;
	}
	else {
		frameObject.style.left = x - 0.5 * boxsize + "px";
		frameObject.style.top = y - 0.5 * boxsize + "px";
		frameObject.style.width = boxsize + "px";
		frameObject.style.height = boxsize + "px";
		frameImgObject.style.left = -parseInt(frameObject.style.left) - 1 + "px";
		frameImgObject.style.top = -parseInt(frameObject.style.top) - 1 + "px";
		
		frameImg2Object.style.left = -gifScale * parseInt(frameObject.style.left) - 0 + "px";
		frameImg2Object.style.top = -gifScale * parseInt(frameObject.style.top) + 0 + "px";
		frameImg3Object.style.left = -gifScale * parseInt(frameObject.style.left) - 0 + "px";
		frameImg3Object.style.top = -gifScale * parseInt(frameObject.style.top) + 0 + "px";

	}
}


function zoomAtPostcode(evt) {
	var postcodeObject;
	if (document.getElementById("textPostcode") != null) {
		postcodeObject = document.getElementById("textPostcode");
	}
	else {
		postcodeObject = textPostcode;
	}
	var postcode = postcodeObject.value.slice(0, 4);
	showCity(postcode);
}

function Map2GifX(value) {
	return value * mapWidth / boxWidth;
}

function Map2GifY(value) {
	return value * mapHeight / boxHeight;
}

function Gif2MapX(value) {
	return value * boxWidth / mapWidth;
}

function Gif2MapY(value) {
	return value * boxHeight / mapHeight;
}

function makeGebiedDot(x, y, id, naam, alias, xmlid, type) {
	return "<area id=\"area" + id + "\" alt=\"" + naam + "\" shape=\"circle\" coords=\"" + Math.round(Map2GifX(x)*7 - 4) + ", " + Math.round(Map2GifY(y)*7 - 4) + ", 8\" href=\"#\" onmouseover='javascript:hiLightDot(" + id + ")' onmouseout='javascript:loLightDot(" + id + ")' onclick='javascript:clickDot(" + 
				id + ', "' + alias + '", "' + xmlid	+ '"'	+ ")' />";
}

function hiLightDot(id) {
	var roodObject = getElementAll("rood");
	var rodebolObject = getElementAll("rodebol");
	var frameImg2Object = getElementAll("frameImg2");
	var imagemapObject = getElementAll("imagemap");
	//if (activeDot == id) return;
	if (roodObject != null && imagemapObject != null) {
		if (imagemapObject.areas["area" + id]) {
			var coordinaten = imagemapObject.areas["area" + id].coords;
		}
		else {
			var coordinaten = getElementAll("area" + id).coords;
		}	
		var array = coordinaten.split(',');
		if (frameImg2Object.style.pixelLeft) {
			roodObject.style.left = parseInt(array[0]) + parseInt(frameImg2Object.style.pixelLeft) - dotOffset;
			roodObject.style.top = parseInt(array[1]) + parseInt(frameImg2Object.style.pixelTop)- dotOffset;
		}
		else {
			roodObject.style.left = parseInt(array[0]) + parseInt(frameImg2Object.style.left) - dotOffset;
			roodObject.style.top = parseInt(array[1]) + parseInt(frameImg2Object.style.top)- dotOffset;
		}	
		rodebolObject.style.display = "block";
	}	
}

function loLightDot(id) {
	//if (activeDot == id) return;
	var rodebolObject = getElementAll("rodebol");
	if (rodebolObject != null) {
		rodebolObject.style.display = "none";
	}	
}

function clickDot(id, alias, xmlId) { 
	//if ((activeDot > 0) && (activeDot != id)) {
	//saveDot = activeDot;
	//activeDot = -1;
	//loLightDot(saveDot);
	//}
	//activeDot = id; 
	
	hiLightDot(id);

	showPopup(site_root + "/asp/page.asp?id=" + xmlId + "&alias=" + alias + "&view=" + view_alias);
	if (printEnabled) {
		objIE.navigate(site_root + "/asp/page.asp?id=" + xmlId + "&alias=" + alias + "&version=print");
	}	
}

function updateKaarten(clientOL,clientNB, sMap) {
	//tja
  // if contentDocument exists, W3C compliant (Mozilla)
  if (document.getElementById("resultGebiedenFrame").contentDocument){
  	frameObject = document.getElementById("resultGebiedenFrame").contentDocument;
  } 
  else {
    //IE
  	frameObject = document.frames["resultGebiedenFrame"];
  }

	beterObject = getElementAll("beter"); 
	beterObject.innerHTML = sMap;
	//alert(beterObject.innerHTML);
	//var frameImg3Object = getElementAll("frameImg3");
	//frameImg3Object.usemap = "#imagemap";
	
	
	OLMap = OL2Mape5(clientOL);
	NBMap = NB2Mape5(clientNB);
	//alert(OLMap + ", " + NBMap)
	if (clientOL != 0) {
		makeFrame(Map2GifX(OLMap), Map2GifY(NBMap)); 
	}	
}


function showCity(postcode) {

	var rangeObject = getElementAll("range");
	var rodebolactiveObject = getElementAll("rodebolactive");
	
	rodebolactiveObject.style.display = "none";
	var distance = parseInt(rangeObject.value);
	
	resultGebiedenFrameObject = getElementAll("resultGebiedenFrame"); 
	resultGebiedenFrameObject.src = site_root + "/asp/page.asp?alias="+site_alias+"&id=i000004&postcode=" + postcode + "&aliases=" + aliases() + "&rx=36000&ry=22000" + "&maptype=gif";

	/*
	xmlDoc.load("../asp/page.asp?alias="+site_alias+"&id=i000001&postcode=" + postcode + "&aliases=" + aliases() + "&rx=36000&ry=22000" );
	if (xmlDoc.documentElement!=null) {

		if (xmlDoc.documentElement.selectSingleNode("/results/plaatsen/plaats")==null) {
			resultGebieden.innerHTML = "";
			alert("Postcode niet gevonden!")
		} 
		else {
			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'>";
			sMap = '<map name="imagemap" id="imagemap">';
			for (var i = 0; i < gebieden.length; i++) {
				with (gebieden.item(i)) {
					ID = selectSingleNode("id").text;
					sMap += makeGebiedDot(OL2Mape5(selectSingleNode("ol").text), NB2Mape5(selectSingleNode("nb").text), ID, selectSingleNode("naam").text, selectSingleNode("alias").text, selectSingleNode("xmlid").text, selectSingleNode("type").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></td></tr>";
				}
			}


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

			makeFrame(Map2GifX(OLMap), Map2GifY(NBMap)); 
			resultGebieden.innerHTML = sGebieden + "</table>";
			sDiv = '<map name="imagemap" id="imagemap"><area alt="23" shape="circle" coords="830,863,50" href="#" /></map>';
			sMap += "</map>"
			beter.innerHTML = sMap;
		}
	}
	else {
		alert("Postcode zoeken: er is geen verbinding met database")
	}
	*/
}

function showGebiedenNearPoint(x, y) {
	var rodebolactiveObject = getElementAll("rodebolactive");
	rodebolactiveObject.style.display = "none";

	resultGebiedenFrameObject = getElementAll("resultGebiedenFrame"); 
	resultGebiedenFrameObject.src = site_root + "/asp/page.asp?alias="+site_alias+"&id=i000004&x=" + x + "&y=" + y + "&rx=36000&ry=22000" + "&aliases=" + aliases() + "&maptype=gif";
	
	/*
	xmlDoc.load("../asp/page.asp?alias="+site_alias+"&id=i000001&x=" + x + "&y=" + y + "&rx=36000&ry=22000" + "&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'>";
		sMap = '<map name="imagemap" id="imagemap">';
		for (var i = 0; i<gebieden.length; i++) {
			with (gebieden.item(i)) {
				ID = selectSingleNode("id").text;
				sMap += makeGebiedDot(OL2Mape5(selectSingleNode("ol").text), NB2Mape5(selectSingleNode("nb").text), ID, selectSingleNode("naam").text, selectSingleNode("alias").text, selectSingleNode("xmlid").text, selectSingleNode("type").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></td></tr>";
			}
		}
		resultGebieden.innerHTML = sGebieden	+ "</table>";
		sMap += "</map>"
		beter.innerHTML = sMap;
	}
	else {
		alert("Locatie zoeken: er is geen verbinding met database")
	}
	*/
}