var SlideList = Class.create({
	initialize: function(menu, options) {
 
		this.menu = $(menu), this.current = this.menu.select('li.current').first();
 
		this.menu.select('li').each(function(item){
			Event.observe(item, 'mouseover', function(){ this.moveBg(item); }.bind(this));
			Event.observe(item, 'mouseout', function(){ this.moveBg(this.current); }.bind(this));
			Event.observe(item, 'click', function(){ this.moveBg2(item); }.bind(this));
		}.bind(this));
 
		new Element.insert(this.menu, '<li class="background"></li>')
		this.back = this.menu.select('li.background').first();
		
		new Element.insert(this.menu, '<li class="under"></li>')
		this.under = this.menu.select('li.under').first();
		
		if(this.current) { this.setCurrent(this.current) };
	},
 
	setCurrent: function(el, effect){
		this.back.setStyle({left: (el.offsetLeft)+'px', width: (el.offsetWidth)+'px'});
		this.under.setStyle({left: (el.offsetLeft)+'px', width: (el.offsetWidth)+'px'});
		(effect) ? this.back.hide() : this.back.show();
		(effect) ? this.under.hide() : this.under.show();		
		this.current = el;
	},
 
 	moveBg: function(to) {
		if(!this.current) return;
 
		new Effect.Parallel([
		  new Effect.Move(this.back, { 
		    sync: true, 
		    transition: Effect.Transitions.SwingTo,
		    x: to.offsetLeft,
		    y: 0,
		    mode: 'absolute' 
		  }),
 
		  new Effect.Morph(this.back, { 
		    sync: true,
		    style: { 
		      width: to.getWidth()+'px' 
		    }
		  })
		])
	},
	
	moveBg2: function(to) {
		if(!this.current) return;
		
		if(!this.current) this.setCurrent(to, true);
		this.current = to;		
 
		new Effect.Parallel([
		  new Effect.Move(this.under, { 
		    sync: true, 
		    transition: Effect.Transitions.SwingTo,
		    x: to.offsetLeft,
		    y: -8,
		    mode: 'absolute' 
		  }),
 
		  new Effect.Morph(this.under, { 
		    sync: true,
		    style: { 
		      width: to.getWidth()+'px' 
		    }
		  })
		])
		
		
	}	
})