( function ( $ ) { $( document ).ready( function () {

// animation speed
var speed = 300;

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

$( '#global-area a[href^="#"]' ).bind
(
    'click', function ( event )
    {
        var colorClass = '.' + $( this ).attr( 'class' );

        if ( colorClass == '.all' )
        {
            // show all hidden boxes
            $( '#primary' ).children( '.invis' ).toggleClass( 'invis' ).animate( { opacity : 1 }, { duration : speed } );
        }

        if ( colorClass != '.all' )
        {
            // hide visible boxes 
            $( '#primary' ).children().not( colorClass ).not( '.invis' ).not( '#global-area' ).toggleClass( 'invis' ).animate( { opacity : 0 }, { duration : speed } );
            // show hidden boxes
            $( '#primary' ).children( colorClass + '.invis' ).not( '#global-area' ).toggleClass( 'invis' ).animate( { opacity : 1 }, { duration : speed } );
        }

        $( '#primary' ).masonry();

        return false;
    }
);

} ); } )( jQuery );