$('.page-map').live("pagecreate", function() {

	var lat = 52.132633,
		lng = 5.291266;
	
	if( navigator.geolocation ) {
			
		function gpsSuccess(pos){
		
			if( pos.coords ){ 
			
				lat = pos.coords.latitude;
				lng = pos.coords.longitude;
			
			} else {
			
				lat = pos.latitude;
				lng = pos.longitude;
				
			}
			
			addTarget(lat, lng, 999, 'Mijn positie');
			
			var darwin = new google.maps.LatLng(lat, lng);  
			
			map.setCenter(darwin);
			
			map.setZoom(10); 

		}	
		
		function gpsFail(){
			
		}
		
		navigator.geolocation.getCurrentPosition(gpsSuccess, gpsFail, {enableHighAccuracy:true, maximumAge: 300000});
	}

	var latlng = new google.maps.LatLng(lat, lng);
	var myOptions = {
	
		zoom: 7,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
		
    };
	
    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
	
	function addFlitser(lat, lng, i, html){

		addMarker(lat, lng, i, html, 'police.png')
	
	}
	
	function addTarget(lat, lng, i, html){
	
		addMarker(lat, lng, i, html, 'target.png')
	
	}
	
	function addMarker(lat, lng, i, html, markerIcon){
	
		var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
		
		var marker = new google.maps.Marker({

			map: map,
			position: point,
			title: 'title',
			icon: markerIcon
			
		});

		if(html != ''){
		
			var infowindow = new google.maps.InfoWindow();		
			
			google.maps.event.addListener(marker, 'click', (function(marker, i) { 
			
				return function() { 
					
					infowindow.setContent(html); 
					infowindow.open(map, marker); 

				} 
				
			})(marker, i)); 
		
		}
	
	}
	
	downloadUrl("xml.php?random=" + Math.floor(Math.random()*11111) + "&md5=" + $('#md5').val(), function(data){

		var xml = data.responseXML;
		var markers = xml.documentElement.getElementsByTagName("marker");
		
		for (var i = 0; i < markers.length; i++) {
		
			var lat = markers[i].getAttribute("lat");
			var lng = markers[i].getAttribute("lng");
			var wegnr = markers[i].getAttribute("wegnr");
			var tussen = markers[i].getAttribute("tussen");
			var hmp = markers[i].getAttribute("hmp");
			var bord = wegnr[0];
			
			if(bord == 'N'){
			
				var html = '<div style="background-color: #009933; color: #FFFFFF; padding: 10px; overflow: auto;">';
				
			
			} else if(bord == 'A'){
			
				var html = '<div style="background-color: #CC0000; color: #FFFFFF; padding: 10px; overflow: auto;">';
			
			} else {
			
				var html = '<div style="background-color: #FFFF00; color: #000000; padding: 10px; overflow: auto;">';
			
			}
			
			html += '<div style="float: left;">' + wegnr + '</div>';
			html += '<div style="float: right;">HMP ' + hmp + '</div>';
			
			html += '</div>';
			html += '<div style="padding: 10px;">' + tussen + '</div>';
			
			addFlitser(lat, lng, i, html);
			
		}
		
	});
	
	function downloadUrl(url, callback) {

		var request = window.ActiveXObject ?
		new ActiveXObject('Microsoft.XMLHTTP') :
		new XMLHttpRequest;

		request.onreadystatechange = function() {

			if (request.readyState == 4) {

				request.onreadystatechange = doNothing;
				
				callback(request, request.status);
				
			}

		};

		request.open('GET', url, true);

		request.send(null);

	}
			
	function doNothing(){
	
		// sleep
	
	}
	
	function canvas(){
	
		var height = $(document).height();
		height -= $('#header').height();
		height -= $('#footer').height();
		
		$('.page-map, .ui-content, #map-canvas').height(height + 'px');
	
	}
	
	canvas();
	
});