// REQUIRE: /_js/dom/abbr.js
/*****

AUTHOR:
	Andrew Chow - drew4work@gmail.com
FUNCTION:
	- Drop down menu, as 2-level Nested <ul>-list.
 	- Only one customizable DOM-ID (for the top-level <ul>) is needed for the javascript
	  to control the list.
	- All styles & positioning are controlled by CSS.
	- Search Engine Friendly, since all links are exposed as plain HTML.

EXAMPLE:

<script type="text/javascript" src="_js/drop-down-menu/drop-down-menu.js"></script>
<script type="text/javascript">
var ddm = new DropDownMenu('ddm');
ddm.init('site-menu'); // 'site-menu' is the id of the top level <ul>
addListener(window, "load", function {ddm.start();});
</script>

<ul id="site-menu">
	<li><a href="">Apple</a>
		<ul><li><a href="">AAA</a></li>
			<li><a href="">BBB</a></li>
			<li><a href="">CCC</a></li>
		</ul></li>
	<li><a href="">Banana</a></li>
	<li><a href="">Cherry</a></li>
</ul>


<style>
//
// SITE MENU
//

ul#site-menu,
ul#site-menu li {
margin: 0px;
padding: 0px;
list-style-type: none;
}

ul#site-menu {
margin: 23px auto 1px auto;
width: 648px;
}
ul#site-menu, { // IE hack
margin-top: 24px;
}
ul#site-menu li {
float: left;
width: 107px;
height: 65px;
border-right: 1px solid #F2F0E4;
}
ul#site-menu li.last {
border-right: 0px;
}

ul#site-menu li a {
display: block;
width: 100%;
height: 22px;
padding-top: 43px;
text-align: center;
background: #ffffff;
text-decoration: none;
font-weight: bold;
color: #924719;
}
ul#site-menu li a:hover,
ul#site-menu li a.on {
background: url('../images/site-menu-item-bg.gif') repeat-x;
color: #ffffff;
}

//
// SITE MENU > DROP DOWN MENU
//

ul#site-menu li ul {
margin: 0px;
background: #ffffcc;
padding: 10px 0px 5px 0px;
width: 200px;
border: 1px solid #cccccc;
display: none;
position: absolute;
}
ul#site-menu li ul li {
float: none;
height: auto;
padding: 0px;
width: 190px;
border: 0px;
}
ul#site-menu li ul li a {
padding: 2px 0px 0px 10px;
background: #ffffcc;
white-space: nowrap;
text-align: left;
}
ul#site-menu li ul li a:hover {
background: #ffffff;
color: #924719;
}
</style>

*****/


function DropDownMenu(objName) {

me = this;
this.topListId;
this.topList;

this.init = function(topListId) {
	this.topListId = topListId;
	this.topList = ge(me.topListId);
}

this.getChildUL = function(elem) {
	var aUL = gt(elem, 'ul');
	if (aUL.length > 0) {
		return aUL[0];
	}
}

this.showULInElem = function(elem) {
	var ul = me.getChildUL(elem);
	if (ul) {
		ul.style.display = 'block';
	}
}
this.hideULInElem = function(elem) {
	var ul = me.getChildUL(elem);
	if (ul) {
		ul.style.display = 'none';
	}
}


this.showChildUL = function(e, display) { // boolean display: true (of null) = show, false = hide
	var e = (window.event)?window.event:e;
	var src = (e.srcElement)?e.srcElement:e.target;
	if (display == null) {
		var display = true;
	}
	// get the source element's parents until <li> is found
	var fuse = 100;
	var counter = 0;
	while (src.tagName != 'LI' && counter < fuse) {
		src = src.parentNode;
		counter++;
	}
	if (src.tagName == 'LI') {
		if (display) {
			me.showULInElem(src);
		} else {
			me.hideULInElem(src);
		}
	}
}
this.hideChildUL = function(e) {
	me.showChildUL(e, false);
}

this.showThisUL = function(e, display) { // boolean display: true (of null) = show, false = hide
	var e = (window.event)?window.event:e;
	var src = (e.srcElement)?e.srcElement:e.target;
	if (display == null) {
		var display = true;
	}
	// get the source element's parents until <UL> is found
	var fuse = 100;
	var counter = 0;
	while (src.tagName != 'UL' && counter < fuse) {
		src = src.parentNode;
		counter++;
	}
	if (src.tagName == 'UL') {
		src.style.display = (display)?'block':'none';
	}
}
this.hideThisUL = function(e) {
	me.showThisUL(e, false);
}


this.patchOnMouseEventToTopLI = function() {
	var aa = me.topList.childNodes;
	for (var ii=0;ii<aa.length;ii++) {
		if (aa[ii].tagName == 'LI') {
			aa[ii].onmouseover = me.showChildUL;
			aa[ii].onmouseout = me.hideChildUL;
			// get child UL
			var ul = me.getChildUL(aa[ii]);
			if (ul) {
				ul.onmouseover = me.showThisUL;
				ul.onmouseout = me.hideThisUL;
			}
		}
	}
}

this.start = function() {
	me.patchOnMouseEventToTopLI();
}

}