$(window).on('load', function() {
  // init Isotope
  var $grid = $('.grid').isotope({
    itemSelector: '.grid-item',
			masonry: {
					horizontalOrder: true,
		}
  });
	
  // store filter for each group
  var filters = {};

  $('#filters').on( 'click', '.button', function() {
    var $this = $(this);
    // get group key
    var $buttonGroup = $this.parents('.button-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    // set filter for group
    filters[ filterGroup ] = $this.attr('data-filter');
    // combine filters
    var filterValue = concatValues( filters );
    // set filter for Isotope
    $grid.isotope({ filter: filterValue });
  });

  var $anyButtons = $('#filters').find('button[data-filter=""]');
  var $buttons = $('#filters button');

  $('.button-reset').on( 'click', function() {
    // reset filters
    filters = {};
    $grid.isotope({ filter: '*' });
    // reset buttons
    $buttons.removeClass('is-checked');
    $anyButtons.addClass('is-checked');
  });
  
  // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
  });
});

// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
		for ( var prop in obj ) {
			value += obj[ prop ];
		}
		return value;
	}

	$(function(){
		const box = document.querySelector('.grid');
		const go = document.querySelector('.no-results');

		box.addEventListener('transitionend', function() {
			if (box.offsetHeight === 0) {
				go.style.display = 'block';
				go.animate([{opacity: 0}, {opacity: 1}], 400);
			} else {
				go.style.display = 'none';
			}
		});
});