$(document).ready(function(){ //Start script when ready
	if (document.getElementById("map_canvas")) {//Checks to see that the page element exists and to prevent conflict with other maps
		
		//Default map center location 40.992336, -74.051971), 9
		var defaultLat = 40.992336;
		var defaultLon = -74.051971;
		var markers = new Array();
			markers[0] = new Array(new GMarker(new GLatLng(41.0086, -73.9389)), "$499,000", "<strong>Northvale, NJ</strong><br/>$499,000<br/><a title='Listing ID: 1047202' href='http://www.riovistanj.com/view_mls.php?id=1047202'>More Info...</a>");
			markers[1] = new Array(new GMarker(new GLatLng(41.0086, -73.9389)), "$470,000", "<strong>Northvale, NJ</strong><br/>$470,000<br/><a title='Listing ID: 1138622' href='http://www.riovistanj.com/view_mls.php?id=1138622'>More Info...</a>");
			markers[2] = new Array(new GMarker(new GLatLng(41.0086, -73.9389)), "$510,000", "<strong>Northvale, NJ</strong><br/>$510,000<br/><a title='Listing ID: 2936996' href='http://www.riovistanj.com/view_mls.php?id=2936996'>More Info...</a>");
			markers[3] = new Array(new GMarker(new GLatLng(41.0086, -73.9389)), "$899,000", "<strong>Northvale, NJ</strong><br/>$899,000<br/><a title='Listing ID: 2914574' href='http://www.riovistanj.com/view_mls.php?id=2914574'>More Info...</a>");
			markers[4] = new Array(new GMarker(new GLatLng(41.0086, -73.9389)), "$645,000", "<strong>Northvale, NJ</strong><br/>$645,000<br/><a title='Listing ID: 2914546' href='http://www.riovistanj.com/view_mls.php?id=2914546'>More Info...</a>");
			markers[5] = new Array(new GMarker(new GLatLng(40.9511, -73.9308)), "$3,975,000", "<strong>Alpine, NJ</strong><br/>$3,975,000<br/><a title='Listing ID: 1142188' href='http://www.riovistanj.com/view_mls.php?id=1142188'>More Info...</a>");
			markers[6] = new Array(new GMarker(new GLatLng(41.0086, -73.9389)), "$799,000", "<strong>Northvale, NJ</strong><br/>$799,000<br/><a title='Listing ID: 1047238' href='http://www.riovistanj.com/view_mls.php?id=1047238'>More Info...</a>");
			markers[7] = new Array(new GMarker(new GLatLng(41.0086, -73.9389)), "$460,000", "<strong>Northvale, NJ</strong><br/>$460,000<br/><a title='Listing ID: 2950041' href='http://www.riovistanj.com/view_mls.php?id=2950041'>More Info...</a>");
			markers[8] = new Array(new GMarker(new GLatLng(40.9238, -73.9989)), "$675,000", "<strong>Bergenfield, NJ</strong><br/>$675,000<br/><a title='Listing ID: 1109778' href='http://www.riovistanj.com/view_mls.php?id=1109778'>More Info...</a>");
			markers[9] = new Array(new GMarker(new GLatLng(41.0086, -73.9389)), "$745,000", "<strong>Northvale, NJ</strong><br/>$745,000<br/><a title='Listing ID: 1047242' href='http://www.riovistanj.com/view_mls.php?id=1047242'>More Info...</a>");
			markers[10] = new Array(new GMarker(new GLatLng(41.0086, -73.9389)), "$575,000", "<strong>Northvale, NJ</strong><br/>$575,000<br/><a title='Listing ID: 1012713' href='http://www.riovistanj.com/view_mls.php?id=1012713'>More Info...</a>");
		var map = new google.maps.Map2($("#map_canvas").get(0));//Initialise google maps
		map.setCenter(new GLatLng(defaultLat, defaultLon), 12);//Set location to the default and zoom level to 8
		map.disableDoubleClickZoom();//Disable zooming
		//This section works fine but does not animate on load
		/*
		$(markers).each(function(i,marker){
		   map.addOverlay(marker[0]);
			$("<li />")
				.html(markers[i][1])//Use list item label from array
				.click(function(){
					displayPoint(marker[0], i);
					setActive(this);//Show active state
					if ($('#map_message').is(':hidden')) {//Allow toggling of active state
						setActive();
					}
				})
				.appendTo("#map_list");
			
		    GEvent.addListener(marker[0], "click", function(){
				displayPoint(marker[0], i);
			    setActive(i);//Show active location
				if ($('#map_message').is(':hidden')) {//Allow toggling of active state
					setActive();
				}
			});
		});
		*/

		$.each(markers,function(i,marker){
			var delayTime = ((i * 3000) / (0.5 * markers.length));//Delay time decreases as number of markers increases
		
			setTimeout(function(){ 
				map.addOverlay(marker[0]);
				$("<li />")
					.html(markers[i][1])//Use list item label from array
					.click(function(){
						displayPoint(marker[0], i);
						setActive(this);//Show active state
					})
					.appendTo("#map_list");
			
				GEvent.addListener(marker[0], "click", function(){
					displayPoint(marker[0], i);
					setActive(i);//Show active location
				});
				
				displayPoint(marker[0], i);
				setActive(i);//Show active location
				if (i == (markers.length - 1)) {//If last item in array
					setTimeout(function(){//Remove active class and fade marker after delay
						$("#map_message").fadeOut();
						//setActive();
					}, 3500);
				}
			}, delayTime); 
		});
		
		$("#map_list").css("opacity","0.2").animate({opacity: 1}, 1100);//Fade in menu
		$("#map_message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
						
		function displayPoint(marker, index){
			if ($('#map_message').is(':hidden')) {//Allow toggling of markers
				$('#map_message').fadeIn();
			}
			else{//Remove all .active classes and hide markers
				$('#map_message').hide();
				$(".active").removeClass();
			}
			//$("#map_message").hide();//Default behaviour, doesn't allow toggling
			
			var moveEnd = GEvent.addListener(map, "moveend", function(){
				var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
				$("#map_message")
					.html(markers[index][2])//Use information from array
					.fadeIn()
					.css({ top:markerOffset.y, left:markerOffset.x });
			GEvent.removeListener(moveEnd);
			});
			map.panTo(marker.getLatLng());
		}	
		
		function setActive(el){
			$(".active").removeClass();//Remove all .active classes
			$("#map_list").find('li').eq(el).addClass('active');//Find list element equal to index number and set active
			$(el).addClass('active');//Set active if list element clicked directly
		}
	}//End if map_canvas exists
}); //End onReady