var map;
var projects = new Array(); 

var L  = "/images/gm_icons/prj_l.gif";  //Landschap
var P  = "/images/gm_icons/prj_p.gif";  //Park en landgoed
var S  = "/images/gm_icons/prj_s.gif";  //Stad en dorp	  
var O  = "/images/gm_icons/prj_lo.gif"; //Locatieontwikkeling 
var W  = "/images/gm_icons/prj_w.gif";  //Water en RO
var K  = "/images/gm_icons/prj_wo.gif"; //Workshops en opleidingen

function loadMap() {
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map_canvas"));
		map.setCenter(new GLatLng(52.17595, 5.3876), 8);
		//map.addControl(new GSmallMapControl ());
		//map.addControl(new GMapTypeControl());
		map.enableContinuousZoom();
		map.enableDoubleClickZoom();	
		map.setMapType(G_SATELLITE_MAP);
		GEvent.addListener(map, 'moveend', showMarkers ); 
		GEvent.addListener(map, 'zoomend', showMarkers ); 
		showMarkers(); 		
	}
}  	
function legend_OnClick(){
	_lastzoom = -1; 
  if (document.getElementById('radGrondRR').checked) {
    Effect.Fade('tableLegenda');	
  }
  else {
     Effect.Appear('tableLegenda', {to: 1.0});	
  }  
	showMarkers(); 		
}

// Creates a marker at the given point with the given number label
function createMarker(point, icon, tooltip, url) {  
	var marker = new GMarker(point, icon);  
	marker.tooltip = '<div class="tooltip">' + tooltip + '</div>'
	GEvent.addListener(marker, "mouseover", function() {
		showTooltip(marker);
	});        
	GEvent.addListener(marker, "mouseout", function() {
		hideTooltip();
	});      
	GEvent.addListener(marker, "click", function() {  
		hideTooltip();	
		setTimeout(startProjecten,2000);
		showInfoURL(url)
	});  
	return marker;
}

function addMarkers(){
	var markers = new Array();	
	for (var i = 0; i < projects.length; i++) {
	
		if (document.getElementById("radGrondRR").checked) {
			if (projects[i].type.indexOf("G") == -1) continue;		
		}
		else if (document.getElementById("radEerdereWerkgevers").checked) {
			if (projects[i].type.indexOf("T") == -1) continue;		
		}
          //Selectie heeft horizontale icons. Verticaal verschuiven wertk beter
          //if (document.getElementById('radGrondRR').checked)
		if (!document.getElementById('radGrondRR').checked && !document.getElementById("C_" + projects[i].type.substring(0,1)).checked){
			continue;
		}
		
		var point = new GLatLng(projects[i].lat, projects[i].lng);       
/*
		var innerHTML = "";
		if (projects[i].imageURL){
			innerHTML += "<img src=\"" + projects[i].imageURL + "\"/><br/>";
		}
		if (projects[i].url){
			innerHTML += "<a target=\"project\" class=\"maphref\" href=\"" + projects[i].url + "\">" + projects[i].title + "</a>";
		}  
		else {
			innerHTML += "<b>" + projects[i].title +"<br><br/>";
		}        
*/
		var icon;
		if (projects[i].imgURL.length > 0){
 			icon = new GIcon(selectieIcon); 
			icon.image = '/projects/_images/' + projects[i].imgURL;    
		}
		else if (projects[i].iconURL){
			icon = new GIcon(baseIcon); 
			icon.image = projects[i].iconURL;        
		}    
		else{
			icon = G_DEFAULT_ICON;
		}   
	
		markers.push(createMarker(point, icon, projects[i].title, projects[i].url))
	}    
	return markers;
}
    
// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
var baseIcon = new GIcon();
//baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(22, 22);
//baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(11, 11);
baseIcon.infoWindowAnchor = new GPoint(11, 11);
baseIcon.infoShadowAnchor = new GPoint(11, 11); 

var selectieIcon = new GIcon();
selectieIcon.iconSize = new GSize(105, 43);
selectieIcon.iconAnchor = new GPoint(53, 22);
selectieIcon.infoWindowAnchor = new GPoint(53, 22);
selectieIcon.infoShadowAnchor = new GPoint(53, 22);
//-------------------------------------------------------------------- 
// Project
//--------------------------------------------------------------------    
function Project(lat, lng, title, iconURL, imgURL, url, type, maxHeight){
	this.lat = lat;
	this.lng = lng;
	this.title = title;
	this.iconURL = iconURL;
	this.imgURL = imgURL;
	this.url = url; 
	this.type = type;
	this.maxHeight = maxHeight;	
	//this.imageURL = imageURL;
}
    
var tooltip;            
// ====== This function displays the tooltip ======
// it can be called from an icon mousover or a side_bar mouseover
function showTooltip(marker) {
	if (!tooltip){
		tooltip = document.createElement("div");
		document.getElementById("map_canvas").appendChild(tooltip);
		tooltip.style.visibility="hidden";
	}
	tooltip.innerHTML = marker.tooltip;
	var point  = map.getCurrentMapType().getProjection().fromLatLngToPixel(map.getBounds().getSouthWest(),map.getZoom());
	var offset = map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
	var anchor = marker.getIcon().iconAnchor;
	var width  = marker.getIcon().iconSize.width;
	var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(offset.x - point.x - anchor.x + width+2,- offset.y + point.y + anchor.y - 26)); 
	pos.apply(tooltip);
	tooltip.style.visibility="visible";
}
function hideTooltip(){
	tooltip.style.visibility="hidden"
}