// Run the masonry grid using isotope
var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  percentPosition: true,
  masonry: {
    // use outer width of grid-sizer for columnWidth
    columnWidth: '.grid-sizer'
  }
});

// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.isotope('layout');
});

//var $grid = $('.grid').imagesLoaded( function() {
  // init Isotope after all images have loaded
//  $grid.isotope({
//    // options...
//    itemSelector: '.grid-item',
//    percentPosition: true,
//    masonry: {
//      // use outer width of grid-sizer for columnWidth
//      columnWidth: '.grid-sizer'
//    }
//  });
//});

// filter items on button click
$('.filter-button-group').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});