Perwoll.SubPagesMenu = function() {
    var Dom = YAHOO.util.Dom;
    var Event = YAHOO.util.Event;
    var Anim = YAHOO.util.Anim;
	
	var element = Dom.get("sub-pages-navi");
	var menuElement = Dom.get("sub-pages-navi-menu");
	
	var links = Dom.getElementsByClassName("sub-pages-menu-link", "", menuElement);
	
	var activeMenu = null;
	var previousMenu = null;
	var expandAnim = null;
	var collapseAnim = null;
	var hideTimeoutId = 0;
	
	for(var i = 0; i < links.length; i++)
	{
		if(links[i].nextSibling)
		{
			var subMenu = links[i].nextSibling;
			Dom.setX(subMenu, Dom.getX(links[i]));
			
			Event.on(links[i], "mouseover", onMenuItemOver, subMenu);
			Event.on(links[i], "mouseout", onMenuItemOut, links[i].nextSibling);
			Event.on(subMenu, "mouseover", onMenuItemOver, subMenu);
			Event.on(subMenu, "mouseout", onMenuItemOut, subMenu);
		}
	}
	
	
	function hideMenu()
	{
		clearTimeout(hideTimeoutId);
		
		if(collapseAnim && collapseAnim.isAnimated())
		{
			collapseAnim.stop(true);
		}
		
		previousMenu = activeMenu;
        activeMenu = null;
        
		
		collapseAnim = new Anim(previousMenu.firstChild, {top: {to: -previousMenu.firstChild.offsetHeight}}, .5, YAHOO.util.Easing.easeOut);
		collapseAnim.onComplete.subscribe(function() {
			previousMenu.style.visibility = "hidden";
			previousMenu = null;			
		});
        collapseAnim.animate();	
	}
	
	function onMenuItemOut(e, subMenu)
    {
		hideTimeoutId = setTimeout(hideMenu, 300);
	}
	
	function onMenuItemOver(e, subMenu)
	{
		clearTimeout(hideTimeoutId);
		
		if(subMenu == activeMenu)
		{
			return;
		}
		
		if(activeMenu)
		{
			hideMenu();
		}
		
		if(expandAnim && expandAnim.isAnimated())
		{
			expandAnim.stop(true);
		}
		
		if(previousMenu == subMenu && collapseAnim && collapseAnim.isAnimated())
        {
            collapseAnim.stop();
        }
        else
		{
		    subMenu.firstChild.style.top = "-" + subMenu.firstChild.offsetHeight + "px";			
	    }
		
		subMenu.style.height = subMenu.firstChild.offsetHeight + "px";
		subMenu.style.width = subMenu.firstChild.offsetWidth + "px";
		
		subMenu.style.visibility = "visible";
		expandAnim = new Anim(subMenu.firstChild, {top: {to: 0}}, .5, YAHOO.util.Easing.easeOut);
		expandAnim.animate();
		
		activeMenu = subMenu;
		
	}
	
	
	
}();