$(document).ready(function() {
	
	//	Set initial css positioning values for users who have JS disabled
	
	$('div.divItems').css('visibility', 'hidden');
	$('div.divItems').css('display', 'none');
	$('.tabnav li').css('width', '100px');
	$('div.listDiv a').css('top', '18%');
	$('div.listDiv a').css('left', '35%');
	$('.tabnav li.start').css('margin-left', '5px');

	//	Declare some variables
	
	var	tabContainer	=	'#tabButtons';
	var listItem		=	'#tabButtons li';										
	var selectedTab		=	'#tabButtons li.ui-tabs-selected';	
	var listDiv			=	selectedTab + ' div.divItems';	//items within the tab div
	var activeDiv		=	selectedTab + ' div.listDiv';	//containers with blue bg and pretty top
	var numberLink		=	activeDiv + ' a';
	var activeBG		=	{'background-color' : '#335d85'};
	var bordStyle		=	{'border-bottom':'5px solid #163257'};
	var cssStyle 		= 	{'visibility':'visible'};									
	var liStyle 		= 	{'width':'260px'};	
	var numPosX			=	{'left' : '3%'};
	var numPosY			=	{'top' : '0%'};

	//	Begin the fun
	
	$(tabContainer).tabs({ selected: 0 });	//Start with the 1st tab	

	$(tabContainer).tabs('rotate', 5000, false);	//Rotate the tabs every 5 seconds or until the user makes a selection					

	$(tabContainer).bind('tabsselect', function(event, ui) {	//First minimize the open tab and reposition the number
														$(selectedTab).animate({width:'100px'}, 300);
														$(activeDiv).css('background-color', '#173456');
														$(listDiv).css('visibility', 'hidden');	
														$(listDiv).css('display', 'none');
														$(selectedTab).addClass('inactiveBorder');
														$(selectedTab).removeClass('backgroundImage');
														$(numberLink).animate({opacity: 0}, 100, function(){
																											$(this).css('top', '18%');
																											$(this).css('left','35%');
																											$(this).removeClass('activeNumber');
																											$(this).addClass('inactiveNumber');
																											$(this).animate({opacity: 1});
																										});
	});
	
	$(tabContainer).bind('tabsshow', function(event, ui) {		//Open the target tab and display the hidden data
														$(numberLink).css(numPosX);			
														$(numberLink).css(numPosY);	
														$(numberLink).removeClass('inactiveNumber');
														$(numberLink).addClass('activeNumber');	
														
														$(selectedTab).removeClass('inactiveBorder');				
														$(selectedTab).addClass('backgroundImage');		
														$(selectedTab).css(bordStyle);
														$(activeDiv).css(activeBG);
										
														$(selectedTab).animate({width:'260px'}, 300, function(){
																												$(listDiv).css('visibility', 'visible');
																												$(listDiv).css('display', 'inline');
																											  });
	});

	for(i=1;i<3;i++) {									
					if($(listItem).hasClass('ui-tabs-selected')){
						$(activeDiv).css(activeBG);
						
						$(listDiv).css(cssStyle);	
						$(listDiv).css('display', 'inline');
								
						$(numberLink).addClass('activeNumber');
						$(numberLink).css(numPosX);
						$(numberLink).css(numPosY);
						
						$(selectedTab).css(liStyle);
						$(selectedTab).addClass('backgroundImage');
						$(selectedTab).css(bordStyle);
						}
					}
	
});