ygtx_oa/shares/resources/js/menubar-2.js


function MenuBar(container)
{
	this.Container = container; // 容器
	this.Groups = new Array(); // Group集合
	this.SelectedIndex = 0; // 选中项
	this.MoveIndent = 100;
	var timerId = null;
	var htmlObject = null;
	var owner = this;



	// 增加Group
	//
	this.Add = function(group)
	{
		group.MenuBar = this;
		group.Index = this.Groups.length;
		this.Groups[this.Groups.length] = group;
	}

	// 初始化
	//
	this.Init = function()
	{
		if (this.Container != null)
		{
			if (htmlObject == null)
			{
				this.Container.appendChild(this.GetHtmlObject());
			}
			for (var i=0; i<this.Groups.length; i++)
			{
				var group = this.Groups[i];
				if (group == null)
					break;
				group.SetIndex(i);

				var clickHandler = function() {
					var index = parseInt(this.getAttribute("index"));
					if (isNaN(index))
						index = 0;
					if (this.SelectedIndex == index)
						return;
					owner.ClearTimer();
					owner.Reload();
					owner.ScrollMenuBar(index);
					clicked();
				}
				group.CaptionClick(clickHandler);
			}
			this.Reload();
		}
	}

	this.ScrollMenuBar = function(index)
	{
		if (this.SelectedIndex == index)
		{
			return;
		}
		var preGroup = this.Groups[this.SelectedIndex];
		var group = this.Groups[index];
		if (preGroup != null && group != null)
		{
			var preGroupHeight = preGroup.GetHeight();
			var preGroupCaptionHeight = preGroup.GetCaptionHeight();
			var groupHeight = group.GetHeight();
			if (preGroupHeight > preGroupCaptionHeight)
			{
				var indent = this.MoveIndent;
				if (preGroupHeight - this.MoveIndent < 0)
				{
					indent = preGroupHeight - preGroupCaptionHeight;
				}
				preGroup.SetHeight(preGroupHeight - indent);
				group.SetHeight(groupHeight + indent);
				var handler = function (){owner.ScrollMenuBar(index)}
				timerId = window.setTimeout(handler, 10);
			}			
			else
			{
				this.SelectedIndex = index;
				this.Reload();
			}
		}
	}

	// 重新计算位置
	//
	this.Reload = function()
	{
		this.ClearTimer();

		// 计算选中组高度
		//
		var selectedGroupHeight = this.Container.clientHeight-37;

		for (var i=0; i<this.Groups.length; i++)
		{
			var group = this.Groups[i];
			if (group == null)
				break;

			if (i != this.SelectedIndex)
			{
				var captionHeight = group.GetCaptionHeight();
				selectedGroupHeight -= captionHeight;
				group.SetHeight(captionHeight);
			}
		}

		// 设置选中项高度
		//
		var selectedGroup = this.Groups[this.SelectedIndex];
		if (selectedGroupHeight > 0 && selectedGroup != null)
		{
			selectedGroup.SetHeight(selectedGroupHeight);

		}

	}



	// 获取Html对象
	//
	this.GetHtmlObject = function()
	{
		if (htmlObject == null)
		{
			var obj = document.createElement("div");
			obj.className = "left-menuBar";
			var leftheight=document.body.clientHeight;
			obj.style.height=leftheight-12+"px";
			var leftTitlecontent = document.createElement("div");
			leftTitlecontent.className="left-title-container";
			obj.appendChild(leftTitlecontent);
			
			imgcontent = document.createElement("span");
			leftTitlecontent.appendChild(imgcontent);
			
			textcontent = document.createElement("h1");
			textcontent.innerHTML = "菜单列表";
			leftTitlecontent.appendChild(textcontent);
			
			clickcontent = document.createElement("div");
			clickcontent.className="clickcontent-title";
			leftTitlecontent.appendChild(clickcontent);

			
			
			for (var i=0; i<this.Groups.length; i++)
			{
				var group = this.Groups[i];
				if (group != null)
				{
					obj.appendChild(group.GetHtmlObject());

				}
			}
			htmlObject = obj;
		}
		return obj;
	}

	this.ClearTimer = function()
	{
		if (timerId != null)
		{
			window.clearTimeout(timerId);
			timerId = null;
		}
	}
}

// 菜单组
//
function MenuGroup(text)
{
	this.Text = text;
	this.Items = new Array();
	this.MenuBar = null;
	this.Index = -1;
	var owner = this;
	var htmlObject = null;
	var objCaption = null;
	var objItems = null;


	this.Add = function(menu)
	{
		this.Items[this.Items.length] = menu;
	}

	this.AddMenu = function(text, icon, href, target)
	{
		var menu = new Menu(text, icon, href, target);
		this.Add(menu);
	}

	this.SetIndex = function(i)
	{
		this.Index = i;
		if (objCaption != null)
		{
			objCaption.setAttribute("index", i);
		}
	}

	this.GetCaptionHeight = function()
	{
		if (objCaption != null)
		{
			return objCaption.clientHeight;
		}
		return 0;
	}

	this.GetHeight = function()
	{
		if (htmlObject != null)
		{
			return htmlObject.clientHeight;
		}
		return 0;
	}

	this.GetItemsHeight = function()
	{
		if (objItems != null)
		{
			return objItems.offsetHeight;
		}
		return 0;
	}

	this.GetMenusOffsetTop = function()
	{
		var top = 0;
		if (objItems != null)
		{
			if (objItems.style.pixelTop)
			{
				top = objItems.style.pixelTop;
			}
			else if (objItems.style.top != "")
			{
				top = parseInt(objItems.style.top.replace("px", ""));
			}
		}
		return top;
	}

	this.SetHeight = function(height)
	{
		if (htmlObject != null)
		{
			htmlObject.style.height = height;
		}
	}

	this.CaptionClick = function(clickHandler)
	{
		objCaption.onclick = clickHandler;
	}

	// 除掉标题栏的高度
	//
	this.GetClientHeight = function()
	{
		var height = this.GetHeight();
		var captionHeight = this.GetCaptionHeight();
		return (height - captionHeight); 
	}


	clicked = function()
	{
		if (this.MenuBar == null || this.Index != this.MenuBar.SelectedIndex)
		{
            clickcontent.className="clickcontent-selecte";
        }
	}



	this.GetHtmlObject = function()
	{
		if (htmlObject == null)
		{
			var obj = document.createElement("div");
			obj.className = "left-menuGroup";


			objCaption = document.createElement("div");
			obj.appendChild(objCaption);
			objCaption.className = "left-nav-container";
			objCaption.onselectstart = function(){return false;}


            imgcontent = document.createElement("span");
			objCaption.appendChild(imgcontent);
			
			textcontent = document.createElement("h1");
			textcontent.innerHTML = this.Text;
			objCaption.appendChild(textcontent);
			
			clickcontent = document.createElement("div");
			objCaption.appendChild(clickcontent);
			

			objItems = document.createElement("div");
			objItems.className = "left-menuItems-2";

			obj.appendChild(objItems);
			for (var i=0; i<this.Items.length; i++)
			{
				var item = this.Items[i];
				if (item != null && item.GetHtmlObject() != null)
				{
					objItems.appendChild(item.GetHtmlObject());
				}
			}
			htmlObject = obj;
		}
		return htmlObject;
	}

}

function Menu(text, icon, href, target)
{
	this.Text = text;
	this.Icon = icon;
	this.Href = href;
	this.Target = target;
	var htmlObject = null;

	this.GetHeight = function()
	{
		if (htmlObject != null)
		{
			return htmlObject.offsetHeight;
		}
		return 0;
	}

	this.GetHtmlObject = function()
	{
		if (htmlObject == null)
		{
			var obj = document.createElement("div");
			obj.align = "center";
			obj.className = "left-menu";

			var link = document.createElement("a"); 
			link.href = this.Href;
			link.target = this.Target;
			link.onfocus = function() { this.blur(); }

			var link2 = link.cloneNode(true);
			obj.appendChild(link2);
			link2.onfocus = function() { this.blur(); }

			var img = new Image();
			link2.appendChild(img);
			img.src = this.Icon;
			img.alt = this.Text;
			img.className = "left-menuIcon";
		//	img.onmouseover = function()
		//	{
		//		SetBorderColor(this, "#CCCCCC", "#000000");
		//	}
		//	img.onmousedown = function()
		//	{
		//		SetBorderColor(this, "#000000", "#CCCCCC");
		//	}
		//	img.onmouseup = function()
		//	{
		//		SetBorderColor(this, "#CCCCCC", "#000000");
		//	}
		//	img.onmouseout = function()
		//	{
		//		SetBorderColor(this, "#FFFFFF", "#FFFFFF");
		//	}

			var objText = document.createElement("div"); 
			obj.appendChild(objText);
			objText.className = "left-menuText";
			link.innerHTML = this.Text;
			objText.appendChild(link);

			htmlObject = obj;
		}
		
		return htmlObject;
	}
}


function SetBorderColor(obj, borderColorLight, borderColorDark)
{
	obj.style.borderLeftColor = borderColorLight;
	obj.style.borderTopColor = borderColorLight;
	obj.style.borderRightColor = borderColorDark;
	obj.style.borderBottomColor = borderColorDark;
}

function getPostion(e){
	var t=e.offsetTop;
	var l=e.offsetLeft;
	while(e=e.offsetParent){
		t+=e.offsetTop;
		l+=e.offsetLeft;
	}
	return {"top": t, "left" : l};
}