/****************************
borrowed from www.opera.om
****************************/
addEvent( window, 'load', load );
var popID;
var tID;
useAbsPath = 0;

function load() {
	inMenu = false;
	body = document.getElementsByTagName( "body" )[0];
	last = null;
	if( getNode( "tab2" ) == null ) return; // tab2 is the id for the About tab
	var prds  = new MenuP( getNode( "tab2" ));
	prds.add( new Menu( "History", "WyAbout.htm#history" ) );
	prds.add( new Menu( "Staff", "WyAbout.htm#staff" ) );
	prds.create();
}

function MenuP ( node ) {
	this.node = node;
	this.menuItems = new Array();

	MenuP.prototype.add = function( menuItem ) {
		this.menuItems[ this.menuItems.length ] = menuItem;	
	}

	MenuP.prototype.create = function( ) {
		/*  this creates a new div referred to as dNode.  This div will be the dropdown menu
                    <div id=_tab3 class=jsMenu>
                        <ul>
			   <li>
                               <a onclick="setInMenu(false); hideMenu(); return true;"
                                  href="IVRESS.htm">IVRESS/toolkit</a>
                           </li>
                           etc.
                       <ul>

                       _tab3 {
                            width: 86px;
                            top:   109px;
                            left:  192px;
                        }

                      Notes:
                          "this" refers to tab2

                       
                */
		var dNode = document.createElement( "div" );
		dNode.className = "jsMenu";
		var str = "_" + this.node.id;
		dNode.setAttribute( "id", str );
		var w = this.node.offsetWidth;
               	// comment out below and use the width set in the css
		//dNode.style.width = w > 160 ? w+"px" : "160px";  
		dNode.style.top = ( this.node.offsetTop + this.node.offsetHeight ) + "px";
		dNode.style.left = this.node.offsetLeft + "px";
		addEvent( this.node, "mouseover", function() { showMenuInTime(str, 150) } );
		addEvent( this.node, "mouseout", function() { setInMenu(false) } );
		dNode.setAttribute( "pItemID", this.node.id );
		addEvent( dNode, "mouseover", function() { setInMenu(true) } );
		addEvent( dNode, "mouseout", function() { setInMenu(false) } );
		var html = "<ul>";
		for( var i=0; i<this.menuItems.length; i++ ) {
			html += this.menuItems[i].getLinkHTML();
		}

		body.appendChild( dNode );
		dNode.innerHTML = html + "</ul>";
	}
}

function Menu( value, href ) {
	this.value = ( value == null ) ? "" : value;
	this.href = ( href == null ) ? "" : href;
	if( this.href != "" && typeof useAbsPath != "undefined" ) { // use absolute path
		if( useAbsPath && this.href.indexOf( "http://" ) == -1 && this.href.indexOf( "https://" ) == -1 ) this.href = "http://www.pcusa-peva.org/wythepc/" + this.href;
        }


	Menu.prototype.getLinkHTML = function () {
		if( this.value != "" && this.href != "" )
			return "<li><a onclick=\"setInMenu(false); hideMenu(); return true;\" href=\"" + this.href + "\">" + this.value + "</a></li>";
		else if( this.value != "" && this.href == "" )
			return "<li class='heading'>" + this.value + "</li>";
		else
			return "<li class='separator'>&nbsp;</li>";
	}
}

function showMenuInTime( node, time ) {
	popID = setTimeout( "showMenu('" + node + "')", time );
}

function showMenu( node ) {
	clearTimeout( popID );
	if( typeof node == "string" ) node = getNode( node );
	if( last != null && last != node ) hideMenu( last );
	else if( last == node ) {
		setInMenu( true );
		return;
	}
	var pItem = getNode( node.getAttribute( "pItemID" ) );
	var menuLeft = 0;
	var menuTop = pItem.offsetHeight;
	var tmp = pItem;
	while(tmp.tagName!="BODY") {
		if( tmp.tagName == "HTML" ) break; /* jmp added for IE */
		if( tmp.tagName == "html:body" ) break;
		menuLeft += tmp.offsetLeft;
		menuTop  += tmp.offsetTop;
		tmp = tmp.offsetParent;
	}
	node.style.left = menuLeft + "px";
	node.style.top = menuTop + "px";
	var w = pItem.offsetWidth;
        // comment out below and use the width set in the css
	//node.style.width = w > 160 ? w+"px" : "160px";
	node.style.display = "block";	
	setInMenu( true );
	last = node;
	tID = setTimeout( "hideMenu( last )", 500 );
}

function hideMenu( node ) {
	if( node == null ) {
		setInMenu( false );
		hideMenu( last );
		return;
	}
	if( typeof node == "string" ) node = getNode( node );
	if( !inMenu ) {
		node.style.display = "none";
		var pItem = getNode( node.getAttribute( "pItemID" ) );
		last = null;
		clearTimeout( tID );
	} else tID = setTimeout( "hideMenu( last )", 500 );	
}

function setInMenu( value ) {
	inMenu = value;	
	if( !value ) clearTimeout( popID );
}

function addEvent( node, evtType, func ) {
	if( node.addEventListener ) {
		node.addEventListener( evtType, func, false );
		return true;
	} else if( node.attachEvent ) return node.attachEvent( "on" + evtType, func );
	else return false;
}
function getNode( nodeId ) {
	if( document.getElementById ) return document.getElementById( nodeId );
	else if( document.all && document.all( nodeId ) ) return document.all( nodeId );
	else if( document.layers && document.layers[ nodeId ] ) return document.layers[ nodeId ];
	else return false;
}
