$(document).ready(function(){

/* Step 1 - Hide all tabbed contect except first tab content.
    	  - Give 'active' class to first tab.
	  - Give 'last' class to last tab. */

	$('.tabbed_content .content li').not(':first').hide();
	$('.tabbed_content .tabs a:first').addClass('active');
	$('.tabbed_content .tabs a:last').addClass('last');

/* Step 2 - Bind click event to tabs.
    	  - Prevent Default event (stop page refreshing).
	  - Call 'switchTab' funtion. */
	
	$('.tabbed_content .tabs li a').live('click',
		function (e){
			e.preventDefault();
			switchTab($(this));
		});

/* Step 3 - Remove 'active' class from any tabs it may be assigned to.
		  - Add 'active' class to the clicked tab.
		  - Call 'switchContent' function. */	

	function switchTab (objClickedTab){
		strTarget = $(objClickedTab).attr('href');
		$('.tabbed_content .tabs a.active').removeClass('active');
		$(objClickedTab).addClass('active');
		switchContent(strTarget);
	}

/* Step 4 - Fade out any visible content.
		  - Fade in content which corresponds to clicked tab. */	
	function switchContent (strTarget){
		$('.tabbed_content .content li:visible').fadeOut('fast', function(){
			$('.tabbed_content .content li#' + strTarget).fadeIn('fast');														  
		});
	}

});