$(document).ready(function () {	
	var 
	speed = 600,   // animation speed
	$wall = $('#demo').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').bind('click',function(){		
		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;
    });											
});