$(function() {
var currentProjects = [],
        projectItem = $('.project-item'),
        projectItemChild = projectItem.children('.project-item-container'),
        hash = window.location.hash;

isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
//isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);

if (isChrome || isFirefox) {
    breakpoint = window.innerWidth;
} else {
    breakpoint = $(window).innerWidth();
}

FastClick.attach(document.body);


//Loop for Hashing
projectItem.each(function() {
    var itemHash = $(this).attr('data-hash');
    if (itemHash === hash) {
        $(this).addClass('active');
    }
});

(function(namespace) { // Closure to protect local variable "var hash"
    if ('replaceState' in history) { // Yay, supported!
        namespace.replaceHash = function(newhash) {
            if (newhash) {
                if (('' + newhash).charAt(0) !== '#') newhash = '#' + newhash;
                history.replaceState('', '', newhash);
            } else {
                history.pushState('', document.title, window.location.pathname);
            }
        };
    } else {
        var hash = location.hash;
        namespace.replaceHash = function(newhash) {
            if (newhash) {
                if (location.hash !== hash) history.back();
                location.hash = newhash;
            } else {
                document.location.href.replace(location.hash , '');
            }
        };
    }
})(window);



    //Click State/Animation for Project Page Item Grid
    projectItem.on('click', function() {
        var prevProject = $('.project-item.active'),
                activeProject = $(this),
                activeHero = $('.project-item.active .project-item-hero'),
                notActiveItem = $('.project-item:not(.active)').height();

        calcDimensions(this); // sets projectContainerHeight

        if($(window).scrollTop() > ($(document).height() - $(window).height()*2)) {
            smoothResize();
        }

        if ($(this).hasClass('active')) { // Clicked an active project, close it
            $(this).find('.project-item-container').animate({
                height: 0
            }, 300);

            $(this).animate({
                height: notActiveItem
            }, {
                duration: 300,
                complete: function() {
                    $(this).removeClass('active');
                    replaceHash();
                }
            });

        } else if (projectItem.hasClass('active')) { // Clicked an inactive project, with another one already open

            prevProject.find('.project-item-container').animate({
                height: 0
            }, 300);

            prevProject.animate({
                height: notActiveItem
            },{
                duration: 300,
                complete: function() {
                    activeProject.addClass('active');
                    prevProject.removeClass('active');

                    activeProject.animate({
                        height: projectContainerCombined
                    },{
                        duration: 300,
                        complete: function() {
                            scrollto(activeProject);
                            //$('.active .project-item-hero').css('opacity', '0').css('opacity', '1');

                        }
                    });

                    setTimeout(function() {
                        $('.project-item-hero').css('height', '').css('height', 'inherit')
                    }, 10) // fix for new chrome bug 44.0.2403.155

                    activeProject.find('.project-item-container').animate({
                        height: projectContainerCombined - projectItemHeight
                    }, 300, function() {
                        setTimeout(function() { // hack for weird safari 5 bug
                            $('.project-item-hero').css({
                                'transform': 'scale(1)',
                                '-webkit-transform': 'scale(1)',
                                '-moz-transform': 'scale(1)',
                                '-ms-transform': 'scale(1)',
                                '-o-transform': 'scale(1)',
                            });
                        }, 200);
                    });
                }
            }).dequeue();

        } else { // Clicked an inactive project, with all others closed

            $(this).find('.project-item-container').animate({
                height: projectContainerCombined - projectItemHeight
            }, 300);

            $(this).animate({
                height: projectContainerCombined
            }, {
                duration: 300,
                complete: function() {
                    activeProject.addClass('active');
                    scrollto(activeProject);
                    setTimeout(function() { // hack for weird safari 5 bug
                        $('.project-item-hero').css({
                            'transform': 'scale(1)',
                            '-webkit-transform': 'scale(1)',
                            '-moz-transform': 'scale(1)',
                            '-ms-transform': 'scale(1)',
                            '-o-transform': 'scale(1)',
                        });
                    }, 200);
                }
            });

            projectItem.siblings().removeClass('active');
                $(this).toggleClass('active');
            }

        //Animate scroll to top of page
        itemHash = activeProject.attr('data-hash');
        windowHasHash = window.location.hash;
        replaceHash(itemHash);
    });

    //Prevent bubbling
    projectItemChild.on('click', function(event) {
        event.stopPropagation();
    });

}); //END Window onload query

//Filterbar Vars
var itemWrapper = $('.wrapper'),
        filterSelector = $('.filter-bar.projects .largenav li'),
        filterSelectorAll = $('.filter-bar.projects .largenav li.all'),
        filterValue = $(this).attr('data-filter'),
        clientList = $('#client-list'),
        clientListToggle = $('#clients');

//Filter Prototype Function
Array.prototype.contains = function(elem) {
    for (var i in this) {
        if (this[i] == elem) return true;
    }
    return false;
};

//Filter
var filterProjects = function(filter) {
    projectItem.stop(true, true).hide(); // kill fadeIn if that's still running
    currentProjects = []; // clear the array
    $.each(projectItem, function() {
        var itemFilters = $(this).attr('data-filter'),
            arrSplit = itemFilters.split(', ');
        if (filter == 'All') {
            currentProjects.push($(this));
            filterSelectorAll.addClass('active');
        } else if (arrSplit.contains(filter)) {
            currentProjects.push($(this));
        }
    });
    var count = 0;
    $.each(currentProjects, function() {
        $(this).delay((count) * 80).fadeIn(200);
        count++;
    });
};

// Custom select menus
var $selectOptions = $('.select li a'),
    $selectToggle = $('#select-toggle'),
    navText = $('.largenav li.active a').text();

var selectList = function(selection) {
    $.each($selectOptions, function() {
        var value = $(this).text();

        if (value == selection) {
            $selectToggle.text(value);
            $(this).addClass('selected');
        } else {
            $(this).removeClass('selected');
        }
    });
};

selectList(navText);

$selectToggle.on({
    click: function(event) {
        event.preventDefault();
        if ($(this).hasClass('open')) {
            $(this).blur();
            $(this).removeClass('open');
        } else {
            $(this).focus();
            $(this).addClass('open');
        }
    },
    mousedown: function(event) {
        event.preventDefault(); // Safari blurs on mousedown
    },
    blur: function() {
        $(this).removeClass('open');
    }
});

$selectOptions.on('click', function(event) {
    event.preventDefault();
    $selectOptions.removeClass('selected');
    $(this).addClass('selected');
    //var selection = $(this).text();

    $selectToggle.removeClass('open');
});

$('.news .select li a').on('click', function(event) {
    event.preventDefault();
    var url = $(this).attr('data-value');
    window.location = url;
});

$('.projects .select li a').on('click', function(event) {
    event.preventDefault();
    var filter = $(this).text();
    if ($(this).is(':visible')) {
        $('.filter-bar.projects li[data-filter="' + filter + '"]').click();
    }
    if ($('#client-list').is(':visible')) {
        $('#client-list').fadeOut(200);
    }
});

filterSelector.on('click', function() {
    if (!$(this).hasClass('active')) {
        var active = $('.project-item.active'),
            filter = '';

        itemHash = $(this).attr('data-hash');
windowHasHash = window.location.hash;
replaceHash(itemHash);

        if (active.length) {
            active.removeClass('active').css('height', projectItemHeight);
            $('.project-item-container').css('height', '0')
        }

        clientList.fadeOut(200);
        filter = $(this).attr('data-filter');
        filterProjects(filter);
        selectList(filter);

        filterSelector.removeClass('active');
        clientListToggle.removeClass('active');
        $(this).toggleClass('active');
    }
});

clientListToggle.on('click', function() {
    replaceHash();

    var active = $('.project-item.active');

    if (active.length) {
        active.removeClass('active').css('height', projectItemHeight)
        $('.project-item-container').css('height', '0');
    }

    filterSelector.removeClass('active');
    $(this).toggleClass('active');
    projectItem.stop(true, true).hide();
    projectItem.fadeOut(200);
    clientList.fadeIn(200);
    $('.column-block').isotope({
      itemSelector: '.client-block',
      layoutMode: 'masonry',
    });
});
});

<div class="filter-bar projects">
  <div class="container">
    <ul class="left largenav">
      <li data-filter="All" class="active all">All</li><li data-filter="Identity" data-hash="Identity">Identity</li><li data-filter="Branding" data-hash="Branding">Branding</li><li data-filter="Event" data-hash="Event">Event</li><li data-filter="Print" data-hash="Print">Print</li><li data-filter="Website" data-hash="Website">Website</li>
    </ul>
</div>

{% include 'projects/_components/clientList' ignore missing %}
{% cache %}
{% set projectsArray =     craft.entries.section('projects').order('title').find() %}
{% set featured = [] %}
{% set normal = [] %}
{% set all = [] %}
{% for project in projectsArray %}
{% if project.featuredItem | length %}
{% set featured = featured | merge([project.id]) %}
{% else %}
{% set normal = normal | merge([project.id]) %}
{% endif %}
{% endfor %}
{% set all = featured | merge(normal) %}
{% set projectsList =         craft.entries.section('projects').id(all).fixedOrder(true).find() %}
{% for item in projectsList %}

<li data-filter="{% for category in item.projectCategories %}{{ category }}{% if not loop.last %}, {% endif %}{% endfor %}" data-hash="#{{ item.slug }}" class="project-item no-touch">
<div class="project-item-thumb">
  <div class="project-item-hoverinfo">
    <div class="outerContainer">
      <div class="innerContainer">
          {% if item.shortTitle|length %}
            {{ item.shortTitle | smartdown }}
          {% else %}
            {{ item.title | smartdown }}
        {% endif %}
      </div>
    </div>
  </div>
  <div class="project-item-crop">
    {% for image in item.gridThumbnail %}
      <img src="{{ image.getUrl }}" alt="">
    {% endfor %}
  </div>
</div>
<div class="project-item-container">
  <div class="project-item-hero">
    {% for image in item.gridHero %}
      <div class="hero-image" style="background-image: url('{{ image.getUrl }}')"></div>
    {% endfor %}
  </div><div class="project-item-content">
    <h2>{{ item.title | smartdown }}</h2>
    <h4>
      {{ item.projectLabels }}
    </h4>
    <p>{{ item.shortInfo | smartdown }}</p>
    {% if item.longInfo|length %}
      <a href="{{ item.url }}" class="button">View Project</a>
    {% elseif item.siteLink|length %}
      {{ item.siteLink.link|raw }}
    {% endif %}

  </div>
</div>

{% endfor %}

{% endcache %}