var map = null;
var markers = new Array();
var labels = new Array();
var currentLabel = null;
var overLabel = false;

function initMap()
{	
	var mapContainer = document.getElementById("initiativeMap").firstChild;
	mapContainer.style.height = "343px";
	mapContainer.style.width = "620px";
	
	map = new GMap2(mapContainer);
	map.setMapType(G_PHYSICAL_MAP);
	map.addMapType(G_PHYSICAL_MAP);
	map.addControl(new GMapTypeControl());
	map.setUIToDefault();
	map.disableInfoWindow();
	map.setCenter(new GLatLng(51.484803739516046, 4.976806640625), 8);
	
	GEvent.addListener(map, "click", function(overlay, latlng, overlaylatlng) {
		if (overlay == null && currentLabel != null && !overLabel)
		{
			labels[currentLabel].hide();
			currentLabel = null;
		}
	});
	
	initMarkers();
}

function initMarkers()
{
	if (mapLocations.length > 0)
	{
		for (var i = 0; i < mapLocations.length; i++)
		{
			var location = mapLocations[i];
			
			var point = new GLatLng(location["lat"], location["lng"]);
			
			var labelHTML =	'<div class="mapLabel" onmouseover="overLabel=true" onmouseout="overLabel=false">' +
							'<p class="labelTitle ' + location["iconStyle"] + '">' +
							'<img src="images/icons/close.gif" alt="sluiten" onclick="closeLabel(' + i + ')" style="float:right;cursor:pointer">' + 
							location["title"] + '</p>' +
							'<div class="rule">&nbsp;</div>' +
							'<p class="labelText" style="height:140px">' + location["image"] + '</p>' +
							'<p><a class="arrowLink white" href="' + location["url"] + '">Lees verder</a></p></div>';

 			var label = createLabel(point, labelHTML);
 			labels.push(label);
			map.addOverlay(label);
			
			var marker = createMarker(point, i, location);
			markers.push(marker);
			map.addOverlay(marker);
		}
	}
}

function createMarker(point, i, location)
{
    var icon = new GIcon();
    icon.image = "images/gmap/point_" + location["iconStyle"] + ".gif";
    icon.iconSize = new GSize(12, 12);
    icon.iconAnchor = new GPoint(6, 6);
	
	marker = new GMarker(point,
	{
		title: location["title"],
		icon: icon,
		clickable: true,
		draggable: false,
		hide: false
	});
	
	GEvent.addListener(marker, "click", function() {
		if (currentLabel != null)
		{
			labels[currentLabel].hide();
		}
		
		labels[i].show();
		currentLabel = i;
		
		var point = map.fromLatLngToContainerPixel(labels[i].getPoint());
		point.x += 142;
		map.panTo(map.fromContainerPixelToLatLng(point));
	});
	
	return marker;
}

function createLabel(point, html)
{
	var size = new GSize(0, 91);
	
	var label = new ELabel(point, 
						   html, 
						   "",
						   size);
	
	label.hide();
	
	return label;
}

function closeLabel(index)
{
	labels[index].hide();
	currentLabel = null;
}

var prevLink = null;
function toggleLegenda(link, iconStyle)
{
	for (var i = 0; i < mapLocations.length; i++)
	{
		if (mapLocations[i].iconStyle == iconStyle || iconStyle == "all")
		{
			markers[i].show();
			
			document.getElementById("block_" + mapLocations[i].id).style.display = "block";
		}
		else
		{
			markers[i].hide();
			labels[i].hide();
			
			document.getElementById("block_" + mapLocations[i].id).style.display = "none";
		}
	}
	
	if (prevLink != null)
	{
		prevLink.style.color = "#677177";
	}
	
	if (iconStyle == "all")
	{
		prevLink = null;
	}
	else
	{
		link.style.color = "#E72300";
		prevLink = link;
	}
}