/* *************************************************
*
* configuration: settings for class & ids of tab
* elements
************************************************* */
var tabs = {
	default_tab    : 0,                    // the # of the tab that should be shown on page load
	// the tab itself
	tab : {
		wrapper   : '#tabs',          // parent that wraps around each tab header
		container : 'b',                // the container that wraps around the clickable tab text
		clickable : 'a',                 // the clickable tab text
		class     : {
			active   : 'active',   // class for the active tab
			inactive : 'inactive' // class for all inactive tabs
		}
	},
	// the content for each tab
	content : {
		class  : '.tab'                 // class of the content for the tabs
	},
	

	/* *************************************************
	*
	* bind tabbing events
	*
	************************************************* */
	init : function() {
		$( tabs.tab.wrapper + ' ' + tabs.tab.clickable ).click(function() {
			var id 	= $(this).attr('href');
			var par 	= $(this).parent();
	
			// hide all tab content
			$.each( $( tabs.content.class ), function(i) {
				$( this ).css( 'display','none' );
			});
	
			// display the tab content chosen
			$( id ).css('display','block');
	
			// show the tab as clicked
			$.each( $( tabs.tab.wrapper + ' ' + tabs.tab.container ), function() {
				$( this ).removeClass( tabs.tab.class.active );
				$( this ).addClass( tabs.tab.class.inactive );
			});
	
			par.removeClass( tabs.tab.class.inactive );
			par.addClass( tabs.tab.class.active );
	
			return false;
		});
	
		// hide all tab content except the first tab
		$.each( $( tabs.content.class ), function(i) {
			if (i > tabs.default_tab) {
				$( this ).css('display','none');
			}
		});
	}

};