$(document).ready(function() {
  
  var searchBox = $("input.s1");
  var searchBoxDefault = "Search ";
  searchBox.focus(function(){
    if($(this).attr("value") == searchBoxDefault) $(this).attr("value", "");
  });
  searchBox.blur(function(){
    if($(this).attr("value") == "") $(this).attr("value", searchBoxDefault);
  });
  
  $("a.cbme").colorbox({
    maxWidth:"95%",
    maxHeight:"95%",
    rel:'gal'
  });
  $("a.cbyme").colorbox({
    innerWidth:"565px", 
    innerHeight:"354px", 
    inline:true, 
    href:"#_youtube"
  });
  
  var items = $('.workshops li'),
  itemsByTags = {};
	
  // Looping though all the li items:
  
  items.each(function(i){
    var elem = $(this),
    tags = elem.data('tags').split(',');
    
		
    // Adding a data-id attribute. Required by the Quicksand plugin:
    elem.attr('data-id',i);
		
    $.each(tags,function(key,value){
			
      // Removing extra whitespace:
      value = $.trim(value);
			
      if(!(value in itemsByTags)){
        // Create an empty array to hold this item:
        itemsByTags[value] = [];
      }
			
      // Each item is added to one array per tag:
      itemsByTags[value].push(elem);
    });
		
  });
  
  // Creating the "Everything" option in the menu:
  createList('All',items);
  
  // Looping though the arrays in itemsByTags:  
  $.each(itemsByTags,function(k,v){
    createList(k,v);
  });
	
  $('#filter a').live('click',function(e){
    var link = $(this);
    var link_name = link.html();
		
    link.addClass('active').siblings().removeClass('active');
		
    // Using the Quicksand plugin to animate the li items.
    // It uses data('list') defined by our createList function:
    $("span#work_cat").empty().append(link_name);		
    $('.workshops').quicksand(link.data('list').find('li'));
    
    e.preventDefault();
  });
	
  $('#filter a:first').click();
	
  function createList(text,items){
		
    // This is a helper function that takes the
    // text of a menu button and array of li items
		
    // Creating an empty unordered list:
    var ul = $('<ul>',{
      'class':'hidden'
    });
    		
    $.each(items,function(){
      // Creating a copy of each li item
      // and adding it to the list:
			
      $(this).clone().appendTo(ul);
    });

    ul.appendTo('#workshops');

    // Creating a menu item. The unordered list is added
    // as a data parameter (available via .data('list'):
		
    var a = $('<a>',{
      html: text,
      href:'#',
      data: {
        list:ul
      }
    }).appendTo('#filter');
  }


});