var interval;

//Name - The name of the menu variable.
//Direction - 1: Horizontal, 2: Vertical
//Interval - The time the menu takes to automatically close (in milliseconds).
//Offset - The pixel offset between menu items.
function fxMenu( name, direction, interval, offset, width, style, imagepath ){
	this.Items = new Array();
	this.direction = direction;
	this.name = name;
	this.Add = Add;
	this.Find = Find;
	this.Draw = Draw;
	this.Html = Html;
	this.Refresh = Refresh;
	this.Hide = HideMenu;
	this.interval = interval;
	this.offset = offset;
	this.width = width;
	this.style = style;
	this.imagepath = imagepath;
}

function fxMenuItem( id, parent, label, target, style, width, icon ){
	this.Items = new Array();
	this.id = id;
	this.parent = parent;
	this.label = label;
	this.target = target;
	this.style = style;
	this.width = width;
	this.icon = icon;
	this.visible = false;
	this.menu = null;
	this.identifier = name;
	this.Draw = DrawItem;
	this.Hide = HideItem;
	this.Show = ShowItem;
	this.Position = Position;
	this.GetStyle = GetStyle;
	this.GetWidth = GetWidth;
	this.backwards = false;
}

function GetStyle(){
	return ((this.style == '') ? this.menu.style : this.style);
}

function GetWidth(){
	return ((this.width == '') ? this.menu.width : this.width);
}

function Find( id ){
	return SearchItems(id, this.Items);
}

function SearchItems( id, items ){
	for(var i=0; i<items.length; i++){
		if(items[i].id == id){
			return items[i];
		}else{
			if(SearchItems(id, items[i].Items) != null)
				return SearchItems(id, items[i].Items);
		}
	}
	return null;
}

function Add( item ){
	item.menu = this;
	item.parent = this.Find(item.parent);
	item.identifier = this.name + item.id;
	if(item.parent == null){
		this.Items.push( item );
	}else{
		item.parent.Items.push( item );
	}
}

function Draw(){
	document.writeln('<div id="' + this.name + '" name="' + this.name + '"></div>');
	this.Refresh();
}

function Refresh(){
	var root = document.getElementById(this.name);
	root.innerHTML = this.Html();
}

function Html(){
	var html = '';
	html += DrawTable( this.Items, this.direction );
	html += DrawItems( this.Items );
	//alert(html);
	return html;
}

function DrawTable( items, direction ){
	var html = '';
	html += '<table cellspacing="0" cellpadding="1" border="0">';
	if(direction == '1'){
		html += '<tr>';
	}
	
	for(var i=0; i<items.length; i++){
		if(direction == '2'){
			html += '<tr>';
		}
		
		var mouseover = 'Show(\'' + items[i].menu.name + '\', \'' + items[i].id + '\');';
		var mouseout = 'interval = setInterval(\'Reset(' + items[i].menu.name + ');\', ' + items[i].menu.interval + ');';
		
		html += '<td width="' + items[i].GetWidth() + '" id="' + items[i].identifier + '" name="' + items[i].identifier + '" class="' + items[i].GetStyle() + '">';
		
		html += '<table width="100%" cellspacing="0" cellpadding="4" border="0">';
		html += '<tr>';
		
		var icon = '<img src="' + items[i].menu.imagepath + items[i].icon +'" alt="" border="" />';
		
		if(items[i].icon != ''){
			html += '<td class="' + items[i].GetStyle() + '_text" width="10" onmouseout="' + mouseout + '" onmouseover="' + mouseover + '">';
			html += icon;
			html += '</td>';
		}
		
		html += '<td class="' + items[i].GetStyle() + '_text" onmouseout="' + mouseout + '" onmouseover="' + mouseover + '">';
		
			if(items[i].target == ''){
				html += items[i].label;
			}else{
				html += '<a href="' + items[i].target + '" class="' + items[i].GetStyle() + '_text">';
				html += items[i].label;
				html += '</a>';
			}
		
		html += '</td>';
		html += '<td align="right" width="1" class="' + items[i].GetStyle() + '_text" onmouseout="' + mouseout + '" onmouseover="' + mouseover + '">';
		
		var image = 'trans.gif';
		var iHeight = 0;
		var iWidth = 0;
		
		if((items[i].Items.length > 0) && (items[i].parent == null)){
			image = 'arrowsdown.gif';
			iHeight = 10;
			iWidth = 10;
		}
		
		if((items[i].Items.length > 0) && (items[i].parent != null)){
			image = 'arrows.gif';
			iHeight = 10;
			iWidth = 10;
		}
		
		var img = '<img src="' + items[i].menu.imagepath + image +'" alt="" border="" width="' + iWidth + '" height="' + iHeight + '"/>';
		html += img;

		html += '</td>';
		html += '</tr>';
		html += '</table>';
		
		html += '</td>';
	
		if(direction == '2'){
			html += '</tr>';
		}
	}
	
	if(direction == '1'){
		html += '</tr>';
	}
	
	html += '</table>';
	return html;
}

function DrawItems( items ){
	var html = '';
	for(var i=0; i<items.length; i++){
		if(items[i].visible){
			html += items[i].Draw();
			html += DrawItems( items[i].Items );
		}
	}
	return html;
}

function DrawItem(){
	var html = '';
	var left = 0;
	var top = 0;
	var elem = document.getElementById( this.identifier + '_contents' );
	if(elem != null){
		var coord = Coords( elem );
		left = coord.left;
		top = coord.top;
	}
	html += '<div style="position:absolute;left:' + left + 'px;top:' + top + 'px;" id="' + this.identifier + '_contents" name="' + this.identifier + '_contents">';
	html += DrawTable(this.Items, '2');
	html += '</div>';
	this.drawn = true;
	return html;
}

function Show( mName, iName ){
	clearInterval(interval);
	try{
		var menu = eval(mName);
		var item = menu.Find(iName);
		if(!item.visible){
			menu.Hide();
			item.Show();
			menu.Refresh();
			PositionMenu( item );
		}
	}catch(e){}	
}

function Reset( mName ){
	var menu = eval(mName);
	menu.Hide();
	menu.Refresh();
	clearInterval(interval);
}

function Position(){
	var left = 0;
	var top = 0;
	var width = 0;
	var height = 0;
	
	var elem_parent = document.getElementById( this.menu.name + this.id );
	var elem_contents = document.getElementById( this.menu.name + this.id + '_contents' );
	var coord_parent = Coords( elem_parent );

	//If this is a root item
	if(this.parent == null){
		left = coord_parent.left + 1;
		top = coord_parent.top + coord_parent.height + this.menu.offset + 1;
		if(this.width == 0){
			if(this.menu.width == 0){
				width = coord_parent.width;	
			}else{
				width = this.menu.width;	
			}
		}else{
			width = this.width;
		}		
	}else{
		//This is a child item
		if(this.width == 0){
			if(this.menu.width == 0){
				width = coord_parent.width;	
			}else{
				width = this.menu.width;	
			}
		}else{
			width = this.width;
		}
		
		left = coord_parent.left + width + this.menu.offset + 1;
		if(((left + width) > screen.width) || (this.parent.backwards)){
			this.backwards = true;
			left = coord_parent.left - width - this.menu.offset - 1;
		}		
		top = coord_parent.top + 1;
	}
	
	//Set the elements actual position and width
	elem_contents.style.left = left;
	elem_contents.style.top = top;
	elem_contents.style.width = width;	
}

function PositionMenu( item ){
	if(item.parent != null){
		PositionMenu( item.parent );
	}
	item.Position();
}

function HideMenu(){
	Hide(this.Items);
}
function Hide( items ){
	for(var i=0; i<items.length; i++){
		items[i].Hide();
		Hide(items[i].Items);
	}
}
function HideItem(){
	this.visible = false;
	Hide(this.Items);
}
function ShowItem(){
	this.visible = true;
	if(this.parent != null){
		this.parent.Show();
	}	
}
function Coords( element ){
	var objItem = element;
	var intX = objItem.offsetLeft;
	var intY = objItem.offsetTop;
	var intHeight = objItem.offsetHeight;
	var intWidth = objItem.offsetWidth;
	var objParent = objItem.offsetParent;
	while( objParent.tagName.toUpperCase() != "BODY" ){
		intX  += objParent.offsetLeft;
		intY   += objParent.offsetTop;
		objParent = objParent.offsetParent;
	}
	  
	return {left:intX, top:intY, width:intWidth, height:intHeight};
}