function jjMenuInit() {

/*

	FUNCTION:	jjMenuInit();

	SYNTAX:		jjMenuInit( none );

	NOTES:		jjMenu is a function that will emulate what CSS2 does naturally, only for IE6.

				As most web developers know, IE6 does not support hovering on any elements except
				for anchor tags.  Most of the time, this is not very inconvenient, however when
				it comes to menus built with embedded lists it's a real headache.

				With CSS alone in Firefox, Opera, Safari, Mozilla, etc. (i.e. any browser that
				supports hovering over elements other than anchor tags) you can create CSS-based
				menus with dropped down, embedded menus.

				For instance:

					+---------+
					| Menu #1 |
					+---------+
					+---------+
					| Menu #2 |
					+---------+

				... then, when hovered over:

					+---------+
					| Menu #1 |
					+---------+
						+-------------+
						| Sub-menu #1 |
						+-------------+
						+-------------+
						| Sub-menu #2 |
						+-------------+
						+-------------+
						| Sub-menu #3 |
						+-------------+
					+---------+
					| Menu #2 |
					+---------+

				This technique, however, requires the ability to hover over elements other than
				anchor tags, as anchor tags cannot contain embedded lists and be considered valid
				X/HTML.

				With jjMenu, however, this is no longer an issue.  You can build your list to work
				in a valid CSS-rendering browser engine (i.e. Firefox, Mozilla, Opera, Safari, etc.)
				with CSS alone, and then to make it work in IE6, as well, all you need to do is add
				"jjMenu" as a class to the container around your menu.

				For example:

					<div class="nav jjMenu" id="topNav">

						<ul>

							<li> ...
								
								<ul class="subMenu">
									<li> ... </li>
								</ul>

							</li>

						</ul>

					</div>

				... and it will behave the same in IE6 as it does in the properly rendering 
				browser engines.  It's that simple!

				NOTE: You *MUST* put the class of "jjMenu" onto the container AROUND your <ul>'s, not
				on the <ul>'s themselves.  If you put the class on a <ul> tag that is part of the menu
				itself, then it will not be able to properly find the embedded lists.  YOU'VE BEEN
				WARNED!
					

	RETURNS:	Nothing.

	DEPENDENTS:	This function requires the ec() and el() functions included with this library.

*/

//		Grab all elements with a class of, "jjMenu".

		theMenus=ec("*","jjMenu");

//		Run through each one...
	
		for(i=0;i<theMenus.length;i++) {

//			Grab the dates to tack onto the end of the ID's of the menus.
	
			var d = new Date();
			var t = d.getTime();

//			Add forementioned ID's with timestamp (to make them near-unique).
	
			theMenus[i].id="jjMenu"+t;

//			Convert the item into an object so we can take a turn to Object Oriented Programming.

			menuObject = el("jjMenu"+t);

//			Grab all the <ul> tags within the menu.
	
			menuLists=menuObject.getElementsByTagName("ul");

//			Run through each one.
	
			for(ii=0;ii<menuLists.length;ii++) {

//				Grab each <li> tag within the <ul> tag.
	
				menuListItems = menuLists[ii].getElementsByTagName("li");

//				Run through all of *those*.
	
				for(iii=0;iii<menuListItems.length;iii++) {

//					Grab the content of each <li> tag.
	
					liContent = menuListItems[iii].innerHTML;

//					Check to see if there are any embedded lists within...
	
					if (liContent.match("<UL") || liContent.match("<ul")) {

//						If there are embedded lists, then...
	
						menuListItems[iii].onmouseover=function() {

//							Make the top one visible when the parent <li> is hovered over.
	
							liUL=this.getElementsByTagName("ul");	
							liUL[0].style.display="block";
	
						}
	
						menuListItems[iii].onmouseout=function() {

//							Make it invisible when the parent <li> is no longer hovered over.
	
							liUL=this.getElementsByTagName("ul");	
							liUL[0].style.display="none";
	
						}
	
					}
	
				}		
	
			}
	
		}
	
}

function ec(node,searchClass) {

/*

	FUNCTION:	ec();

	SYNTAX:		ec( node , searchClass );

					node:			The HTML tags to search through (e.g. a,img,body,*,etc.)
					searchClass:	The Class of the element.  (e.g. 'red')

	NOTES:		This function is very similar to el(), except instead of selecting an element based on
				its ID, it selects elements based on their classes.

				For instance, if you wanted to select every anchor that has a class of, "red" then
				you could do the following:

					allReds = ec('a','red');

				... and then parse it as you see fit.
				

	NOTICE:		This function returns an Array, since there are likely going to be multiple
				instances of the class you specify.  Even if there is only one instance of an
				element, it will still return an Array with a single record.

	RETURNS:	The objects that were selected.

*/

	var classElements = new Array();
	var elClass = new Array();

	classElements=document.getElementsByTagName(node);

	for(i=0,j=0;i<classElements.length;i++) {

		if(classElements[i].className.match(searchClass)) {
			
			elClass[j]=classElements[i];
			j++;

		}

	}

	return elClass;
}

function el(elementID) {

/*

	FUNCTION:	el();

	SYNTAX:		el( elementID );

					elementID:		The ID of the element.  (e.g. 'Navigation')

	NOTES:		This function simplifies calls to functions based on their ID.

				Rather than something like this:

					document.geElementById('Navigation') ...

				You can type this:

					el('Navigation') ...

				Which will compress your code and simplify the whole process.

				NOTE: This function can work as both a query and as a statement.

				For example:

					if(el('man').offsetHeight>6) { ... }	(a query)

						or
					
					el('man').offsetHeight=6;				(a statement)

				'el' is short for Element.  That's all!

	RETURNS:	The object that was selected.

*/

	return document.getElementById(elementID);

}

// This is what runs when the page  loads.

window.onload=function(){

	jjMenuInit();

}