Add overview movies + masonry & filter

custom.php

<?php
/**
 * Implementation of hook_block_info().
 */
function the_aim_picstory_block_info() {
  $blocks = array();
  
    // OVERVIEW MOVIES
    $blocks['movie-overview'] = array(
      'info' => t('CB - Movie overview'),
    );
  
  return $blocks;
}


/**
 * Implementation of hook_block_view().
 */
function the_aim_picstory_block_view($delta='') {
  $block = array();
  global $language;
    switch ($delta) {

      // OVERVIEW MOVIES
      case 'movie-overview':
        $block['subject'] = t('CB - Movie overview');
        $block['content'] = _movie_overview();
      break;
    }
  return $block;
}

// OVERVIEW MOVIES
function _movie_overview() {
  global $language;
  $query = db_select('node', 'n');
  $query->leftJoin('taxonomy_index', 't', 'n.nid=t.nid');
  $query->leftJoin('taxonomy_term_data', 'd', 'd.tid=t.tid');

 $node_results = $query->condition('n.language', $language->language, '=')
    ->condition('n.type', 'video', '=')
    ->fields('n', array('nid'))
    ->fields('d', array('name'))
    ->orderBy('n.weight', 'ASC')
    ->execute()
    ->fetchAll();

  if ($node_results) {
    $nids = array();
    $classes = array();

    foreach ($node_results as $node_result) {
      $nids[] = $node_result->nid;
      $classes[$node_result->nid] = $node_result->name;
    }

    if (!empty($nids)) {
      $nodes = node_load_multiple($nids);
      $node_view = node_view_multiple($nodes, 'teaser');

      return array(
        array(
          '#theme' => 'overview_movies',
          '#nodes' => $node_view['nodes'],
          '#node_classes' => $classes,
        ),
      );
      ;
    }
  }
  return NULL;
}


function the_aim_picstory_theme() {
  return array(
    'overview_movies' => array(
      'variables' => array(
          'nodes' => NULL,
          'node_classes' => NULL,
      ),
      'template' => 'overview-movies'
    ),
  );
}

jquery.masonry-extends.js

!function($){
   $.fn.filteredMasonry = function(options){
     var cache=[];
	 //the main job of the function is to cache the item,because we are going to filter the items later
	 var init = function($container){
		$container.find(options.itemSelector).each(function(){
			cache.push($(this));
		});
		$container.masonry(options);
	 }
	 //filter items in cache
	 var filterItems = function(selector){
		var result=[];
		$(cache).each(function(item){
			if(cache[item].is(selector)){
				result.push(cache[item]);
			}
		})
		return result;
	 }
	 //reload masonry
	 var reload = function($container,items){
		$container.empty();
		$(items).each(function(){
			$($container).append($(this));
		});
		$container.masonry('reload');
	 }

	var proc = function($container){
        $(options.filtersGroupSelector).find('[data-filter]').each(function(){
            $(this).click(function(e){
                var selector = $(this).attr('data-filter');
                var items = filterItems(selector); 
                window.location.hash = selector.substring(1);
                reload($container,items); 
                e.preventDefault();
            })
        })
        if (window.location.hash) { 
            var selector = '.'+window.location.hash.substring(1), 
                items = filterItems(selector);  
            reload($container,items); 
            $()
        }
    } 
	return this.each(function() {
	    var $$ = $(this);
	    init($$);
		proc($$);
	 });
   }
}(window.jQuery)

overview-movies.tpl.php

<?php
$max = count(element_children($nodes));
// Set up striping values.
$count = 0;
?>
<ul class="responsive">
  <?php foreach (element_children($nodes) as $nid) {
      $count++;
        $attributes = array();

$attributes['class'][] = $node_classes[$nid];

        $attributes['class'][] = '' . ($count % 2 ? 'odd' : 'even');
        
        if ($count % 4 == 0) {
          $attributes['class'][] = 'fourth';
        }

        if ($count == $max) {
          $attributes['class'][] = 'last';
        }

    ?>
    <li <?php print drupal_attributes($attributes); ?>><?php print render($nodes[$nid]); ?></li>
  <?php } ?>
</ul>

script.js

$(document).ready(function() {
    // MASONRY STUFF
    mason = function() {
      $('.movies ul').masonry({
        itemSelector : 'li',
      });

      // ADD FILTERS
      $('.movies ul').filteredMasonry({
        itemSelector: 'li',
        filtersGroupSelector:'.filter-movie-block',
      }); 
    }
    mason();
  });

template.php

/**
 * Implements taxonomy_menu_block__ ADD TAXONOMY FILTERS
 */
function picstory_taxonomy_menu_block__1($variables) {
  $tree = $variables['items'];
  $config = $variables['config'];
  $num_items = count($tree);
  $i = 0;
  $output = '<ul>';
  foreach ($tree as $tid => $term) {
    $i++;
    // Add classes.
    $attributes = array();

    // Alter link text if we have to display the nodes attached.
    if (isset($term['nodes'])) {
      $term['name'] = $term['name'] . ' (' . $term['nodes'] . ')';
    }
    // Set alias option to true so we don't have to query for the alias every
    // time, as this is cached anyway.

    $output .= '<li' . drupal_attributes($attributes) . '>';
    $output .= '<a href="#" data-filter=".'.$term['name'].'">'.$term['name'].'</a>';
    $output .= '</li>';
  }
  $output .= '</ul>';

  return $output;
}