// JavaScript Document
google.load("maps", "2");



function initialize() 
{
    if (google.maps.BrowserIsCompatible()) 
	{
		var map; //must be initialized first (anders foutmelding in IE6)
		
		// arrays to hold copies of the markers and html used by the side_bar
      	// because the function closure trick doesnt work there
      	var gmarkers = [];
      	var htmls = [];
      	var i = 0;
      
      	// === Create an associative array of GIcons() ===
      	var customIcons = [];
		
		iconGroen = new google.maps.Icon(G_DEFAULT_ICON);
		iconGroen.image = "images/icon_muziek.png";
		iconGroen.shadow = "images/icon_shadow.png";
		iconGroen.iconSize = new google.maps.Size(12,12);
		iconGroen.shadowSize = new google.maps.Size(19,12);
		iconGroen.iconAnchor = new google.maps.Point(6,20);
		iconGroen.infoWindowAnchor = new google.maps.Point(5,1);
		
		iconOranje = new google.maps.Icon(G_DEFAULT_ICON);
		iconOranje.image = "images/icon_theater.png";
		iconOranje.shadow = "images/icon_shadow.png";
		iconOranje.iconSize = new google.maps.Size(12,12);
		iconOranje.shadowSize = new google.maps.Size(19,12);
		iconOranje.iconAnchor = new google.maps.Point(6,20);
		iconOranje.infoWindowAnchor = new google.maps.Point(5,1);
		
		iconFuchsia = new google.maps.Icon(G_DEFAULT_ICON);
		iconFuchsia.image = "images/icon_dans.png";
		iconFuchsia.shadow = "images/icon_shadow.png";
		iconFuchsia.iconSize = new google.maps.Size(12,12);
		iconFuchsia.shadowSize = new google.maps.Size(19,12);
		iconFuchsia.iconAnchor = new google.maps.Point(6,20);
		iconFuchsia.infoWindowAnchor = new google.maps.Point(5,1);
		
		iconAqua = new google.maps.Icon(G_DEFAULT_ICON);
		iconAqua.image = "images/icon_beeldend.png";
		iconAqua.shadow = "images/icon_shadow.png";
		iconAqua.iconSize = new google.maps.Size(12,12);
		iconAqua.shadowSize = new google.maps.Size(19,12);
		iconAqua.iconAnchor = new google.maps.Point(6,20);
		iconAqua.infoWindowAnchor = new google.maps.Point(5,1);
		
		iconBordeaux = new google.maps.Icon(G_DEFAULT_ICON);
		iconBordeaux.image = "images/icon_literatuur.png";
		iconBordeaux.shadow = "images/icon_shadow.png";
		iconBordeaux.iconSize = new google.maps.Size(12,12);
		iconBordeaux.shadowSize = new google.maps.Size(19,12);
		iconBordeaux.iconAnchor = new google.maps.Point(6,20);
		iconBordeaux.infoWindowAnchor = new google.maps.Point(5,1);
		
		iconMint = new google.maps.Icon(G_DEFAULT_ICON);
		iconMint.image = "images/icon_erfgoed.png";
		iconMint.shadow = "images/icon_shadow.png";
		iconMint.iconSize = new google.maps.Size(12,12);
		iconMint.shadowSize = new google.maps.Size(19,12);
		iconMint.iconAnchor = new google.maps.Point(6,20);
		iconMint.infoWindowAnchor = new google.maps.Point(5,1);
		
		iconPaars = new google.maps.Icon(G_DEFAULT_ICON);
		iconPaars.image = "images/icon_fotografie.png";
		iconPaars.shadow = "images/icon_shadow.png";
		iconPaars.iconSize = new google.maps.Size(12,12);
		iconPaars.shadowSize = new google.maps.Size(19,12);
		iconPaars.iconAnchor = new google.maps.Point(6,20);
		iconPaars.infoWindowAnchor = new google.maps.Point(5,1);
		
		customIcons["muziek"] = iconGroen;
		customIcons["theater"] = iconOranje;
		customIcons["dans"] = iconFuchsia;
		customIcons["beeldend"] = iconAqua;
		customIcons["beeldende kunst"] = iconAqua;
		customIcons["literatuur"] = iconBordeaux;
		customIcons["erfgoed"] = iconMint;
		customIcons["audiovisueel"] = iconPaars;
		
		function createMarker(point, name, html, type, instelling) {
      		//=> werkende regel : var marker = new google.maps.Marker(point, customIcons[type]);
			var marker = new google.maps.Marker(point, customIcons[type]);
      		//var marker = new google.maps.Marker(point, customIcons[type.substring(0,(indexOf(",")+1))]);
			
			/*var html = "<b>" + name + "</b> <br/>" + address + " ("+ type + ")";*/
			
			//toon thickbox
			//GEvent.addListener(marker, "click", function() 	{document.getElementById("MyInfoDiv").innerHTML=html})
			GEvent.addListener(marker, "click", function() 	{document.getElementById("instelling"+instelling).style.display = 'block'})
			//GEvent.addListener(marker, "click", function() 	{document.getElementById("MyInfoDiv1").style.display = 'block'})
			//=> werkt wel maar wordt niet in infowindow getoond maar in een aparte laag onder de kaart
			
			google.maps.Event.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); });
     		return marker;
		}
		
		
      	//, {maxTitle:"gemaximaliseerd", maxContent:"een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/>een heleboel info een heleboel info <br/><br/><a href='#' onClick='javascript:window.open(\"details.html\", \"myWindow\", \"width=500,height=500\")'>print deze tekst</a>"}
		//{maxUrl:"/details.html"}); }
		
		// This function picks up the click and opens the corresponding info window
      	/*function myclick(i) {
        	gmarkers[i].openInfoWindowHtml(htmls[i]);
      	}*/
	  
		var map = new google.maps.Map2(document.getElementById("map_canvas"));
		map.addControl(new google.maps.LargeMapControl());
		map.addControl(new google.maps.MapTypeControl());
		map.addControl(new google.maps.OverviewMapControl());
        map.setCenter(new google.maps.LatLng(52.20698, 5.97038), 12);
		
	 	//haal adressen uit xml-file
		google.maps.DownloadUrl("../kaart_xml.php", function(data) {
		var xml = google.maps.Xml.parse(data);
		var markers = xml.documentElement.getElementsByTagName("marker");
		
		for(var i = 0; i < markers.length; i++)
			{
				var instelling = markers[i].getAttribute("id");
				var name = markers[i].getAttribute("name");
				var level = markers[i].getAttribute("level");
				if(markers[i].getAttribute("type") == 'beeldend') { var type = 'beeldende kunst'; }
				else { 	var type = markers[i].getAttribute("type"); }
				var discipline = markers[i].getAttribute("discipline");
				var website = markers[i].getAttribute("website");
				var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
												   parseFloat(markers[i].getAttribute("lng")));
				//var html = 	"<b>" + name + "</b> <br/>" + address + " ("+ type + ")";							   
				var html = "<b>"+name+"</b><br/>";
				if(level != null) { html += level; }
				else { html += discipline; }
				html += "<br/><br/><a href=\"javascript:tb_show('','details.php?id="+instelling+"','');\" title=\"Details van "+name+"\">klik voor meer info</a> ";
				if(website.length > 0) { html += "| <a href='http://"+website+"' target='_blank'>naar de website</a><br/>"; }
				//html += " | <a href=\"javascript:tb_show('','details.php?id="+instelling+"','');\" title=\"\">klik voor meer info</a>";
				//html += "<a href='#' onclick=\"divwin=dhtmlwindow.open('divbox"+i+"', 'div', 'infodiv"+i+"', '"+name+"', 'width=600px,height=400px,left=200px,top=150px,resize=1,scrolling=1'); return false\">meer informatie</a> ";
				//html += " | <a rel=\"mobox&type=1\" href=\"details.html\" title=\"form\">meer informatie</a>";
				//html += " | <a href='#' id='closebutton'><img src='images/close_infowindow.gif' width=10 height=10 border=0 ></a>";
				//html += "| <a href='#' onClick='window.open(\"details.php\",\"mywindow"+i+"\",\"width=400,height=400\")'>meer informatie</a>";
				//| <a href='#' onClick='"+map.closeInfoWindow()+"'><img src='images/close_infowindow.gif' width=10 height=10 border=0 ></a>
				var marker = createMarker(point, name, html, type, instelling);
				map.addOverlay(marker);
			}
		});
	 }
	 // display a warning if the browser was not compatible
    else {
      alert("Sorry, de Google Map wordt niet ondersteund door deze browser");
    }
}
google.setOnLoadCallback(initialize);