jQuery('.videobox').each(function() {

  var $this = jQuery(this);
  jQuery.getJSON('https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(jQuery(this).attr('vimeo')), {format: "json"}, function(data) {
    $this.css('background', 'url("' + data.thumbnail_url + '")');
    $this.css('background-size', 'cover');
    $this.css('background-position', 'center center');
    $this.css('background-repeat', 'no-repeat');
  });

  $this.on('mouseover', function() {
    var offset = $this.offset().left;
    var center = jQuery(window).width()/2 - 50;
    if( offset >= center) {
      jQuery('#videotext').css('right', '');
      jQuery('#videotext').css('left', '20px');
      jQuery('#videotext').css('top', '80px');
    } else {
      jQuery('#videotext').css('left', '');
      jQuery('#videotext').css('right', '20px');
      jQuery('#videotext').css('top', '80px');
    }

    jQuery('#videotext').html($this.html());
    $this.find(".playbutton").show();
    timer = window.setTimeout(function() {
      if( document.body.clientWidth >= 768 ) {
        jQuery('#videotext').show(300);
      }
    }, 500);
  });

  $this.on('mouseout', function() {
    jQuery('#videotext').hide();
    $this.find(".playbutton").hide();
    if (timer) {
      window.clearTimeout(timer);
    }
  });

  $this.on('click', function() {
    jQuery('#videotext').hide();
    $this.find("img").hide();
    if (timer) {
      window.clearTimeout(timer);
    }
    jQuery.getJSON('https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(jQuery(this).attr('vimeo')), {format: "json"}, function(data) {
      var player = jQuery('#videoplayer #player');
      player.html(data.html)
      player.find( "iframe" ).attr('width', "100%").attr('height', "100%");
      var src = player.find( "iframe" ).attr('src');
      player.find( "iframe" ).attr('src', src + "?title=0&byline=0&portrait=0&autoplay=1");
    });
    jQuery('#videoplayer').fadeIn(300, function () {
      jQuery.vegas({ src: '/assets/bgphotos/' + Math.floor(Math.random() * 12) + '.png' });
    });
  });

  jQuery('#videoplayer').on('click', function() {
    jQuery(this).fadeOut(500, function() {
      jQuery('#videoplayer #player').html('');
    });
  });

});
$('#video-roster').isotope({
  // options
  itemSelector: '.videobox'
});
// init Isotope
 var $grid = $('#video-roster').isotope({
 });
 // filter items on button click
 $('.filter-button-group').on( 'click', 'button', function() {
   var filterValue = $(this).attr('data-filter');
   $grid.isotope({ filter: filterValue });
   $('.filter-button-group').find('button').css('background-color', 'black');
   $(this).css('background-color', '#5a4b68');
 });