var nav = new Class({
	initialize: function(menu, options) {
		this.setOptions(this.getOptions(), options);
	
		this.menu = $(menu);
		this.mains = [];
		this.links = [];
		this.back = [];
		this.subs = [];
		this.current = 'null';
		this.firstOut = 'null';
		
		
		this.menu.getElements('li.main').each(function(item, index){
			if (!item.hasClass('lab')) {
				this.mains[index] = item;
				
				var link = item.getChildren('a');				
				this.links[index] = link;
				this.links[index].set('tween', {duration: '500'});
				
				var sub = item.getElements('ul');
				this.subs[index] = sub;
				this.subs[index].set('tween', {duration: '800'});

				this.back[index] = new Element('li').addClass('background').injectInside(this.menu);
				this.back[index].overEffect = new Fx.Morph(this.back[index], {duration: '800', transition: Fx.Transitions.Bounce.easeOut});
				this.back[index].outEffect = new Fx.Morph(this.back[index]);
								 
				this.back[index].setStyles({left: (item.offsetLeft + 1)+'px', width: '0px', top: (item.offsetTop + 5)+'px'});
				
				if (item.hasClass('current')) { this.setCurrent(item, index); }
				
				item.addEvent('mouseover', function(){ this.showBg(item, index); }.bind(this));
				item.addEvent('mouseout', function(){ this.hideBg(index); }.bind(this));
			}
						 
		}.bind(this));
		 
	 },

	 setCurrent: function(item, index){
		this.back[index].setStyles({width: (item.offsetWidth)+'px'});
		this.links[index].setStyles({color: '#FFFFFF'});
		this.subs[index].setStyles({visibility: 'visible'});
		this.current = index;
	 },

	 getOptions: function(){
		return {
			transition: Fx.Transitions.sineInOut,
			duration: 500, wait: false,
			onClick: Class.empty
		};
	 },

		showBg: function(item, index) {
			for (i=0; i<4; i++){
				if (this.back[i].getStyle('width')) { this.hideBg(i, true);	}
			}
		
				this.back[index].outEffect.cancel();
				this.back[index].overEffect.start({'width' : '100', 'color' : '#FFFFFF'});
				this.links[index].tween('color', '#FFFFFF');
				
				this.subs[index].fade('in');
				
				if (this.current != index) {
					this.firstOut = true;
				}
		},
		
		hideBg: function(index, force) {
			if (this.firstOut != 'null' || force) {
				this.back[index].overEffect.cancel();
				this.back[index].outEffect.start({'width' : 0});
				this.links[index].tween('color', '#000000');
				
				if (this.subs[index].getStyle('visibility') == 'visible') { this.subs[index].fade('out');  }
			}
		}
	});

	nav.implement(new Options);
