var Carousel = function(e, opts) {
	opts = $H(opts)
	this.padding = opts.get('padding');
	this.width = opts.get('width');
	this.panels = opts.get('panels');
	this.current = 0;
	this.selected = 0
	this.current_panel = 0
	this.offset = 0
	this.carousel_interval;
	this.e = e
	this.carousel_element = $(e).down('ul');
	this.dots = opts.get('control')=='dots'
	this.start = function() {
		var self = this;
		this.carousel_interval = setInterval(function() { self.move(1); }, 6500);
	}

	this.move = function(by) {
				
		if(this.dots) {
			try { Effect.Appear('dot_'+this.e+'_'+this.current_panel) } catch(err) {}
			this.current_panel = (this.current_panel + by) % this.panels			
			Effect.Fade('dot_'+this.e+'_'+this.current_panel);
		} else {
			this.current_panel = (this.current_panel + by) % this.panels
		}
		this.selected += by
		
		while(this.selected > ((this.panels+this.offset)-2)) {
			this.current = this.current + this.width
			$(this.carousel_element).style.left = this.current+"px"
			Element.insert(this.carousel_element, {bottom: Element.remove(this.carousel_element.childElements().first())})
			this.offset++;
		}
		
		while((this.selected-this.offset) < 2) {
			this.current = this.current - this.width
			$(this.carousel_element).style.left = this.current+"px";	
			Element.insert(this.carousel_element, {top: Element.remove(this.carousel_element.childElements().last())})
			this.offset--;
		}
		
		this.current = (this.selected-this.offset) * (-this.width);
		
		new Effect.Move(this.carousel_element, { x: this.current, y: 0, mode: 'absolute'});	
	}
	
	
	this.moveTo = function(position) {
		this.move(position - this.current_panel)
		clearInterval(this.carousel_interval)
	}
	
	if(this.dots) {
		Element.insert($(e), {after: '<div class="dot_holder"><ul id="dots-'+this.e+'" class="dots"></ul></div>'})
		
		for(i=0; i < this.panels; i++) {
			Element.insert('dots-'+e, {bottom: '<li><img src="/static_images/dot/off.jpg" width="7" height="7" id="dot_'+this.e+'_'+i+'" alt="Go to pane '+(i+1)+'" /></li>'})
			dot = $('dot_'+this.e+'_'+i)
			dot.carousel = this
			dot.i = i
			dot.onclick = function() { this.carousel.moveTo(this.i); }
		}
		
		$('dots-'+e).style.width = (this.panels * 17) + 'px'
		$('dot_'+this.e+'_'+this.current_panel).hide()
	} else {
		//Element.insert($(e), {bottom†: '<a id="arrow-lft-'+this.e+'" class="arrow arrow-lft"></a><a id="arrow-rgt-'+this.e+'" class="arrow arrow-rgt"></a>'})
		//$('arrow-lft-'+this.e).onclick = function() { alert('left'); }
		//$('arrow-rgt-'+this.e).onclick = function() { alert('right'); }
		
	}
	
	if(opts.get('auto'))
		this.start();
};