$(document).ready(function(){
	
	var items = $('#stage .element'),
		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);
		
		link.addClass('selected').siblings().removeClass('selected');
		
	        jQuery(this).closest('#filter').find('li a').not(this).removeClass('selected');

		// Using the Quicksand plugin to animate the li items.
		// It uses data('list') defined by our createList function:
		$('#stage').quicksand( link.data('list').find('.element'), {
			duration: 800,
			useScaling: true,
		});

//		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('#container');

		// Creating a menu item. The unordered list is added
		// as a data parameter (available via .data('list'):
		
		var a = $('<a>',{
			html: text,
			data: {list:ul}
		}).appendTo('#filter');
	}
		// Wrap all filter items in li tags
		$( "#filter a" ).wrap( "<li></li>");
});