<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Flickr Photo Mapplet"
             description="Show Flickr Photos in the current Area. You may also search for any term to filter the result."
             author="Martin Kleppe"
			 author_photo="http://farm1.static.flickr.com/3/buddyicons/67479252@N00.jpg"
			 author_link="http://labs.sumaato.net/tools/flickr_mapplet/"
             author_email="kleppe@gmail.com"
             author_affiliation="Ubilabs - Location Based Media"
             author_location="Hamburg, Germany"
             screenshot="http://labs.sumaato.net/tools/flickr_mapplet/img/flickr_mapplet_preview.png"
             thumbnail="http://labs.sumaato.net/tools/flickr_mapplet/img/flickr_mapplet_thumb.png"
             height="140">
	<Require feature="sharedmap"/>
	<Require feature="analytics"/>
</ModulePrefs>
<Content type="html"><![CDATA[

<style type="text/css">
 
	body {
		font-size: 12px;
	}
	
	form {
		margin:0;
		padding:4px;
	}
	
</style>
  
Search Flickr photos:<br/>
<form action="#" id="form">
	<input type="text" id="text" value=""/>
	<input type="button" value="Search"/ id="show" onclick="loc.alize.me.find();"/>
</form>
<cite id="loading">Loading...</cite>
<script type="text/javascript" src="http://alize.us/static/scripts/com.yahoo/jsr.js"></script>

<script>

	var url = "http://api.flickr.com/services/feeds/geo/?id=67479252@N00";

	var loc = {alize:{}};
	
	loc.alize.me = {
	
		map: null,
		items: null,
		userId: null,
		bounds: null,
	
		init: function(){
			
			this.map = new GMap2();
			
			var _this = this;
			
			GEvent.addDomListener(document.getElementById("form"), "submit", function(event) {
				
				if (event.preventDefault) {
					event.preventDefault();
					event.stopPropagation();
				} else {
					event.returnValue = false;
					event.cancelBubble = true;
				}
				
				_this.find();
			});
			
			GEvent.addListener(this.map, "dragend", function(){
				
				_this.checkBounds();
			});
			
			GEvent.addListener(this.map, "zoomend", function(){
				
				_this.checkBounds();
			});
			
			this.checkBounds();
		},
		
		checkBounds: function(){
			
			var _this = this;
			
			this.map.getBoundsAsync(function(bounds){
				
				_this.updateBounds(bounds);
			});			
		},
		
		updateBounds: function(bounds){
			
			this.bounds = bounds;
			this.find();
		},
		
		find: function(){
			
			var url = "http://api.flickr.com/services/rest/?accuracy=1&page=1&per_page=30&extras=%20owner_name,%20icon_server,%20geo&min_upload_date=1&src=loc.alize.us&api_key=9b629a5deea5f5e9423ddab9eebca3be&method=flickr.photos.search&sort=interestingness-desc";
			
			var minLng, maxLng, minLat, maxLat;
			
			var b = this.bounds;
						
			var sw = b.getSouthWest();
			var ne = b.getNorthEast();
			
			if (b.isFullLng()){
				
				minLng = -180;
				maxLng =  180;
				
			} else {
			
				minLng = sw.lng();
				maxLng = ne.lng();
				
				if (maxLng < minLng) {
					
					if (Math.abs(minLng) < Math.abs(maxLng)){
						
						maxLng = 180;
						
					} else {
						
						minLng = -180;
					}
				}			
			}
			
			if (b.isFullLat()){
				
				minLat = -90;
				maxLat =  90;
				
			} else {
			
				minLat = sw.lat();
				maxLat = ne.lat();
			}
	
			var bbox = minLng + "," + minLat + "," +  maxLng + "," +  maxLat;
			
			url += "&bbox=" + bbox;
			
			var query = document.getElementById("text").value;
			
			if (query){
					
				url += "&text=" + encodeURIComponent(query);
			};
			
			_IG_FetchContent(url + "&format=json", this.response);
			
			document.getElementById("loading").innerHTML = "Loading...";		
		},
		
		getUserID: function(){
			
			var url = "http://api.flickr.com/services/rest/?api_key=9b629a5deea5f5e9423ddab9eebca3be&format=json&method=flickr.people.findByUsername";
			url += "&username=" + document.getElementById("username").value;			

			_IG_FetchXmlContent(url + "&format=json", this.response);
		},
		
		load: function(){

			var url = "http://api.flickr.com/services/rest/?bbox=-180,-90,180,90&accuracy=1&page=1&per_page=30&extras=%20owner_name,%20icon_server,%20geo&min_upload_date=1&src=loc.alize.us&api_key=9b629a5deea5f5e9423ddab9eebca3be&method=flickr.photos.search";
					
			url += "&user_id=" + this.userId;
			
			_IG_FetchXmlContent(url + "&format=json", this.response);
		},
		
		response: function(response){
			
			document.getElementById("loading").innerHTML = "Photos loaded...";
			eval(response);
		},
		
		createMarker: function(point, item){
			
			var marker = new GMarker(point);
			
			var html = "<div style='width:240px; font-size:12px;'>";
			html += "<b style='margin-bottom:4px;display:block;'>" + item.title + "</b>";
			html += "<img src='http://farm" + item.farm + ".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + "_m.jpg' /><br />";
			html += "<i>Posted by " + item.ownername +".</i><br />";
			html += "<a href='http://www.flickr.com/photo.gne?id=" + item.id + "' target='_blank'>";			
			html += "View this photo page.</a>";
			html += "</div>";
		
		//	html = '<img src="http://www.google.com/intl/en_ALL/images/maps_results_logo.gif" alt="image" />' ;
					
			GEvent.addListener(marker, "click", function() {
				marker.openInfoWindowHtml(html, {disableGoogleLinks:true});
			});
			
			this.map.addOverlay(marker);
			
			return marker;	
		},
		
		draw: function(result){
			
			var photos = result.photos;
			
			document.getElementById("loading").innerHTML = "No photos in this area."
			
			this.map.clearOverlays();
			
			this.map.closeInfoWindow();
			
			if (photos.photo && photos.photo.length > 0) {
				
				document.getElementById("loading").innerHTML = photos.total + " photos found.";
				
				for (var i=0; i < photos.photo.length; i++){
					
					var photo = photos.photo[i];
				
					var point = new GLatLng(photo.latitude, photo.longitude); 
					
					var marker = this.createMarker(point, photo);
							
					this.map.addOverlay(marker);
				}
			}
		},
			
		onData: function(data){
					
			this.items = data;
			
			if (this.map){
				
				this.draw();
			}
		}
	};
	
	
	var jsonFlickrApi = function(response){
		
		document.getElementById("loading").innerHTML = "Parsing result...";
		
		if (response && response.stat && response.stat == "fail") {
		
			document.getElementById("loading").innerHTML = "Error: " + response.message;
			
		} else {
			
			loc.alize.me.draw(response);
		}
		
	};
	
	loc.alize.me.init();
	
	_IG_Analytics("UA-57649-1", "/mapplet/flickr/");

</script>

]]></Content>
</Module>
