Can anyone help me to understand this javascript code?

I got the following js code, and try to understand how it works. It was written for a website's drop down menu which links to a couple of sub-page (php files) of the website. Here is the html code that calls this piece of js code. My goal is add another sub-manu to this drop down manu - Now it has two choices in drop down.

<td width="16%"><div align="center"id="menubar_3" class="menubar" onmouseover="menuControl(1, this, event)" onmouseout="menuControl(0,this, event)">Menu</div></td>


Thanks a lot!!!! I don't know too much about js... Is there any quick way to get thing done - add a third menu choice the drop down?




Original js code:

function menuControl(show, obj,evt)

{

if (window.event)

        window.event.cancelBubble = true;

    else

        evt.cancelBubble = true;

//var objID=obj.id;

var objID=obj.id;

var index=objID.indexOf("_");

var mainID=objID.substring(0,index);

var numID=objID.substring(index+1,objID.length);

if(mainID=="menubar")

{

if(show==1)

{

 eval("showMenu("+"menu_"+numID+")"); 



}

else

{

 eval("hideMenu("+"menu_"+numID+")"); 



}

}



}



var nbottom=0,speed=1;

function displayMenu(obj)

{

//obj.style.clip="rect(0 100% "+nbottom+"% 0)"; 

obj.style.backgroundColor="black";

obj.style.clip="rect(0px, 140px, "+nbottom+"px, 0px)";

nbottom+=speed;

if(nbottom<=45)

{

timerID=setTimeout("displayMenu("+obj.id+"),70");

}

else clearTimeout(timerID);

}

function showMenu(obj)

{

obj.style.display="block";

//obj.style.clip="rect(0 0 0 0)";

obj.style.backgroundColor="black";

obj.style.clip="rect(0px, 0px, 0px, 0px)";



nbottom=5;

displayMenu(obj);

}

function hideMenu(obj)

{

nbottom=0;

obj.style.display="none";

//document.getElementById(obj).style.display="none";

}

function keepMenu(obj)

{

obj.style.display="block";

//document.getElementById(obj).style.display="block";

}

Code (markup):

 

In menuControl, it breaks up the div id value to get "menubar" and a number.
From that point on, I think it's working on another element, called "menu_" with the number tacked on the end.
In displayMenu, it appears to be increasing the height of the clipping rectangle to make the menu appear gradually.

I don't know how to add a new sub-menu. I would need to see all of the menu markup.