window.addEvent('domready', function(){
  animateMenus.init();
});

var animateMenus = {
	// the menu items highlight instantly, then the sub menus fade in
	init: function(){
		// these are the elements we reuse for every menu. We set contents and move them around later
		// this hides all menus if you mouse over it
		this.backstop = new Element('div',{'id':'backstop','events':{'mouseover':this.destroyTopMenu.bind(animateMenus)}}).injectInside($('frame'));
		// this keeps the top menu item highlighted when you mouse over it's sub menu
		this.topLI = new Element('div',{'id':'topLI'}).injectInside($('frame'));
		this.topLI.a = new Element('a').injectInside(this.topLI);
		// this is it's sub menu
		this.topUL = new Element('div',{'id':'topUL'}).injectInside($('frame'));
		this.topUL.effect = new Fx.Morph(this.topUL, {duration: '500ms', transition: Fx.Transitions.Sine.easeIn});
		// this keeps the sub menu item highlighted when you mouse over it's sub menu
		this.subLI = new Element('div',{'id':'subLI'}).injectInside($('frame'));
		this.subLI.a = new Element('a').injectInside(this.subLI);
		// this is it's sub menu
		this.subUL = new Element('div',{'id':'subUL'}).injectInside($('frame'));
		this.subUL.effect = new Fx.Morph(this.subUL, {duration: '500ms', transition: Fx.Transitions.Sine.easeIn});
		
		// this finds the menus div tag, finds it's UL tag, then reads the top level LI tags
		this.menus = $('menus');
		this.menus.ul = this.menus.getFirst('ul');
		this.menus.ul.li = this.menus.ul.getChildren('li');
		
		// loop through the li tags we found
		this.menus.ul.li.each(function(li,i){
			// if it has a sub menu
			if(li.ul=li.getFirst('ul')){
				// get it's coordinates
				li.cords = li.getCoordinates($('frame'));
				// copy it's anchor tag
				li.a = li.getFirst('a').clone();
				// set it to show it's menu when moused over
				li.onmouseover = this.showTopMenu.pass(i,animateMenus);
			}
		}, animateMenus);
	},
	
	showTopMenu: function(i){
		// clear out the topUL div, then set it's contents to the corrent menu (no ul tags)
		this.topUL.effect.cancel();
		this.topUL.empty();
		this.topUL.set('html',"<ul>"+this.menus.ul.li[i].ul.innerHTML+"</ul>");
		// find all of the first level child LI tags for this menu, then loop through them
		this.menus.ul.li[i].uls =  this.topUL.getFirst('ul');
		this.menus.ul.li[i].ul.li = this.menus.ul.li[i].uls.getChildren('li');
		this.menus.ul.li[i].ul.li.each(function(li,j){
			// if they have a submenu
			if(li.ul=li.getFirst('ul')){
				// change it's class so it shows it has a sub menu
				li.set('class','sub');
				// copy it's anchor tag
				li.a = li.getFirst('a').clone();
				// set it to show it's menu when moused over
				li.onmouseover = this.showSubMenu.pass([i,j],animateMenus);
			}else{
				// if there is no sub menu, make it hide any other submenus
				li.onmouseover = this.destroySubMenu.bind(animateMenus);
			}
		}, animateMenus);
		// make sure the topLI is in the correct place
		this.topLI.setStyle('left',this.menus.ul.li[i].cords.left+'px');
		// put the anchor tag inplace
		this.topLI.a.setProperties({'href':this.menus.ul.li[i].a.href,'html':this.menus.ul.li[i].a.innerHTML});
		//show the backstop and topLI
		this.topLI.style.display = this.backstop.style.display = 'block';
		// set the topUL menu to display, but be transparent, so we can fade it in.
		this.topUL.setStyles({'opacity':0,'display':'block','left':this.menus.ul.li[i].cords.left+'px'});
		// set up the fade in effect for the topUL menu.
		// do the effect (fade in over 1 second)
		this.topUL.effect.start({opacity: '1'});
	},
	
	destroyTopMenu: function(){
		this.backstop.style.display = this.topLI.style.display = this.topUL.style.display = 'none';
		//this.topLI.a.dispose();
		this.destroySubMenu();
	},
	
	showSubMenu: function(i,j){
		this.subUL.effect.cancel();
		this.destroySubMenu();
		this.subUL.empty();
		//this.subLI.empty();
		// get it's coordinates
		this.menus.ul.li[i].ul.li[j].cords = this.menus.ul.li[i].ul.li[j].getCoordinates($('frame'));
				
		this.subUL.set('html',"<ul>"+this.menus.ul.li[i].ul.li[j].ul.innerHTML+"</ul>");
		
		this.subLI.setStyles({'left':this.menus.ul.li[i].ul.li[j].cords.left+'px','top':+this.menus.ul.li[i].ul.li[j].cords.top+'px'});
		//this.subLI.a = this.menus.ul.li[i].ul.li[j].a.injectInside(this.subLI);
		this.subLI.a.setProperties({'href':this.menus.ul.li[i].ul.li[j].a.href,'html':this.menus.ul.li[i].ul.li[j].a.innerHTML});
		this.subLI.style.display = 'block';
		
		this.subUL.setStyles({'opacity':0,'display':'block','left':this.menus.ul.li[i].ul.li[j].cords.left+this.menus.ul.li[i].ul.li[j].cords.width-1+'px','top':+this.menus.ul.li[i].ul.li[j].cords.top+'px'});
		this.subUL.effect.start({opacity: '1'});
		
	},
	
	destroySubMenu: function(){
		this.subLI.style.display = this.subUL.style.display = 'none';
		//if(this.subLI.a) this.subLI.a.dispose();
	}
};