var navigation = {
							
	inicialize: function(options){
		
		this.options = Object.extend({
			resizeDuration: 600,
			resizeTransition: Fx.Transitions.Cubic.easeInOut,
			container: document.body,
			opacity: 0.7,
			url: ''
		}, options || {});
		
		this.navigationHeight = parseInt($('navigation').style.height);
		
		if( $('menu_button') ) {
			
			$('menu_button').onclick = this.click.pass($('menu_button'), this);
			
		}	
			  
		this.fx = {
			// Comentat per que funcioni en explorer
			//resize:	$('navigation').effects({duration:800, wait:false, transition: Fx.Transitions.Cubic.easeInOut}),
		};


	},
	

	click: function (element) {
		
		if ( this.navigationHeight == 0 ) {
		
			this.showNavigation();
			
		}
		else if (this.navigationHeight > 0 ) {
		
			this.hideNavigation();
			
		}
		
		return false;
		
	},
	

	showNavigation: function () {
		//alert(parseInt($('navigation-container').offsetHeight));
		//alert( $('navigation-container').getStyle('height').toInt() );
		this.newHeight = parseInt($('navigation-container').offsetHeight);
		this.navigationHeight = this.newHeight;
		
		/*this.fx.resize.start({
			'height': this.newHeight
		});*/
		
		var morph = new Fx.Styles('navigation', {duration:800, wait:false, transition: Fx.Transitions.Cubic.easeInOut });
			morph.start({
				'height': this.newHeight
			});
		
		return false;
		
	},
	

	hideNavigation: function () {
		
		/*this.fx.resize.start({
			'height': 0
		});*/
		
		this.navigationHeight = 0;
		
		var morph = new Fx.Styles('navigation', {duration:800, wait:false, transition: Fx.Transitions.Cubic.easeInOut });
			morph.start({
				'height': 0
			});
		
		return false;
		
	}
		
};