// masonry
 
$(window).load(function(){


            var 
                speed = 1000,   // animation speed
                $wall = $('#primary')
            ;

            $wall.masonry({
                columnWidth: 100, 
                itemSelector: '.box',
                animate: true,
                animationOptions: {
                    duration: speed,
                    queue: false
                }
            });

        });


$(window).load(function(){


            var 
                speed = 1000,   // animation speed
                $wall = $('#filtering')
            ;

            $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(){
                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;
            });

        });