/* This JS requires jQuery to be include beforehand
 * Copyright 2010 Ingo Lütkebohle.
 * use as you wish, but don't blame me.
 * 
 * To use it, put a "map_canvas" element in your code, that will provide the map.
 * Then do a getJSON call on flickrAPI to populate with images.
 */

var map = null;
function loadMap(kmlURL, mapID) {
	var latlng = new google.maps.LatLng(37.312036, -8.551556);
   var myOptions = {
	   zoom: 8,
   	center: latlng,
   	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
 	map = new google.maps.Map(document.getElementById(mapID), myOptions);

	if(kmlURL) {
		var kml = new google.maps.KmlLayer(kmlURL);
 		kml.setMap(map);
 	}
 	return map;
}

  	function jsonFlickrApi(data) {
  		var owner = data.photoset.owner;
		$.each(data.photoset.photo, function(i, item) {
		if(item.latitude != 0) {				
			var imgLL = new google.maps.LatLng(item.latitude, item.longitude);
			/*var marker = new google.maps.Marker({
				position: imgLL,
				map: map,
				title: item.title
			});*/

			var part = 0.002;
			var sw = new google.maps.LatLng(item.latitude, item.longitude);
			var ratio = item.width_t / item.height_t;
			var ratio2 = item.height_t / item.width_t;	
			var ne = new google.maps.LatLng(item.latitude + part, item.longitude + (part * ratio));
			var imgBounds = new google.maps.LatLngBounds(sw, ne);
																					
			var img = new google.maps.GroundOverlay(item.url_t, imgBounds, { clickable: true});
			img.setMap(map);				
			
			var infoWindow = new google.maps.InfoWindow();
			google.maps.event.addListener(img, 'click', function(e) {
				infoWindow.setContent("<div><a href=\"http://flickr.com/photos/" + 
					owner + "/" + item.id + "\"><img border=\"0\" src=\"" + 
					item.url_s + "\" alt=\"" + item.title + "\"/></div>");
				infoWindow.setPosition(ne);					
				infoWindow.open(map);
			});

			//$("#images").append("<li>" + item.id + "</li>");
		}
	});
}