// http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/

$(document).ready(function() {			// Next, we want to execute our code once the document is loaded.
	$('ul#filter a').click(function() {		// Now, we don’t want to do anything until one of our categories is clicked. We also want to make sure that we do not follow the href value of the link, so we need to return false:
		$(this).css('outline','none');									// Once a category link is clicked, I want to do a couple of things: remove the 
		$('ul#filter .current').removeClass('current');			// outline on the clicked link, remove the class of current on the list item that 
		$(this).parent().addClass('current');						// has it and add the class of current on the parent of the clicked link:

		var filterVal = $(this).text().toLowerCase().replace(' ','-');		// Next, we want to get the text inside of the clicked link, convert it to lowercase, and replace any spaces with hyphens

		if(filterVal == 'creative') {
			//$('ul#portfolio li.hidden').fadeIn('normal').removeClass('hidden');		//The first case of the script is when the All link is clicked. When that is clicked, we want to show all of the portfolio items and remove the class of hidden:
			$('ul#portfolio li').fadeTo('fast',1);
		} else {
			$('ul#portfolio li').each(function() {							// Otherwise, one of the actual categories were clicked. So we want to go 
				if(!$(this).hasClass(filterVal)) {								// through each portfolio item and check to see if it has the class that
					//$(this).fadeOut('fast').addClass('hidden');		// equals the value of the category clicked. If it does not have the class,
					$(this).fadeTo('normal',0.2);
				} else {																	// we want to fade out the list item and add a class of hidden. It it does
					//$(this).fadeIn('normal').removeClass('hidden');		// have the class, we want to fade it in and remove the class of hidden:
					$(this).fadeTo('fast',1);
				}
			});
		}

		return false;
	});
});