function SlideMenu(oBtn, oMenu)
{
	/* 设计要点：
	1）一致性：isOpened = closing，则-menuHeight < top < 0，有timer，对应ID为hideIntervalID
			   isOpened = closed，则top = -menuHeight, 无timer
			   isOpened = opening，则-menuHeight < top < 0，有timer，对应ID为showIntervalID
			   isOpened = opened，则top = 0，无timer
	2）在同一组的node，离开一个时设置timer，进入同组时取消该timer
	*/
	var btn = oBtn;
	var menu = oMenu;
	var OpeningState = { "closed" : 0, "opening" : 1, "closing" : -1, "opened" : 2 };	
	var showIntervalID = null, hideIntervalID = null, timeoutID = null;
	
	// 为下拉菜单添加container
	var menuContainer = document.createElement("div");
	menu = menu.parentNode.removeChild(menu);
	menuContainer.appendChild(menu);
	document.body.appendChild(menuContainer);
	
	// 设置container必要的样式
	menuContainer.style.display = 'block';
	menuContainer.style.visibility = 'visible';
	menuContainer.style.overflow = 'hidden';
	menuContainer.style.position = 'absolute';
	
	// 设置下拉菜单的样式
	menu.style.position = 'absolute';
	menu.style.overflow = 'visible';
	menu.style.display = 'block';
	menu.style.visibility = 'hidden'; // 用户看不到菜单，但可以获取菜单的宽和高
	
	var menuWidth = menu.offsetWidth;
	var menuHeight = menu.offsetHeight;
	
	menuContainer.style.width = menuWidth + 'px';
	menuContainer.style.height = menuHeight + 'px';
	
	// 隐藏container
	menuContainer.style.display = 'none';
	// 设置container位置
	var pos = GetPosition(btn);
	menuContainer.style.left = pos.x + 'px';
	menuContainer.style.top = (pos.y + btn.offsetHeight) + 'px';
	// 设置菜单属性
	menu.style.left = '0px';
	menu.style.top = -menuHeight + 'px';
	var isOpened = OpeningState.closed;
	
	var mouseOut = function ()
	{
		if (isOpened > 0)
		{
			// 如果此时menu正在展开，取消展开
			if (isOpened == OpeningState.opening)
			{
				clearInterval(showIntervalID);
				showIntervalID = null;
			}
	
			hideIntervalID = hide();
		}
	}
	
	var groupMouseOver = function ()
	{
		if (timeoutID != null)
		{
			clearTimeout(timeoutID);
			timeoutID = null;
		}
	}
	
	var groupMouseOut = function ()
	{
		timeoutID = setTimeout(mouseOut, 100);
	}

	var setGroup = function (obj)
	{
		obj.onmouseover = groupMouseOver;
		obj.onmouseout = groupMouseOut;
		
		for (var child in obj.childNodes)
		{
			if (child.nodeName !=  "#text")
				setGroup(child);
		}
	}
	btn.onmouseout = groupMouseOut;
	setGroup(menu);
	
	var mouseOver = function ()
	{
		groupMouseOver();
		if (isOpened <= 0)
		{
			// 如果此时menu正在收回，则取消收回
			if (isOpened = OpeningState.closing)
			{
				clearInterval(hideIntervalID);
				hideIntervalID = null;
			}
			
			showIntervalID = show();
		}
	}
	btn.onmouseover = mouseOver;
	
	var show = function ()
	{
		// 将container设置为可见，此时下拉菜单仍保持display:block;visibility:hidden
		menuContainer.style.display = 'block';
		menu.style.visibility = 'visible';
		isOpened = OpeningState.opening; // 正在展开

		var intervalID = setInterval(function ()
			{
				var top = Number(menu.style.top.replace('px', ''));
				top += 5;
				if (top >= 0)
				{
					top = 0;
					clearInterval(intervalID);
					showIntervalID = null;
					isOpened = OpeningState.opened;   // 已展开
				}
				menu.style.top = top + 'px';
			}, 20);
			
		return intervalID;
	}
	
	var hide = function()
	{
		isOpened = OpeningState.closing;	// 正在收回
		var intervalID = setInterval(function ()
			{
				var top = Number(menu.style.top.replace('px', ''));
				top -= 5;
				if (top <= -menuHeight)
				{
					top = -menuHeight;
					clearInterval(intervalID);
					hideIntervalID = null;
					menuContainer.style.display = 'none';
					isOpened = OpeningState.closed;  // 未展开
				}
				menu.style.top = top + 'px';
			}, 20);
			
		return intervalID;
	}
}
//window.onload = function ()
//{
//	new SlideMenu($("li1"), $("1"));
//	new SlideMenu($("li2"), $("2"));
//	new SlideMenu($("li3"), $("3"));
//}
function GetPosition(node)
{
	var pos = { x : 0, y :0 };
	var nodeInPath = node;
	while (nodeInPath != null)
	{
		pos.x += nodeInPath.offsetLeft;
		pos.y += nodeInPath.offsetTop;
		
		nodeInPath = nodeInPath.offsetParent;
	}
	
	return pos;
}

var $ = function($) {
	return document.getElementById($)
};