// JavaScript Document
var guiTabs;
var guiTabElements;

//Called once when document loads. It registers each tab in the tabMenu div
//This is used so it can toggle all the tabs based on user selection
function registerTabs(){
	guiTabs = new Array();
	guiTabElements = new Array();
	var tabs = document.getElementById("menu");
	var list = tabs.getElementsByTagName("img");
	if(list.length > 0){
		for(i =0; i < list.length; i++){
			guiTabElements[i] = list[i];
			var id = list[i].id;
			var shortId = id.split("_");
			guiTabs[i] = shortId[0];
		}
	}
}

//This function is called on when a Button is clicked by the user
function toggleMenuTabs(selected){
	if(selected != ""){
		for(i = 0; i < guiTabElements.length; i++){
			var id = guiTabs[i]; // ID
			var tab = guiTabElements[i] //li.ID
			if(id == selected){
				//Toggle Selected Button Image
				var element = document.getElementById(id+"_Button");
				selectButton(element);
				toggleTabs(selected);
			}else{
				var element = document.getElementById(id+"_Button");
				deselectButton(element);
			}
		}
	}
}

function selectButton(element){
	var imageIdentifiers = imageNameArray(element);
	var newImage = imageIdentifiers[0]+"-"+imageIdentifiers[1].split(".")[0]+"-selected.png";
	element.src = rootImageDirectory+"elements/buttons/"+newImage;
}

function deselectButton(element){
	var imageIdentifiers = imageNameArray(element);
	var newImage = imageIdentifiers[0]+"-"+imageIdentifiers[1].split(".")[0]+".png";
	element.src = rootImageDirectory+"elements/buttons/"+newImage;
}

function imageNameArray(element){
	var sourceValue = element.src; 
	var shortId = sourceValue.split("/");
	var length = shortId.length;
	var imageName = shortId[length-1];
	var imageIdentifiers = imageName.split("-");
	return imageIdentifiers;
}

function mouseOverImageSwap(buttonName, newValue){
	var element = document.getElementById(buttonName);
	if(element.src.indexOf("selected") > 0){}else{
		element.src = newValue;
	}
}

/**
Hide and show Tabs based on user selection
**/
function toggleTabs(selected){
	for(j = 0; j < guiTabElements.length; j++){
		var tabName = guiTabs[j];
		var element = document.getElementById(tabName);
		if(element != null && tabName == selected){
			element.style.display = "block";
		}else if(element != null){
			element.style.display = "none";
		}
	}
}