var Slider = new Class.create
({
	num: 0,
	width: 0,
	current: 0,
	inner: null,
	duration: .5,
	
	parse: function()
	{
		this.num = $$('.area').length/2;
		
		if (this.num)
		{
			this.width = $$('.area').shift().getWidth();
			this.inner = $('inner');

			$$('.button').each(function(el) { el.observe('click', this.move.bind(this)); },this);
		}
	},
	
	move: function(event)
	{
		var direction = event.target.hasClassName("left") ? -1 : 1;

		((direction < 0 && this.current-direction > 0) || (direction > 0 && this.current+direction < this.num)) && (this.current += direction);
		
		Effect.Queues.get('myscope').each(function(effect) { effect.cancel(); });

		new Effect.Morph(this.inner, { style: "left: -"+(this.current*this.width*2)+'px', duration: this.duration, queue: 'front', transition: Effect.Transitions.sinoidal });
		
		if (this.current > 0) { $$('.button.left').shift().addClassName('hover'); } else { $$('.button.left').shift().removeClassName('hover'); }
		if (this.current < this.num-1) { $$('.button.right').shift().addClassName('hover'); } else { $$('.button.right').shift().removeClassName('hover'); }
	}

});

var slider = new Slider();
document.observe('dom:loaded', function() { slider.parse(); });