// JavaScript Document

//
//   function ExpandMenu
//
//   abstract Expands a submenu in a heirarchical menu structure.
// discussion This function expands a submenu in a heirarchical menu structure.
//            A menu is identified by a menu name; these must be unique within
//            the page.  There are three elements important to the menu's
//            function: the expander, the contents, and the container.  The
//            expander is the image the user clicks in order to show the
//            submenu.  The contents is the items of the submenu; I like to make
//            this an invisible div tag floated to the top left of the page, so
//            that it isn't noticed.  The container is a placeholder for where
//            the submenu should be displayed when the expander is clicked.  It
//            is important that these menus have their id attributes set
//            appropriately.  The expander's id should be the menu name followed
//            by "Expander", the content's id should be the menu name followed
//            by "Contents", and the container's id should be the menu name
//            followed by "Container".  In addition, this script assumes the
//            existence of two images, expanded.gif and collapsed.gif, which are
//            displayed in the expander when the submenu is expanded and
//            collapsed, respectively.  This function is intended to be called
//            from a link's onclick handler, and thus always returns false. 
//            This way, if the function fails for some reason (it is most likely
//            that the browser is very old and does not support DOM Level 1),
//            the browser will fall back to following the link, which should be
//            relevant to the menu item clicked.
//
//      param menuName  The name of the menu to expand.
//     result false on success.
//  standards ECMAScript, DOM Level 1
//
//    example <!-- This a tag triggers the JavaScript and provides a fallback
//                 link. -->
//            <a href="products" onclick="return ExpandMenu( 'products' )">
//
//            <!-- This img tag is the expander image. -->
//            <img id="productsExpander" src="collapsed.gif" />
//            </a> Products
//
//            <!-- This is an empty paragraph that will hold the Products
//                 submenu when it's expanded. -->
//            <p id="productsContainer" />
//
//            <!-- This div contains the Products submenu. -->
//            <div id="productsContents" style="left: 0px; position: absolute; top: 0px; visibility: hidden;">
//              <p><a href="products/widget">Widget 2.0</a></p>
//            </div>
//
function ExpandMenu( menuName )
{
	var i = 0;
	var menuContainer = document.getElementById( menuName + "Container" );
	var menuContainerChildren = menuContainer.childNodes;
	var menuExpander = document.getElementById( menuName + "Expander" );
	var newMenu = document.getElementById( menuName + "Contents" );

	if( menuExpander.src.match( "collapsed.gif$" ) )  // that is, it ends with "collapsed.gif"
	{
		// The menu is currently collapsed.  Insert a copy of the submenu, and
		// change the image of the expander.
		newMenu = newMenu.cloneNode( true );   // Makes a copy of the node
		newMenu.style.position = "relative";   // Position the copy relatively
		newMenu.style.visibility = "visible";  // Show the copy
		menuContainer.appendChild( newMenu );  // Place it in the container

		menuExpander.src = "/NewTech/images/expanded.gif";     // Switch the expander's image
	}
	else
	{
		// The menu is currently expanded.  Remove the submenu and change the
		// image of the expander.

		// This removes all the tags within the container.
		while( menuContainerChildren.length )
			menuContainer.removeChild( menuContainerChildren[ 0 ] );

		menuExpander.src = "/NewTech/images/collapsed.gif";    // Switch the expander's image
	}
	return false;
}