// JavaScript Document
// Don't execute any code until the DOM is ready!
$(document).ready(function(){					
						   
	// jQuery JSON fucntion call to Flickr, gets details of the most recent 20 images			   
	$.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157614008009260&nsid=11593935@N05&lang=en-us&format=json&jsoncallback=?", function(data){
																																   
		// Start at first photo).
		var iStart = -1;
		
		// Reset our counter to 0
		var iCount = 0;								
		
		// Start putting together the HTML string
		var htmlString = "<ul>";					
		
		// Now start cycling through our array of Flickr photo details
		$.each(data.items, function(i,item){
									
			// Display all photos					
			if (iCount > iStart && iCount < (iStart + 21)) {
				
				// I only want the ickle square thumbnails
				var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");		
				
				// Here's where we piece together the HTML
				htmlString += '<li><a href="' + item.link + '" target="_blank">';
				htmlString += '<img src="' + sourceSquare + '" alt="' + item.title + '" title="' + item.title + '"/>';
				htmlString += '</a></li>';
			}
			// Increase our counter by 1
			iCount++;
		});		
		
	// Pop our HTML in the #images DIV	
	$('#images').html(htmlString + "</ul>");
	
	// Close down the JSON function call
	});
	
// The end of our jQuery function	
});