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));
		}.bind(this));
 
		new Element.insert(this.menu, '<li style="display:none;" class="background"><div class="left"></div></li>')
		this.back = this.menu.select('li.background').first();
		if(this.current) { this.setCurrent(this.current) };
	},
 
	setCurrent: function(el, effect){
		this.back.setStyle({left: (el.offsetLeft)+'px', width: (el.offsetWidth)+'px'});
		(effect) ? this.back.hide() : this.back.show();
		this.current = el;
	},
 
	clickItem: function(event, item) {
		if(!this.current) this.setCurrent(item, true);
		this.current = item;
		this.options.onClick(new Event(event), item);
	},
 
	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' 
		    }
		  })
		])
	}
})
 
Event.observe(window, 'load', function() {
  new SlideList('primary');
});