(function ($) {

$.fn.card = function(el, o) {
	o = $.extend({
			cont: "#mainDisplay",
	}, o || {} );

	this.each( function ( ) { 
		var children = $(this).find('a');
		var targets = new Array();
		children.each( function () { targets.push( $(this).attr('href')); });
		targets = $(targets.join(','));
		targets.each( function () { $(this).attr('renderedHeight',$(this).height());  });

		children.click( function ( e ){
			// hide all (really just the shown one)
			targets.fadeOut('fast');

			// Here's where the magic happens (closure)
			(function (cont, links, target, clicked) {
				cont.animate( 
					//resize smoothly
					{'height': (target.attr('renderedHeight'))},
					function(){
						//show this area
						links.removeClass('current');
						clicked.addClass('current').blur();

						//get the height of the area to show
						target.fadeIn();
					}
				);
			})(
				$(o.cont),
				children,
				$($(this).attr('href')),
				$(this)
			);

			document.location.hash = $(this).attr('href');
			return false;
		});

		targets.hide();

		var hash = 'a[href=' + document.location.hash + ']';
		if( document.location.hash && children.filter(hash).length > 0 ){
			children.filter(hash).click();						
		} else {
			// If no hash provided, find the current one (about) and show it
			children.filter('a.current').click();
		}
	});
}

})(jQuery);

jQuery(function ($) {
	$("#nav").card();
});