// ----------------------- 菜单类 -------------------
/* 调用方法:
   首先包含这个文件: <script type="text/javascript" language="javascript" src="javascript/scroll.js"></script>
   <script type="text/javascript" language="javascript">
   var 变量名称 = new Menu();
   //menu.OffsetX = 0;	// 调整 x 轴偏差
   //menu.OffsetY = 0;	// 调整 y 轴偏差
   变量名称.Bind("主菜单 id", "子菜单 id");	// Bind 的其他参数参考函数定义中的说明
   </script>
*/

function Menu()
{
	this.Position = "bottom";	// 子菜单显示的位置, bottom:下   right:右   top:上   left:左, 默认为 bottom
	this.Align = "";	// 子菜单对其主菜单项的方式, center:居中对齐,   left:左对齐   right:右对齐   top:顶端对齐   bottom:底部对齐, 默认为 center
	this.OffsetX = 0;
	this.OffsetY = 0;

	this.menus = {};	// 储存主菜单项的对象
	this.ie = document.all ? true : false;

}


/*
 把页面元素和隐藏绑定起来, 当鼠标移动上这个元素时会自动弹出隐藏元素
 menuId -> 页面元素 id, 子菜单将根据这个元素来定位
 subMenuId -> 被绑定的隐藏元素 id
 triggerId -> 出发 subMenu 的元素, 省略或为空则默认为 menuId
 position -> 子菜单显示的位置, bottom:下   right:右   top:上   left:左, 默认为 bottom
 align -> 子菜单对其主菜单项的方式, center:居中对齐,   left:左对齐   right:右对齐   top:顶端对齐   bottom:底部对齐, 默认为 center
 offsetX -> 调整 x 轴偏差
 offsetY -> 调整 y 轴偏差
 */
Menu.prototype.Bind = function(menuId, subMenuId, triggerId, position, align, offsetX, offsetY)
{
	with(this)
	{
		var menu = document.getElementById(menuId);
		var subMenu = document.getElementById(subMenuId);
		if (typeof triggerId == "undefined" || !triggerId) var triggerId = menuId;
		var trigger = document.getElementById(triggerId);
		if (!menu || !trigger)
		{
			alert("菜单/子菜单/触发 元素不存在。");
			return;
		}
		if (typeof position == "undefined" || position == "") var position = Position;
		if (typeof align == "undefined" || align == "") var align = Align;
		if (typeof offsetX == "undefined") var offsetX = OffsetX;
		if (typeof offsetY == "undefined") var offsetY = OffsetY;

		var zIndex = menu.style.zIndex;
		subMenu.style.zIndex = zIndex ? ++zIndex : 1;
		subMenu.style.visibility = "hidden";
		subMenu.style.display = "";
		subMenu.style.position = "absolute";

		menus[menuId] = {"subMenuId": subMenuId, "triggerId": triggerId, "position": position, "align": align, "offsetX": offsetX, "offsetY": offsetY};

		if (ie)
		{
			trigger.attachEvent("onmouseover", function() {_Show(menuId);});
			trigger.attachEvent("onmouseout", function() {_Hide(menuId);});
			subMenu.attachEvent("onmouseover", function() {_Show(menuId);});
			subMenu.attachEvent("onmouseout", function() {_Hide(menuId);});
		}
		else
		{
			trigger.addEventListener("mouseover", function() {_Show(menuId);}, true);
			trigger.addEventListener("mouseout", function() {_Hide(menuId);}, true);
			subMenu.addEventListener("mouseover", function() {_Show(menuId);}, true);
			subMenu.addEventListener("mouseout", function() {_Hide(menuId);}, true);
		}
	}
}


Menu.prototype._Show = function(menuId)
{
	with(this)
	{
		var menu = document.getElementById(menuId);
		var al = _GetAbsoluteLocation(menu);
		var subMenu = document.getElementById(menus[menuId].subMenuId);
		subMenu.style.visibility = "";
		switch (menus[menuId].position)
		{
			case "top":
			case "bottom":
				// y
				if (menus[menuId].position == "top")
					subMenu.style.top = al.top - subMenu.offsetHeight + menus[menuId].offsetY + "px";
				else
					subMenu.style.top = al.bottom + menus[menuId].offsetY + "px";
				//x
				switch (menus[menuId].align)
				{
					case "center":
						subMenu.style.left = al.left - (subMenu.offsetWidth - (al.right - al.left)) / 2 + menus[menuId].offsetX + "px";
						break;
					case "left":
						subMenu.style.left = al.left + menus[menuId].offsetX + "px";
						break;
					case "right":
						subMenu.style.left = al.left - (subMenu.offsetWidth - (al.right - al.left)) + menus[menuId].offsetX + "px";
						break;
					default:	// 自动
						var left = al.left - (subMenu.offsetWidth - (al.right - al.left)) / 2 + menus[menuId].offsetX;
						if (document.body.clientWidth - left - subMenu.offsetWidth < 0) left = document.body.clientWidth - subMenu.offsetWidth;
						if (left < 0) left = 0;
						subMenu.style.left = left + "px";
				}
				break;

			case "left":
			case "right":
				// x
				if (menus[menuId].position == "left")
					subMenu.style.left = al.left - subMenu.offsetWidth + menus[menuId].offsetX + "px";
				else
					subMenu.style.left = al.right + menus[menuId].offsetX + "px";
				// y
				switch (menus[menuId].align)
				{
					case "center":
						subMenu.style.top = al.top - (subMenu.offsetHeight - (al.bottom - al.top)) / 2 + menus[menuId].offsetY + "px";
						break;
					case "top":
						subMenu.style.top = al.top + menus[menuId].offsetY + "px";
						break;
					case "bottom":
						subMenu.style.top = al.top - (subMenu.offsetHeight - (al.bottom - al.top)) + menus[menuId].offsetY + "px";
						break;
					default:	// 自动
						var top = al.top - (subMenu.offsetHeight - (al.bottom - al.top)) / 2 + menus[menuId].offsetY;
						if (document.body.clientHeight - top - subMenu.offsetHeight < 0) top = document.body.clientHeight - subMenu.offsetHeight;
						if (top < 0) top = 0;
						subMenu.style.top = top + "px";
				}
				break;
		}

	}
}


Menu.prototype._Hide = function(menuId)
{
	var subMenu = document.getElementById(this.menus[menuId].subMenuId);
	subMenu.style.visibility = "hidden";
}


// get absolute location, return {top, left, right, bottom}
Menu.prototype._GetAbsoluteLocation = function(element)
{
	if (typeof element == "undefined") return null;

	var elmt = element;
	var offsetTop = elmt.offsetTop;
	var offsetLeft = elmt.offsetLeft;
	var offsetWidth = elmt.offsetWidth;
	var offsetHeight = elmt.offsetHeight;
	while(elmt = elmt.offsetParent)
	{
		if (elmt.style.position == 'absolute'
			//|| elmt.style.position == 'relative'
			|| (elmt.style.overflow != 'visible' && elmt.style.overflow != '' ))
			break;
		offsetTop += elmt.offsetTop;
		offsetLeft += elmt.offsetLeft;
	}
	return {"top": offsetTop, "left": offsetLeft, "right": offsetLeft + offsetWidth, "bottom": offsetTop + offsetHeight};
}