var tabSystem = {
  numTabs: 0, tabDesc: [], subId: [], activeTab: null,

  init: function(id)
  {
	// set some styles for the tab box div
	$('#'+id).css({padding:'2px',margin:'10px'});

	// obtain element arrays
	var selectorA = $('#'+id+' ul li a');
	var selectorDiv = $('#'+id+' > div');

	var subId;

	// hide unordered list
	$('#'+id+' ul').css({display:'none'});


	// add the tab header
	$('<div id="tabHeader"></div>').appendTo('#'+id);

	for (var i = 0; i < selectorA.length; i++)
	{
		// hide each tab content
		selectorDiv[i].style.display = 'none';

		// get tab description and tab id
		tabSystem.tabDesc[i] = selectorA[i].innerHTML;
		tabSystem.subId[i] = selectorA[i].href.substr(selectorA[i].href.search(/#/));

		// add tab button to tab header
		$('<div class="tabButtons" id="'+tabSystem.subId[i]+'T">'+tabSystem.tabDesc[i]+'</div>').appendTo('#tabHeader');
	}

	// add events to tab buttons
	$('.tabButtons').click(function() {
				$('.tabContent').css({display:'none'});
				$(this.id.substr(0,this.id.length-1)).css({display:'block'});

				$("#tabHeader div").addClass('tabInactive');
				$(this).removeClass('tabInactive').removeClass('tabMouseover').addClass('tabActive');
				tabSystem.activeTab = this.id;
			 })
			.mouseover(function() {
				if (this.id != tabSystem.activeTab)
					$(this).removeClass('tabInactive').addClass('tabMouseover');
			 })
			.mouseout(function() {
				if (this.id != tabSystem.activeTab)
					$(this).removeClass('tabMouseover').addClass('tabInactive');
			});

	$('<div style="clear:both;"></div>').appendTo('#'+id);

	// add content class to each div and hide
	for (var i = 0; i < selectorA.length; i++)
		$(tabSystem.subId[i]).appendTo('#'+id).addClass('tabContent');

	// display first tab and content
	$('#tabHeader div').eq(0).addClass('tabActive');
	$('.tabContent').eq(0).css({display:'block'});
	tabSystem.activeTab = tabSystem.subId[0]+'T';
  }
}