$(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/photoset.gne?set=72157622770613092&nsid=28210115@N02&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){
                                   
            
               
                
                var sourceSquare = item.media.m;   
				var description = item.title
			
               
                // Here's where we piece together the HTML
                htmlString += '<div class=\"newBook\"><a href="' + item.link + '" target="_blank">';
                htmlString += '<img src="' + sourceSquare + '" alt="' + item.title + '" title="' + item.title + '"/>';
                htmlString += '</a><span class=\"bookTitle\">'+ description +'</div>';
            
            // Increase our counter by 1
         
        });       
       
    // Pop our HTML in the #images DIV   
    $('#images').html(htmlString + "</ul>");
   
    // Close down the JSON function call
    }
   
// The end of our jQuery function   
});
