// Don't execute any code until the DOM is ready!
$(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/groups_pool.gne?id=781330@N24&lang=en-us&format=json&jsoncallback=?", function (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 = Math.floor(Math.random() * (11));

        // 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) {

            // Let's only display 9 photos (a 3x3 grid), starting from a random point in the feed					
            if (iCount > iStart && iCount < (iStart + 10)) {

                // I only want the ickle square thumbnails
                var sourceSquare = (item.media.m);
                // Here's where we piece together the HTML
                htmlString += '<li><span class="image"><a href="' + item.link + '" target="_blank">';
                htmlString += '<img src="' + sourceSquare + '" alt="' + item.title + '" title="' + item.title + '"/>';
                htmlString += '</a></span>';
                htmlString += '<span class="title">' + item.title + '</span>';
                htmlString += '</li>';
            }
            // Increase our counter by 
            iCount++;
        });
        $('#flickr-photos').html(htmlString + "</ul>");

        // Close down the JSON function call
    });

    // The end of our jQuery function	
});