/*Menu Folding */

var MenuFolding = new Class({
	Implements		: [ Options ],
	
	options			: {
		delay : 1000,
		subMenuClass: null
	},
	
	menu			: null,
	delayClose		: 500,
	triggers		: null,
	folders			: null,
	
	menuInitialWidth: 0,
	
	initialize		: function( menuHolder, options)  {
		this.setOptions(options);
		this.menu			= menuHolder;
		//~ this.submenuClass	= this.options.subMenuClass;
		this.folders		= this.menu.getElements('ul'+ this.options.subMenuClass);
		this.delayClose = Math.round(this.options.delay/2);
		this.triggers = [];
		
		this.menuInitialWidth = this.menu.getSize().x -10-4;
		
		//~ new Element('li', {html: 'mWidth:'+this.menuInitialWidth+'<br />hWidth: '+$('tda-headers').getCoordinates().width}).inject(this.menu);
		
		this.folders.each( this.initMenuFolding.bind(this) );
		if( this.triggers.length > 0 )
			this.triggers.each( this.initTriggersEvents.bind(this) );
		
	},
	
	initMenuFolding	: function(e, i) {
		//~ set isOpen to know if folder is open or not
		e.store('isOpen', false);
		//~ store the normal height of elements
		e.store('displayHeight', e.getSize().y);
		var h = Math.max(150, e.getCoordinates().height);
		//~ hide subMenu
		e.setStyles({
		
			position:'absolute',
			'z-index': 100000+i,
			width: '100%',
			opacity: 0,
			padding: 10,
			margin : 0,
			height : h+'px',
			top:	(e.getParent('li').getCoordinates( $('tda-headers') ).top - h/2)+'px',
			border : '1px solid #D5D5D5',
			//~ borderWidth: '0 0 0 1px',
			left: (this.menu.getSize().x)+'px', 
			background : '#FFF'
			//~ background : (Browser.Engine.name=='trident') ? '#FFF' : 'rgba(255,255,255, .9)'
		});
		
		//~ if(Browser.Engine.name != 'trident') {
			e.setStyles( {
				'-o-box-shadow': '1px 1px 2px #D5D5D5',
				'-webkit-box-shadow': '1px 1px 2px #D5D5D5',
				'-moz-box-shadow': '1px 1px 2px #D5D5D5',
				'box-shadow': '1px 1px 2px #D5D5D5'
			} );
		//~ }
		
		//~ get the trigger
		this.triggers.push(e.getPrevious('a'));
		
		//~ if(e.hasClass('openOnStart')) {
			//~ this.onMouseOver(null, e.getPrevious('a'))
		//~ }
	},
	
	initTriggersEvents	: function(e, i) {
		var that = this;
		e.getParent().addEvents( {
			mouseenter : function(ev) { that.onMouseOver(ev,e) },
			mouseleave : function(ev) { that.onMouseOut(ev, e) }
		})
		/*e.getParent().addEvents( {
			mouseenter	: function(ev) { that.onMouseOver(that, e)} ,
			//~ mouseenter	: this.onMouseOver.bindWithEvent(this, e),
			mouseleave	: function(ev) { that.onMouseOut(that, e)} ,
			//~ mouseleave	: this.onMouseOut.bindWithEvent(this, e)
		} );
		//e.addEvent('click', this.onMouseClick.bindWithEvent(this, e));
		e.setStyle('cursor', 'default');*/
		
		e.setStyles({
			position: 'relative',
			width: this.menuInitialWidth+'px',
			background: '#FFF',
			padding: '2px',
			color: '#000',
			border: '1px solid #E7E7E7',
			borderWidth : '0'
		})
		
		//~ if(Browser.Engine.name != 'trident') {
			e.setStyles({
				'-o-border-radius': '4px 0 0 4px',
				'-webkit-border-radius': '4px 0 0 4px',
				'-moz-border-radius': '4px 0 0 4px',
				'border-radius': '4px 0 0 4px'
			})
		//~ }
		
		
	},
	
	//~ onMouseOver	: function(e) {
	onMouseOver	: function(e, el) {
		if(e) e.stop();
		//~ var el = e.target;
		//~ el.morph({'padding-left': '10px'});		
		var sub = el.getNext('ul'+ this.options.subMenuClass);
		
		if(!sub.retrieve('isOpen')) {		
			el.morph({
				padding: '8px 0 8px 8px',
				color: '#FFF',
				backgroundColor: '#C00',
				width: (this.menuInitialWidth-8-2)+'px',
				//width: (this.menuInitialWidth - 14 - 3)+'px',
				borderWidth: '1px 0 1px 1px'
			});
			
			sub.store('isOpen', true);
			this.doTransitions.delay(this.options.delay, this);
		}
	},
		
	onMouseOut	: function(e, el) {
	//~ onMouseOut	: function(e) {
		if(e) e.stop();
		//~ var el = e.target;
		//~ el.morph({'padding-left': '2px'});
		
		var sub = el.getNext('ul'+ this.options.subMenuClass);
		if(sub.retrieve('isOpen')) {
			el.morph({
				padding: '2px',
				color: '#000',
				backgroundColor: '#FFF',
				width: (this.menuInitialWidth)+'px',
				borderWidth: 0
			});			
			sub.store('isOpen', false);
			this.doTransitions.delay(this.delayClose, this);
		}
	},
	
	onMouseClick	: function(e, el) {
		if(e) e.stop();
		var sub = el.getNext('ul'+ this.options.subMenuClass);
		//~ sub.store('isOpen', false);
		sub.store('isOpen', !sub.retrieve('isOpen') );
		this.doTransitions();
	},
	
	doTransitions	: function() {
		var that = this;
		this.folders.each(function(e, i) {
			var isOpen = e.retrieve('isOpen');
			var m = new Fx.Morph(e, {duration: 'short'});
			//~ var m = new Fx.Morph(e, {duration: 'long'});
			//~ m.start({ height: (isOpen ? e.retrieve('displayHeight')+'px' : 0), opacity : (isOpen?1:0) });
			m.start({ opacity : isOpen ? 1 : 0 });
			
			
			
		});
	}
	
});

window.addEvent('domready', function() {
	new MenuFolding($('tda-main-menu'),{ subMenuClass: '.tda-sub-menu', delay: 500 });
} );