Carousel = Class.create({
	initialize: function(wrapper, options) {
		
		this.options = Object.extend({duration: 2, delay: 10}, options || {})

		this.wrapper = $(wrapper);
		this.sections = this.wrapper.getElementsBySelector('.product');
		this.current = 0;
		
		this.width = this.wrapper.getDimensions().width;
		this.height = this.wrapper.getDimensions().height;

		this.slider = new Element('div', {
			style: 'width: #{width}px; height: #{height}px; position: relative; float: left;'.interpolate({'width': this.width * this.sections.length, 'height': this.height}),
			'class': 'slider'
		})
		this.slider.update(this.wrapper.innerHTML);
		this.wrapper.update(this.slider);
		this.wrapper.setStyle({overflow: 'hidden'})
		
	},
	
	start: function(delay) {
		this.timer = setInterval(this.next.bind(this), (delay || this.options.delay) * 1000);
	},
	
	stop: function() {
		clearInterval(this.timer);
	},
	
	show: function(section) {
		if(section < this.sections.length) {
			this.slider.morph('left: -' + (this.width * section) + 'px;', {
				transition: Effect.Transitions.sinoidal,
				duration: this.options.duration
			});
			this.current = section;
		}
	},
	
	previous: function() {
		if(this.current == 0)
			this.show(this.sections.length - 1);
		else
			this.show(this.current - 1);
	},
	
	next: function() {
		if(this.current == (this.sections.length - 1))
			this.show(0);
		else
			this.show(this.current + 1);
	}
	
	
	
})