google.load("maps", "2.x");

var InvMaps = function(){
	
	return {
		createBaseMap: function(id, center, zoom, type){
			if (window.baseMap)
				return window.baseMap
			
			// Create the map
			var map = new google.maps.Map2(document.getElementById(id));
			
			// Set type
			type = type || G_HYBRID_MAP;
			map.setMapType(type);
			
			// Set center and zoom
			var center = center || new google.maps.LatLng(50.978721, 5.306396);
			var zoom = zoom || 10;
			map.setCenter(center, zoom);

			// Add the controls
			map.addControl(new google.maps.SmallZoomControl());
			map.addControl(new google.maps.MenuMapTypeControl());
			
			// Fix copyright breakout
			map.getContainer().style.overflow = "hidden";
			
			// Register as global and return
			window.baseMap = map;
			return window.baseMap;
		},
		
		createIcon: function(icon, w, h){
			var i = new google.maps.Icon(G_DEFAULT_ICON, icon);
			var w = w | 16;
			var h = h | 16;
			var iconCenter = new google.maps.Point(w/2, h/2);

			i.iconSize = new google.maps.Size(w, h);
			i.shadow = null;
			i.shadowSize = new google.maps.Size(0,0);
			i.iconAnchor = iconCenter;
			i.infoWindowAnchor = iconCenter;
			
			return i;
		},
		
		createPanoramioIcon: function(icon, size){
			
			size = size || 'medium';
			icon = icon.replace('/'+size+'/', '/mini_square/');
			i = this.createIcon(icon, 20, 20);
			i.shadow = 'http://www.rlkm.be/design/images/layout/icons/markers/photo_shadow.png';
			i.shadowSize = new google.maps.Size(35, 24);
			
			return i;
		},
		
		createHeritageIcon: function(){
			
			var i = new google.maps.Icon(G_DEFAULT_ICON, 'http://www.rlkm.be/design/images/layout/icons/markers/heritage.png');
			var w = 18;
			var h = 32;
			var iconCenter = new google.maps.Point(w/2, h);
			
			i.iconSize = new google.maps.Size(w, h);
			i.shadow = 'http://www.rlkm.be/design/images/layout/icons/markers/heritage_shadow.png';
			i.shadowSize = new google.maps.Size(34, 32);
			i.iconAnchor = iconCenter;
			
			return i;
		},
		
		createHeritageClusterIcon: function(){
			
			var i = new google.maps.Icon(G_DEFAULT_ICON, 'http://www.rlkm.be/design/images/layout/icons/markers/heritage_cluster.png');
			var w = 34;
			var h = 38;
			var iconCenter = new google.maps.Point(w/2, h);
			
			i.iconSize = new google.maps.Size(w, h);
			i.shadow = 'http://www.rlkm.be/design/images/layout/icons/markers/heritage_cluster_shadow.png';
			i.shadowSize = new google.maps.Size(46, 24);
			i.iconAnchor = iconCenter;
			
			return i;
		},
		
		createStartpointIcon: function(){
			
			var i = new google.maps.Icon(G_DEFAULT_ICON, 'http://www.rlkm.be/design/images/layout/icons/markers/startpunt.png');
			var w = 18;
			var h = 32;
			var iconCenter = new google.maps.Point(w/2, h);
			
			i.iconSize = new google.maps.Size(w, h);
			i.shadow = 'http://www.rlkm.be/design/images/layout/icons/markers/startpunt_shadow.png';
			i.shadowSize = new google.maps.Size(34, 32);
			i.iconAnchor = iconCenter;
			i.infoWindowAnchor = new google.maps.Point(7,15);
			
			return i;
		},
		
		createPolyLine: function(coordinates, color, width){
	
			if(coordinates.length <= 0) {
				return;
			}
			
			var points = [];
			
			for (i = 0; i < coordinates.length; i++){
				var coord = coordinates[i];
				points.push(new google.maps.LatLng(
					parseFloat(coord.latitude), 
					parseFloat(coord.longitude)
				));
			}
		
			var color = color || '#ff6600';
			var width = width || 2;
			var opacity = 1;
			var overlay = new google.maps.Polygon(points,color,width,opacity,"#000000",0);
			
			return overlay;
			
		}
	}
}();
function initializeOverview() {
	
	var map = new GMap2(document.getElementById("map")); 
		map.setCenter(new GLatLng(0,0),0);
		map.setMapType(G_SATELLITE_MAP);
		map.addControl(new google.maps.SmallZoomControl());
		map.addControl(new google.maps.MenuMapTypeControl());
		map.getContainer().style.overflow = "hidden";
		
	
	var kml = new GGeoXml("http://www.rlkm.be//uploads/kml/perimeter_nphk_2009_3_16_13_43.KML?1283809356", function() {
	  if (kml.loadedCorrectly()) {
		kml.gotoDefaultViewport(map);
	  }
	});
	map.addOverlay(kml);

	
	var gmarkers = [];
	var htmls = [];
	var i = 0;
	var icon = InvMaps.createStartpointIcon();
	var bounds = new GLatLngBounds();
	    

	function createMarker(point,name,html) {
		var marker = new GMarker(point, {icon: icon});
		GEvent.addListener(marker, "click", function() {	
			marker.openInfoWindowHtml(html);	
		});
		gmarkers[i] = marker;
		htmls[i] = html;
		i++;
		return marker;
	}
	function myclick(i) {
		gmarkers[i].openInfoWindowHtml(htmls[i]);
	}
	
				
			var point 	= new GLatLng("50.957535","5.536294");
			var name 	= "Kattevennen";
			var html 	= "<div class='gmapinfowin'>" +
						  "<h2>Startpunt: Kattevennen</h2><p><a href='kattevennen/' >Bekijk dit startpunt.</a></p>" +
						  "</div>";
			var marker 	= createMarker(point,name,html);
			map.addOverlay(marker);
			bounds.extend(point);
			
				
			var point 	= new GLatLng("51.005722","5.602984");
			var name 	= "Station As";
			var html 	= "<div class='gmapinfowin'>" +
						  "<h2>Startpunt: Station As</h2><p><a href='station-as/' >Bekijk dit startpunt.</a></p>" +
						  "</div>";
			var marker 	= createMarker(point,name,html);
			map.addOverlay(marker);
			bounds.extend(point);
			
				
			var point 	= new GLatLng("50.978439","5.659032");
			var name 	= "Mechelse Heide";
			var html 	= "<div class='gmapinfowin'>" +
						  "<h2>Startpunt: Mechelse Heide</h2><p><a href='mechelse-heide/' >Bekijk dit startpunt.</a></p>" +
						  "</div>";
			var marker 	= createMarker(point,name,html);
			map.addOverlay(marker);
			bounds.extend(point);
			
				
			var point 	= new GLatLng("50.926357","5.573673");
			var name 	= "Lieteberg";
			var html 	= "<div class='gmapinfowin'>" +
						  "<h2>Startpunt: Lieteberg</h2><p><a href='lieteberg/' >Bekijk dit startpunt.</a></p>" +
						  "</div>";
			var marker 	= createMarker(point,name,html);
			map.addOverlay(marker);
			bounds.extend(point);
			
				
			var point 	= new GLatLng("50.899570","5.662766");
			var name 	= "Pietersheim";
			var html 	= "<div class='gmapinfowin'>" +
						  "<h2>Startpunt: Pietersheim</h2><p><a href='pietersheim/' >Bekijk dit startpunt.</a></p>" +
						  "</div>";
			var marker 	= createMarker(point,name,html);
			map.addOverlay(marker);
			bounds.extend(point);
			
		
	map.setZoom(map.getBoundsZoomLevel(bounds));
	//map.setCenter(bounds.getCenter());
	
	
}
google.setOnLoadCallback(initializeOverview);