tabs.js #2

// JScript File
	var currentPanel;
	//var tabBGColor = '#ddddff';
	var tabBGColor = 'navy';
	var tabBGColorSelected = '#ffffff';
	//var tabTextColor = 'navy';
	var tabTextColor = 'white';
	var tabTextColorSelected = 'red';
	var tabBorderColor = 'navy';
	var tabBorderColorSelected = '#ffffff';
	
	function showPanel(panelNum){
		if (currentPanel != null) {
			//call method to hide panel
			hidePanel();
		}
		
		//show selected panel
		document.getElementById('panel'+panelNum).style.visibility = 'visible';
		
		//remember new visible panel
		currentPanel = panelNum;
		
		//call method to set tab corresponding to new panel
		setState(panelNum);
	}
	
	function hidePanel(){
		//hide visible panel
		document.getElementById('panel'+currentPanel).style.visibility = 'hidden';
		
		//recolor tab to that of unselected tab
		document.getElementById('tab'+currentPanel).style.backgroundColor = tabBGColor;
		
		//reset text color to that of unselected tab
		document.getElementById('tab'+currentPanel).style.color = tabTextColor;
		
		//set bottom border color to that of unselected tab
		document.getElementById('tab'+currentPanel).style.borderBottomColor = tabBorderColor;
	}
	
	function setState(tabNum){
		if(tabNum==currentPanel){
			//recolor tab to that of selected tab
			document.getElementById('tab'+tabNum).style.backgroundColor = tabBGColorSelected;
			
			//reset text color to that of selected tab
			document.getElementById('tab'+tabNum).style.color = tabTextColorSelected;
			
			//set bottom border color to that of selected tab
			document.getElementById('tab'+tabNum).style.borderBottomColor = tabBorderColorSelected;
		}else{
			//reset text color to that of unselected tab
			document.getElementById('tab'+tabNum).style.color = tabTextColor;
		}
	}
	
	function hover(tab){
		tab.style.color = tabTextColorSelected;
	}