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

  init: function(id)
  {
	// set some styles for the tab box div
	$('#'+id).css({padding:'0px',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"><div></div><div>'+tabSystem.tabDesc[i]+'</div><div></div></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'});
				var id = this.id.substr(this.id.length-2,1);

				$("#tabHeader > div").removeClass('tabMouseover').removeClass('tabActive').addClass('tabInactive');
				$(this).removeClass('tabInactive').removeClass('tabMouseover').addClass('tabActive');
				for (var i = 0; i < $('#tabHeader > div').length; i++)
				{
					$('#tabHeader > div').eq(i).children('div').eq(0).removeClass('tabOverL'+(i+1)).removeClass('tabActiveL'+(i+1)).addClass('tabInactiveL'+(i+1));
					$('#tabHeader > div').eq(i).children('div').eq(1).removeClass('tabOverC'+(i+1)).removeClass('tabActiveC'+(i+1)).addClass('tabInactiveC'+(i+1));
					$('#tabHeader > div').eq(i).children('div').eq(2).removeClass('tabOverR'+(i+1)).removeClass('tabActiveR'+(i+1)).addClass('tabInactiveR'+(i+1));
				}
				$(this).children('div').eq(0).removeClass('tabOverL'+id).removeClass('tabInactiveL'+id).addClass('tabActiveL'+id);
				$(this).children('div').eq(1).removeClass('tabOverC'+id).removeClass('tabInactiveC'+id).addClass('tabActiveC'+id);
				$(this).children('div').eq(2).removeClass('tabOverR'+id).removeClass('tabInactiveR'+id).addClass('tabActiveR'+id);
				
				tabSystem.activeTab = this.id;
			 })
			.mouseover(function() {
				var id = this.id.substr(this.id.length-2,1);
				if (this.id != tabSystem.activeTab)
				{
					$(this).removeClass('tabInactive').addClass('tabMouseover');
					$(this).children('div').eq(0).removeClass('tabInactiveL'+id).addClass('tabOverL'+id);
					$(this).children('div').eq(1).removeClass('tabInactiveC'+id).addClass('tabOverC'+id);
					$(this).children('div').eq(2).removeClass('tabInactiveR'+id).addClass('tabOverR'+id);
				}
			 })
			.mouseout(function() {
				var id = this.id.substr(this.id.length-2,1);
				if (this.id != tabSystem.activeTab)
				{
					$(this).removeClass('tabMouseover').addClass('tabInactive');
					$(this).children('div').eq(0).removeClass('tabOverL'+id).addClass('tabInactiveL'+id);
					$(this).children('div').eq(1).removeClass('tabOverC'+id).addClass('tabInactiveC'+id);
					$(this).children('div').eq(2).removeClass('tabOverR'+id).addClass('tabInactiveR'+id);
				}
			});

	$('<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');
	$('#tabHeader > div').eq(0).children('div').eq(0).addClass('tabActiveL1');
	$('#tabHeader > div').eq(0).children('div').eq(1).addClass('tabActiveC1');
	$('#tabHeader > div').eq(0).children('div').eq(2).addClass('tabActiveR1');
	for (var i = 1; i < $('#tabHeader > div').length; i++)
	{
		$('#tabHeader > div').eq(i).children('div').eq(0).addClass('tabInactiveL'+(i+1));
		$('#tabHeader > div').eq(i).children('div').eq(1).addClass('tabInactiveC'+(i+1));
		$('#tabHeader > div').eq(i).children('div').eq(2).addClass('tabInactiveR'+(i+1));
	}
	$('.tabContent').eq(0).css({display:'block'});
	tabSystem.activeTab = tabSystem.subId[0]+'T';
  }
}