oa/shares/resources/js/menubar.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);
				}
				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);
			selectedGroup.ShowDrowdownButton();
		}

	}

	// 获取Html对象
	//
	this.GetHtmlObject = function()
	{
		if (htmlObject == null)
		{
			var obj = document.createElement("div");
			obj.className = "left-menuBar";
			
			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;
	var imgScrollUp = null;
	var imgScrollDown = null;
	var scrollTimerId = null;
	var topMenuIndex = 0;

	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); 
	}

	this.CanScrollUp = function()
	{
		return (this.GetMenusOffsetTop() < 0)
	}

	this.CanScrollDown = function()
	{
		var clientHeight = this.GetClientHeight();
		var itemsHeight = this.GetItemsHeight();

		return (itemsHeight + this.GetMenusOffsetTop() > clientHeight)		
	}

	this.ShowDrowdownButton = function()
	{
		
		var height = this.GetHeight();
		var captionHeight = this.GetCaptionHeight();
		var pos = getPostion(htmlObject);

		// 出现上箭头
		//
		if (this.CanScrollUp())
		{
			imgScrollUp.style.display = "block";
			imgScrollUp.style.left = objItems.offsetWidth - 16 - 4;
			imgScrollUp.style.top = pos.top + captionHeight - 24;
			imgScrollUp.onmousedown = function()
			{
				owner.MenuScrollUp();
			}
			imgScrollUp.onmouseup = function()
			{
				owner.MenuScrollStop();
			}
		}
		else
		{
			imgScrollUp.style.display = "none";
			this.MenuScrollStop();
		}

		// 出现下箭头
		//
		if (this.CanScrollDown())
		{
			imgScrollDown.style.display = "block";
			imgScrollDown.style.left = objItems.offsetWidth - 20;
			imgScrollDown.style.top = height - 20;
			imgScrollDown.onmousedown = function()
			{
				owner.MenuScrollDown();
			}
			imgScrollDown.onmouseup = function()
			{
				owner.MenuScrollStop();
			}
		}
		else
		{
			imgScrollDown.style.display = "none";
			this.MenuScrollStop();
		}
	}

	this.MenuScroll = function(direction)
	{
		if (this.MenuBar == null || this.Index != this.MenuBar.SelectedIndex)
		{
			return;
		}
		var top = 0;
		if (direction == "up")
		{
			if (!this.CanScrollUp() || topMenuIndex == 0)
			{
				return;
			}
			topMenuIndex--;
		}
		else
		{
			if (!this.CanScrollDown() || topMenuIndex == this.Items.length)
			{
				return;
			}
			topMenuIndex++;
		}

		for (var i=0; i<topMenuIndex; i++)
		{
			var menu = this.Items[i];
			if (menu != null)
			{
				top -= menu.GetHeight();
			}
		};

		if (objItems != null)
		{
			objItems.style.top = top;
		}
		this.ShowDrowdownButton();
	}

	this.MenuScrollUp = function() {
		this.MenuScroll("up");
		this.MenuScrollStop();
		var handler = function()
		{
			owner.MenuScrollUp();
		}
		scrollTimerId = window.setTimeout(handler, 100);
	}

	this.MenuScrollDown = function() {
		this.MenuScroll("down");
		this.MenuScrollStop();
		var handler = function()
		{
			owner.MenuScrollDown();
		}
		scrollTimerId = window.setTimeout(handler, 100);
	}

	this.MenuScrollStop = function() {
		if (scrollTimerId != null) {
			window.clearTimeout(scrollTimerId)
			scrollTimerId = null;
		}
	}

	this.GetHtmlObject = function()
	{
		if (htmlObject == null)
		{
			var obj = document.createElement("div");
			obj.className = "left-menuGroup";
			obj.onmousewheel = function()
			{
				if (event.wheelDelta >= 120)
					owner.MenuScroll("up");
				else if (event.wheelDelta <= -120)
					owner.MenuScroll("down");
			}

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

			imgScrollDown = new Image();
			obj.appendChild(imgScrollDown);
			imgScrollDown.src = "../resources/images/fw/left/scrolldown.gif";
			imgScrollDown.className = "left-scrollButton";

			imgScrollUp = new Image();
			obj.appendChild(imgScrollUp);
			imgScrollUp.src = "../resources/images/fw/left/scrollup.gif";
			imgScrollUp.className = "left-scrollButton";

            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";
			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 = "doc2";
			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";
			

			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};
}