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());
			//map.addControl(new StreetViewControl());
			
			// 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";
		map.addControl(new StreetViewControl());
		
	
	var kml = new GGeoXml("http://www.rlkm.be//uploads/kml/perimeter_KB_2008_aangepast_2009_3_16_13_54.KML?1328356989", 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("51.115768","5.635943");
			var name 	= "Itterdal";
			var html 	= "<div class='gmapinfowin'>" +
						  "<h2>Startpunt: Itterdal</h2><p><a href='itterdal/' >Bekijk dit startpunt.</a></p>" +
						  "</div>";
			var marker 	= createMarker(point,name,html);
			map.addOverlay(marker);
			bounds.extend(point);
			
				
			var point 	= new GLatLng("51.198978","5.632939");
			var name 	= "Smeetshof";
			var html 	= "<div class='gmapinfowin'>" +
						  "<h2>Startpunt: Smeetshof</h2><p><a href='smeetshof/' >Bekijk dit startpunt.</a></p>" +
						  "</div>";
			var marker 	= createMarker(point,name,html);
			map.addOverlay(marker);
			bounds.extend(point);
			
				
			var point 	= new GLatLng("51.161716","5.745292");
			var name 	= "Zig en Goort";
			var html 	= "<div class='gmapinfowin'>" +
						  "<h2>Startpunt: Zig en Goort</h2><p><a href='zig-en-goort/' >Bekijk dit startpunt.</a></p>" +
						  "</div>";
			var marker 	= createMarker(point,name,html);
			map.addOverlay(marker);
			bounds.extend(point);
			
				
			var point 	= new GLatLng("51.159592","5.698686");
			var name 	= "Stramprooierbroek";
			var html 	= "<div class='gmapinfowin'>" +
						  "<h2>Startpunt: Stramprooierbroek</h2><p><a href='stramprooierbroek/' >Bekijk dit startpunt.</a></p>" +
						  "</div>";
			var marker 	= createMarker(point,name,html);
			map.addOverlay(marker);
			bounds.extend(point);
			
				
			var point 	= new GLatLng("51.175522","5.663366");
			var name 	= "St.-Maartensheide - De Luysen";
			var html 	= "<div class='gmapinfowin'>" +
						  "<h2>Startpunt: St.-Maartensheide - De Luysen</h2><p><a href='st-maartensheide-de-luysen/' >Bekijk dit startpunt.</a></p>" +
						  "</div>";
			var marker 	= createMarker(point,name,html);
			map.addOverlay(marker);
			bounds.extend(point);
			
				
			var point 	= new GLatLng("51.213120","5.574188");
			var name 	= "De Kempen";
			var html 	= "<div class='gmapinfowin'>" +
						  "<h2>Startpunt: De Kempen</h2><p><a href='de-kempen/' >Bekijk dit startpunt.</a></p>" +
						  "</div>";
			var marker 	= createMarker(point,name,html);
			map.addOverlay(marker);
			bounds.extend(point);
			
				
			var point 	= new GLatLng("51.096622","5.756643");
			var name 	= "Tösch-Langeren";
			var html 	= "<div class='gmapinfowin'>" +
						  "<h2>Startpunt: Tösch-Langeren</h2><p><a href='t/' >Bekijk dit startpunt.</a></p>" +
						  "</div>";
			var marker 	= createMarker(point,name,html);
			map.addOverlay(marker);
			bounds.extend(point);
			
				
			var point 	= new GLatLng("51.224358","5.607362");
			var name 	= "Laurabossen";
			var html 	= "<div class='gmapinfowin'>" +
						  "<h2>Startpunt: Laurabossen</h2><p><a href='laurabossen/' >Bekijk dit startpunt.</a></p>" +
						  "</div>";
			var marker 	= createMarker(point,name,html);
			map.addOverlay(marker);
			bounds.extend(point);
			
				
			var point 	= new GLatLng("51.244110","5.668457");
			var name 	= "IJzeren Man";
			var html 	= "<div class='gmapinfowin'>" +
						  "<h2>Startpunt: IJzeren Man</h2><p><a href='ijzeren-man/' >Bekijk dit startpunt.</a></p>" +
						  "</div>";
			var marker 	= createMarker(point,name,html);
			map.addOverlay(marker);
			bounds.extend(point);
			
				
			var point 	= new GLatLng("51.212879","5.731038");
			var name 	= "Ommetje Romeinse Brug";
			var html 	= "<div class='gmapinfowin'>" +
						  "<h2>Startpunt: Ommetje Romeinse Brug</h2><p><a href='ommetje-romeinse-brug/' >Bekijk dit startpunt.</a></p>" +
						  "</div>";
			var marker 	= createMarker(point,name,html);
			map.addOverlay(marker);
			bounds.extend(point);
			
				
			var point 	= new GLatLng("51.298958","5.678473");
			var name 	= "Weerterbos en Hugterheide";
			var html 	= "<div class='gmapinfowin'>" +
						  "<h2>Startpunt: Weerterbos en Hugterheide</h2><p><a href='weerterbos-en-hugterheide/' >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);