var map;									// globale variabele voor google map-object
var win;									// actieve windowtje

var jaartal;

var map_1597;
var map_1649;
var map_1865;

var minZoom					= 13;
var maxZoom					= 19;

var centerLat				= 52.62987213122535;
var centerLon				= 4.748175144195557;

var mapControlDivs 			= [];

function setMapType(type)
{
	map.setMapType(type);
}


function switchMap(jaartal)
{
	// haal alle overlays eraf
	map.clearOverlays();
	
	// jaartal = parseInt(document.getElementById('whichmap').value);
	
	switch(jaartal)
	{
		case 2009:
			break;
		case 1865:
			map.addOverlay(map_1865);
			break;
		case 1649:
			map.addOverlay(map_1649);
			break;
		case 1597:
			map.addOverlay(map_1597);
			break;
		default:
			alert(whichmap);
	}
	
	// plaats markers op kaart
	getMarkers();
}


// functie om kaart weer op z'n plek te zetten na resize en bij start
function centerMap()
{
	map.setCenter(new GLatLng(centerLat, centerLon), 16);
}

// functie om kader, kaart en mapcontrol op hun plek te zetten na resize (en bij start)
function centerFrame()
{
	var frameWidth		= 890;
	var screenWidth 	= window.innerWidth != undefined ? window.innerWidth : document.body.offsetWidth;
	var frameLeft		= Math.floor(screenWidth / 2) - Math.floor(frameWidth / 2);
	var frameRight		= Math.floor(screenWidth / 2) + Math.floor(frameWidth / 2);
	
	
	document.getElementById('map_taalkeuze').style.left		= frameLeft + 'px';
	document.getElementById('frame_top').style.left 		= frameLeft + 'px';
	document.getElementById('frame_top').style.width 		= frameWidth + 'px';
	document.getElementById('frame_right').style.left 		= frameRight - 15 + 'px';
	document.getElementById('frame_left').style.left 		= frameLeft + 'px';
	document.getElementById('frame_bottom').style.left 		= frameLeft + 'px';
	document.getElementById('frame_bottom').style.width 	= frameWidth + 'px';
	document.getElementById('frame_logo').style.left		= (frameLeft - 30) + 'px';
	
	// zet kaart goed
	centerMap();
	
	// zet mapControl goed
	
	mapControlDivs[0].style.left							= frameRight - 80 + 'px';
	mapControlDivs[0].style.top								= 40 + 'px';
	
	mapControlDivs[1].style.left							= frameRight - 80 + 'px';
	mapControlDivs[1].style.top								= 40 + 'px';
}


// infoWindow voor popupje op google maps kaart met eigen layout
function infoWindow(latlng, naam, heeft_tekst, adres, thumb) 
{
		var html			= '<div class="arrow"></div>';
		html				+= '<div class="top">' + naam + '</div>';
		html				+= '<div class="body"><p>' + adres + '</p>';
	
		if(heeft_tekst)
		{
			html			+= '<span class="meer">' + meerinfo + '</span>';	// tekst in goede taal!!!
		}
		
		html 				+= '</div>';
	
	
        this.latlng_ 		= latlng;
        this.html_ 			= html;
        this.prototype 		= new GOverlay();
		
        // maak divje aan dat om de hele infowindow heen staat
        this.initialize = function(map) 
		{
			//alert('init infoWindow');
			
			var divje = document.createElement('div');
			divje.setAttribute("class", "infowin");
			divje.setAttribute("className", "infowin"); 	// IE doet het weer lekker anders....
			divje.style.position 		= 'absolute';
			divje.style.background 		= '';
			
			divje.innerHTML				= this.html_;
			
			this.div_ 					= divje;
			
			map.getPane(G_MAP_FLOAT_PANE).appendChild(this.div_);
        }
		
		this.copy = function() 
		{
			return new Infowin(this.latlng_, this.html_);
        }
		
		this.redraw = function(force) 
		{
			if (!force) return;
			var point = map.fromLatLngToDivPixel(this.latlng_);
			
			this.div_.style.left			= point.x + 30 + 'px';
			this.div_.style.top				= point.y - 15 + 'px';
			
		}
		
		this.remove = function() 
		{
			// doe dit met try..catch, dit kan een 'node not found' opleveren
			try
			{
				map.getPane(G_MAP_FLOAT_PANE).removeChild(this.div_);
			}
			catch(err)
			{
				//alert(err);
			}
			
        }
}


function getMarkers()
{
	// maak string aan die meegegeven kan worden argumentenlijst van url, met daarin bounding box van kaart
	var bounds								= map.getBounds();
	var sw 									= bounds.getSouthWest();
	var ne 									= bounds.getNorthEast();
	var boundsString 						= sw.lng() + "," + sw.lat() + "," + ne.lng() + "," + ne.lat();
	// var url									= "index.php?go=home.getKaartXML&bounds=" + boundsString + "&year=" + jaartal;
	
	var url									= "home/qry_getKaartXML.php?bounds=" + boundsString + "&year=" + jaartal;
	
	
	// haal nieuwe markers op
	var request 							= GXmlHttp.create();
	
	request.open("GET", url, true);
	
	request.onreadystatechange = function() 
	{
		switch(request.readyState) 
		{
			case 4:
				// request afgehandeld
				
		        var xmlDoc 					= request.responseXML;
				
				//alert(xmlDoc);
				
				// als dit de wondere wereld van Micro$oft IE is
				if(window.ActiveXObject)
  				{
					// check dan welke versie 
					var versie 				= navigator.appVersion;
					var pos					= versie.search(/MSIE/);
					
					// bij versies 6 en 7 xmlDoc aanpassen 
					// (moet waarschijnlijk ook bij 4, 5, en 5.5, niet getest!)
					switch(versie.substr(pos+2, 4))
					{
						case 'IE 6':
						case 'IE 7':
							// doe dan wat gekke dingen die we ergens vandaan geript hebben
							var xmlElement = document.createElement('xml');
							//Put the requester.responseText in the innerHTML of the xml tag
							xmlElement.setAttribute('innerHTML',request.responseText);
							//Set the xml tag's id to _formjAjaxRetornoXML
							xmlElement.setAttribute('id','_formjAjaxRetornoXML');
							//Add the created tag to the page context
							document.body.appendChild(xmlElement);
							//Just for check put the xmlhttp.responseXML in the innerHTML of the tag
							document.getElementById('_formjAjaxRetornoXML').innerHTML = request.responseText;
							//Now we can get the xml tag and put it on a var
							xmlDoc = document.getElementById('_formjAjaxRetornoXML');
							//So we have a valid xml we can remove the xml tag 
							document.body.removeChild(document.getElementById('_formjAjaxRetornoXML'));
							break;
					}
				}
				
				
				var newMarkersList 			= xmlDoc.documentElement.getElementsByTagName("marker");
				
				// alert('xml is binnen, ' + newMarkersList.length + ' markers opgehaald!');
				
				
				for (var i = 0; i < newMarkersList.length; i++) 
				{
					var markerXML 			= newMarkersList[i];
				
					// alert('marker op ' + parseFloat(markerXML.getAttribute("lat")) + ', ' + parseFloat(markerXML.getAttribute("lng")));
				
					var marker				= createMarker(markerXML.getAttribute("id"),
												new GLatLng(
		          									parseFloat(markerXML.getAttribute("lat")),
			          								parseFloat(markerXML.getAttribute("lng"))),
												markerXML.getAttribute("naam"),
												markerXML.getAttribute("tekst"),
												markerXML.getAttribute("adres"),
												markerXML.getAttribute("thumb"),
												markerXML.getAttribute("soort")
											);
					
					map.addOverlay(marker);
					
				}	
		}
	}
	
	request.send(null);
}

function createMarker(id, point, naam, tekst, adres, thumb, soort) 
{	
	// kies icoontje
	var icon 				= new GIcon(G_DEFAULT_ICON);
	icon.iconSize 			= new GSize(26,35);
	icon.iconAnchor 		= new GPoint(13, 17);
	//icon.shadow				= null;
	
	switch(soort)
	{
		case "monument":
			icon.image 				= "art/graphics/ico_1.png";
			break;
		case "kerk":
			icon.image 				= "art/graphics/ico_2.png";
			break;
		case "molen":
			icon.image 				= "art/graphics/ico_3.png";
			tekst					= 'dit is een onzintekstje om ervoor te zorgen dat een molen ook een tekst heeft';
			break;
		default:
			// huh? nieuw type toegevoegd...
	}
	
	// check of er in deze taal een tekst bij deze marker zit
	var heeft_tekst = false;
	if(tekst.length > 10)	// !!! test of tekst lang is... soms bestaat tekst alleen uit een nbsp; ofzoiets...
	{
		heeft_tekst = true;
	}
	
	// maak marker aan
	var marker = new GMarker(point, {icon:icon});
	
	// voeg event listeners toe aan marker
	GEvent.addListener(marker, "mouseover", function() 
	{
		win = new infoWindow(point, naam, heeft_tekst, adres, thumb);
		map.addOverlay(win);
		
	});
	
	GEvent.addListener(marker, "mouseout", function() 
	{
		//setTimeout("win.remove()", 1500); // dit gaat (soms?) mis!!! (node not found...)
		win.remove();
	});	
	
	// bepaal url waar klik op icoon heen moet... 
	if(heeft_tekst)
	{
		var url 	= '';
		var pagenr	= 0;
		
		// ga bij molen naar molen-pagina
		if(soort == "molen")
		{
			switch(taal)
			{
				case 'nl':
					pagenr = 112;
					break;
				case 'en':
					pagenr = 136;
					break;
				case 'de':
					pagenr = 160;
					break;
				case 'fr':
					pagenr = 172;
					break;
				case 'es':
					pagenr = 148;
					break;
				case 'it':
					pagenr = 124;
					break;
			}
			
			url = 'index.php?go=home.showPages&pagenr=' + pagenr;
		}
		else
		{
			// geen molen, dus monument-pagina
			url = 'index.php?go=home.monument&monumentID=' + id;
		}
		
		
		GEvent.addListener(marker, "click", function()
		{
			document.location = url;
		});
	}
	
	
	
	
	return marker;
}


function initialize() 
{
	/*
	functie die eenmalig aangeroepen wordt bij starten van kaart, om
	Google Maps-object aan te maken en markers erop te zetten bij start
	*/
	
  	if(GBrowserIsCompatible()) 
	{
		map = new GMap2(document.getElementById("map"));
		map.setMapType(G_SATELLITE_MAP);
	
	
		centerMap();
	
		// maak layers voor historische kaarten aan
		/*
		var ZW 			= new GLatLng(52.625704258360166, 4.739184379577637);
		var NO	 		= new GLatLng(52.635706486382226, 4.7580885887146);
		map_1597 		= new GGroundOverlay("art/graphics/map_1597.png",  new GLatLngBounds(ZW, NO));	
		
		ZW 				= new GLatLng(52.62587358593079, 4.739420413970947);
		NO		 		= new GLatLng(52.63565439736756, 4.759418964385986);
		map_1649 		= new GGroundOverlay("art/graphics/map_1649.png",  new GLatLngBounds(ZW, NO));	
		
		ZW 				= new GLatLng(52.62548282901008, 4.739570617675781);
		NO	 			= new GLatLng(52.635615330565855, 4.758496284484863);
		map_1865 		= new GGroundOverlay("art/graphics/map_1865.png",  new GLatLngBounds(ZW, NO));	
		*/
		
		
		// maak layers voor historische kaarten aan, nu in 8bit versie
		var ZW 			= new GLatLng(52.62493576345977, 4.736566543579102);
		var NO	 		= new GLatLng(52.63644874810273, 4.76083517074585);
		map_1597 		= new GGroundOverlay("art/graphics/map_1597_8bit.png",  new GLatLngBounds(ZW, NO));	
		
		ZW 				= new GLatLng(52.62487063615305, 4.7370171546936035);
		NO		 		= new GLatLng(52.63629248352393, 4.761199951171875);
		map_1649 		= new GGroundOverlay("art/graphics/map_1649_8bit.png",  new GLatLngBounds(ZW, NO));	
		
		ZW 				= new GLatLng(52.62511811940303, 4.736373424530029);
		NO	 			= new GLatLng(52.636552924178545, 4.760599136352539);
		map_1865 		= new GGroundOverlay("art/graphics/map_1865_8bit.png",  new GLatLngBounds(ZW, NO));	
		
		
		
		// zet actieve jaartal
		jaartal = 2009;
		
		// voeg zoom-ding toe
		map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,30)));
		
		
		// stop ref naar divs in globale variabele
		// nare hack om gLargeMapControl op z'n plek te krijgen...
		var divs 			= document.getElementsByTagName('div');
		for(var d = 0; d < divs.length; d++)
		{
			if(divs[d].className == 'gmnoprint')
			{
				mapControlDivs.push(divs[d]);
			}
		}
		
		
	
		// beperk zoomniveau
		var mapTypes = map.getMapTypes(); 
		for (var i=0; i<mapTypes.length; i++) 
		{
			mapTypes[i].getMinimumResolution = function() {return minZoom;}
			mapTypes[i].getMaximumResolution = function() {return maxZoom;}
		}
	
		// plaats markers op kaart
		getMarkers();
	
		// voeg event listeners voor zoom- en move-events toe
		
		GEvent.addListener(map, "moveend", function() 
		{
			// kaart is bewogen
			var center 	= this.getCenter();
			var zoom 	= this.getZoom();
			
			//alert(center);
			
		});
		
		/*
		GEvent.addListener(map, "click", function(overlay, point) 
		{
			alert(point);
			
		});
		*/
		
		
		/*
		GEvent.addListener(map, "zoomend", function() 
		{
			// zoomniveau is aangepast
			var center 	= this.getCenter();
			var zoom 	= this.getZoom();
			
			updateMap(center, zoom);
		});
		*/
	}
	else
	{
		var mapdiv = document.getElementById("map");
		
		mapdiv.innerHTML = "Google Maps is niet beschikbaar!";
	}
	
	centerFrame();
}

window.onload 	=	initialize;
window.onresize =	centerFrame;