$(function(){

var 
speed = 600,   // animation speed
$wall = $('#content').find('.wrap')
;

$wall.masonry({
columnWidth: 100, 
// only apply masonry layout to visible elements
itemSelector: '.box:not(.invis)',
animate: true,
animationOptions: {
duration: speed,
queue: false
}
});

$('#filtering-nav a').click(function(){
    
    $('#filtering-nav li').removeClass('selected');
    
    $(this).parent().addClass('selected');
    
    var colorClass = '.' + $(this).attr('class');

    if(colorClass=='.all') {
        // show all hidden boxes
        $wall.children('.invis').toggleClass('invis').fadeIn(speed);
    } else {  
        // hide visible boxes 
        $wall.children().not(colorClass).not('.invis')
        .toggleClass('invis').fadeOut(speed);
        // show hidden boxes
        $wall.children(colorClass+'.invis')
        .toggleClass('invis').fadeIn(speed);
    }
    $wall.masonry();

    return false;
});

});