var int_count = 6;
var old_scrollLeft = 0;
var old_scrollTop = 0;
var old_mouseLeft = 0;
var old_mouseTop = 0;
var old_scrollWidth = 0;
var old_scrollHeight = 0;
var veldX = 8;
var veldY = 56;
var veldH = 600;
var veldW = 800;
var aantalVakjes = ((veldH / 200) + 2) * ((veldW / 200) + 2);
var aantalVakjesW = (veldW / 200);
var aantalVakjesH = (veldH / 200);
var verplaatsingsupdate = (((veldH / 2) + (veldW / 2)) / 5); 
var zoom_per 	 = 10;
var old_zoom_per = zoom_per;
var mousePos = Array();
var mapLocation = 'Maps';
var mapName 	= 'gemeenteGroningen';
var mapURI		= '';
var mapSeperator= '-';
var zoomniveausHuidig = 0;
var zoomniveaus = new Array();
var activeBalon = null;
var activeDrag = false;
var zoomIO = "in";
var dbRightClick = false;
var dbClick_x = 0;
var dbClick_y = 0;
var clickDo = "drag";
var toolbarClick = false;

zoomniveaus[zoomniveaus.length] = 10;
zoomniveaus[zoomniveaus.length] = 25;
zoomniveaus[zoomniveaus.length] = 50;
zoomniveaus[zoomniveaus.length] = 100;

function init () {
	document.body.onmousedown = bij_klikken;
	document.body.onmousemove = mouseMove;
	document.body.onmouseup = weg_klik;
	//window.onmouseout = weg_klik;
	document.getElementById("map").ondrag = function () { return false; };
	document.getElementById("map").onselectstart = function () { return false; };
	document.getElementById("map").oncontextmenu = function () { return false; };
	mapURI = mapLocation + '/' + mapName + '/';
	maak_tabel(zoom_per);
	maakToolbar();
}

function maakToolbar () {
	var map = document.getElementById("map");
	var toolbar = document.createElement("div");
	positie = findPos(map);
	mapTop = positie[1];
	mapLeft = positie[0];
	toolbar.className = 'toolbar';
	toolbar.style.top = mapTop + 7 + 'px';
	toolbar.style.left= mapLeft + 7 + 'px';
	
	var button = new Array();
	button[0] = document.createElement('img');
	button[1] = document.createElement('img');
	button[2] = document.createElement('img');
	button[3] = document.createElement('img');
	button[0].className = 'inactive';
	button[0].id = 'btnToolIn';
	button[1].className = 'inactive';
	button[1].id = 'btnToolOut';
	button[2].className = 'inactive';
	button[2].id = 'btnToolInfo';
	button[3].className = 'active';
	button[3].id = 'btnToolDrag';
	button[0].src = 'images/toolbar/inzoom.jpg';
	button[1].src = 'images/toolbar/uitzoom.jpg';
	button[2].src = 'images/toolbar/info.jpg';
	button[3].src = 'images/toolbar/hand-active.jpg';
	button[0].onmousedown = function (e) { (e ?  e.stopPropagation() : window.event.cancelBubble=true)  };
	button[0].onclick = function (e) { (e ?  e.stopPropagation() : window.event.cancelBubble=true); buttonSwitch(document.getElementById('btnToolIn')); zoomIO = "in"; clickDo = "zoom"; };
	button[1].onmousedown = function (e) { (e ?  e.stopPropagation() : window.event.cancelBubble=true)  };
	button[1].onclick = function (e) { (e ?  e.stopPropagation() : window.event.cancelBubble=true); buttonSwitch(document.getElementById('btnToolOut')); zoomIO = "out"; clickDo = "zoom"; };
	button[2].onmousedown = function (e) { (e ?  e.stopPropagation() : window.event.cancelBubble=true)  };
	button[2].onclick = function () { buttonSwitch(document.getElementById('btnToolInfo')); clickDo = "info"; };
	button[3].onmousedown = function (e) { (e ?  e.stopPropagation() : window.event.cancelBubble=true)  };
	button[3].onclick = function () { buttonSwitch(document.getElementById('btnToolDrag')); clickDo = "drag"; };
	toolbar.appendChild(button[0]);
	toolbar.appendChild(button[1]);
	toolbar.appendChild(button[2]);
	toolbar.appendChild(button[3]);
	
	document.getElementsByTagName('body')[0].appendChild(toolbar);
}

function buttonSwitch (obj) {
	var activeObj = null;
	for (i = 0; i < obj.parentNode.getElementsByTagName('img').length; i++) {
		if (obj.parentNode.getElementsByTagName('img')[i] == obj)
			activeObj = i;
		if (i == 0)
			obj.parentNode.getElementsByTagName('img')[i].src = 'images/toolbar/inzoom.jpg';
		if (i == 1)
			obj.parentNode.getElementsByTagName('img')[i].src = 'images/toolbar/uitzoom.jpg';
		if (i == 2)
			obj.parentNode.getElementsByTagName('img')[i].src = 'images/toolbar/info.jpg';
		if (i == 3)
			obj.parentNode.getElementsByTagName('img')[i].src = 'images/toolbar/hand.jpg';
		obj.parentNode.getElementsByTagName('img')[i].className = "inactive";
	}
	if (activeObj == 0)
		obj.parentNode.getElementsByTagName('img')[activeObj].src = 'images/toolbar/inzoom-active.jpg';
	if (activeObj == 1)
		obj.parentNode.getElementsByTagName('img')[activeObj].src = 'images/toolbar/uitzoom-active.jpg';
	if (activeObj == 2)
		obj.parentNode.getElementsByTagName('img')[activeObj].src = 'images/toolbar/info-active.jpg';
	if (activeObj == 3)
		obj.parentNode.getElementsByTagName('img')[activeObj].src = 'images/toolbar/hand-active.jpg';
	obj.className = "active";
}

function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}

function zoomInOut (InOut) {
	dbClick_x = ((mousePos.x - findPos(document.getElementById('view_box'))[0]) - (veldW / 2));
	dbClick_y = ((mousePos.y - findPos(document.getElementById('view_box'))[1]) - (veldH / 2));
	if (InOut == 'in') {
		if (zoomniveausHuidig < (zoomniveaus.length - 1)) {
			nieuwNiveau = zoomniveausHuidig + 1;
			maak_tabel(zoomniveaus[nieuwNiveau]);
			zoomniveausHuidig = nieuwNiveau;
		} else {
			alert('Kan niet verder dan ' + zoomniveaus[zoomniveausHuidig] + '% inzoomen.');
		}
	} else {
		if (zoomniveausHuidig > 0) {
			nieuwNiveau = zoomniveausHuidig - 1;
			maak_tabel(zoomniveaus[nieuwNiveau]);
			zoomniveausHuidig = nieuwNiveau;
		} else {
			alert('Kan niet verder dan ' + zoomniveaus[zoomniveausHuidig] + '% uitzoomen.');
		}
	}
	buttonSwitch(document.getElementById('btnToolDrag'));
	clickDo = "drag";
}

function mouseMove (ev) {
	ev = ev || window.event;
	mousePos = mouseCoords(ev);
		
	if (activeDrag) {
		if (old_mouseLeft == 0)
			 old_mouseLeft = mousePos.x;
		if (old_mouseTop == 0)
			old_mouseTop = mousePos.y;
		var view_box = document.getElementById("view_box");
		tmp_x = old_scrollLeft + (old_mouseLeft - mousePos.x);
		tmp_y = old_scrollTop + (old_mouseTop - mousePos.y);
		view_box.scrollLeft = tmp_x;
		view_box.scrollTop = tmp_y;
		
		if ((old_mouseLeft - mousePos.x) > verplaatsingsupdate || (old_mouseLeft - mousePos.x) < (0 - verplaatsingsupdate)) {
			load_visible();
		}
		if ((old_mouseTop - mousePos.y) > verplaatsingsupdate || (old_mouseTop - mousePos.y) < (0 - verplaatsingsupdate)) {
			load_visible();
		}
	}
	if (activeBalon != null) {
		document.getElementById(activeBalon).style.left = (mousePos.x - mapLeft) + old_scrollLeft + 10 + "px";
		document.getElementById(activeBalon).style.top = (mousePos.y - mapTop) + old_scrollTop - 2 + "px";
	}
}

function mouseCoords (ev) {
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}

function maak_tabel (zoom) {
	var map = document.getElementById("map");
	var mapDiv = document.createElement("div");
	if (zoom == 10) {
		zoom_per = 10;
		int_countX = 4;
		int_countY = 6;
	}
	if (zoom == 25) {
		zoom_per = 25;
		int_countX = 10;
		int_countY = 15;
	}
	if (zoom == 50) {
		zoom_per = 50;
		int_countX = 20;
		int_countY = 30;
	}
	if (zoom == 100) {
		zoom_per = 100;
		int_countX = 40;
		int_countY = 60;
	}
	y = 0;
	divPosX = 0;
	divPosY = 0;
	for (i = 0; i < (int_countX * int_countY); i++) {
		img = document.createElement('img');
		img.setAttribute('id', 'img_' + (i + 1));
		img.setAttribute('src', 'images/laden.png');
		img.className 	= 'blok';
		img.style.left  = divPosX + 'px';
		img.style.top   = divPosY + 'px';
		mapDiv.appendChild(img);
		if (divPosX == ((int_countY - 1) * 200)) {
			divPosX =    0;
			divPosY += 200;
		} else {
			divPosX += 200;
		}
	}
	map.innerHTML = "";
	map.appendChild(mapDiv);
	center_view();
	load_visible();
	if (loadHotspots()) {
		loadHotspots();
	}
}

function load_visible () {
	var view_box = document.getElementById("view_box");
	tmp_left = Math.floor(view_box.scrollLeft / 200);
	tmp_top = Math.floor(view_box.scrollTop / 200);
	
	cell_begin = 0;
	if ((tmp_top - 1) >= 0)
		cell_begin = (tmp_top - 1) * int_countY;
	if ((tmp_left - 1) >= 0)
		cell_begin = cell_begin + tmp_left;
	
	for (i = 1; i <= aantalVakjes; i++) {
		if (document.getElementById("img_" + cell_begin)) {
			document.getElementById("img_" + cell_begin).src = mapURI + zoom_per + "/" + zoom_per + mapSeperator + cell_begin + ".png";
			document.getElementById("img_" + cell_begin).id = "loaded_" + cell_begin;
		}
		cell_begin = cell_begin + 1;
		if (i != 0 && ((i % (aantalVakjesW + 2)) == 0))
			cell_begin = (cell_begin - (aantalVakjesW + 2)) + int_countY;
	}
}

function bij_klikken(ev) {
	ev = ev || window.event;
	if (ev.button == 2) {
		if (dbRightClick == false) {
			dbRightClick = true;
			setTimeout('dbRightClick = false;', 500);
		} else {
			zoomInOut('out');
			dbRightClick = false;
		}
	} else {
		ie4 = (document.all)? true:false;
		if (!ie4)
			ev.preventDefault();
		if (clickDo == "drag")
			activeDrag = true;
		else if(clickDo == "zoom")
			var mousePosje = mouseCoords(ev);
			if (mousePosje) {
				if (mousePosje.x >  findPos(document.getElementById('view_box'))[0] && mousePosje.x < (findPos(document.getElementById('view_box'))[0] + document.getElementById('view_box').offsetWidth) ) {
					zoomInOut(zoomIO);
				}
			}
	}
}

function weg_klik () {
	old_scrollLeft = document.getElementById("view_box").scrollLeft;
	old_scrollTop = document.getElementById("view_box").scrollTop;
	old_mouseLeft = 0;
	old_mouseTop = 0;
	activeDrag = false;
	/*document.getElementById("console").innerHTML = "old_zoom_per: " + old_zoom_per + " zoom_per: " + zoom_per +
												   " old_scrollTop: " + old_scrollTop +
												   " scrollHeight: " + document.getElementById("view_box").scrollHeight +
												   " iets top: " + Math.ceil(old_scrollTop / (old_zoom_per / zoom_per));*/
}

function center_view () {
	var view_box = document.getElementById("view_box");
	var scrollTop = 0;
	var scrollLeft = 0;
	var tmpX = Math.ceil(dbClick_x * (view_box.scrollHeight / old_scrollHeight));
	//tmpX = 0;
	var tmpY = Math.ceil(dbClick_y * (view_box.scrollHeight / old_scrollHeight));
	//tmpY = 0;
	if (old_scrollTop == 0 && old_zoom_per == zoom_per)
		scrollTop = ((view_box.scrollHeight / 2) - (veldH / 2));
	else if (old_zoom_per < zoom_per)
		scrollTop = Math.ceil((old_scrollTop) * (view_box.scrollHeight / old_scrollHeight)) + (veldH / 2) + tmpY; //scrollTop = Math.ceil(old_scrollTop * (view_box.scrollHeight / old_scrollHeight)) + (veldH / 2);
	else
		scrollTop = Math.ceil((old_scrollTop - (veldH / 2)) * (view_box.scrollHeight / old_scrollHeight)) + tmpY;
	if (old_scrollLeft == 0 && old_zoom_per == zoom_per)
		scrollLeft = ((view_box.scrollWidth / 2) - (veldW / 2));
	else if (old_zoom_per < zoom_per)
		scrollLeft = Math.ceil((old_scrollLeft) * (view_box.scrollWidth / old_scrollWidth)) + (veldW / 2) + tmpX;
	else
		scrollLeft = Math.ceil((old_scrollLeft - (veldW / 2)) * (view_box.scrollWidth / old_scrollWidth)) + tmpX;
	view_box.scrollTop  = scrollTop;
	view_box.scrollLeft = scrollLeft;
	
	old_scrollTop  = scrollTop;
	old_scrollLeft = scrollLeft;
	old_zoom_per = zoom_per;
	
	old_scrollWidth = view_box.scrollWidth;
	old_scrollHeight = view_box.scrollHeight;
	dbClick_x = 0;
	dbClick_y = 0;
}

function ga_naar(plaatsX, plaatsY) {
	var view_box = document.getElementById("view_box");
	var corH = veldH / 2;
	var corW = veldW / 2;
	view_box.scrollTop 	= (plaatsY - corH);
	view_box.scrollLeft = (plaatsX - corW);
	old_scrollTop 	= (plaatsY - corH);
	old_scrollLeft 	= (plaatsX - corW);
	load_visible();
}

function maak_balon (x, y, tekst, naam, title) {
	if (clickDo == "info") {
		var map = document.getElementById("map");
		if (! document.getElementById('BALON_' + naam)) {
			var balon = document.createElement("div");
				balon.id = 'BALON_' + naam;
				balon.className = 'infoBallon';
		} else {
			var balon = document.getElementById('BALON_' + naam)
			document.getElementById('BALON_' + naam).style.display = 'block';
		}
		positie = findPos(map);
		mapTop = positie[1];
		mapLeft = positie[0];
		
		zoomCorrectie = zoom_per * 0.01;
		divPosX = (Math.round(x));
		divPosY = (Math.round(y));
		
		var html = '<div class="top">&nbsp;&nbsp;' + title + '</div><div class="middel">' + tekst +'</div><img src="images/grootBallonBottom.png" />';
		balon.innerHTML = html;
		
		if (balon.addEventListener) {
			balon.getElementsByTagName('div')[0].addEventListener('mousedown', function () {
				document.getElementById('BALON_' + naam).style.display = 'none';
			}, false);
		} else if (balon.attachEvent){
			balon.getElementsByTagName('div')[0].attachEvent('onmousedown', function () {
				document.getElementById('BALON_' + naam).style.display = 'none';
			});
		}
		
		//var html = '<div class="top">&nbsp;&nbsp;'+ naam +'</div><div class="middel">' + tekst +'</div><img src="images/grootBallonBottom.png" />';
		balon.style.position = "absolute";
		balon.style.zIndex = 4;
		map.insertBefore(balon, map.firstChild);
		if ( ((divPosX - mapLeft) + 200) > veldW)
			balon.style.left = (divPosX - mapLeft - 200) + old_scrollLeft + "px";
		else
			balon.style.left = (divPosX - mapLeft) + old_scrollLeft + "px";
		if ( ((divPosY - mapTop) + balon.offsetHeight) > veldH)
			balon.style.top = (divPosY - mapTop - balon.offsetHeight) + old_scrollTop + "px";
		else
			balon.style.top = (divPosY - mapTop) + old_scrollTop + "px";
	}
}

function maak_masker(zoomLevel, titel, afbeeldingSrc, plaatsX, plaatsY) {
	if (zoom_per != zoomLevel) {
		maak_tabel(zoomLevel);
		load_visible();
	}
	if (document.getElementById('mask-' + zoomLevel +'-' + titel)) {
		afbeelding = document.getElementById('mask-' + zoomLevel +'-' + titel);
		if (afbeelding.style.display == 'none') {
			afbeelding.style.display = 'block';
		} else {
			afbeelding.style.display = 'none'
		}
	} else {
		afbeelding = document.createElement('img');
		afbeelding.id = 'mask-' + zoomLevel +'-' + titel;
		afbeelding.style.position = "absolute";
		afbeelding.style.zIndex = "2";
		afbeelding.style.left = plaatsX + 'px';
		afbeelding.style.top  = plaatsY + 'px';
		afbeelding.src = mapLocation + '/' + mapName + '/' + zoomLevel + '_mask/' + afbeeldingSrc;
		var map = document.getElementById("map");
		map.appendChild(afbeelding);
	}
}

function maak_hotspot (zoomvar, x, y, w, h, naam, HTMLcontent, HTMLextra) {
	if (zoomvar == 0) {
		zoomvar = zoom_per;
	}
	zoomCorrectie = zoomvar * 0.01;
	divPosX = (Math.round(x * zoomCorrectie));
	divPosY = (Math.round(y * zoomCorrectie));
	divSizW = (Math.round(w * zoomCorrectie));
	divSizH = (Math.round(h * zoomCorrectie));
	
	if (document.getElementById('HOTSPOT_' + naam)) {
		var div = document.getElementById('HOTSPOT_' + naam);
	} else {
		var div = document.createElement('div');
	}	
	
	div.style.cursor = "pointer";
	div.style.position = "absolute";
	div.style.zIndex = "3";
	div.style.left = divPosX + 'px';
	div.style.top = divPosY + 'px';
	div.style.width = divSizW + 'px';
	div.style.height = divSizH + 'px';
	div.style.background = 'url(images/trans.gif)';
	div.id = 'HOTSPOT_' + naam;
	if (div.addEventListener) {
		div.addEventListener('click', function (event) {
			hoverdiv = document.getElementById('HOTSPOT_EXTRA_' + naam);
			var mousePos = mouseCoords(event);
			maak_balon(mousePos.x, mousePos.y, hoverdiv.innerHTML, naam, HTMLcontent);
			}, false);
	  	div.addEventListener('mouseover', function () {
			hoverdiv = document.getElementById('HOTSPOT_ITEM_' + naam);
			hoverdiv.style.display = 'block';
			activeBalon = 'HOTSPOT_ITEM_' + naam;
			//div.style.border = '2px solid white';
			}, false);
	  	div.addEventListener('mouseout', function () {
			hoverdiv = document.getElementById('HOTSPOT_ITEM_' + naam);
			hoverdiv.style.display = 'none';
			activeBalon = null;
			if (document.getElementById('HOTSPOT_EXTRA_' + naam))
				document.getElementById('HOTSPOT_EXTRA_' + naam).style.display = 'none';
			}, false);
		
	} else if (div.attachEvent){
		div.attachEvent('onclick', function (event) {
			hoverdiv = document.getElementById('HOTSPOT_EXTRA_' + naam);
			var mousePos = mouseCoords(event);
			maak_balon(mousePos.x, mousePos.y, hoverdiv.innerHTML, naam, HTMLcontent);
			}, false);
	  	div.attachEvent('onmouseover', function () {
			hoverdiv = document.getElementById('HOTSPOT_ITEM_' + naam);
			hoverdiv.style.display = 'block';
			activeBalon = 'HOTSPOT_ITEM_' + naam;
			});
		div.attachEvent('onmouseout', function () {
			hoverdiv = document.getElementById('HOTSPOT_ITEM_' + naam);
			hoverdiv.style.display = 'none';
			activeBalon = null;
			if (document.getElementById('HOTSPOT_EXTRA_' + naam))
				document.getElementById('HOTSPOT_EXTRA_' + naam).style.display = 'none';
			});
		
	}
	
	if (document.getElementById('HOTSPOT_ITEM_' + naam)) {
		var divT = document.getElementById('HOTSPOT_ITEM_' + naam);
	} else {
		var divT = document.createElement('div');
		divT.className = 'hotspotFloater';
		divT.id = 'HOTSPOT_ITEM_' + naam;
	}	
	divT.style.left = (divPosX + divSizW + 5) + 'px';
	divT.style.top = (divPosY) + 'px';
	divT.innerHTML = '<img src="images/floatballon_left.png" /><div>' + HTMLcontent + '</div><img src="images/floatballon_right.png" />';
	
	if (document.getElementById('HOTSPOT_EXTRA_' + naam)) {
		var divE = document.getElementById('HOTSPOT_EXTRA_' + naam);
	} else {
		var divE = document.createElement('div');
	}
	divE.id = 'HOTSPOT_EXTRA_' + naam;	
	if (HTMLextra != "") {
		divE.innerHTML = HTMLextra;
		divE.style.display = "none";
		divT.appendChild(divE);
	} else {
		divE.innerHTML = "";
	}
	
	var map = document.getElementById("map");
	map.appendChild(div);
	map.appendChild(divT);
}

function doubleclick () {
	if (zoomniveausHuidig < (zoomniveaus.length - 1)) {
		nieuwNiveau = zoomniveausHuidig + 1;
		maak_tabel(zoomniveaus[nieuwNiveau]);
		zoomniveausHuidig = nieuwNiveau;
	} else if (zoomniveausHuidig > 0) {
		nieuwNiveau = zoomniveausHuidig - 1;
		maak_tabel(zoomniveaus[nieuwNiveau]);
		zoomniveausHuidig = nieuwNiveau;
	}
}