/*
$('#showcase .content .inner').masonry({
  columnWidth: 240,
  itemSelector: '.box'
});
*/

(function($) {

    var
    speed = 1000,   // animation speed
    $wall = $('#showcase .content .inner'),

    masonryOptions = {         // initial masonry options
        columnWidth: 240,
        itemSelector: '.boxWork:not(.invis)',
        animate: true,
        animationOptions: {
            duration: speed,
            queue: false
        }
    };

    // run on window.load so we can capture any incoming hashes
    $(window).load(function(){
        // run masonry on start-up to capture all the boxes we'll need
        $wall.masonry(masonryOptions);

        if ( window.location.hash ) {
            // get rid of the '#' from the hash
            var possibleFilterClass = window.location.hash.replace('#', '');
            switch (possibleFilterClass) {
                // if the hash matches the following words
                case 'business' : case 'website' : case 'mobile' : case 'all' :
                    // set masonry options animate to false
                    masonryOptions.animate = false;
                    // hide boxes that don't match the filter class
                    $wall.children().not('.'+possibleFilterClass)
                    .toggleClass('invis').hide();
                    // run masonry again, this time with the necessary stuff hidden
                    $wall.masonry(masonryOptions);
                    break;
            }
        }
    });

    var jquery_masonry = '#showcaseNav a';

    var page = document.location.href.split('/');
    page = page[page.length-1].split("#")[0];
    if ( page == "showcase") {
      jquery_masonry += ", #quicklinks-middle a";
    }
    $(jquery_masonry).click(function(){
        var
        href = (this.href+"").split("#")[1],
        filterClass = '.' + href;
        ;

        if ( page == "showcase") {
          $.scrollTo(0,0, {duration: 100});
        }

        if (filterClass == '.all') {
            // show all hidden boxes
            $wall.children('.invis')
            .toggleClass('invis').fadeIn(speed);
        } else {
            // hide visible boxes
            $wall.children().not(filterClass).not('.invis')
            .toggleClass('invis').fadeOut(speed);
            // show hidden boxes
            $wall.children(filterClass+'.invis')
            .toggleClass('invis').fadeIn(speed);
        }
        $wall.masonry({
            animate: true
        });
        // set hash in URL
        window.location.hash = href;
        return false;
    });

})(jQuery);