$(function () {

  var $filterContainer = $('#filter-container');
  var $filterNav = $('#filter-nav');
  var $filterLink = $filterNav.find('.filter-link');
  var $filterElement = $filterContainer.find('.filter-element');
  var filter = [];

  $filterLink.click(function(e){
    e.preventDefault();
    var self = $(this);
    var filterValue = self.attr('href');
    self.toggleClass('active');
    filterArray(filterValue);

    if(filter.length == 0){
      $filterElement.show();
    }
    else{
      $filterElement.hide();
      filter.forEach(function(el){
        $('[data-filter=' + el + ']').show();
      });
    }

  })

  function filterArray(el){
    var indexInArray = filter.indexOf(el);
    if (indexInArray == -1){
      filter.push(el);
    }
    else{
      filter.splice(indexInArray, 1);
    }
    return filter;
  }

})