/* Flickr photo search 
*  This script is free under GNU General Public License...which means you can 
*  freedom to run, copy, distribute, study, change and improve...go nuts...
*  By Brent Otterlei, Aug 2 2008
*
* -------------------------------------------------------------------------------
*
*  What does this script do?
*  Well, on load of your page it searches flickr.com for images and returns them.
*  You can specify the search string, tags, and image size, number of images
*  returned.
*
*  The Call:
*  getSearchResults(serchString, numOfImages );
*
*  serchString can be a text string containing your search
*  numOfImages is the number of returned images per call
*
*  TODO: serchTags is a coma separated list of search terms...this searches image tags
*  imgSize can be(I am currently mainually setting this...TODO: Throw this in the call):
*
*          s	small square 75x75
*          t	thumbnail, 100 on longest side
*          m	small, 240 on longest side
*          -	medium, 500 on longest side
*          b	large, 1024 on longest side (only exists for very large original images)
*          o	original image, either a jpg, gif or png, depending on source format
*
* -------------------------------------------------------------------------------
*
*  HOW TO USE:
*  First you need Prototype and Scriptaculous
*  You can find Prototype at: http://www.prototypejs.org/
*  And you can find Scriptaculous at: http://script.aculo.us/
*  Next pop this on your page (Might want to steal some of my css too...):
*
* -------------------------------------------------------------------------------
*
*  <div id="spinner">
*	  Loading images from Flickr...
*  </div>						
*  <div id="flikrHolder">
*		
*  </div>           
*
* -------------------------------------------------------------------------------
*
*  Next set up your call...
*  This creates your rest call and sends it out after the page loads...
*  Place this in the head section of your web page
*
* -------------------------------------------------------------------------------
*
*  <script type="text/javascript" charset="utf-8">
*  	document.observe("dom:loaded", function() {
*  		var serchString = 'cornerstone gardens sonoma wedding';
*       var perPage = '20';
*  		getSearchResults(serchString, perPage);
*  	});	
*  </script>
*
* -------------------------------------------------------------------------------
*
*  The serchString variable is your search string that you will use to query
*  the flickr search api 
*
* -------------------------------------------------------------------------------
*                                                                                 */

/* The FLICKRKEY variable below contains is my personal API key. Please get your own 
*  flickr key from http://www.flickr.com/services/api/keys/apply/ and replace my key 
*  They are free, and it is flikr's way of traking use the API...thanks           */

FLICKRKEY = "ad8a7202fdb53ac4dfec8235d8fbe185";

DATAHOLDER = "";

//You will want to change MYUSRID, because this id my user id, which means all of your
//searches will only look at my photos...
MYUSRID = "22964953@N08";

function createFlickerURL(searchTerms, perPage) {
	//constructs the flickr request URL
	var URL = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=" 
			  + FLICKRKEY + 
			  "&user_id="
			  + MYUSRID +
			  "&text=" 
			  + searchTerms + 
			  "&per_page="
			  + perPage +
			  "&format=json";
	return encodeURI(URL);
}

function getSearchResults(searchString, perPage) {
	//create the api request
    var flickrRequestURL = createFlickerURL(searchString, perPage);
    // grab and clear container content...
	$('flikrHolder').innerHTML = "";  
    // do the api request
    var script = document.createElement('script');
    script.src = flickrRequestURL;
    script.type = 'text/javascript';
    var head = document.getElementsByTagName('head').item(0);
    head.appendChild(script);
    return false;
}

/* * If a sucessful API response is received, display search data. If not, display an error. */ 
 function jsonFlickrApi(rsp) { 
	// Saves the data in a global variable for later use
	DATAHOLDER = rsp;
        //test to see if the api request worked
		if (rsp.stat != "ok"){
				alert(rsp.message);
			return;
		}
        //if we got a response, loop through the returned json object and pluck out the image links
		for (var i=0; i<rsp.photos.photo.length; i++){
			var photo = rsp.photos.photo[i];
			//create image tag and src link for the thumbnails
			var innerGoodStuff = document.createElement('img');
			innerGoodStuff.src = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_s.jpg";
			innerGoodStuff.id = photo.id + "_s";
			//TODO: Create the rollover image
			//var innerRollGoodStuff = document.createElement('img');
			//innerRollGoodStuff.src = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_m.jpg";
			//innerRollGoodStuff.id = photo.id + "_m";
			
			//remove border from images
			innerGoodStuff.setStyle({
				border: 'none'
			});
			//create the link
			var linkContainer = document.createElement('a');
			linkContainer.href = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_m.jpg";
			linkContainer.target = "_blank";
			//pop the image into the flikrHolder div
			linkContainer.appendChild(innerGoodStuff);
			$('flikrHolder').appendChild(linkContainer);
			//$('flikrHolder').appendChild(innerRollGoodStuff);
		}
	$('spinner').toggle();
}