//<![CDATA[
// Define heigth and width of icon used.
var iIconHeight = 11;
var iIconWidth = 23;

// define the x-axis margin
var iTTXMargin = 13;

// Global variables needed
var elMap;

// Var for checking if link was clicked. Then DO NOT HIDE marker.
var bClick  = false;



var map;							// De google map
var miniMap;						// De kleine google map op de informatie tab
var aMarkerObjects = new Array(); 	// in deze array komen alle marker objects terecht die op de map staan.
var xmlHttp = GXmlHttp.create();	// de var xmlHttp wordt in main.js gebruikt, maar kan pas hier aangemaakt worden omdat GXmlHttp hier pas beschikbaar is

/*******************************************
Custom marker icoontjes definieren
*******************************************/
// dit icoontje is de "template" voor de echte icoontjes.
var icon = new GIcon();

icon.image = "images/markers/default.gif";
icon.iconSize = new GSize(21, 21);
icon.shadowSize = new GSize(21, 21);
icon.iconAnchor = new GPoint(10, 10);
icon.infoWindowAnchor = new GPoint(10, 10);

/*******************************************
De kaart klaarmaken voor gebruikt. 
Deze functie wordt aangeroepen zodra de pagina ingeladen is.

Optioneel kan EEN van de volgende 3 variabelen worden opgegeven:
- iMarkerID is nodig om direct de info pagina van een marker te laten zien (default: 0)
- iNieuwsID is nodig om direct een nieuwsbericht te laten zien (default: 0)
- sShowTab wordt gebruikt om een bepaald tabblad te openen na het inladen (default: '')
*******************************************/
function initMap() {
	
	// Statistieken bijhouden
	pageHit(null);
	
	if (GBrowserIsCompatible()) {
				
		// Kaart instantie aanmaken
		map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl());

		// Kaart centreren op Nederland
		map.setCenter(new GLatLng(52.223851,4.509828), 7);
				
		// De punten op de kaart zetten
		addMarkers();

	} // if GBrowserIsCompatible
}

/*******************************************
		De map laden
*******************************************/
/*function load() {
  if (GBrowserIsCompatible()) {
	map = new GMap2(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.setCenter(new GLatLng(52.158348386682924, 4.5160675048828125), 8);
  }
}*/

/*******************************************
Creates a marker at the given point
point = Lat, Lng
content = de inhoud van het infoWindow
append =  true / false : Moet de marker aan de aMarkerObjects toegevoegd worden? Alleen items die op de hoofdkaart staan moeten aan deze array worden toegevoegd.
*******************************************/
function createMarker(id, point, naam, content, append) {
	//var marker = new GMarker(point, aIcons[sg_id]);
	var marker = new GMarker(point);
	
		
	if(append){
		aMarkerObjects.push(marker); // append marker to the end of the array
	}
	
	marker.id = id;	
	marker.html = content;
	
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(unescape(content));
	});
	
	return marker;
}

/*******************************************
De punten op de kaart zetten
*******************************************/
function addMarkers(){
	// in de array aMarkers zitten alle punten die op de kaart moeten komen. Deze array wordt in main.tpl gemaakt.
	iLength = aMarkers.length;

	for (i=0; i<iLength; i++) {
		
		var content = '';
		content += '<div class="infoWindow">'
		content += '<b>' + aMarkers[i].naam + '</b><br />';
		if(aMarkers[i].adres != '') content += aMarkers[i].adres + '<br />';
		if(aMarkers[i].postcode != '') content += aMarkers[i].postcode + '<br />';
		if(aMarkers[i].plaats != '') content += aMarkers[i].plaats + '<br />';
		if(aMarkers[i].tel != '') content += aMarkers[i].tel + '<br /><br />';

		if(aMarkers[i].website != '') content += '<a href="http://' + aMarkers[i].website + '">' + aMarkers[i].website + '</a><br />';
		if(aMarkers[i].email != '') content += '<a href="mailto:' + aMarkers[i].email + '">' + aMarkers[i].email + '</a><br />';
		
		content += '<br /><hr/><a class="zoomAnchor" onclick="clickZoomIn();"><img src="images/help_plus.gif" alt="" /> Zoom in</a> | <a class="zoomAnchor" onclick="clickZoomOut();"><img src="images/help_min.gif" alt="" /> Zoom uit</a><br /><br />';
		
		content += '</div>'
		
		var point = new GLatLng(parseFloat(aMarkers[i].lat),parseFloat(aMarkers[i].lng));
  		map.addOverlay(createMarker(aMarkers[i].id, point, aMarkers[i].naam, content, true));
  		point = null;
	}
}

/*******************************************
		Naar een bepaald niveau zoomen
*******************************************/
function clickZoom(cZoom) {
	if (cZoom) {
		var new_zoom = parseInt(cZoom);
		map.setZoom(new_zoom);
	}
}

function clickZoomIn() {
	map.zoomIn();
}

function clickZoomOut() {
	map.zoomOut();
}

/*******************************************
		Kaart type wisselen
*******************************************/
function switchMaptype(map_type) {
	var new_map_type;
	switch(map_type) {
		case 'm': new_map_type = G_NORMAL_MAP; break;
		case 's': new_map_type = G_SATELLITE_MAP; break;
		case 'h': new_map_type = G_HYBRID_MAP; break;
		default: new_map_type = null;
	}
	if (new_map_type) {
		map.setMapType(new_map_type);
	}
}


/*******************************************
		onload / unload 
*******************************************/
onload = function(){
	initMap();
}
onunload = function(){
	GUnload()
}