var punten = new Array();

function load() {
	var start = 0;
	var clickPunt = -1;

	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		var menu = document.getElementById("menu");
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		map.addControl(new GScaleControl());
		map.setCenter(new GLatLng(52.1956, 5.3885), 7);
		process_it = function(doc)  {
			var xmlDoc = GXml.parse(doc)
			var placemarks = xmlDoc.documentElement.getElementsByTagName("Placemark");
			for (var i = 0; i < placemarks.length; i++) {
				var lng, lat;
				var coords=GXml.value(placemarks[i].getElementsByTagName("coordinates")[0]);
				if (coords) {
					var c = coords.split(",");
					lng = parseFloat(c[0]);
					lat = parseFloat(c[1]);
				} else {
					lng = parseFloat(placemarks[i].getElementsByTagName("longitude")[0].childNodes[0].data);
					lat = parseFloat(placemarks[i].getElementsByTagName("latitude")[0].childNodes[0].data);
				}
				var point = new GLatLng(lat, lng);
				//    					if (!i) map.setCenter(point, 13);
				var names = placemarks[i].getElementsByTagName("name");
				var name = names.length ? names[0].childNodes[0].data : '';
				var descs = placemarks[i].getElementsByTagName("description");
				var desc = descs.length ? descs[0].childNodes[0].data : '';
				//    					alert(desc);
				var marker = new createMarker(map, point, i, name, desc);
				map.addOverlay(marker);
			}
			// navigatie
			if (start>0) {
				var f = function() { volgende(); }
				var li = document.createElement("button");
				li.innerHTML = 'heden';
				li.onmousedown = f;
				menu.appendChild(li);
			}

			var f = function() { next(); }
			var li = document.createElement("button");
			li.innerHTML = '&larr;';
			li.onmousedown = f;
			menu.appendChild(li);

			var f = function() { prev(); }
			var li = document.createElement("button");
			li.innerHTML = '&rarr;';
			li.onmousedown = f;
			menu.appendChild(li);

			if (i==25) {
				var f = function() { vorige(); }
				var li = document.createElement("button");
				li.innerHTML = 'verleden';
				li.onmousedown = f;
				menu.appendChild(li);
			}


		}
		GDownloadUrl("googleEarth.php?order=moblog&moblogger="+moblogger+"&RANDOM= "+Math.random(),process_it);
		prev = function() {
			if (clickPunt<24) {
				clickPunt = clickPunt +1;
			}
			punten[clickPunt]();
		}
		next = function() {
			if (clickPunt>0) {
				clickPunt = clickPunt -1;
			}
			punten[clickPunt]();
		}
		wisMap = function() {
			map.clearOverlays();
			menu.innerHTML = '';
		}

		vorige = function() {
			start = start +25;
			clickPunt = -1;

			wisMap();
			GDownloadUrl("googleEarth.php?order=moblog&moblogger="+moblogger+"&at="+start+"&RANDOM= "+Math.random(),process_it);
		}
		volgende = function() {
			start = start -25;
			clickPunt = -1;
			wisMap();
			GDownloadUrl("googleEarth.php?order=moblog&moblogger="+moblogger+"&at="+start+"&RANDOM= "+Math.random(),process_it);
		}

	}
}
function createMarker(map,point, index, name, desc) {
	var menu = document.getElementById("menu");
	var baseIcon = new GIcon();
	baseIcon.image = "/images/mobmob.png";
	baseIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	baseIcon.iconSize = new GSize(18, 20);
	baseIcon.shadowSize = new GSize(22, 20);
	baseIcon.iconAnchor = new GPoint(6, 20);
	baseIcon.infoWindowAnchor = new GPoint(5, 1);
	var letter = String.fromCharCode("A".charCodeAt(0) + index);
	var marker = new GMarker(point, baseIcon);
	var msg = name ? '<b>' + name + '</b>' + (desc ? '<p>' + desc + '</p>' : '') : 'Marker <b>' + letter + '</b>';
	msg = '<div class="popup">' + msg + '</div>';

	var li = document.createElement("li");
	li.innerHTML = '<img src="/images/moblog.png" alt="" width="12" height="12" border="0" align="left">&nbsp;' + name + " ";

	var f = function() { marker.openInfoWindowHtml(msg); map.setZoom(13); li.style.background = '#DDE'; };
	var g = function() { li.style.background = 'transparent'; }
	GEvent.addListener(marker, "click", f);
	GEvent.addListener(marker, "infowindowclose", g);
	li.onmousedown = f;
	li.onmouseover = function() { li.style.marginLeft = '0px'; }
	li.onmouseout = function() { li.style.marginLeft = '0px'; }

	menu.appendChild(li);

	punten[index] = function() { marker.openInfoWindowHtml(msg); map.setZoom(13);  }
	return marker;
}