﻿/*!
 * 主  题：《菜单树生成》
 * 说  明：用于管理页面左侧树形菜单。
 * 功能描述：
 * 1、首先生成最左侧的选项卡；
 * 2、再生成相关的菜单树
 *
 *
 * 作  者：宋雷鸣 
 * 开发时间: 2011年1月10日
 */
//页面左侧树形菜单的面板
function TreePanel()
{
	//this.load();	
}
//载入数据
TreePanel.prototype.load=function()
{		
	$().SoapAjax("managemenu","Roots",{functype:"func"},BuildManageMenuRoot,treePanleLoading);
		//生成左侧的根菜单树
	function BuildManageMenuRoot(data)
	{
		var tree=new TreePanel();
		//面板个数
		window.TreePanelNumber=data.find("ManageMenu").size();		
		data.find("ManageMenu").each(
				function()
				{
					//var name=$(this).find("MM_Name").text();
					//ar id=$(this).find("MM_Id").text();
					var node=new Node($(this),data);
					//tree.add(name,id);
					tree.add(node);
				}
			);
		tree.focus();
	}
	//管理界面左侧,功能菜单区的预载框
	function treePanleLoading()
	{
		var treepanel=$("#consTreePanel");
		var offset = treepanel.offset();
		var html="<div id=\"treePanleLoadingMask\">";
		html+="<div>正在加载……<br/>";
		html+="<img src=\"Images/loading/load_016.gif\"></div>";
		html+="</div>";
		$("body").append(html);
		var mask=$("#treePanleLoadingMask");
		mask.css("position","absolute");
		mask.css("z-index","2000");
		var h=document.documentElement.clientHeight;
		var offset = $("#consBody").offset();
		var height=h-offset.top-$("#consFoot").height();	
		mask.css("width",treepanel.width());
		mask.css("height",height);	
		mask.css("top",offset.top);
		mask.css("left",offset.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");
	}
}
//增加面板
//node:Node对象
TreePanel.prototype.add=function(node)
{
	//左侧区域
	var treepl=$("#consTreePanel");
	this.addTitle(node);
	this.addPanel(null,node.Id);
}
//设置当前面板为焦点
TreePanel.prototype.focus=function(id)
{	
	//左侧区域
	var pl=$("#consTreePanel");
	//标题的焦点
	pl.find("dl dd").attr("class","out");
	pl.find("div[class='treepanel']").hide();
	if(id!=null)
	{
		pl.find("dl dd[id='consTreeTitle_"+id+"']").attr("class","current");
		pl.find("div[id='consTreePanel_"+id+"']").show();
	}else
	{
		pl.find("dl dd:first").attr("class","current");
		pl.find("div[class='treepanel']:first").show();
	}
	//取出所有的tree面板
	var panel=pl.find("div[class='treepanel']");
}
//增加面板的标题，即选项卡
//node:Node对象
TreePanel.prototype.addTitle=function(node)
{
	//左侧区域
	var pl=$("#consTreePanel");
	//标题项的
	var tp=pl.find("dl[type='titlePanel']");
	if(tp.length==0)
	{
		var tm="<dl type=\"titlePanel\"></dl>";
		pl.append(tm);
		tp=pl.find("dl[type='titlePanel']");
	}
	//
	//菜单节点的自定义样式
	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>";	
	//
	var tm="<dd id=\"consTreeTitle_"+node.Id+"\" title=\""+(node.Intro=="" ? node.Name : node.Intro)+"\">";
	tm+=name;
	tm+="</dd>";
	tp.append(tm);
	tp.find("#consTreeTitle_"+node.Id).click(
			function()
			{
				var thisId=$(this).attr("id");
				thisId=thisId.substring(thisId.indexOf("_")+1);					
				var tree=new TreePanel();
				tree.focus(thisId);
				//TreePanel.focus(thisId);
			}
		);
}
//增加菜单面板
TreePanel.prototype.addPanel=function(xml,id)
{
	//左侧区域
	var pl=$("#consTreePanel");
	pl.append("<div id=\"consTreePanel_"+id+"\" class=\"treepanel\"></div>");
	//取每个菜单树的数据，并生成菜单树
	$().SoapAjax("managemenu","FuncMenu",{rootId:id},buildTree,null,unTreePanleLoading);
	function buildTree(data)
	{
		var root=new Node(null,data);
		var tpl=$("#consTreePanel_"+root.Id);
		//生成菜单
		var rootHtml=buildMenu(data);
		tpl.html(rootHtml); 
		
		TreeEvent("#consTreePanel_"+root.Id);			
	}	
	//去除，管理界面左侧,功能菜单区的预载界面
	function unTreePanleLoading()
	{
		//面板个数
		window.TreePanelNumber--;	
		//alert(window.TreePanelNumber);
		if(window.TreePanelNumber<=0)
		{
			$("#treePanleLoadingMask").remove();
			var dl=$("dl[type='titlePanel'] dd");
			window.TreePanelNumber=dl.size();
		}
	}
}
/*

下面代码为生成树的代码


*/

//图标的路径
var icoPath="/Manage/Images/tree/";
var ico = {
		root				: 'root.gif',
		folder			    : 'folder.gif',
		folderOpen	        : 'folderopen.gif',
		page				: 'page.gif',
		empty				: 'empty.gif',
		line				: 'line.gif',
		join				: 'join.gif',
		joinBottom	        : 'joinbottom.gif',
		plus				: 'plus.gif',
		plusBottom	        : 'plusbottom.gif',
		minus				: 'minus.gif',
		minusBottom	        : 'minusbottom.gif',
		nlPlus			    : 'nlPlus.gif',
		nlMinus			    : 'nlMinus.gif',
		add					: 'add.gif',
		reline				: 'reline.gif'
	};
//重新定义ico
for(var t in ico)
{
	ico[t]="<img src=\""+icoPath+ico[t]+"\" />";
}
//生成菜单
//data:完整的数据源，基于soap
function buildMenu(data)
{
	//当前菜单的根节点对象
	var root=new Node(null,data);
	var tmp="<div style=\"float: none;\" type=\"nodePanel\" panelId=\""+root.Id+"\">";
	for(var i=0;i<root.Childs.length;i++)
	{
		var n=new Node(root.Childs[i],data);
		//生成次级菜单的 条状栏
		tmp+="<div class=\"menuBar\" nodeId=\""+n.Id+"\">";
		tmp+=BuildNode(n,data);
		tmp+="</div>";
		//生成三级菜单，即树形
		tmp+="<div type=\"treeBox\" class=\"treeBox\" panelId=\""+n.Id+"\">";
		tmp+=buildItem(n,data,n.Id);	
		tmp+="</div>";
	}
	tmp+="</div>";
	return tmp;
}
//生成菜单
//node:数据源的节点；
//data:完整的数据源，基于soap
//pid:当前菜单二级菜单项的id;
function buildItem(node,data,pid)
{	
	//如果没有子节点，则返回空
	if(!node.IsChilds)return "";
	var temp="<div style=\"float: none;\" type=\"nodePanel\" panelId=\""+node.Id+"\">";
	//开始生成
	for(var i=0;i<node.Childs.length;i++)
	{
		var n=new Node(node.Childs[i],data);
		temp+="<div type=\"nodeline\" style=\"height:18px\">";
		//节点前的图标区域//树的连线与图标
		temp+="<div style='width:auto;float:left;' state='"+n.State+"' ";
		temp+="type='nodeIco' ";
		temp+="IsChilds='"+(n.IsChilds ? "True" : "False")+"'>";
		temp+=nodeLine(n,data,pid)+nodeIco(n,data);
		temp+="</div>";
		//菜单项文本
		temp+=BuildNode(n,data);
		temp+="</div>";	
		temp+=buildItem(n,data,pid);		
	}
	temp+="</div>";
	return temp;
}
//生成节点项文本
function BuildNode(node,data)
{
	var temp="<div style=\"width:auto;line-height: 18px;display: table;	cursor: default;\"";
	temp+=" title='"+(node.Intro=="" ? node.Name : node.Intro)+"'";
	temp+=" nodeId='"+node.Id+"' text=\""+node.Name+"\"";
	//temp+=" path=\""+node.Path+"\"";
	temp+=" tax='"+node.Tax+"' patId=\""+node.PatId+"\" ";
	temp+=" nodeType='"+node.Type+"'  ";
	temp+=" type='"+(node.Parent==null ? "rootText" : "text")+"'>";
	//菜单节点的自定义样式
	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;
}
//生成菜单项前的第一个节点，即链接
//node:当前节点
//pid:要显示顶级菜单的id，该顶级并不是数据源的顶级
function nodeLine(node,data,pid)
{
	var temp="";	
	if(node.Parent != null)
	{
		var p=new Node(node.Parent,data);	
		while(p.Id != pid)
		{
			//如果是最后一个节点
			if(p.IsLast) temp=ico.empty+temp;
			else temp=ico.line+temp;
			//当前节点的上级节点		
			p=new Node(p.Parent,data);
		}
	}
	return temp;
}
//菜单项第二个子节点，用于显示加减号与菜单项图标
//n:当前节点
function nodeIco(n,data)
{
	var temp="";
	//如果是顶级，则返回根图标
	if(n.Parent==null)return ico.root;
	//如果有子节点
	if(n.IsChilds)
	{
		//最后一个节点,且为打开状态
		if(n.IsLast && n.State)temp+=ico.minusBottom+ico.folderOpen;
		//最后一个节点，状态为关闭
		if(n.IsLast && !n.State)temp+=ico.plusBottom+ico.folder;
		//不是最后一个节点，状态为打开
		if(!n.IsLast && n.State)temp+=ico.minus+ico.folderOpen;	
		//不是最后一个节点，状态为关闭
		if(!n.IsLast && !n.State)temp+=ico.plus+ico.folder;
	}else
	{
		//如果没有子节点，且为当前级别最后一个节点
		if(n.IsLast)temp+=ico.joinBottom+ico.page;
		//没有子节点，不是当前级别，最后一个
		if(!n.IsLast)temp+=ico.join+ico.page;
	}
	return temp;
}
//树形菜单事件，如打开折叠等
function TreeEvent(panel)
{
	//当点击节点前的图标时，如加减号文件夹图标
	$(panel+" div[IsChilds='True']").click(
		function()
		{			//alert(1);
			//栏目图标，文件夹或文件图标
			var last=$(this).find("img:last");
			//节点图标，加号或┝号
			var pre=last.prev();
			tranImg(pre,"plus.gif","minus.gif");
			tranImg(pre,"minusbottom.gif","plusbottom.gif");
			tranImg(last,"folderopen.gif","folder.gif");
			$(this).parent().next().slideToggle();
			var state=$(this).attr("state");			
			$(this).attr("state", state=="true" ? "false" : "true");
		}
	);
	//根节点事件
	$(panel).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");	
				switch(type)
				{
					case "link"://如果是外部链接，直接打开
						return true;
					case "open"://如果是弹出窗口
						new PageBox(name,link,50,50).Open();
						return false;
					case "item":
					default:
						var p=new PagePanel();
						p.add(name,path,link,id);
						return false;
				}				
			}
		);
}
//处理点前图片的替换效果
//element:节点的元素
//img1:原图片
//img2:新图片
function tranImg(el,img1,img2)
{
	if(el.attr("src").indexOf(img1)>0)	
		el.attr("src",el.attr("src").replace(img1,img2));
	else	
		if(el.attr("src").indexOf(img2)>0)	
			el.attr("src",el.attr("src").replace(img2,img1));		
}
