$(document).ready(function(){
	$("#map1").jmap('init', {'mapType':'map','mapCenter':[51.507778, -0.128056],'mapZoom':2},
		function (map, element, options){
			
		window.map = map;
		
		addMarkers();
		
		GEvent.addListener(map, "dragend", addMarkers);
		GEvent.addListener(map, "zoomend", addMarkers);
  });
});

function addMarkers(minlat,maxlat,minlon,maxlon) {
	window.map.clearOverlays();
	$.get("photoxml.obyx",
		{	"min-lat":map.getBounds().getSouthWest().lat(), 
			"max-lat":map.getBounds().getNorthEast().lat(), 
			"min-lon":map.getBounds().getSouthWest().lng(),
			"max-lon":map.getBounds().getNorthEast().lng()
		},
		function(data){
			$(data).find("photo").each(function(){
				var point = new GLatLng($(this).children("lat").text(),$(this).children("lng").text());
				window.map.addOverlay(createMarker(point,
					$(this).children("thumb").text(),
					$(this).children("large").text(),
					$(this).children("title").text(),
					$(this).children("description").text(),
					$(this).children("width").text(),
					$(this).children("height").text()));
			});
		});
}

var baseIcon = new GIcon(G_DEFAULT_ICON);
baseIcon.shadow = "";
baseIcon.iconSize = new GSize(45, 45);
baseIcon.iconAnchor = new GPoint(45, 45);
//baseIcon.infoWindowAnchor = new GPoint(9, 2);

// Creates a marker whose info window displays the letter corresponding
// to the given index.
function createMarker(point, thumb, large, title, description, width, height) {
  // Create a lettered icon for this point using our icon class
  var letteredIcon = new GIcon(baseIcon);
  letteredIcon.image = thumb;

  // Set up our GMarkerOptions object
  markerOptions = { icon:letteredIcon };
  var marker = new GMarker(point, markerOptions);

  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("<b>"+ title +"</b><br /><img width='"+ parseInt(width)*0.66 +"' height='"+ parseInt(height)*0.66 +"' src='"+ large +"' /><p>"+ description +"</p>");
  });
  return marker;
}