// *** MENU CONSTRUCTION FUNCTIONS ***

var _menubar_id = 0;
var _menu_id = 0;
var _menuitem_id = 0;
var _mMenuBars = new Array();

document.menubars = _mMenuBars;

// `PRUEBILLA
function MenuBar(popImg, timeOut) {
	this.id = 'MenuBar_' + _menubar_id;
	this.popImg = popImg;
	this.timeOut = timeOut;
	this.menus = new Array();
	this.submenus = new Array();
	
	_mMenuBars[_menubar_id++];
}
	
function MenuBar_addMenu(menu) {
	this.menus[this.menus.length] = menu;
}

function MenuBar_getMenu(menuNum) {
	return this.menus[menuNum];
}

function MenuBar_getNumMenus() {
	return this.menus.length;
}

function MenuBar_addSubmenu(menu) {
	this.submenus[this.submenus.length] = menu;
}

function MenuBar_getSubmenu(menuNum) {
	return this.submenus[menuNum];
}

function MenuBar_getNumSubmenus() {
	return this.submenus.length;
}

/******************************************************************************
 *
 *
 */

function Menu(isVert, popInd, x, y, width, overCol, backCol, borderClass, textClass) {
	// True or false - a vertical menu?
	this.id = 'Menu_' + _menu_id++;
	this.isVert = isVert;
	// The popout indicator used (if any) for this menu.
	this.popInd = popInd
	// Position and size settings.
	this.x = x;
	this.y = y;
	this.width = 0;
	this.height = 0;
	
	this.size = width;
	// Colours of menu and items.
	this.overCol = overCol;
	this.backCol = backCol;
	// The stylesheet class used for item borders and the text within items.
	this.borderClass = borderClass;
	this.textClass = textClass;
	// Parent menu and item numbers, indexed later.
	this.parentMenu = null;
	this.parentItem = null;
	// Reference to the object's style properties (set later).
	this.ref = null;
	this.styleObj = null;
	
	// Imagenes de los bordes
	this.border = false;
	
	this.borderTop = null;
	this.borderBottom = null;
	this.borderLeft = null;
	this.borderRight = null;
	this.borderTopRight = null;
	this.borderTopLeft = null;
	this.borderBottomRight = null;
	this.borderBottomLeft = null;
		
	this.borderTopHeight = 0;
	this.borderBottomHeight = 0;
	this.borderLeftWidth = 0;
	this.borderRightWidth = 0;
		
	// Items
	this.items = new Array();
}

function Menu_addItem(item) {
	this.items[this.items.length] = item;
}

function Menu_getItem(itemNum) {
	return this.items[itemNum];
}

function Menu_getNumItems() {
	return this.items.length;
}

function Menu_setBorders(borderTop, borderBottom, borderLeft, borderRight, borderTopRight, borderTopLeft, borderBottomLeft, borderBottomRight, borderTopHeight, borderBottomHeight, borderLeftWidth, borderRightWidth) {
	this.border = true;
	
	this.borderTop = borderTop;
	this.borderBottom = borderBottom;
	this.borderLeft = borderLeft;
	this.borderRight = borderRight;
	this.borderTopRight = borderTopRight;
	this.borderTopLeft = borderTopLeft;
	this.borderBottomLeft = borderBottomLeft;
	this.borderBottomRight = borderBottomRight;
		
	this.borderTopHeight = borderTopHeight;
	this.borderBottomHeight = borderBottomHeight;
	this.borderLeftWidth = borderLeftWidth;
	this.borderRightWidth = borderRightWidth;
}

/******************************************************************************
 *
 *
 */

function Item(text, href, frame, length, spacing, submenu, backCol) {
	//alert ("Item (" + text + ", " + href + ", " + frame + ", " + length + ", " + spacing + ", " + submenu + ", " + backCol + ")";
	this.id = 'MenuItem_' + _menuitem_id++;
	this.cl = 'itemText';
	this.text = text;
	this.href = href;
	this.frame = frame;
	this.length = length;
	this.spacing = spacing;
	this.left = 0;
	this.top = 0;
	this.width = 0;
	this.height = 0;
	this.submenu = submenu;
	this.backCol = backCol;
	// Reference to the object's style properties (set later).
	this.ref = null;
	this.obj = null;
	this.styleObj = null;
}

function ItemText_highligth (menu, isOver) {

	newCol = isOver ? menu.overCol : this.backCol;
	// Change the colours of the div/layer background.
	with (this.ref) {
		if (isNS4) {
			bgColor = newCol;
		} else {
			backgroundColor = newCol;
		}
	}
	// this.styleObj.setBackgroundColor(this.newCol);
};

function ItemText_writeItemText (menu, currMenu, currItem) {
	var str = "";
	
	// Create a div or layer text string with appropriate styles/properties.
	// Thanks to Paul Maden (www.paulmaden.com) for helping debug this in IE4, apparently
	// the width must be a miniumum of 3 for it to work in that browser.
	if (isDOM || isIE4) {
		str += '<div class="itemDivBorder" id="' + this.id + '" style="position: absolute; left: ' + this.left + '; top: ' + this.top + '; width: ' + this.width + '; height: ' + this.height + '; visibility: inherit; ';
		if (this.backCol) {
			str += 'background: ' + this.backCol + '; ';			
		}
		str += '" ';
	}
	if (isNS4) {
		str += '<layer id="' + this.id + '" left="' + this.left + '" top="' + this.top + '" width="' +  this.width + '" height="' + this.height + '" visibility="inherit" ';
		if (this.backCol) {
			str += 'bgcolor="' + this.backCol + '" ';
		}
	}
	if (menu.borderClass) str += 'class="' + menu.borderClass + '" ';
	
	// Add mouseover handlers and finish div/layer.
	str += 'onMouseOver="popOver(' + currMenu + ',' + currItem + ')" onMouseOut="popOut(' + currMenu + ',' + currItem + ')">';
	
	// Add contents of item (default: table with link inside).
	// In IE/NS6+, add padding if there's a border to emulate NS4's layer padding.
	// If a target frame is specified, also add that to the <a> tag.
		
	str += '<table width="' + (this.width - 8) + '" border="0" cellspacing="0" cellpadding="' + (!isNS4 && menu.borderClass ? 3 : 0) + '"><tr><td class="' + menu.textClass + '" height="' + (this.height - 7) + '">' + '<a class="' + menu.textClass + '" href="' + this.href + '"' + (this.frame ? ' target="' + this.frame + '">' : '>') + this.text + '</a></td>';
	if (this.submenu) {
		// Add a popout indicator.
		if (menu.popInd) str += '<td width="4" align="right">' + menuBar.popImg + '</td>';
	}
	str += '</tr></table>';

	str += (isNS4 ? '</layer>' : '</div>');
			
	return str;
}

/******************************************************************************
 *
 *
 */
function ItemImage(img, selImg, text, href, frame, length, spacing, submenu) {
	//alert ("Item (" + text + ", " + href + ", " + frame + ", " + length + ", " + spacing + ", " + submenu + ", " + backCol + ")";
	this.id = 'MenuItem_' + _menuitem_id++;
	this.cl = 'itemImage';
	this.img = img;
	this.selImg = selImg;
	this.text = text;
	this.href = href;
	this.frame = frame;
	this.length = length;
	this.width = 0;
	this.height = 0;
	this.spacing = spacing;
	this.submenu = submenu;
	// Reference to the object's style properties (set later).
	this.ref = null;
	this.obj = null;
	this.styleObj = null;
}

function ItemImage_highligth (menu, isOver) {
	// NoOp, el cambio lo hace el RollOver del enlace
};

function ItemImage_writeItemImage (menu, currMenu, currItem) {
	var str = "";
	
	//alert ("writeItemImage (menu, currMenu, currItem)");
	
	// Create a div or layer text string with appropriate styles/properties.
	// Thanks to Paul Maden (www.paulmaden.com) for helping debug this in IE4, apparently
	// the width must be a miniumum of 3 for it to work in that browser.
	if (isDOM || isIE4) {
		str += '<div class="itemDivBorder" id="' + this.id + '" style="position: absolute; left: ' + this.left + '; top: ' + this.top + '; width: ' + this.width + '; height: ' + this.height + '; visibility: inherit; ';
		if (this.backCol) {
			str += 'background: ' + this.backCol + '; ';			
		}
		str += '" ';
	}
	if (isNS4) {
		str += '<layer id="' + this.id + '" left="' + this.left + '" top="' + this.top + '" width="' +  this.width + '" height="' + this.height + '" visibility="inherit" ';
		if (this.backCol) {
			str += 'bgcolor="' + this.backCol + '" ';
		}
	}
	if (menu.borderClass) str += 'class="' + menu.borderClass + '" ';
	
	str += '>';
	str += '<a class="' + menu.textClass + '"';
	str += ' onMouseOver="popOver(' + currMenu + ', ' + currItem + ')' + (this.selImg?'; MM_swapImage(\'' + this.id + '\',\'\',\'' + this.selImg + '\',1)':'') + '" onMouseOut="popOut(' + currMenu + ',' + currItem + ')' + (this.selImg?'; MM_swapImgRestore()':'') + '"';
	str += ' href="' + this.href + '"' + (this.frame ? ' target="' + this.frame + '">' : '>') + '<img name="' + this.id + '" src="' + this.img + '" width="' + this.width + '" height="' + this.height + '" border="0" alt="' + this.text + '">' + '</a>';
	
	str += (isNS4 ? '</layer>' : '</div>');
	
	return str;
}

/******************************************************************************
 *
 *
 */

// Metodos
var isDOM = (document.getElementById ? true : false); 
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
function getRef(id) {
	if (isDOM) return document.getElementById(id);
	if (isIE4) return document.all[id];
	if (isNS4) return document.layers[id];
}

function getSty(id) {
	//alert(id);
	return (isNS4 ? getRef(id) : getRef(id).style);
} 

// Hide timeout.
var popTimer = 0;
// Array showing highlighted menu items.
var litNow = new Array();


/*
 * function popOver(menuNum, itemNum) { 
 *
 */

function popOver(menuNum, itemNum) {
	// desactivamos el temporizador que limpia los menus
	clearTimeout(popTimer);
	
	// escondemos todos los menus desplegados
	hideAllBut(menuNum);
	
	// activamos el item seleccionado
	litNow = getTree(menuNum, itemNum);
	changeCol(litNow, true);
	
	// Y abrimos el submenu (si lo hubiera)
	var menu = menuBar.getMenu(menuNum);
	var item = menu.getItem(itemNum);
	var submenu = item.submenu;
	
	if (submenu) {
		var thisX = parseInt(menu.ref.left) + item.left;
		var thisY = parseInt(menu.ref.top) + item.top;
		
		var submenuRight = submenu.x + submenu.width;
		
		// Si se sobresale por la derecha cambiamos el orden de apertuta hacia la izquierda
		if ((getWindowWidth() - (thisX + submenuRight)) >= 0) {
			thisX = thisX + submenu.x;
		} else {
			thisX = thisX + item.width - submenuRight;
		}
		
		if (thisX < 0) {
			thisX = 0;
		}
				
		submenu.styleObj.moveTo(thisX, parseInt(thisY + submenu.y));
		submenu.styleObj.setVisibility('visible');
	}
}

function popOut(menuNum, itemNum) {
	if ((menuNum == 0) && !menuBar.getMenu(menuNum).getItem(itemNum).submenu)
		hideAllBut(0)
	else
		popTimer = setTimeout('hideAllBut(0)', menuBar.timeOut);
}

function getTree(menuNum, itemNum) {

// Array index is the menu number. The contents are null (if that menu is not a parent)
// or the item number in that menu that is an ancestor (to light it up).
	itemArray = new Array(menuBar.getNumMenus());
	var i;
	for (i = 0; i < itemArray.length; i++) { itemArray[i] = -1; }

	while(1) {
		itemArray[menuNum] = itemNum;
		// If we've reached the top of the hierarchy, return.
		if (menuNum == 0) {
			return itemArray;
		}
		itemNum = menuBar.getMenu(menuNum).parentItem;
		menuNum = menuBar.getMenu(menuNum).parentMenu;
	}
}

// Pass an array and a boolean to specify colour change, true = over colour.
function changeCol(changeArray, isOver) {
	//alert ("changeCol(" + changeArray + ", " + isOver + ")");
	for (menuCount = 0; menuCount < changeArray.length; menuCount++) {
		if (changeArray[menuCount] != -1) {
			var menu = menuBar.getMenu(menuCount);
			var item = menu.getItem(changeArray[menuCount]);
			
			item.highligth (menu, isOver);
		}
	}
}

function hideAllBut(menuNum) {
	var keepMenus = getTree(menuNum, 1);
	for (count = 0; count < menuBar.getNumMenus(); count++) {
		if (keepMenus[count] == -1) {
			menuBar.getMenu(count).styleObj.setVisibility('hidden');
		}
	}
	changeCol(litNow, false);
}

function writeMenu(menu, currMenu) {

	// Variable for holding HTML for items and positions of next item.
	var innerStr = '', str = '', itemX = menu.borderLeftWidth, itemY = menu.borderTopHeight;

	// Almacenamos el tamanho del menu para poder cambiarlo de posicion dinamicamente
	if (menu.isVert) {
		menu.width = menu.size;
		menu.height = 0;
	} else {
		menu.width = 0;
		menu.height = menu.size;
	}
	
	if (navigator.DOMHTML) {
		menu.obj = document.createElement('div');
		menu.obj.id	 = menu.id;
		menu.obj.style.position	= 'absolute';
		document.body.appendChild(menu.obj);
		
		//menu.obj.innerHTML = str;
		menu.ref = menu.obj.style;
		menu.ref.position = 'absolute';
		menu.ref.visibility = 'hidden';
		
	} else if (navigator.family == 'ie4') {
		document.body.insertAdjacentHTML('beforeEnd', '<div id="lItem' + _item_id + '" style="position:absolute; visibility: hidden"></div>');
		menu.obj = document.all['lItem' + _item_id];
		menu.ref = getSty(menu.id);
		
	} else if (navigator.family == 'nn4') {
		menu.obj = new Layer(0);
		menu.ref = menu.obj;
	}
	
	menu.styleObj = new xbStyle(menu.obj);
		
	if (menu.border) {
		str += '<table border="0" cellspacing="0" cellpadding="0">';
		str += '<tr>';
		str += '<td><img src="' + menu.borderTopLeft + '" width="' + menu.borderLeftWidth + '" height="' + menu.borderTopHeight + '"></td>';
		str += '<td><img src="' + menu.borderTop + '" width="' + (menu.isVert?menu.width - menu.borderLeftWidth - menu.borderRightWidth : itemX - menuItem.spacing - menu.borderLeftWidth) + '" height="' + menu.borderTopHeight + '"></td>';
		str += '<td><img src="' + menu.borderTopRight + '" width="' + menu.borderRightWidth + '" height="' + menu.borderTopHeight + '"></td>';
		str += '</tr>';
	}
	
		
	// recorremos los elementos y creamos todas sus capas
	for (currItem = 0; currItem < menu.getNumItems(); currItem++) {
		var menuItem = menu.getItem(currItem);
	
		// The width and height of the menu item - dependent on orientation!
		menuItem.left = itemX;
		menuItem.top = itemY;
		menuItem.width = (menu.isVert ? menu.size - menu.borderTopHeight - menu.borderTopHeight: menuItem.length);
		menuItem.height = (menu.isVert ? menuItem.length : menu.size - menu.borderLeftWidth - menu.borderRightWidth);

		if (menuItem.submenu) {		
			// Set submenu's parents to this menu item.
			menuItem.submenu.parentMenu = currMenu;
			menuItem.submenu.parentItem = currItem;
		}
	
		if (!menuItem.backCol) {
			menuItem.backCol = menu.backCol;	
		}

		//alert (itemX + ", " + itemY);
		innerStr += menuItem.writeItem(menu, currMenu, currItem);
		
		if (menu.isVert) {
			itemY += menuItem.height + menuItem.spacing;
		} else {
			itemX += menuItem.width + menuItem.spacing;
		}
	}
	
	if (menu.border) {
		str += '<tr>';
		str += '<td><img src="' + menu.borderLeft + '" width="' + menu.borderLeftWidth + '" height="' + (menu.isVert?itemY - menuItem.spacing - menu.borderTopHeight : menu.height - menu.borderTopHeight - menu.borderBottomHeight) + '"></td>';
		str += '<td>';
	}
	
	str += innerStr;
	
	if (menu.border) {
		str += '</td>';
		str += '<td><img src="' + menu.borderRight + '" width="' + menu.borderRightWidth + '" height="' + (menu.isVert?itemY - menuItem.spacing - menu.borderTopHeight : menu.height - menu.borderTopHeight - menu.borderBottomHeight) + '"></td>';
		str += '</tr>';
	
		str += '<tr>';
		str += '<td><img src="' + menu.borderBottomLeft + '" width="' + menu.borderLeftWidth + '" height="' + menu.borderBottomHeight + '"></td>';
		str += '<td><img src="' + menu.borderBottom + '" width="' + (menu.isVert?menu.width - menu.borderLeftWidth - menu.borderRightWidth : itemX - menuItem.spacing - menu.borderLeftWidth) + '" height="' + menu.borderBottomHeight + '"></td>';
		str += '<td><img src="' + menu.borderBottomRight + '" width="' + menu.borderRightWidth + '" height="' + menu.borderBottomHeight + '"></td>';
		str += '</tr>';
		str += '</table>';
	}
	
	if (menu.isVert) {
		menu.height = itemY - menuItem.spacing + menu.borderBottomHeight;
	} else {
		menu.width = itemX - menuItem.spacing + menu.borderRightWidth;
	}

	menu.styleObj.setInnerHTML(str);

	for (currItem = 0; currItem < menu.getNumItems(); currItem++) {
		var menuItem = menu.getItem(currItem);
		if (isDOM || isIE4) menuItem.ref = getSty(menuItem.id);
		if (isNS4) menuItem.ref = menu.ref.document[menuItem.id];
		
		menuItem.styleObj = new xbStyle(document.getElementById(menuItem.id));

	}
}

function writeMenus() {
	if (!isDOM && !isIE4 && !isNS4) return;
	
	for (currMenu = 0; currMenu < menuBar.getNumMenus(); currMenu++) {
		var menu = menuBar.getMenu(currMenu);
	
		writeMenu(menu, currMenu);
	}
	with(menuBar.getMenu(0)) {
		ref.left = x;
		ref.top = y;
		styleObj.moveTo(x, y);
		styleObj.setVisibility('visible');
	}
}

// *** OPTIONAL CODE FROM HERE DOWN ***

// These two lines handle the window resize bug in NS4. See <body onResize="...">.
// I recommend you leave this here as otherwise when you resize NS4's width menus are hidden.

var popOldWidth = window.innerWidth;
nsResizeHandler = new Function('if (popOldWidth != window.innerWidth) location.reload()');


// This is a quick snippet that captures all clicks on the document and hides the menus
// every time you click. Use if you want.

if (isNS4) document.captureEvents(Event.CLICK);
document.onclick = clickHandle;

function clickHandle(evt) {
	if (isNS4) document.routeEvent(evt);
	hideAllBut(0);
}

//  End -->

MenuBar.prototype.addMenu        = MenuBar_addMenu;
MenuBar.prototype.getMenu        = MenuBar_getMenu;
MenuBar.prototype.getNumMenus    = MenuBar_getNumMenus;
MenuBar.prototype.addSubmenu     = MenuBar_addSubmenu;
MenuBar.prototype.getSubmenu     = MenuBar_getSubmenu;
MenuBar.prototype.getNumSubmenus = MenuBar_getNumSubmenus;

Menu.prototype.addItem     = Menu_addItem;
Menu.prototype.getItem     = Menu_getItem;
Menu.prototype.getNumItems = Menu_getNumItems;
Menu.prototype.setBorders   = Menu_setBorders;

Item.prototype.writeItem = ItemText_writeItemText;
Item.prototype.highligth = ItemText_highligth;

ItemImage.prototype.writeItem = ItemImage_writeItemImage;
ItemImage.prototype.highligth = ItemImage_highligth;