/**
*Horizontal Slide Menu
*
*@author: Zinj Guo <recoilfx@gmail.com>
*@version: 1.0
*@Copyright: 2008, MIT License  http://www.opensource.org/licenses/mit-license.php
*
*
*dependencies 	mootools <mootools.net> 	
*							Core, Class, Class.Extras, Array, String, Element, Element.Event, 
*							Element.Dimesnions, Fx.Base, Fx.CSS, Fx.StylesFx.Transitions
*				CNET's Global Framework 	<http://code.google.com/p/cnetjavascript/source/checkout>
*							element.position.js, element.dimensions.js
*																
*@example var myMenu = new hSlideMenu(element);
*			targetElement must have following structure. the root div tag *MUST* have a height dimension.
*			<div id="myhSlideMenu" style="height:200px">
*				<div>
*					<div ><!--Main Menu Container-->
*						<ul>
*							<li id="item1">Item 1 Title</li>	<!--Must have id attribute in li elements-->
*							<li id="item2">Item 2 Title</li>	<!--Must have id attribute in li elements-->
*							<li id="item3">Item 3 Title</li>	<!--Must have id attribute in li elements-->
*						</ul>
*					</div>
*					<div><!--Sub Menu Container-->
*						<ul id="item1_sub">		<!--Must have id attribute and the postfix of _sub, corresponds to Main Menu's Li IDs-->
*							<li>Sub Menu Item 1</li>
*							<li>Sub Menu Item 2</li>
*						</ul>
*						
*						<ul id="item2_sub">		<!--Must have id attribute and the postfix of _sub, corresponds to Main Menu's Li IDs-->
*							<li>Sub Menu Item 1/li>
*							<li>Sub Menu Item 2</li>
*						</ul>
*						<ul id="item3_sub">		<!--Must have id attribute and the postfix of _sub, corresponds to Main Menu's Li IDs-->
*							<li>Sub Menu Item 1</li>
*							<li>Sub Menu Item 2</li>
*							<li>Sub Menu Item 3</li>
*						</ul>
*					</div>
*				</div>
*			</div>
*/

var hSlideMenu = new Class({ 
	slideUp:function(subMenu){
		subMenu.effects({duration:100}).start({
			"opacity":[0, 1]
		})
		this.slideDirection="up";
		this.curSubMenu=subMenu;
		this.navBarSlideFx.start({"top": [this.navBarContainer.getStyle("top").toInt(), this.rollOverTop]});
	},
	
	slideDown: function(section){
		this.slideDirection="down";
		this.navBarSlideFx.start({"top": [this.navBarContainer.getStyle("top").toInt(), this.regularTop]});
	},
	
	initialize: function(srcObjArg)
	{
		
		//setting up global vars and objects
		//
		//
		objPointer=this;
		this.oldSubMenu = null;
		this.curSubMenu = null;
		
		
		$type(srcObjArg)=="string"?this.srcObj=$(srcObjArg):this.srcObj=srcObjArg; //srcObj is the main navigation bar element
		
		this.navBarContainer=this.srcObj.getFirst();  //the container that has both the main menu and submenus
		
		this.mainListContainer=this.navBarContainer.getFirst(); //Main Menu
		
		this.mainListItems = new Array();   //items in the Main Menu
		this.mainListItems=$$(this.mainListContainer.getElementsByTagName('li'));
		this.subListContainer=this.mainListContainer.getNext();  //element that contains all sub menus
		
		
		//animation for sliding
		this.navBarSlideFx = new Fx.Styles(this.navBarContainer, {duration:200, wait:false});  //navBarContainer's animation object
		this.slideDirection = "up";  //current state of the slide direction for menu
		this.navBarSlideFx.addEvent("onComplete", function(e){
			if(objPointer.slideDirection=="down"){
				objPointer.subLists.each(function(item){item.setStyle("visibility", "hidden")});
				objPointer.curSubMenu=null;
			}
		})
		
		//sets up the styles for lists
		$$("#"+this.srcObj.id+" li").setStyle("display", "inline");
		
		this.subLists = new Array();
		this.subLists = $$(this.subListContainer.childNodes);
		this.subLists.each(function(item){
			item.setStyles({position:"absolute", visibility:"hidden", "float":"left", "margin-top":"0px", "margin-bottom":"0px"});
		})
		
		
		//set up styles for containers
		this.navBarContainer.setStyle("position", "relative");
		this.navBarContainer.setStyle("top", this.srcObj.getCoordinates().height-this.mainListContainer.getCoordinates().height+"px");
		/*
		this.mainListContainer.getFirst().setStyles({
			"margin-top": "0px",
			"margin-bottom": "0px"
		});*/
		this.srcObj.setStyle("overflow", "hidden");
		
		
		
			
		this.regularTop = this.navBarContainer.getStyle("top").toInt();
		this.rollOverTop //will define later durng mouseOver Event;
		
		//events
		//
		//
		this.mainListItems.each(function(item){
			item.subMenu=$(item.id+"_sub");
			item.addEvent("mouseover", function(e){
				if (!item.subMenu) {
					if(objPointer.curSubMenu){
						objPointer.curSubMenu.effects({duration:100}).start({
							"opacity":[1,0]
						});
						objPointer.curSubMenu=null;
					}
					return;
				}
				
				objPointer.subListContainer.setStyle("margin-left","0px");
				objPointer.rollOverTop=objPointer.regularTop - item.subMenu.getComputedSize({styles:["padding", "border", "margin"]}).totalHeight;
				subMenuWidth=item.subMenu.getComputedSize().totalWidth;
				navBarContainerWidth=objPointer.navBarContainer.getCoordinates().width;
				
				itemLeftPosition=item.subMenu.setPosition({
					relativeTo: item,
					position:"center",
					returnPos:true
				}).left.toInt();
				
				marginOffset	=	navBarContainerWidth-(itemLeftPosition+subMenuWidth);
				
				//makes sure that the margin is not pushing submenu out of the container
				if (marginOffset < 0) {
					item.subMenu.setStyle("left", itemLeftPosition+marginOffset);
				}
				else if(itemLeftPosition<0) {
					item.subMenu.setStyle("left", 0);
				} else{
					item.subMenu.setStyle("left", itemLeftPosition);
				}
				
				if(objPointer.curSubMenu){
					if(objPointer.curSubMenu==item.subMenu){
						return;
					}
					objPointer.oldSubMenu=objPointer.curSubMenu;
					objPointer.oldSubMenu.effects({duration:100}).start({
						"opacity": [1, 0]
					}).chain(function(e){
						objPointer.curSubMenu=item.subMenu;
						objPointer.curSubMenu.effects({duration:100}).start({"opacity":[0,1]});
					})
				}else{
					objPointer.slideUp(this.subMenu);
				}						
			})
		});
						
		this.navBarContainer.mouseOut = function(){
			objPointer.slideDown(this.subMenu);
		}
		
		this.navBarContainer.addEvent("mouseleave", this.navBarContainer.mouseOut);
	}
})