// Configure the tab system
var SELECTED_TAB_CLASS = "Selected"; // Name of the class for selected tabs
var TAB_CONTAINER_DIV_ID = "Tabs"; // id of the div where the tabs should appear

// Configure tabs
var Tabs = new Array();
Tabs[0] = new Tab("ShopTab","Shop","Shop");
Tabs[1] = new Tab("ProductDescriptionTab","Product Description","ProductDescription");
Tabs[2] = new Tab("BioTab","Bio","Bio");
Tabs[3] = new Tab("FansTab","Fans","Fans");
Tabs[4] = new Tab("FitGuideTab","Fit Guide","FitGuide");

// Tab constructor
function Tab(ID, Label, ContentDivID){
	this.ID = ID; // id of the tab
	this.Label = Label; // Label that appears on the tab
	this.ContentDivID = ContentDivID; // id of the corresponding content div
}

// Draw the tab bar
function DrawTabs(){

	var UU_Output = "";
	var TabCounter = 0;
	
	// Show feature tag
	UU_Output += "<!-- FEATURE BEGIN: Tab Navigation -->";
	
	// Start the UL
	UU_Output += "<ul class=\"Tabs\">";
	
	// For each tab
	for(Tab in Tabs){
	
		// If the tab's div exists...
		if(ElementExists(Tabs[Tab]["ContentDivID"])){
				
			// Start the tab
			UU_Output += "<li id=\"" + Tabs[Tab]["ID"] + "\"";

			// If it's the first tab...
			if(TabCounter == 0){
				
				// Select it
				UU_Output += "class=\"" + SELECTED_TAB_CLASS + "\"";
							
			}
			
			// Finish the tab
			UU_Output += "><a href=\"javascript:SelectTab('" + Tabs[Tab]["ID"] + "');\">" + Tabs[Tab]["Label"] + "</a></li>";
					
			// Increment the tab counter
			TabCounter++;
			
		}
		
	}
	
	// End the UL
	UU_Output += "</ul>";
	
	// Show feature tag
	UU_Output += "<!-- FEATURE END: Tab Navigation -->";
	
	// If there's at least two tabs...
	if(TabCounter > 1){

		// Draw output
		document.getElementById(TAB_CONTAINER_DIV_ID).innerHTML = UU_Output;
		
	}
	
}

// Select tab whose id is SelectedTab
function SelectTab(DesiredTabID)
{
	// For each tab...
	for(Tab in Tabs){

		// If it's the desired tab...
		if(Tabs[Tab]["ID"] == DesiredTabID){
			
			// Select the tab
			document.getElementById(Tabs[Tab]["ID"]).className = SELECTED_TAB_CLASS;
	
			// Show the corresponding div
			ShowElement(Tabs[Tab]["ContentDivID"]);

		} else {
		
			// If the tab exists...
			if(ElementExists(Tabs[Tab]["ID"])){

				// Unselect the tab
				document.getElementById(Tabs[Tab]["ID"]).className = "";			
				
			}

			// If the corresponding div exists...
			if(ElementExists(Tabs[Tab]["ContentDivID"])){
			
				// Hide the corresponding div
				HideElement(Tabs[Tab]["ContentDivID"]);
			
			}

		}
	}
}

// Show the element whose id is ID
function ShowElement(ID){

	// If the element exists...
	if(ElementExists(ID)){
	
		// Display it
		document.getElementById(ID).style.display = "block";
		document.getElementById(ID).style.visibility = "visible";
		
	}
}

// Show the element whose id is ID
function HideElement(ID){

	// If the element exists...
	if(ElementExists(ID)){

		// Hide it
		document.getElementById(ID).style.display = "none";
		document.getElementById(ID).style.visibility = "hidden";
		
	}
}

// Determine whether an element exists
function ElementExists(ID){

	// If the element exists...
	if(document.getElementById(ID) != null){
		return true;
	} else {
		return false;
	}
	
}