// $('#wrapper').masonry({ columnWidth: 200 });

// $(function(){
//   $('#twitter').masonry({
//     singleMode: true,
//     columnWidth: 120,
//     itemSelector: '.box'
//   });
// })


// Our very special jQuery JSON fucntion call to Flickr, gets details
// of the most recent 20 images

$.getJSON("http://api.flickr.com/services/feeds/?id=80529924@N00=en-us&format=json&jsoncallback=?", displayImages);

function displayImages(data) {

    // Start putting together the HTML string
    var htmlString = "";
    
    // Now start cycling through our array of Flickr photo details
    $.each(data.items, function(i,item){
    
        // 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 title="' + item.title + '" src="' + sourceSquare;
        htmlString += '" alt="'; htmlString += item.title + '" />';
        htmlString += '</a></li>';
    
    });
    
    // Pop our HTML in the #images DIV
    $('#images').html(htmlString);
    
    // Close down the JSON function call
}

// $('#wrapper').masonry({
// 
//     singleMode: false,
//     // Disables measuring the width of each floated element.
//     // Set to true if floated elements have the same width.
//     // default: false
// 
//     columnWidth: 240,
//     // Width in pixels of 1 column of your grid.
//     // default: outer width of the first floated element.
// 
//     itemSelector: '.box:visible',
//     // Additional selector to specify which elements inside
//     // the wrapping element will be rearranged.
//     // Required for Infinite Scroll with window resizing.
// 
//     resizeable: true,
//     // Binds a Masonry call to window resizes.
//     // default: true
// 
//     appendedContent: $('.new_content'),
//     // Additional container element for appended content.
//     // Useful for Infinite Scroll integration.
// 
//     saveOptions: true,
//     // Masonry will use the options from previous Masonry
//     // calls by default, so you only have to enter in options once
//     // default: true
// 
// },  function() {}
//     // Optional callback.
//     // 'this' will refer to the applicable elements Masonry just rearranged
// 
// );