Marquee = Class.create({

	initialize: function(wrapper, options) {
		
		this.wrapper = $(wrapper);
		this.items = this.wrapper.getElementsBySelector('a');
		this.options = Object.extend({duration: 4 * this.items.length}, options || {})
		
		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': 180 * this.items.length, 'height': this.height}),
			'class': 'slider'
		})
		this.slider.update(this.wrapper.innerHTML);
		this.wrapper.update(this.slider);
		this.wrapper.setStyle({overflow: 'hidden'});
		
	},
	
	start: function() {
		new Effect.Move(this.slider, {x: this.width - this.slider.getDimensions().width, y:0, duration: this.options.duration, transition: Effect.Transitions.linear});
		new Effect.Move(this.slider, {x: this.slider.getDimensions().width - this.width, y:0, duration: this.options.duration, transition: Effect.Transitions.linear, queue: 'end', afterFinish: this.start.bind(this)});
	}
	
})