$(document).ready(function(){


    // Our very special jQuery JSON fucntion call to Flickr, gets details of the most recent 20 images			   
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=76466518@N00&tags=selected&lang=en-us&format=json&jsoncallback=?", displayImages);
    
    function displayImages(data) {																																   
    	// Randomly choose where to start. A random number between 0 and the number of photos we grabbed (20) minus 9 (we are displaying 9 photos).
    	var iStart = 0;	
    	
    	// Reset our counter to 0
    	var iCount = 0;								
    	
    	// Start putting together the HTML string
    	var htmlString = "";					
    	
    	// Now start cycling through our array of Flickr photo details
    	$.each(data.items, function(i,item){
    								
    		// Let's only display 9 photos (a 3x3 grid), starting from a random point in the feed					
    		if (iCount < 12) {
    			
    			// 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 += '<a href="' + (item.media.m).replace("_m.jpg", "_b.jpg") + '" class="lightbox" rel="example_group">';
    			htmlString += '<img src="' + sourceSquare + '" alt="' + item.title + '" title="' + item.title + '"/>';
    			htmlString += '</a>';
    		}
    		// Increase our counter by 1
    		iCount++;
    	});		
    	
    // Pop our HTML in the #images DIV	
    $('#feed').html(htmlString);
    
    $('a[rel="example_group"].lightbox').fancybox({
    	'transitionIn'	: 'elastic',
    	'transitionOut'	: 'elastic'
    	
    });
    
    // Close down the JSON function call
    }
           
  });