var arrFlyouts = new Array();
var arrDivFlyouts = new Array();

var flyoutTimer = null;
var currentMenuItemID = "";

function SubmenuItem( p_divMenuItem ) {

	if( ! p_divMenuItem.id || p_divMenuItem.id == "" ) p_divMenuItem.id = newid();

	this.flyoutTable = document.createElement( "table" );
	this.divMenuItem = p_divMenuItem;
	this.shadows = new Array();
		
	this.draw = draw;
	this.hide = hide;
	this.equals = equals;
	this.setupDropShadows = setupDropShadows;
	
	this.loadSubmenus = loadSubmenus;

	this.flyoutTable.style.position = "absolute";
	this.flyoutTable.width = 120;
	this.flyoutTable.style.top = element_top( this.divMenuItem ) + 15;
	this.flyoutTable.style.left = element_left( this.divMenuItem ) + 10;	
	this.flyoutTable.cellPadding = 0;
	this.flyoutTable.cellSpacing = 0;
	this.flyoutTable.style.zIndex = 100;
	this.flyoutTable.style.borderCollapse = "collapse";
	this.flyoutTable.className = "flyoutMenu";

	var cell = this.flyoutTable.insertRow().insertCell();

	this.loadSubmenus( cell );

	this.divMenuItem.insertAdjacentElement( "afterBegin", this.flyoutTable );

	this.setupDropShadows( "#000000", 4 );

	
	function draw() {	
		this.flyoutTable.style.visibility = "visible";
		
		for( var i=0; i < this.shadows.length; i++ ) {
			this.shadows[i].style.visibility = "visible";
		}
	}
	
	function hide() {
		this.flyoutTable.style.visibility = "hidden";

		for( var i=0; i < this.shadows.length; i++ ) {
			this.shadows[i].style.visibility = "hidden";
		}
	}
	
	function equals( p_divMenuItem ) {
		if( p_divMenuItem.id ) {
			if( p_divMenuItem.id == this.divMenuItem.id ) {
				return true;
			} else {
				return false;
			}
		} else {
			if( p_divMenuItem == this.divMenuItem.id ) {
				return true;
			} else {
				return false;
			}
		}
	}
	
	function setupDropShadows( color, size )
	{	
		for ( var i = size; i > 0; i-- )
		{
			var rect = document.createElement('div');
			var rs = rect.style
			rs.position = 'absolute';
			rs.left = (this.flyoutTable.style.posLeft + i) + 'px';
			rs.top = (this.flyoutTable.style.posTop + i) + 'px';
			rs.width = this.flyoutTable.offsetWidth + 'px';
			rs.height = this.flyoutTable.offsetHeight + 'px';
			rs.zIndex = this.flyoutTable.style.zIndex - i;
			rs.backgroundColor = color;
			var opacity = 1 - i / (i + 1);
			rs.filter = 'alpha(opacity=' + (100 * opacity) + ')';
			this.flyoutTable.insertAdjacentElement('afterEnd', rect);
			
			this.shadows.push( rect );
		}
	}
	
	function addLink( cell, lable, url ) {
		var div = document.createElement( "div" )	
		div.className = "menuItem";
		div.id = "sub" + newid();
		
		var ahref = document.createElement( "a" );
		ahref.href = url;
		ahref.innerHTML = lable;
		ahref.className = "submenuLink";
		div.insertAdjacentElement( "afterBegin", ahref );
		cell.insertAdjacentElement( "afterBegin", div );
	}
	
	function loadSubmenus( cell ) {
		var submenuList = xmlSubmenus.documentElement.childNodes;
	
		for( var i=0; i < submenuList.length; i++ ) {
			if( submenuList[i].attributes[0].text == p_divMenuItem.handler ) {
				for( var j=submenuList[i].childNodes.length - 1; j >= 0 ; j-- ) {
					addLink( cell, submenuList[i].childNodes[j].attributes[1].text, submenuList[i].childNodes[j].attributes[0].text );
				}
			}		
		}
	}
}

function menuItem_onmouseover() {
	var ele = getDiv();

	if( ele.id == "" ) ele.id = newid(); 
	
	if( flyoutTimer != null && currentMenuItemID == ele.id ) {
		window.clearTimeout( flyoutTimer );
		flyoutTimer = null;
	}

	flyoutTimer = window.setTimeout( "drawFlyout( '" +  ele.id + "' )", 200, "JScript");

	currentMenuItemID = ele.id;
}

function menuItem_onmouseout() {
	var ele = getDiv();

	if( flyoutTimer != null ) {
		window.clearTimeout( flyoutTimer );
		flyoutTimer = null;
	}
	flyoutTimer = window.setTimeout( "hideFlyout( '" +  ele.id + "' )", 200, "JScript");
}

function getDiv() {
	var e = event.srcElement
	while ( e.tagName != "SPAN" || e.id.indexOf( "sub" ) == 0 )
		e = e.parentElement
	return e
}

function drawFlyout( p_divMenuItemID ) {
	var t_submenuItem = null;
	var t_divMenuItem = null;
	try {
		t_divMenuItem = eval( "document.all." + p_divMenuItemID );
	} catch ( e ) {
		t_divMenuItem = p_divMenuItemID;
	}
	
	for( var i=0; i < arrFlyouts.length; i++ ) {
		if( arrFlyouts[i].equals( t_divMenuItem ) ) {
			t_submenuItem = arrFlyouts[i];
			break;
		}
	}
	
	if( t_submenuItem == null ) { 
		t_submenuItem = new SubmenuItem( t_divMenuItem );
		arrFlyouts.push( t_submenuItem );
	}
	
	t_submenuItem.draw();
}

function hideFlyout( p_divMenuItem ) {

	for( var i=0; i < arrFlyouts.length; i++ ) {	
		if( arrFlyouts[i].equals( p_divMenuItem )  ) {
			arrFlyouts[i].hide();
			break;
		}
	}
}

function newid() {
	var id
	id = 'id' + Math.random().toString().substr(2, 10)
	return id
}

function element_top(el) {
	var et = 0
	while (el) {
		et += el.offsetTop
		el = el.offsetParent
	}
	return et
}

function element_left(el) {
	var myX;
    myX = el.offsetLeft;
    tempEl = el.offsetParent;
    while (tempEl != null) {
        myX += tempEl.offsetLeft;
        tempEl = tempEl.offsetParent;
    }
    return myX;
}