/*****************************************
		
BRAHCHES:
<b><a onmouseover="over('c_1');" onmouseout="out();"
  href="people.html">people</a></b><br>
 	<div id="c_1" style="........">
  		<a href.........>link_1</a>
		<a href.........>link_2</a>
		<a href.........>link_3</a>
		~~~~
		<a href.........>link_N</a>
   	</div>
DO I USE THIS?

*******************************************/



//GLOBAL VARS
 var timeOut =-1;
 var timeIn =-1;
 var treeArray = new Array();


function over(layerName,menuItem){
	if (timeOut!=-1){
		clearTimeout(timeOut);
		timeOut =-1;
	}	
	if (layerName!=null) {
		if (timeIn == -1){
			timeIn = setTimeout("show('"+layerName+"'); timeIn = -1;", 300);
		}
	}
	if (menuItem!=null) {
		menuItem.className = "rolloverItemOver";
	}
}

function out(menuItem){
	if (timeIn!=-1){
		clearTimeout(timeIn);
		timeIn = -1;
	}
	if (timeOut == -1) {
		timeOut = setTimeout("hideAll();  timeOut = -1;", 400);
	}	
	if (menuItem!=null) {
		menuItem.className = "rolloverItem";
	}
}

function show(layerName) {
	var l = layerName.split('_');
	hide(l.length);
	
	var c = document.getElementById(layerName);
	if (c==null) {
		return;
	}
	treeArray[l.length] = layerName;
	c.style.display = "block"
}

function hide(nodeIndex){
	for (var i = nodeIndex; i < treeArray.length; i++){
		var layerName = treeArray[i]
		var c = document.getElementById(layerName);
		if (c != null){ 
			treeArray[i]=null;
			if (c.style.display == 'block') {
				c.style.display = 'none';
			}
		}
	}
}

function hideAll(){
	for (var i = 0; i < treeArray.length ; i++){
		hide(i);
	}
}