var map
var middelpunt
var mgr
var tooltip

 function kaart() {
  if (GBrowserIsCompatible()) {
	
	z = 13
	ll = location.hash.replace('#','');
	if (ll.length > 25) z = 16;
	if (ll.indexOf('.') < 1){
			ll = getCookie('mapCenter', '52.0912623,5.1227478');
			z  = parseInt(getCookie('mapZoom', '8'));
	}
	mp = eval('new GLatLng(' + ll + ')');

	tooltip = eId('tt');

	//lagen
	Kaart = new GMapType(G_PHYSICAL_MAP.getTileLayers(), new GMercatorProjection(32), "Kaart", {shortname:"Kaart", errorMessage:"Geen detailkaart: zoom uit"} ); 
	Kaart.getMinimumResolution = function () { return 8 }; 
	Kaart.getMaximumResolution = function () { return 15 }; 
	Satelliet  = new GMapType(G_HYBRID_MAP.getTileLayers(), new GMercatorProjection(32), "Satelliet",  {shortname:"Satelliet", errorMessage:"Geen detailfoto: zoom uit"} );
	Satelliet.getMinimumResolution = function () { return 8 }; 
	Satelliet.getMaximumResolution = function () { return 18 }; 			
	
	map = new GMap2(eId("map"),{mapTypes : [Kaart,Satelliet]});	
	map.addControl(new GMenuMapTypeControl());		       
	map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(35,35)) );
	mt = getCookie('mapType', 'Kaart');

	eval('map.setCenter(mp, z, ' + mt + ')');
	map.enableScrollWheelZoom();
		
	window.onunload = bewaarkaart;
	
	mgr = new  GMarkerManager(map);
	setupMarkerManager();
	
	}
}

function bewaarkaart(){
	document.cookie = "mapType=" + map.getCurrentMapType().getName() + "; path=/";
	document.cookie = "mapCenter=" + map.getCenter().lat() + ',' + map.getCenter().lng() + "; path=/";	
	document.cookie = "mapZoom=" + map.getZoom() + "; path=/";		
	
}

function setupMarkerManager() {
	//mgr.clearMarkers();
	var markers1 = []; var markers2 = [];
	for (i=0; i < data.canons.length; i++){
		try{
			markers1.push(createCanonMarker(i));
		} catch(e){}
	}
	for (i=0; i < data.vensters.length; i++){
		try{
			markers2.push(createVensterMarker(i));
		} catch(e){}
	}
	mgr.addMarkers(markers1, 8);
	mgr.addMarkers(markers2, 11);
	mgr.refresh();
}

function createCanonMarker(i) {
	var icon = new GIcon();
	icon.image = data.canons[i].i;
	zl = 11;
	if (data.canons[i].i.indexOf('2') > 1){
		icon.iconAnchor = new GPoint(13, 13);
		icon.infoWindowAnchor = new GPoint(13, 13);
		icon.iconSize = new GSize(36, 36);
		zl = 15;
	} else {
		icon.iconAnchor = new GPoint(25, 25);
		icon.infoWindowAnchor = new GPoint(25, 25);
		icon.iconSize = new GSize(50, 50);
	}
	
	pnt = eval('new GLatLng(' + data.canons[i].ll + ')');
	var marker = new GMarker(pnt, {icon: icon});
	GEvent.addListener(marker, "click", function(){marker.openInfoWindowHtml(
	'<div style="height:185px;text-align:center"><strong>' + data.canons[i].t + '</strong><br/><a href="' + data.canons[i].u + '" style="display:block;margin:3px 0 3px 0;width:218px;height:140px;background:url(/beeld' + data.canons[i].u + '.png) silver"></a><a href="javascript:map.setCenter(new GLatLng(' + data.canons[i].ll + '), ' + zl +');">kaart hier inzoomen</a></div>'
	, {maxWidth: 300 });
	});
	GEvent.addListener(marker,"mouseover", function() {showTooltip(marker, data.canons[i].t);});        
	GEvent.addListener(marker,"mouseout", function() {tooltip.style.visibility="hidden" });	  
	return marker;
}

function showTooltip(marker,str) {
    tooltip.innerHTML = str;
	ll = marker.getPoint();
	tooltip.style.left = map.fromLatLngToContainerPixel(ll).x + eId('map').offsetLeft - 30 + 'px' ;
	tooltip.style.top  = map.fromLatLngToContainerPixel(ll).y + eId('map').offsetTop  - 15 + 'px' ;
	tooltip.style.display="block";
	tooltip.style.visibility="visible";
}



function createVensterMarker(i) {

	var icon = new GIcon();
	icon.image = data.vensters[i].i;
	if (data.vensters[i].i.indexOf('.png') > 1){
		icon.shadow = "/grafiek/wit_circle.png";
		icon.iconAnchor = new GPoint(21, 21);
		icon.infoWindowAnchor = new GPoint(21, 21);
		icon.iconSize = new GSize(42, 42);
		icon.shadowSize = new GSize(54, 54);
	} else {
		icon.shadow = "/grafiek/wit.png";
		icon.iconAnchor = new GPoint(18, 18);
		icon.infoWindowAnchor = new GPoint(18,18);
		icon.iconSize = new GSize(36, 36);
		icon.shadowSize = new GSize(50, 50);}
	
	pnt = eval('new GLatLng(' + data.vensters[i].ll + ')');
	var marker = new GMarker(pnt, {icon: icon});
	GEvent.addListener(marker, "click", function(){
			trgt = ''; if (data.vensters[i].u.indexOf('http:') == 0) {trgt = 'target="_blank" ';}
			marker.openInfoWindowHtml('<div style="height:70px;padding:5px 5px 0 80px;line-height:1.3em"><a ' + trgt + 'href="' + data.vensters[i].u + '"><img style="float:left;margin-left:-80px" src="' + data.vensters[i].i + '" alt="" /></a><a ' + trgt + 'class="canonlink" href="' + data.vensters[i].u.substring(0,data.vensters[i].u.lastIndexOf('/')) + '">' + data.vensters[i].c + '</a><br /><a ' + trgt + 'href="' + data.vensters[i].u + '">' + data.vensters[i].t + '</a> <small style="white-space:nowrap">' + data.vensters[i].d + '</small><br /><em>' + data.vensters[i].s + '</em></div>'																		 
															  
	, {maxWidth: 300 });
	});
	GEvent.addListener(marker,"mouseover", function() { showTooltip(marker, data.vensters[i].t);});        
	GEvent.addListener(marker,"mouseout", function() {tooltip.style.visibility="hidden" });	  
	return marker;

}



		


function eId(str){return document.getElementById(str)}