﻿/*!
 * 主  题：《下拉菜单生成》
 * 说  明：用于管理界面右上方的下拉菜单。
 * 功能描述：
 * 1、模仿桌面应用软件下拉菜单效果；
 * 2、能免应用屏幕，当右侧空间不够时，下拉菜单向左展开
 *
 *
 * 作  者：宋雷鸣 
 * 开发时间: 2012年2月13日
 */
 
 
//页面左侧树形菜单的面板
//area:下拉菜单所处在页面div区域
function DropMenu(area)
{
	if(area!="" && area!=null)DropMenu.Area=area;
	DropMenu.ZIndex=4000;
}
//菜单停留时间
DropMenu.MenuWaitTime=100;
//判断鼠标是否处在菜单之上
window.IsOnDropMenu=true;    
function closeDropMenu()
{
	if(!window.IsOnDropMenu)
	{
		var d=new DropMenu();
		d.PanelHide();		
	}	
}
//载入数据
DropMenu.prototype.load=function()
{		
	$().SoapAjax("managemenu","DropMenu",{},BuildDropMenu,DropMenu.Loading,DropMenu.UnLoading);
	//生成左侧的根菜单树
	function BuildDropMenu(data)
	{
		var area=$(DropMenu.Area);
		if(area.size()<1)return;
		var drop=new DropMenu();
		var tmp="";
		tmp+=drop.BuildMenu(data);
		area.html(tmp);
		drop.MenuStyleInit();
		drop.Event();
	}
}
//生成下菜单主项
DropMenu.prototype.BuildMenu=function(data)
{
	var tmp="";	
	//当前根节点
	var root=new Node(null,data);
	for(var i=0;i<root.Childs.length;i++)
	{
		var n=new Node(root.Childs[i],data);
		//tmp+=this.BuildNode(n,data,"rootMenu");			
	}
	//递归生成子菜单
	tmp+=this.BuildMenuItem(root,data,0);
	return tmp;
}
//生成下拉菜单，子菜单面板
DropMenu.prototype.BuildMenuItem=function(node,data,level)
{
	//如果没有子节点，则直接返回
	if(!node.IsChilds)return "";	
	//
	var tmp="<div style=\"z-index: "+(DropMenu.ZIndex++)+";\"";
	tmp+=" patId='"+node.Id+"' ";
	tmp+=" class='menuPanel' type='menuPanel' level=\""+(level++)+"\">";
	for(var i=0;i<node.Childs.length;i++)
	{
		//生成菜单点
		var n=new Node(node.Childs[i],data);		
		tmp+=this.BuildNode(n,data, "MenuNode");
		//tmp+="<div>"+n.Name+"</div>";
	}
	tmp+="</div>";
	//递归生成子菜单
	for(var i=0;i<node.Childs.length;i++)
	{
		var n=new Node(node.Childs[i],data);
		tmp+=this.BuildMenuItem(n,data,level);
	}
	return tmp;
}
//生成节点项文本
//node:当前节点
//data:完整数据源
//clas:当前节点的style
DropMenu.prototype.BuildNode=function(node,data,clas)
{	
	var temp="<div nodeId=\""+node.Id+"\"";
	temp+=" nodetype=\""+node.Type+"\" ";
	temp+=" title='"+(node.Intro=="" ? node.Name : node.Intro)+"'";
	temp+=" isChild=\""+node.IsChilds+"\"  type=\""+clas+"\" >";
	//菜单节点的自定义样式
	var style="font-size: 13px; ";
	if(node.Color!="") style+="color: "+node.Color+";";
	if(node.IsBold) style+="font-weight: bold;";
	if(node.IsItalic) style+="font-style: italic;";
	if(node.Font!="") style+="font-family: '"+node.Font+"';";	
	var name="<span style=\""+style+"\">"+node.Name+"</span>";	
	if(node.Link!="")
	{
		temp+="<a href=\""+node.Link+"\"  path=\""+node.Path+"\" target=\"_blank\">"+name+"</a>";
	}else
	{
		temp+=name;
	}
	temp+="</div>";
	return temp;
}
//菜单样式初始化
DropMenu.prototype.MenuStyleInit=function()
{
	var area=$(DropMenu.Area);
	area.find("[type='menuPanel']").each(
			function()
			{
				var level=Number($(this).attr("level"));
				//顶部菜单
				if(level==0)
				{
					$(this).attr("class","rootPanel").attr("type","rootPanel");
					$(this).children().attr("class","rootMenu");
					$(this).show();	
				}else
				{
					$(this).children().attr("class","MenuNode");
					$(this).children().each(
						function()
						{
							//如果子菜单项有下拉菜单，显示黑色的小三角
							var isChild=$(this).attr("isChild");
							var style="background-image: url(/manage/images/tree/triangle.gif);";
							style+="background-repeat: no-repeat;";
							style+="background-position: "+($(this).parent().width()-8)+"px 5px;";
							if(isChild=="true")$(this).attr("style",style);
						}
					);	
					$(this).hide();
				}
			}
		);
}
//下拉菜单相关事件
DropMenu.prototype.Event=function()
{
	var area=$(DropMenu.Area);	
	//菜单事件
	area.find("div[type='MenuNode']").hover(
			function()
			{
				var d=new DropMenu();
				d.PanelShow($(this));	
				d.MouseOverShow($(this));
				//
				var area=$(DropMenu.Area);	
				var t=area.find("[type$='Panel']");
			},function(){}
		);
	//当鼠标移动时
	$("body").mousemove(
		function(e)
		{	
			var area=$(DropMenu.Area);		
			//判断鼠标是否处于菜单之上
			var tmp=$().isMouseArea($("div[type$='Panel']"),e);			
			window.IsOnDropMenu=tmp;
			if(!tmp)setTimeout("closeDropMenu()",DropMenu.MenuWaitTime); 
		}
	);
	//菜单项,点击事件
	area.find("a").click(
			function()
			{				
				var type=$(this).parent().attr("nodetype");
				var link=$(this).attr("href");	
				var id=$(this).parent().attr("nodeId");
				var name=$(this).text();
				var path=$(this).attr("path");
				if(path.indexOf(",")>-1)
				{
					path=path.substring(path.indexOf(",")+1);
				}				
				switch(type)
				{
					case "link"://如果是外部链接，直接打开
						return true;
					case "open"://如果是弹出窗口
						new PageBox(name,link,50,50).Open();
						return false;
					case "event"://如果是javascript事件
						eval(link);
						return false;
					case "item":
					default:
						var p=new PagePanel();
						p.add(name,path,link,id);
						return false;
				}				
			}
		);
}
//预载框
DropMenu.Loading=function()
{
	var area=$(DropMenu.Area);
	var off=area.offset();
	var html="<div id=\"dropMenuPanleLoadingMask\">";
	html+="<div>正在加载……<br/>";
	html+="<img src=\"Images/loading/load_016.gif\"></div>";
	html+="</div>";
	$("body").append(html);
	var mask=$("#dropMenuPanleLoadingMask");
	mask.css("position","absolute").css("z-index","1999");
	var w=document.documentElement.clientWidth;	
	mask.css("width","auto").css("height",50);	
	mask.css("top",off.top);
	if((off.left+mask.width()+10)>w)
	{
		mask.css("left",w-mask.width()-10);
	}else
	{
		mask.css("left",off.left);
	}
	//mask.css("background-color","#ffffff");
	var alpha=70;
	mask.css("filter","Alpha(Opacity="+alpha+")");
	mask.css("display","block");
	mask.css("-moz-opacity",alpha/100);
	mask.css("opacity",alpha/100);
	mask.fadeIn("slow");
}
//去除预载
DropMenu.UnLoading=function()
{
	$("#dropMenuPanleLoadingMask").remove();
}
//鼠标滑过事件
//current:鼠标正在滑过的菜单项
DropMenu.prototype.MouseOverShow=function(current)
{
	var parent=current.parent();
	//面板级别
	var level=Number(parent.attr("level"));
	//如果是根菜单
	if(level==0)
	{
		current.siblings().attr("class","rootMenu");
		current.attr("class","rootMenu rootMenuOver");
	}else
	{
		current.siblings().attr("class","MenuNode");
		current.attr("class","MenuNode MenuNodeOver");
	}
}
//下拉菜单的显示
//pmenu:面板的上级菜单，即正在点中的菜单项
DropMenu.prototype.PanelShow=function(pmenu)
{
	this.PanelHide(pmenu.parent());
	var area=$(DropMenu.Area);
	//面板级别
	var level=Number(pmenu.parent().attr("level"));
	var nodeid=pmenu.attr("nodeId");
	//自身坐标对象
	var off=pmenu.offset();
	//子菜单面板
	var panel=area.find("div[patId="+nodeid+"]");
	if(panel.size()<1)return;
	var w=document.documentElement.clientWidth;
	//如果是根菜单
	if(level==0)
	{		
		panel.css("top",off.top+pmenu.height());		
		if((off.left+panel.width())<w)
		{
			panel.css("left",off.left);
		}else
		{
			panel.css("left",off.left+pmenu.width()-panel.width()+5);
		}
		panel.show();
		return;
	}
	//如果是其它菜单
	panel.css("top",off.top+pmenu.height()/2);
	if((off.left+pmenu.width()+panel.width())>w)
	{
		panel.css("left",off.left-panel.width()+5);
	}else
	{
		panel.css("left",off.left+pmenu.width()-5);
	}
	panel.show();
}
//下拉菜单面板的隐藏
//panel:上级菜单
DropMenu.prototype.PanelHide=function(panel)
{
	//如果参数为空，则隐藏所有下拉菜单面板
	if(panel==null)
	{
		$(DropMenu.Area).find("div[type$='Panel']").each(
				function()
				{
					var level=Number($(this).attr("level"));
					$(this).children().attr("class",(level==0) ? "rootMenu" : "MenuNode");
					if(level!=0)$(this).hide();
				}
			);	
		return;
	}
	//上级菜单的同级菜单
	panel.find("div[isChild=true]").each(
			function()
			{
				var nodeid=$(this).attr("nodeId");
				//同级子面板隐藏
				var child=$(DropMenu.Area).find("div[patId="+nodeid+"]");	
				child.children().attr("class","MenuNode");
				child.hide();				
				var d=new DropMenu();
				d.PanelHide(child);				
			}
		);
}
//获取当前坐标下的节点
//return:返回树形节点的页面元素
DropMenu.getDragObj=function(e)
{
	var mouse=$().Mouse(e);
	var x=mouse.x;
	var y=mouse.y
	var tmp=null;	
	$("div[type='menuPanel']").each(
			function()
			{
				var offset = $(this).offset();
				var xt = x > offset.left && x < (offset.left + $(this).width());
				var yt = y > offset.top && y < (offset.top +$(this).height());				
				if(xt && yt)
				{
					if($(this).attr("state")!="lock")tmp=$(this);
				}
			}
		);
	return tmp;
}
