var section = "#null";
var sectionlast = "#null";
var buttonhigh = "#null";
var buttonlast = "#null";

var selectedButton;

function load (sectionName){
	selectedButton = sectionName + "_button";
	buttonhigh = selectedButton;
	buttonlast = selectedButton;

	highlight();

	selectedButtonBottom = sectionName + "_button_bottom";
	buttonhighBottom = selectedButtonBottom;
	buttonlastBottom = selectedButtonBottom;

	highlightBottom();
}

function hoverButton(sectionName){
	clearTimeout( timerHandle );

	section = sectionName;
	buttonhigh = sectionName + "_button";
	
	indexChange(20);

	hide();
	delight();
	
	highlight();
	
	show();
	
	sectionlast = section;
	buttonlast = buttonhigh;	

}

var timerHandle;
function check() {
      timerHandle = setTimeout('hide()', 500);
}


function show() {
	clearTimeout(timerHandle);
		
	highlight();
	if (document.getElementById && document.getElementById(section) != null){
         document.getElementById(section).style.visibility='visible';
		 }
    else if (document.layers && document.layers[section] != null)
        document.layers[section].visibility = 'visible';
    else if (document.all)
        document.all[section].style.visibility = 'visible';
	indexChange(20);
	return;		
}
		
function hide() {  
    if(sectionlast != "#null"){
	
    delight();
   
    if (document.getElementById && document.getElementById(sectionlast) != null){    
         document.getElementById(sectionlast).style.visibility='hidden';
	}
    else if (document.layers && document.layers[sectionlast] != null)
	      document.layers[sectionlast].visibility = 'hidden';
	else if (document.all)
         document.all[sectionlast].style.visibility = 'hidden';}
	indexChange(300);
	return;	 
	
}


function highlight() { 

	if (document.getElementById && document.getElementById(buttonhigh) != null){
		 document.getElementById(buttonhigh).style.color= "black";
		 document.getElementById(buttonhigh).style.border = "1px inset black";
	}
	else if (document.layers && document.layers[buttonhigh] != null)
		  document.layers[buttonhigh].border = "inset #000000";
	else if (document.all){
		 document.all[buttonhigh].style.color = "black";
		 document.all[buttonhigh].style.border = "1px inset black";
	}
	return;		 
}

function delight() { 

    if(buttonlast != "#null" && buttonlast != selectedButton) {
	
    if (document.getElementById && document.getElementById(buttonlast) != null){
	   	 document.getElementById(buttonlast).style.border= "1px outset #bbbbbb";
	     document.getElementById(buttonlast).style.color= "#FFFFFF";
         }
    else if (document.layers && document.layers[buttonlast] != null)
	      document.layers[buttonlast].borderColor = "#bbbbbb";
	else if (document.all){
         document.all[buttonlast].style.border = "outset #bbbbbb";

		 }
	}	 
	return;
}


function indexChange(newIndex) {

    if (document.getElementById){
	   	 document.getElementById("navmenu").style.zIndex= newIndex;
	   	 document.getElementById("usable").style.zIndex= newIndex;
	}
    else if (document.layers){
	      document.layers["navmenu"].zIndex = newIndex;
	      document.layers["usable"].zIndex = newIndex;
	}
	else if (document.all){
         document.all["navmenu"].style.zIndex = newIndex;	 
         document.all["usable"].style.zIndex = newIndex;	 
	}
	return;
}



//-----------------------------------
// FOR THE BOTTOM MENU
//-----------------------------------
var sectionBottom = "#null";
var sectionlastBottom = "#null";
var buttonhighBottom = "#null";
var buttonlastBottom = "#null";

var selectedButtonBottom;

function hoverButtonBottom(sectionName){
	clearTimeout( timerHandleBottom );

	sectionBottom = sectionName + "_bottom";

	buttonhighBottom = sectionName + "_button_bottom";
	
	indexChangeBottom(21);

	hideBottom();
	delightBottom();
	
	highlightBottom();
	
	showBottom();
	
	sectionlastBottom = sectionBottom;
	buttonlastBottom = buttonhighBottom;	

}

var timerHandleBottom;
function checkBottom() {
      timerHandleBottom = setTimeout('hideBottom()', 500);
}


function showBottom() {
	clearTimeout(timerHandleBottom);
		
	highlightBottom();
	if (document.getElementById && document.getElementById(sectionBottom) != null){
         document.getElementById(sectionBottom).style.visibility='visible';
		 }
    else if (document.layers && document.layers[sectionBottom] != null)
        document.layers[sectionBottom].visibility = 'visible';
    else if (document.all)
        document.all[sectionBottom].style.visibility = 'visible';
	indexChangeBottom(20);
	return;		
}
		
function hideBottom() {  
    if(sectionlastBottom != "#null"){
	
    delightBottom();
   
    if (document.getElementById && document.getElementById(sectionlastBottom) != null){    
         document.getElementById(sectionlastBottom).style.visibility='hidden';
	}
    else if (document.layers && document.layers[sectionlastBottom] != null)
	      document.layers[sectionlastBottom].visibility = 'hidden';
	else if (document.all)
         document.all[sectionlastBottom].style.visibility = 'hidden';}
	indexChangeBottom(-1);
	return;	 
	
}


function highlightBottom() { 

	if (document.getElementById && document.getElementById(buttonhighBottom) != null){
		 document.getElementById(buttonhighBottom).style.color= "black";
		 document.getElementById(buttonhighBottom).style.border = "1px inset black";
	}
	else if (document.layers && document.layers[buttonhighBottom] != null)
		  document.layers[buttonhighBottom].border = "inset #000000";
	else if (document.all){
		 document.all[buttonhighBottom].style.color = "black";
		 document.all[buttonhighBottom].style.border = "1px inset black";
	}
	return;		 
}

function delightBottom() { 

    if(buttonlastBottom != "#null" && buttonlastBottom != selectedButtonBottom) {
	
    if (document.getElementById && document.getElementById(buttonlastBottom) != null){
	   	 document.getElementById(buttonlastBottom).style.border= "1px outset #bbbbbb";
	     document.getElementById(buttonlastBottom).style.color= "#FFFFFF";
         }
    else if (document.layers && document.layers[buttonlastBottom] != null)
	      document.layers[buttonlastBottom].borderColor = "#bbbbbb";
	else if (document.all){
         document.all[buttonlastBottom].style.border = "outset #bbbbbb";

		 }
	}	 
	return;
}


function indexChangeBottom(newIndex) {

    if (document.getElementById){
	   	 document.getElementById("bottom-menu").style.zIndex= newIndex;
	}
    else if (document.layers){
	      document.layers["bottom-menu"].zIndex = newIndex;
	}
	else if (document.all){
         document.all["bottom-menu"].style.zIndex = newIndex;	 
	}
	return;
}