var currentPanel=null;

// this function will set the active panel during page load.  By default, panel 1 is the active panel
function setPanel()
{
	var element = document.getElementById("hidActivePanel");
	
	if (element != null)
		showPanel(element.value);
	else
		showPanel(1);
}

// this function will change the active panel number
function changeActivePanel(panelNumber)
{
	var element = document.getElementById("hidActivePanel");
	
	if (element != null)
	{
		element.value = panelNumber;
	}
}

// this function will turn on the active panel
function showPanel(panelNum){
	//hide visible panel, show selected panel, set tab
    if (currentPanel != null) {
		hidePanel();
	}
	currentPanel = panelNum;
	setState(panelNum);
	document.getElementById('panel'+panelNum).style.backgroundColor = '#C2D8C5';
	document.getElementById('panel'+panelNum).style.border = '0px solid navy';	
	document.getElementById('panel'+panelNum).style.visibility = 'visible';
	document.getElementById('panel'+panelNum).style.display = 'block';
}

// this function hide the active panel
function hidePanel(){
	//hide visible panel, unhilite tab
	document.getElementById('panel'+currentPanel).style.backgroundColor = '#C2D8C5';
	document.getElementById('panel'+currentPanel).style.color = 'navy';
	document.getElementById('panel'+currentPanel).style.visibility = 'hidden';
	document.getElementById('panel'+currentPanel).style.display = 'none';
	document.getElementById('tab'+currentPanel).style.backgroundColor = '#99BE9C';
	document.getElementById('tab'+currentPanel).className = 'tabNotActive';
	document.getElementById('tab'+currentPanel).style.color = 'white';
}

// this function set current of the tabs
function setState(tabNum){
	if(tabNum==currentPanel){
		document.getElementById('tab'+tabNum).className = 'tab';
		document.getElementById('tab'+tabNum).style.backgroundColor = '#C2D8C5';
		document.getElementById('tab'+tabNum).style.color = '#57885A';
	}else{
		document.getElementById('tab'+tabNum).style.backgroundColor = '#99BE9C';
		document.getElementById('tab'+tabNum).style.color = 'white';
	}
}

// this function change color of tab when mouse hover over tabs
function hover(tab){
	tab.style.backgroundColor = '06334B';
}