$(document).ready(function(){

	google.maps.LatLng.prototype.distanceFrom = function(newLatLng) {
	   // setup our variables
	   var lat1 = this.lat();
	   var radianLat1 = lat1 * ( Math.PI  / 180 );
	   var lng1 = this.lng();
	   var radianLng1 = lng1 * ( Math.PI  / 180 );
	   var lat2 = newLatLng.lat();
	   var radianLat2 = lat2 * ( Math.PI  / 180 );
	   var lng2 = newLatLng.lng();
	   var radianLng2 = lng2 * ( Math.PI  / 180 );
	   // sort out the radius, MILES or KM?
	   var earth_radius = 6378.1; // (km = 6378.1) OR (miles = 3959) - radius of the earth
	 
	   // sort our the differences
	   var diffLat =  ( radianLat1 - radianLat2 );
	   var diffLng =  ( radianLng1 - radianLng2 );
	   // put on a wave (hey the earth is round after all)
	   var sinLat = Math.sin( diffLat / 2  );
	   var sinLng = Math.sin( diffLng / 2  ); 
	 
	   // maths - borrowed from http://www.opensourceconnections.com/wp-content/uploads/2009/02/clientsidehaversinecalculation.html
	   var a = Math.pow(sinLat, 2.0) + Math.cos(radianLat1) * Math.cos(radianLat2) * Math.pow(sinLng, 2.0);
	 
	   // work out the distance
	   var distance = earth_radius * 2 * Math.asin(Math.min(1, Math.sqrt(a)));
	 
	   // return the distance
	   return distance;
	}   


    
	var container = document.getElementById("mainMap");
	
	var userLocation = jQuery.parseJSON($("#userLocationData").text());
	

		
	if (userLocation && userLocation.latitude)
	{
		var mapPos = new google.maps.LatLng(userLocation.latitude, userLocation.longitude);
		var mapOptions = {
			zoom: 10,
			center: mapPos,
			mapTypeControl: true,
			scaleControl: true,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			scrollwheel: false,
		}	
		var map = new google.maps.Map(container, mapOptions);
		var image = new google.maps.MarkerImage('/images/miniflag.png',
			new google.maps.Size(29, 35),
			new google.maps.Point(0,0),
			new google.maps.Point(15, 35));
		var shadow = new google.maps.MarkerImage('/images/miniflag-shadow.png',
			new google.maps.Size(60, 35),
			new google.maps.Point(0,0),
			new google.maps.Point(15, 35));		


		var bounds = new google.maps.LatLngBounds();
		var p = 0;
		var markers = [];
		
		var infowindow = null;

		var mapData = $.getJSON("/?do=mapData", function(data){
			
			$.each(data.map, function(key, event){
				
				var eventPos = new google.maps.LatLng(parseFloat(event.latitude), parseFloat(event.longitude));
				var marker = new google.maps.Marker({
					position: eventPos,
					map: map,
					icon: image,
					shadow: shadow,
					title: event.title
					
				});
			    google.maps.event.addListener(marker, 'click', function() {
					if (infowindow)
					{
						infowindow.close();
					}
				    infowindow = new google.maps.InfoWindow({
				        content: '<h3><a href="/' + event.url + '">' + event.title + '</a></h3>' + '<p>' + event.from + '</p>'
				    });
			    	infowindow.open(map,marker);
			      
			    });
			    
			    var distance = mapPos.distanceFrom(eventPos);
			    
			    //console.log(distance);
			    
			    if (distance < 50 || p < 6)
			    {
					bounds.extend(eventPos);
					map.fitBounds(bounds);
					//console.log(bounds);
					//map.setZoom(10);
			    }
			    
			    markers.push(marker);
							    
			    p++;
			    
			});		
			
			var markerClusterer = new MarkerClusterer(map, markers, {
			  maxZoom: 14,
			  gridSize: 18,
			  styles: [{
		        url: '/images/miniflag-cluster.png',
		        height: 35,
		        width: 29,
		        anchor: [5, 10],
		        textColor: '#ffffff',
		        textSize: 15
		      }]
			});		
		
		});
		

		
					
	}
});