var DDM_NODE_TYPE_ROOT 			= 0;
var DDM_NODE_TYPE_PARENT 		= 1;
var DDM_NODE_TYPE_CHILD 		= 2;

var DDM_NODE_STATE_NORMAL		= 0;
var DDM_NODE_STATE_HOVER		= 1;
var DDM_NODE_STATE_MOUSEDOWN	= 2;
var DDM_NODE_STATE_ACTIVE		= 3;
var DDM_NODE_STATE_DISABLED		= 4;

var DDM_MENU_STATE_CLOSED		= 0;
var DDM_MENU_STATE_OPEN			= 1;

function DropDownMenu(id)
{
	this.id = id;
	this.menuNodes = new Array();
	this.styles = {
		icons: { width: 16, height: 16 },
			
		rootNode: {
			title:		{ },
			all:		{ fontFamily: "Trebuchet MS, arial",padding:"4px", paddingRight: "50px", fontSize: "12px", height: "18px" },
			normal: 	{ background: "", color: "#FFFFFF" },
			hover: 		{ background: "url(/img/DropDownMenu/root-menu-hover.gif)", color: "#4d4d4d" },
			active: 	{  },
			mousedown: 	{  }
		},
		
		childNode: {
			all: 		{ fontFamily: "Trebuchet MS, arial", padding: "4px", fontSize: "10px", height: "15px" },
			normal: 	{ backgroundColor: "#ebebeb", color: "#4d4d4d", borderBottom: "1px solid #cccccc", borderLeft: "1px solid #DEDEDE", borderRight: "1px solid #DEDEDE" },
			hover: 		{ backgroundColor: "#ffffff", color: "#000000", borderBottom: "1px solid #cccccc", borderLeft: "1px solid #DEDEDE", borderRight: "1px solid #DEDEDE" },
			mousedown: 	{ backgroundColor: "#000000", color: "#FFFFFF", borderLeft: "1px solid #000000", borderRight: "1px solid #000000", borderBottom: "1px solid #000000" }
		},

		parentNode: {
			all: 		{ fontFamily: "Trebuchet MS, arial", padding: "4px", fontSize: "10px", height: "15px", pointer: "/img/DropDownMenu/arrow.png" },
			normal: 	{ backgroundColor: "#ebebeb", color: "#4d4d4d", borderBottom: "1px solid #cccccc", borderLeft: "1px solid #DEDEDE", borderRight: "1px solid #DEDEDE" },
			hover: 		{ backgroundColor: "#ffffff", color: "#000000", borderBottom: "1px solid #cccccc", borderLeft: "1px solid #DEDEDE", borderRight: "1px solid #DEDEDE" },
			active: 	{ backgroundColor: "#e90f71", color: "#ffd9ea", borderBottom: "1px solid #CD0C64", borderLeft: "1px solid #CD0C64", borderRight: "1px solid #e90f71", pointer: "/img/DropDownMenu/arrow-white.png" },
			mousedown: 	{ backgroundColor: "#000000", color: "#FFFFFF", borderLeft: "1px solid #000000", borderRight: "1px solid #000000", borderBottom: "1px solid #000000" }
		},
		
		menu: {
			zIndex:'9999'
		},
		
		shadow: {
			bottom: 	{ img: "/img/DropDownMenu/menu-shadow-bottom.png", height: 5, offset: 5 },
			right:		{ img: "/img/DropDownMenu/menu-shadow-right.png", width: 5, offset: 5 },
			bottomRight:{ img: "/img/DropDownMenu/menu-shadow-bottom-right.png", width: 5, height: 5 },
			bottomLeft:	{ img: "/img/DropDownMenu/menu-shadow-bottom-left.png", width: 5, height: 5 },
			topRight:	{ img: "/img/DropDownMenu/menu-shadow-top-right.png", width: 5, height: 5 }
		}
	};
	
	this.__overrideStyles = {
		icons: { cssFloat: "left" },
		
		rootNode: {
			title: { },
			all: { cssFloat: "left", verticalAlign: "middle", overflow: "hidden" },
			normal: {  },
			hover: {  },
			active: { }
		},
		
		childNode: {
			all: {  }
		},

		parentNode: {
			all: {  }
		},
		
		menu: {
			position: "absolute",
			zIndex: 9999
		},
		
		shadow: {
			bottom:		{ position: "absolute", zIndex: 9999 },
			right:		{ position: "absolute", zIndex: 9999 },
			bottomRight:{ position: "absolute", zIndex: 9999 },
			bottomLeft:	{ position: "absolute", zIndex: 9999 },
			topRight:	{ position: "absolute", zIndex: 9999 }
		}
	};
	
	this.activeMenu = null;
	this.menuTimeout = 1000;
}


DropDownMenu.prototype.addNode = function (id, title, params)
{
	var newMenuNode = new DropDownMenuNode(this, null, id, title, params, DDM_NODE_TYPE_ROOT);
	this.menuNodes.push(newMenuNode);
	return newMenuNode;
}

DropDownMenu.prototype.getNodePath = function (node)
{
	var path = "";
	var curNode = node;

	while (curNode != null)
	{
		path = node.id + (path == "" ? "" : "/") + path;
		curNode = curNode.parentNode;
	}
	
	return path;
}

DropDownMenu.prototype.render = function ()
{
	if (this.placeHolder == undefined)
	{
		this.placeHolder = document.getElementById(this.id);
		
		if (this.placeHolder == null)
		{
			alert("DropDownMenu: Place holder not definied for '" + this.id + "'!");
			return false;
		}
	}

	var mc = this.placeHolder;
	
	for (var i=0; i<this.menuNodes.length; i++)
	{
		var node = this.menuNodes[i];
		var nodeElement = node.render();
		mc.appendChild(nodeElement);

		if (node.childNodes.length > 0)
		{
			this.renderMenu(node);
		}
	}
}

DropDownMenu.prototype.renderMenu = function (parentNode)
{
	parentNode.childMenu = new DropDownMenuMenu(this, parentNode);
}

DropDownMenu.prototype.beginActiveMenuTimeout = function ()
{
	if (this.activeMenu == null) return;
	var m = this;
	this.closeActiveMenuTimeout = setTimeout(function () { m.activeMenu.close() }, this.menuTimeout);
}


DropDownMenu.prototype.cancelActiveMenuTimeout = function ()
{
	clearTimeout(this.closeActiveMenuTimeout);
}



/*
**  Drop down menu menu
*/
function DropDownMenuMenu(menu, parentNode)
{
	this.element = document.createElement("div");
	this.element.id = "ddm_menu_" + parentNode.id;
	this.parentNode = parentNode;
	this.activeMenu = null;
	this.state = DDM_MENU_STATE_CLOSED;
	this.menu = menu;
	this.closeTimeout = null;
	parentNode.childMenu = this;
	this.rootMenu = (parentNode.type == DDM_NODE_TYPE_ROOT ? this : parentNode.parentNode.childMenu.rootMenu);
	this.dropShadow = new DropDownMenuShadow(this);

	for (var i=0; i<parentNode.childNodes.length; i++)
	{
		var node = parentNode.childNodes[i];
		this.element.appendChild(node.render());
		if (node.type == DDM_NODE_TYPE_PARENT)
		{
			node.childMenu = new DropDownMenuMenu(menu, node);
		}
			
	}
	
	this.updateStyle();
	menu.placeHolder.appendChild(this.element);

}

DropDownMenuMenu.prototype.updateStyle = function ()
{
	var styles = new Array();
	
	if (this.state == DDM_MENU_STATE_OPEN)
	{
		var parentNodePos = getPos(this.parentNode.element);
		var left;
		var top;
		
		if (this.parentNode.type == DDM_NODE_TYPE_ROOT)
		{
			var parentNodeHeight = getHeight(this.parentNode.element);
			left = parentNodePos.left;
			top = (parentNodePos.top + parentNodeHeight);
		}
		else
		{
			var parentNodeWidth = getWidth(this.parentNode.element);
			left = (parentNodePos.left + parentNodeWidth);
			top = parentNodePos.top;
		}
		
		styles.push({
			display: "block",
			left: left + "px",
			top: top + "px"
			});
			
		if (this.menu.styles.menu != undefined)
			styles.push(this.menu.styles.menu);

		if (this.menu.__overrideStyles.menu != undefined)
			styles.push(this.menu.__overrideStyles.menu);
	}
	else
	{
		styles.push({ display: "none" });
	}
	
	applyStyle(this.element, styles);
	
	this.dropShadow.updateStyle();
	this.element.style.zIndex = 9999;
		
	//this.dropShadow.bottom.applyStyle({ width: menuDims.width });

}

DropDownMenuMenu.prototype.open = function ()
{
	this.parentNode.setState(DDM_NODE_STATE_ACTIVE);
	this.state = DDM_MENU_STATE_OPEN;
	this.updateStyle();
}

DropDownMenuMenu.prototype.close = function (curNode)
{
	if (curNode == undefined)
		curNode = this.parentNode;

	if (this.parentNode.parentNode == null)
	{
		this.menu.activeMenu = null;
	}
	
	curNode.childMenu.activeMenu = null;
	
	for (var i=0; i<curNode.childNodes.length; i++)
	{
		if (curNode.childNodes[i].childMenu != undefined)
		{
			var cm = curNode.childNodes[i].childMenu;
			if (cm.state == DDM_MENU_STATE_OPEN)
			{
				cm.close();
			}
		}
	}
	
	if (this.parentNode.state == DDM_NODE_STATE_ACTIVE)
		this.parentNode.setState(DDM_NODE_STATE_NORMAL);
	
	this.state = DDM_MENU_STATE_CLOSED;
	this.updateStyle();
}


/*
**  Drop down menu node
*/
function DropDownMenuNode(menu, parentNode, id, title, params, type)
{

	this.id = id;
	this.title = title;
	this.type = type;
	this.menu = menu;
	this.parentNode = parentNode;
	this.childNodes = new Array();
	this.childMenu = null;
	this.path = menu.getNodePath(this);
	this.state = DDM_NODE_STATE_NORMAL;
	
	if (params != undefined)
		applyParams(this, params);
}


DropDownMenuNode.prototype.addNode = function (id, title, params)
{
	var newMenuNode = new DropDownMenuNode(this.menu, this, id, title, params, DDM_NODE_TYPE_CHILD);
	this.appendChildNodes(newMenuNode);
	return newMenuNode;
}

DropDownMenuNode.prototype.appendChildNodes = function (node)
{
	if (this.type == DDM_NODE_TYPE_CHILD)
	{
		this.type = DDM_NODE_TYPE_PARENT;
	}

	this.menuState = DDM_MENU_STATE_CLOSED;
	this.childNodes.push(node);
}

DropDownMenuNode.prototype.updateStyle = function ()
{
	var state;
	var type;
	
	switch (this.type)
	{
		case DDM_NODE_TYPE_ROOT:
			type = "rootNode";
			break;
	
		case DDM_NODE_TYPE_PARENT:
			type = "parentNode";
			
			var pointerImgSrc = null;
//			var typeStyles = this.styles[DDM_NODE_TYPE_PARENT];
//			if (typeStyles.all.pointer != undefined) pointerImgSrc = typeStyles.all.pointer;
//			if (typeStyles[this.state].pointer != undefined) pointerImgSrc = typeStyles[this.state].pointer;
			
			if (pointerImgSrc != null && this.pointerImg == undefined)
			{
				this.pointerImg = document.createElement("img");
				this.pointerImg.src = pointerImgSrc; 
			}
			
			break;
			
		case DDM_NODE_TYPE_CHILD:
			type = "childNode";
			break;
	}

	switch (this.state)
	{
		case DDM_NODE_STATE_NORMAL:
			state = "normal";
			break;
		
		case DDM_NODE_STATE_HOVER:
			state = "hover";
			break;
			
		case DDM_NODE_STATE_MOUSEDOWN:
			state = "mousedown";
			break;

		case DDM_NODE_STATE_ACTIVE:
			state = "active";
			break;
			
		case DDM_NODE_STATE_DISABLED:
			state = "disabled";
			break;
	}
	
	var className = null;
	var styles = new Array();
	if (this.menu.styles[type] != undefined)
	{
		if (this.menu.styles[type]["all"] != undefined)
			styles.push(this.menu.styles[type]["all"]);

		if (this.menu.styles[type][state] != undefined)
			styles.push(this.menu.styles[type][state]);
	}
	
	if (this.styles != undefined && this.styles[state] != undefined)
	{
		if (this.classNames != undefined && this.classNames[state] != undefined)
			className = this.classNames[state];
			
		styles.push(this.styles[state]);
	}

	if (this.menu.__overrideStyles[type] != undefined)
	{
		if (this.menu.__overrideStyles[type]["all"] != undefined)
			styles.push(this.menu.__overrideStyles[type]["all"]);

		if (this.menu.__overrideStyles[type][state] != undefined)
			styles.push(this.menu.__overrideStyles[type][state]);
	}

	applyStyle(this.element, styles);
	if (className != null) this.element.className = className;	

	styles = new Array();
	if (this.icon != undefined)
	{
		styles.push({
			background: "url(" + this.icon + ")", 
			backgroundRepeat: "no-repeat", 
			backgroundPosition: "left center",
			paddingLeft: (this.menu.styles.icons.width  + 4) + "px"
			});
		
	}
	
	applyStyle(this.titleElement, styles);
	
}

DropDownMenuNode.prototype.render = function ()
{

	var cElement = document.createElement((this.type == DDM_NODE_TYPE_ROOT ? "span" : "div"));
	cElement.id = "ddm_node_" + this.path;
	this.element = cElement;

	this.titleElement = document.createElement("span");
	this.titleElement.innerHTML += this.title;
	this.element.appendChild(this.titleElement);

	cElement.menuNode = this;
	cElement.onmousedown = function () { this.menuNode.onMouseDown(); };
	cElement.onmouseup = function () { this.menuNode.onMouseUp(); };
	cElement.onmouseover = function () { this.menuNode.onMouseOver(); };
	cElement.onmouseout = function () { this.menuNode.onMouseOut(); };
	
	this.updateStyle();
	disableSelection(this.element);

	return cElement;
}

DropDownMenuNode.prototype.setState = function (state)
{
	this.state = state;
	this.updateStyle();
}

DropDownMenuNode.prototype.onMouseDown = function ()
{
	this.setState(DDM_NODE_STATE_MOUSEDOWN);
}

DropDownMenuNode.prototype.onMouseUp = function ()
{
	switch (this.type)
	{
		case DDM_NODE_TYPE_ROOT:
			if (this.menu.activeMenu != null && (this.childMenu == undefined || this.childMenu != this.menu.activeMenu))
			{
				this.menu.activeMenu.close();
				this.menu.activeMenu = null;
			}

			if (this.childMenu != undefined)
			{
				if (this.childMenu.state == DDM_MENU_STATE_CLOSED)
				{
					this.childMenu.open();
					this.menu.activeMenu = this.childMenu;
				}
				else
				{
					this.childMenu.close();
					this.menu.activeMenu = null;
				}
			}
			
			if (this.url != undefined)
			{
				top.location.href = this.url;
			}
			
			break;
	
		case DDM_NODE_TYPE_PARENT:
			if (this.childMenu.state == DDM_MENU_STATE_CLOSED)
				this.childMenu.open();
			else
				this.childMenu.close();

			break;
			
		case DDM_NODE_TYPE_CHILD:
			this.setState(DDM_NODE_STATE_HOVER);
		
			if (this.url != undefined)
			{
				top.location.href = this.url;
			}
			
			this.menu.activeMenu.close();
			break;
	}
}

DropDownMenuNode.prototype.onMouseOver = function ()
{
	this.setState(DDM_NODE_STATE_HOVER);
	this.menu.cancelActiveMenuTimeout();
	
	if (this.childMenu != null)
	{
		
	}
}

DropDownMenuNode.prototype.onMouseOut = function ()
{
	this.state = DDM_NODE_STATE_NORMAL;

	switch (this.type)
	{
		case DDM_NODE_TYPE_ROOT:
			if (this.childMenu != undefined && this.childMenu.state == DDM_MENU_STATE_OPEN)
				this.state = DDM_NODE_STATE_ACTIVE;

			break;
	
		case DDM_NODE_TYPE_PARENT:
			if (this.childMenu.state == DDM_MENU_STATE_OPEN)
				this.state = DDM_NODE_STATE_ACTIVE;
			
			break;
			
		case DDM_NODE_TYPE_CHILD:
			
			break;
	}

	this.menu.beginActiveMenuTimeout();
	this.updateStyle();
}


/*
** Drop down menu shadow
*/

function DropDownMenuShadow(parentMenu)
{
	var styles = parentMenu.menu.styles.shadow;
	var overrideStyles = parentMenu.menu.__overrideStyles.shadow;
	
	this.parentMenu = parentMenu;

	this.bottomLeft = document.createElement("img");
	this.bottomLeft.src = styles.bottomLeft.img;
	applyStyle(this.bottomLeft, [styles.bottomLeft, overrideStyles.bottomLeft]);
	parentMenu.menu.placeHolder.appendChild(this.bottomLeft);
	
	this.bottom = document.createElement("img");
	this.bottom.src = styles.bottom.img;
	applyStyle(this.bottom, [styles.bottom, overrideStyles.bottom]);
	parentMenu.menu.placeHolder.appendChild(this.bottom);
	
	this.right = document.createElement("img");
	this.right.src = styles.right.img;
	applyStyle(this.right, [styles.right, overrideStyles.right]);
	parentMenu.menu.placeHolder.appendChild(this.right);

	this.topRight = document.createElement("img");
	this.topRight.src = styles.topRight.img;
	applyStyle(this.topRight, [styles.topRight, overrideStyles.topRight]);
	parentMenu.menu.placeHolder.appendChild(this.topRight);
	
	this.bottomRight = document.createElement("img");
	this.bottomRight.src = styles.bottomRight.img;
	applyStyle(this.bottomRight, [styles.bottomRight, overrideStyles.bottomRight]);
	parentMenu.menu.placeHolder.appendChild(this.bottomRight);

}

DropDownMenuShadow.prototype.updateStyle = function ()
{
	
	if (this.parentMenu.state == DDM_MENU_STATE_CLOSED)
	{
		this.bottom.style.display = "none";
		this.bottomLeft.style.display = "none";
		this.right.style.display = "none";
		this.bottomRight.style.display = "none";
		this.topRight.style.display = "none";
	}
	else
	{
		var menuDims = getDimensions(this.parentMenu.element);
		var menuPos = getPos(this.parentMenu.element);
		var bottomLeftStyle = this.parentMenu.menu.styles.shadow.bottomLeft;
		var bottomStyle = this.parentMenu.menu.styles.shadow.bottom;
		var rightStyle = this.parentMenu.menu.styles.shadow.right;
		var topRightStyle = this.parentMenu.menu.styles.shadow.topRight;
		var bottomRightStyle = this.parentMenu.menu.styles.shadow.bottomRight;

		applyStyle(this.bottomLeft, {
			display: "block", 
			left: (menuPos.left + parseInt_wd(bottomLeftStyle.offset)) + "px", 
			top: (menuPos.top + menuDims.height) + "px"
			});
		this.bottomLeft.width = bottomLeftStyle.width;
		this.bottomLeft.height = bottomLeftStyle.height;

		applyStyle(this.bottom, {
			display: "block", 
			left: (menuPos.left + bottomStyle.offset) + "px", 
			top: (menuPos.top + menuDims.height) + "px"
			});
		this.bottom.width = menuDims.width - bottomStyle.offset;
		this.bottom.height = bottomStyle.height;
		
		applyStyle(this.right, {
			display: "block", 
			left: (menuPos.left + menuDims.width) + "px", 
			top:  (menuPos.top + rightStyle.offset) + "px"
			});
		this.right.width = rightStyle.width;
		this.right.height = menuDims.height - rightStyle.offset;
		
		applyStyle(this.topRight, {
			display: "block", 
			left: (menuPos.left + menuDims.width) + "px", 
			top:  (menuPos.top + parseInt_wd(topRightStyle.offset)) + "px"
			});
		this.topRight.width = topRightStyle.width;
		this.topRight.height = topRightStyle.height;

		applyStyle(this.bottomRight, {
			display: "block", 
			left: (menuPos.left + menuDims.width) + "px", 
			top:  (menuPos.top + menuDims.height) + "px"
			});

			
		
		this.right.style.zIndex = 9999;
		this.bottom.style.zIndex = 9999;
		this.bottomRight.style.zIndex = 9999;

		//setOpacity(this.bottom, bottomStyle.opacity);
		//setOpacity(this.right, rightStyle.opacity);
		//setOpacity(this.bottomRight, bottomRightStyle.opacity);
	}
}