// *******************************************************************
// *******************************************************************
// **
// ** Funciones para MOWE_Menu
// ** Autor y desarrollador: Fco. Javier Pérez Pacheco
// **
// ** MOWE_Menu son una serie de funciones que facilitan la creación
// ** de un menú desplegable, mediante POO en JavaScript
// **
// ** El sistema debe funcionar en IE 5 y superiores, NetScape 6
// ** y superiores y Mozilla 1 y superiores
// **
// **
// *******************************************************************
// *******************************************************************

// Objeto Nodo

function node(id, pid, url, title, target, icon, clase) {
	this.id = id;
	this.pid = pid;
	this.url = url;
	this.title = title;
	this.target = target;
	this.icon = icon;
	this.clase = clase;
};

// Objeto Menu

function menu(objName) {
	this.config = {
		imgDisplay				: null,
		classMenuItem			: null,
		classDisplayBox			: null,
		colorCellHover			: '#D8DADD',
		iconWidth				: 0,
		align					: 'horizontal', // vertical | horizontal
		displayPosition			: 'down', // down | right
		height					: 0,
		widthLevel1				: 0,
		widthLevelRest			: 0,
		increaseXLevel1			: 0,
		increaseYLevel1			: 0,
		increaseXLevelRest		: 0,
		increaseYLevelRest		: 0
	}
	
	this.obj = objName;
	this.aNodes = [];
};

// Devuelve la posicion del elemento según un id

menu.prototype.returnPosition = function(id) {
	position = null;
	for (i=0; i<this.aNodes.length; i++) {
		if (this.aNodes[i].id == id)
			position = i;
	}
	return position;
};

// Añadir un nuevo nodo a un menu

menu.prototype.add = function(id, pid, url, title, target, icon) {
	this.aNodes[this.aNodes.length] = new node(id, pid, url, title, target, icon);
};

menu.prototype.ifHasNodes = function(id) {
	var hasNodes = false;
	for (i=0; i<this.aNodes.length; i++) {
		if (this.aNodes[i].pid == id)
			hasNodes = true;
	}
	return hasNodes;
}

menu.prototype.writeLayer = function(nodeId, nodeLayerName, nodeImgName, n1) {
	var str_layer="";
	var newId=new Array(0);
	var newLayers=new Array(0);
	var newImg=new Array(0);

	str_layer += "<div id=\"" + nodeLayerName + "\" class=\"" + this.config.classDisplayBox + "\" style=\"position:absolute; z-index:50; visibility: hidden; width:" + this.config.widthLevelRest + ";\" ";
	// buscar todos los id de las capas padres y los coloca separados por '::'
	pid = this.aNodes[this.returnPosition(nodeId)].pid;
	allParentLayer = "";
	sw=0;
	nPadres = 1;
	while (pid!=0) {
		if (sw=0) {
			allParentLayer += 'Layer'  + this.aNodes[this.returnPosition(pid)].id + 'Spread';
			sw=1;
		} else {
			allParentLayer += '::Layer'  + this.aNodes[this.returnPosition(pid)].id + 'Spread';
		}		
		pid = this.aNodes[this.returnPosition(pid)].pid;
		nPadres++;
	}
	str_layer += "onMouseOut=\"menuCambiarPropiedad('" + nodeLayerName + "', 'visibility', 'hidden'); ";
	str_layer += "menuCambiarPropiedad('" + allParentLayer + "', 'visibility', 'hidden');\"";
	str_layer += "onMouseOver=\"menuCambiarPropiedad('" + nodeLayerName + "', 'visibility', 'visible'); ";
	str_layer += "menuCambiarPropiedad('" + allParentLayer + "', 'visibility', 'visible');\"";
	str_layer += ">";
	nivel2 = 0;
	for (j=0; j<this.aNodes.length; j++) {
		spreadLayerName = "Layer" + this.aNodes[j].id + "Spread";
		imgName = "img" + this.aNodes[j].id;
		if (this.aNodes[j].pid == nodeId) {
			nivel2++;
			if (this.aNodes[j].target == "") {
				target = "_self";
			} else {
				target = "_blank";
			}
			str_layer += "<div onclick=\"window.open('" + this.aNodes[j].url + "','" + target + "');\" ";
			if (this.ifHasNodes(this.aNodes[j].id)) {
				newId[newId.length] = this.aNodes[j].id;
				newLayers[newLayers.length] = spreadLayerName;
				str_layer += "onmouseout=\"onmouseout_color(this,''); ";
				str_layer += "menuCambiarPropiedad('" + spreadLayerName + "', 'visibility', 'hidden');\" ";
				str_layer += "onmouseover=\"onmouseover_color(this,'" + this.config.colorCellHover + "'); ";
				str_layer += "menuCambiarPropiedad('" + spreadLayerName + "', 'visibility', 'visible'); ";
				ancho = this.config.widthLevel1 + (this.config.widthLevelRest * nPadres) - 30;
				str_layer += "menuCambiarPropiedad('" + spreadLayerName + "','left', " + ancho + "); ";
				//str_layer += "\"";
				alto = (n1 * 26) + (nivel2 * 22);
				str_layer += "menuCambiarPropiedad('" + spreadLayerName + "', 'top', " + alto + ");\"";
			} else {
				if (this.aNodes[j].title != "-") {
					str_layer += "onmouseover=\"onmouseover_color(this,'" + this.config.colorCellHover + "');\" ";
					str_layer += "onmouseout=\"onmouseout_color(this,'');\"";
					str_layer += "style=\"height: " + this.config.height + "\"";
				} else {
					str_layer += "style=\"padding: 0px; margin: 0px;\"";
				}
			}
			str_layer += ">";
			if (this.aNodes[j].title == "-") {
				str_layer += "<hr width=\"95%\"/>";	
			} else {
				//str_layer += "<a href=\"" + this.aNodes[j].url + "\" target=\"" + this.aNodes[j].target + "\">";
				if (this.config.iconWidth != 0) {
					if (this.aNodes[j].icon != '')
						str_layer += "<img src=\"" + this.aNodes[j].icon + "\" border=\"0\" align=\"absmiddle\" />&nbsp;";
					else
						str_layer += "<img src=\"\" border=\"0\" width=\"" + this.config.iconWidth + "\" height=\"0\" />&nbsp;";
				}
				str_layer += this.aNodes[j].title;// + "</a>";	
			}
			if (this.ifHasNodes(this.aNodes[j].id)) {
				str_layer += "<img src=\"\" width=\"22\" height=\"0\" border=\"0\">";
				str_layer += "<img src=\"" + this.config.imgDisplay + "\" id=\"" + imgName + "\" border=\"0\" style=\"position: absolute; right: 3px;\">";
			}	
			str_layer += "</div>";
		}
	}
	str_layer += "</div>";
	for (var k=0; k<newLayers.length; k++) {
		str_layer += this.writeLayer(newId[k], newLayers[k], newImg[k], n1);
	}
	return str_layer;
}

menu.prototype.toString = function() {
	var str="", spreadLayerName="", imgName="";
	nivel1 = 0;
	for (n=0; n<this.aNodes.length; n++) {
		element = this.aNodes[n];
		if (element.pid == 0) {
			nivel1++;
			ancho = this.config.widthLevel1 - 30;
			str += "<div class=\"" + this.config.classMenuItem + "\" style=\"position: relative; width: " + this.config.widthLevel1 + "px;";
			if (this.config.align == 'horizontal')
				 str += "float:left;\" ";
			else
				 str += "\" ";
			if (this.ifHasNodes(element.id)) {
				spreadLayerName = "Layer" + element.id + "Spread";
				imgName = "img" + element.id;
				str += "onMouseOut=\"menuCambiarPropiedad('" + spreadLayerName + "', 'visibility', 'hidden')\" ";
				str += "onMouseOver=\"menuCambiarPropiedad('" + spreadLayerName + "', 'visibility', 'visible'); ";
				ancho = this.config.widthLevel1 - 30;
				str += "menuCambiarPropiedad('" + spreadLayerName + "','left', " + ancho + "); ";
				str += "\">";
				//str += "menuCambiarPropiedad('" + spreadLayerName + "', 'top', coordenadaY_h('" + imgName + "'," + this.config.increaseYLevel1 + "))\">";
			} else {
				str += '>';
			} 
			if ((this.ifHasNodes(element.id)) && (this.config.displayPosition == 'down'))
				str += "<img src=\"\" width=\"0\" height=\"0\" border=\"0\" id=\"" + imgName + "\" align=\"absbottom\">";
			str += "<a href=\"javascript:;\">";
			if (this.config.iconWidth != 0) {
				if (element.icon != '')
					str += "<img src=\"" + element.icon + "\" border=\"0\" align=\"absmiddle\" />&nbsp;";
				else
					str += "<img src=\"\" border=\"0\" width=\"" + this.config.iconWidth + "\" height=\"0\" />&nbsp;";
			}
			str += element.title + "</a>";
			if ((this.ifHasNodes(element.id)) && (this.config.displayPosition == 'right')) {
				str += "<img src=\"\" width=\"22\" height=\"0\" border=\"0\">";
				str += "<img src=\"" + this.config.imgDisplay + "\" border=\"0\" id=\"" + imgName + "\" style=\"position: absolute; right: 3px; top: 5px; \">";
			}
			str += "</div>";
		}
		if (spreadLayerName != "") {
			str += this.writeLayer(element.id, spreadLayerName, imgName, nivel1);
		}
		spreadLayerName = "";
	}
	return str;
}

var pX, pY;

function getOffsetLeft (el) {
    var ol = el.offsetLeft;
    while ((el = el.offsetParent) != null)
        ol += el.offsetLeft;
    return ol;
}

function getOffsetTop (el) {
    var ot = el.offsetTop;
    while((el = el.offsetParent) != null)
        ot += el.offsetTop;
    return ot;
}

function coordenadaY_v(btnImg){
		var ppcY = 4;

        if ( navigator.appName == "Netscape" ){
            ppcY = document.images[btnImg].y;
        } else {		
            ppcY = getOffsetTop(document.images[btnImg]);
        }
		return ppcY;
}

function coordenadaX_v(btnImg,desp){
var ppcX = 4;

        if ( navigator.appName == "Netscape" ){
            ppcX = document.images[btnImg].x + document.images[btnImg].width + desp; 
        } else {		
            ppcX = getOffsetLeft(document.images[btnImg]) + document.images[btnImg].width + desp;    
        }
		return ppcX;
}

function coordenadaY_h(btnImg, desp){
	var ppcY = 4;

	ppcY += getOffsetTop(document.images[btnImg]) + desp;
	
	return ppcY;
	
}

function coordenadaX_h(btnImg,desp){
	var ppcX = 4;

	ppcX += getOffsetLeft(document.images[btnImg]) + desp;

	return ppcX;
}


function coordenadas(btnImg){
var ppcX = 4;
var ppcY = 4;

        if ( navigator.appName == "Netscape" ){
            ppcX = document.images[btnImg].x; 
            ppcY = document.images[btnImg].y + document.images[btnImg].height;
        } else {		
            ppcX = getOffsetLeft(document.images[btnImg]);    
            ppcY = getOffsetTop(document.images[btnImg]) + document.images[btnImg].height;
        }
		pX = ppcX;
		pY = ppcY;
}


function onmouseover_color(obj,color) {
  obj.style.backgroundColor = color;
}
function onmouseout_color(obj,color) {
  obj.style.backgroundColor = color;
}

function menuCambiarPropiedad (layer, prop, valor) {
  var ix;
  arLayers = layer.split('::');

  for (i=0; i<arLayers.length; i++)
  {
    if (document.getElementById(arLayers[i]))
      eval ('document.getElementById("' + arLayers[i] + '").style.' + prop + ' = "' + valor + '";');
  }
}