/**
Script: menuTwiste.js
	Menutwister - A javascript function for Mootools to animate a menu.

License:
	MIT-style license.

Copyright:
	Copyright (c) 2009 [ReZon](http://www.skunkfu.com).

Dependencies:
	Mootools 1.2 Core: Class.Extras, Element.Event, Fx.Morph, Selectors.
*/

function menuTwister(){
			//on vertical scroll the menu container repositions at the top of the viewport, after a given delay 
			var elem = $('mainMenu').getElement('ul');
			var scrollMenu = new Fx.Morph(elem, {duration: 400, transition: Fx.Transitions.Expo.easeOut, link: 'cancel'});
			var delayId = null;
			var offset = elem.getStyle('margin-top').toInt();
			var ssVertical = new ScrollSpy({mode: 'vertical', container: window,
				onTick: function(position,state,enters) {
					delayId = $clear(delayId);
					scrollMenu.cancel();
					delayId = scrollMenu.start.delay(1000, scrollMenu, {'margin-top': position.y + offset});
				},
				onLeave: function(position,leaves) {
					scrollMenu.start({'margin-top': offset});
				},
				onEnter: function(position,enters) {
				  scrollMenu.start({'margin-top': position.y + offset});
				}
			});
			
			//button animations inside the menu container 
			var menuArea = $('mainMenu');
			var allContainer = $$('.menuContainer');
			var allOri = $$('.buttonOri');
			var allSub = $$('.buttonSub');
			
			//the active button is handeled on every page load
			allContainer.each(function(el,i){
				if(allOri[i].get('id') == 'buttonActive'){
					$('mC'+(i+1)).morph({'height': 60});
					allSub[i].setStyles({
						'width' : 168,
						'height' : 62,
						'opacity' : 1,
						'left' : 0,
						'top': 0,
						'z-index': 888
					});
					allOri[i].setStyles({
						'width' : 100,
						'height' : 35,
						'opacity' : 1,
						'left' : 30,
						'top': 30,
						'z-index': 889
					});
				}
			});

			menuArea.addEvents({
				//highlight all buttons, when entering the menu area
				'mouseenter': function(){
					allContainer.each(function(el,i){
						allOri[i].morph({'opacity': 1});
					});
				},
				//partialy blend out all buttons, but the active one, when laving the menu area
				'mouseleave': function(){
					allContainer.each(function(el,i){
						if(allOri[i].get('id') != 'buttonActive'){
							allOri[i].morph({'opacity': 0.7});
						}
					});
				}
			});
			allContainer.each(function(el,i){
				var fxOri = new Fx.Morph(allOri[i]);
				var fxSub = new Fx.Morph(allSub[i]);
				
				el.addEvents({
					//entering this button area, fades the original image out and the substitute image in 
					'mouseenter': function(){
						fxOri.clearChain();
						fxSub.clearChain();
						fxOri.setOptions({duration: 100, transition: Fx.Transitions.Expo.easeInOut, link: 'cancel'});
						fxSub.setOptions({duration: 1000, transition: Fx.Transitions.Elastic.easeOut, link: 'cancel'});
						
						fxOri.start({
							'width' : 100,
							'height' : 0,
							'left' : 62,
							'top' : 30
						});
						fxSub.start({
							'width' : 168,
							'height' : 62,
							'opacity' : 1,
							'left' : 0,
							'top': 0
						});						
					},
					//leaving this button area, fades the substitute image out and the original in
					'mouseleave': function(){
						fxOri.clearChain();
						fxSub.clearChain();
						fxOri.setOptions({duration: 400, transition: Fx.Transitions.Expo.easeOut, link: 'cancel'});
						fxSub.setOptions({duration: 600, transition: Fx.Transitions.Expo.easeInOut, link: 'cancel'});
						
						fxSub.start({
							'width' : 100,
							'height' : 0,
							'opacity' : 0,
							'left' : 62,
							'top': 50
						})
						fxOri.start({
									'width' : 140,
									'height' : 52,
									'left' : 28,
									'top' : 10
						}).chain(function(){
								fxOri.setOptions({duration: 4600, transition: Fx.Transitions.Elastic.easeOut, link: 'cancel'});
								fxOri.start({
									'width' : 168,
									'height' : 62,
									'left' : 0,
									'top' : 0
								});
						});				
					}
				});
				//remove all events for the active button, so no effects on enter or leave
				if(allOri[i].get('id') == 'buttonActive'){
					el.removeEvents();
				}				
			});
}