$(document).ready(function() 
{	
		var container = $("#map")[0];
		var site = base_url;
		var bounds = new GLatLngBounds();
		var markers = [];
		var i = 0;
		
				
		function displayPoint(marker, index){
			$("#window").hide();
			
			var moveEnd = GEvent.addListener(map, "moveend", function(){
				var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
				$("#window")
					.fadeIn()
					.css({ top:markerOffset.y-50, left:markerOffset.x-30});
			
				GEvent.removeListener(moveEnd);
			});
			map.panTo(marker.getLatLng());
		}

		
		if (GBrowserIsCompatible()) 
		{
			if(container)
			{
				var map = new GMap2(document.getElementById("map"));	
				map.addControl(new GLargeMapControl3D());
				map.addControl(new GMapTypeControl());
				map.addControl(new GScaleControl());
				map.setCenter(new GLatLng(0, 0), 0);
				$("#window").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
			}
			
			$.ajax({type:"GET", url:site+"public/xml/markers.xml", dataType:"xml",
			success:function(data, status) 
			{	
				$("data", data).each(function()
				{
					var lat = $(this).attr('lat');
					var lng = $(this).attr('lng');
					var project = $(this).attr('project');
					var address = $(this).attr('address');
					var point = new GLatLng(lat, lng);
					
					var tinyIcon = new GIcon();
					tinyIcon.image = site+"public/images/markers/project.png";
					tinyIcon.iconSize = new GSize(100, 30);
					tinyIcon.iconAnchor = new GPoint(12, 12);
					tinyIcon.infoWindowAnchor = new GPoint(12, 2);

					var marker = new GMarker(point, {icon:tinyIcon});
					map.addOverlay(marker);
					
					GEvent.addListener(marker, "click", function() {
						$("#window #messageHolder").empty().append(project);
						displayPoint(marker, i);
					});
					
				});
				
				$("set",data).each(function() 
				{
					var lat    = $(this).attr('latitude');
					var lng    = $(this).attr('longitude');
					var link   = $(this).attr('link');
					var image   = $(this).attr('image');
					var description   = $(this).attr('description');
					var rating = $(this).attr('rating');
					var title   = $(this).attr('title');
					var address   = $(this).attr('address');
					var point  = new GLatLng(lat,lng);
					var distance = $(this).attr('distance');
					
					var tinyIcon = new GIcon();
					tinyIcon.image = site+"public/images/markers/marker.png";
					tinyIcon.iconSize = new GSize(20, 20);
					tinyIcon.iconAnchor = new GPoint(10, 18);
					tinyIcon.infoWindowAnchor = new GPoint(18, 2);
					var marker = new GMarker(point, {icon:tinyIcon});
				
	
					markers[i] = marker;
					map.addOverlay(marker);
					bounds.extend(point);
					map.setZoom(map.getBoundsZoomLevel(bounds));
					map.setCenter(bounds.getCenter());
					
					$("<div/>")
						.html((i+1) + ". <b>" +title + "</b><img src=\"" + site + "public/images/booknow.png\"/>" + "<a href="+link+"?&rel=nofollow><i>Book Now!</i></a>" + "<br/><small>" + "<img src=\"" + site + "public/images/rating/"+rating+"-trans.png\"/>&nbsp;&nbsp;&nbsp;" + distance +"</small><br/><br/>")		
						/*.html("<div class=\"hspace\"><div class=\"space\">"+(i+1)+ ". <b>" + title + "</b></div>" + "<div class=\"space\">"+rating+".0 "+ "<img src=\"" + site + "public/images/star.png\"/>" + "</div>" + "<div class=\"space\">"+distance+"</div></div>")*/

						.click(function()
							{
								map.panTo(marker.getLatLng()); 
								$("#messageHolder").empty().append('<h3>'+title+'</h3>' + '<div class="marker"><div class="himage"><img src="'+image+'"/></div><div class="htext"><p>'+address+'</p><img src="'+site+'public/images/rating/'+rating+'-trans.png\"/><br/><a href="'+link+'">Reservation</a><p class="distance">'+distance+'</p></div></div><div class="description"><p>'+description+'</p><a href="'+link+'">learn more</a></div>');
							displayPoint(marker, i);
								})
							
						  .appendTo("#list"); 
					
						
						GEvent.addListener(marker, "click", function(){
							$("#messageHolder").empty().append('<h3>'+title+'</h3>' + '<div class="marker"><div class="himage"><img src="'+image+'"/></div><div class="htext"><p>'+address+'</p><img src="'+site+'public/images/rating/'+rating+'-trans.png\"/><br/><a href="'+link+'">Reservation</a><p class="distance">'+distance+'</p></div></div><div class="description"><p>'+description+'</p><a href="'+link+'">learn more</a></div>');
							displayPoint(marker, i);
							
						});
						
						GEvent.addListener(map, "click", function(){
							$("#window").css("display", "none");
						});
						
						
					
					i++;
					
					return marker;
					
				});
				
			},

			error:function(XMLHTTPRequest, status, errorThrow)
			{
				//alert("There was an error retrieving the marker information.");
			}});
		}
	});
		
	$(document.body).unload(function()
	{
		if (GBrowserIsCompatible()) 
		{
			GUnload();
		}
	});
	


