/*
 * Copyright (C) 2009 Joel Sutherland.
 * Liscenced under the MIT liscense
 */

var filterableSettings = {
			useHash : true,
			animationSpeed : 1000,
			show : {
				width : 'show',
				opacity : 'show'
			},
			hide : {
				width : 'hide',
				opacity : 'hide'
			},
			useTags : true,
			tagSelector : '#portfolio a',
			selectedTagClass : 'current',
			allTag : 'alles'
	};

(function($) {
	$.fn.filterable = function(settings) {
		settings = filterableSettings;

		return $(this).each(function() {
			/* FILTER: select a tag and filter */
			$(this).find('a').bind("filter", function(e, tagToShow) {

				tagToShow =  $(this); 

				if(settings.useTags) {
					$(settings.tagSelector).removeClass(settings.selectedTagClass);
					$(settings.tagSelector + '[href=' + tagToShow + ']').addClass(settings.selectedTagClass);
				}

				$(this).trigger("filterportfolio", [tagToShow.substr(1)]);
			});
			
			// Fokko's selector
			$("#portfolio-filter a").click("click", function() {
				tagToShow =  $(this).attr('rel');
				
				if(settings.useTags) {
					$(settings.tagSelector).removeClass(settings.selectedTagClass);
					$(settings.tagSelector + '[href=' + tagToShow + ']').addClass(settings.selectedTagClass);
				}
				
				if( tagToShow == '' )
				{
					tagToShow = 'work';
					$("#portfolio-list").children("." + tagToShow).animate(settings.show, settings.animationSpeed);
				}
				else
				{					
					$("#portfolio-list").children("." + tagToShow).animate(settings.show, settings.animationSpeed);
					$("#portfolio-list").children(":not(." + tagToShow + ")").animate(settings.hide, settings.animationSpeed);
				}
			});
			
			/* FILTERPORTFOLIO: pass in a class to show, all others will be hidden */
			$(this).bind("filterportfolio", function(e, classToShow) {											
				console.log(classToShow);
				console.log(e);
				if(classToShow == settings.allTag) {
					$(this).trigger("show");
				} else {
					$(this).trigger("show", ['.' + classToShow]);
					$(this).trigger("hide", [':not(.' + classToShow + ')']);
				}
				if(settings.useHash) {
					location.hash = '#' + classToShow;
				}
			});
			/* SHOW: show a single class*/
			$(this).bind("show", function(e, selectorToShow) {
				$(this).children(selectorToShow).animate(settings.show, settings.animationSpeed);
			});
			/* SHOW: hide a single class*/
			$(this).bind("hide", function(e, selectorToHide) {
				$(this).children(selectorToHide).animate(settings.hide, settings.animationSpeed);
			});
			/* ============ Check URL Hash ====================*/
			if(settings.useHash) {
				if(location.hash != '')
					$(this).trigger("filter", [location.hash]);
				else
					$(this).trigger("filter", ['#' + settings.allTag]);
			}

			/* ============ Setup Tags ====================*/
			if(settings.useTags) {
				$(settings.tagSelector).click(function() {
					$('#portfolio-list').trigger("filter", [$(this).attr('href')]);

					$(settings.tagSelector).removeClass('current');
					$(this).addClass('current');
				});
			}
		});
	}
})(jQuery);

$(document).ready(function() {
	$(".work").find("img:not(:first)").remove();
	var filter = $("ul#portfolio-filter");
	
	// get the unique list of classnames
	classes = [];
	counter = 0;
	uniqueclasses = [];

	$('#portfolio-list div').each(function() {
		var classes = $(this).attr('class').split(' ');
		
		$(classes).each(function() {
			if(this !== '' && classes[this] == undefined) {
				if(this != 'show' & this != 'wrap' & this != 'text' & this != 'paragraph' & this != 'work' && this != 'imageContainer') {
				
					var zoekstring = to_string(this);
					if (jQuery.inArray(zoekstring, uniqueclasses) == -1)
					{	//
						filter.append('<li><a href="#' + this + '" rel="' + this + '">' + this + '</a></li>');
						uniqueclasses[counter] = zoekstring;
						counter++;
					}
					
				}
			}
		});
	});

	$('#portfolio-list').filterable(	);
});

function to_string ( waarden ){
	var output = '';
	for (x=0; x < waarden.length; x++){
		output = output + waarden[x];
	}
	return output;
}