$(document).ready(function(){

/* Step 1 - Create jQuery content object & hide content.
		  - Create jQuery tabs object.
		  - Display first content object.
		  - Give first tab the class 'active' for styling.
		  - Give last tab the class 'last' for styling. */
	var $content_tabs = $('.tabbed_content ul.content > li').hide();
	var $menu_tabs = $('.tabbed_content .tabs a');
	$content_tabs.filter(':first').show();
	$menu_tabs.filter(':first').addClass('active');
	$menu_tabs.filter(':last').addClass('last');

/* Step 2 - Bind a handler for ALL hash/state changes.
		  - Call 'switchTab' function. */	
	$.History.bind(function(state){
	    if ($content_tabs.filter('[id='+state+']').length){
			switchTab(state);
		};
	});

/* Step 3 - Fetch the chosen tab and content.
		  - Adjust the menu tabs by changing the active class.
		  - Adjust the content by fading out all visible and fading in chosen content. */	
	function switchTab (tabId){
	
		var strTitle = $('a[href="#' + tabId + '"]').text();
		// $('title').text(strTitle); // IE doesn't agree with this
		document.title = 'Wren Kitchens - ' + strTitle + ' Worktops';
		
		// Fetch
		var $content_tab = $('#' + tabId),
			$menu_tab = $menu_tabs.filter('[href=#' + tabId + ']');
		
		// Adjust Menu
		$menu_tabs.removeClass('active');
		$menu_tab.addClass('active');

		// Adjust Content
		$content_tabs.filter(':visible').fadeOut('fast', function(){
			$content_tab.fadeIn('fast');														  
		});
	}

});