var Carousel = new Class({
	
	duration: 1000,
	delay: 5000,
						   
	initialize: function(){
		this.subfeatItems = $('content').getElements('ul.subfeatures li')
		
		this.numberOfItems = this.subfeatItems.length
		this.itemWidth = this.subfeatItems[0].getStyle('width').toInt()
		this.itemHeight = this.subfeatItems[0].getStyle('height').toInt()
		
		$('content').getElement('.subfeatures').setStyles({
			'overflow': 'hidden',
			'position': 'relative',
			'height': this.itemHeight
		})
		
		this.subfeatItems.each(function(el){
			el.setStyles({
				'position': 'absolute',
				'left': 0,
				'top': 0
			})
			el.set('tween',{
				'duration': this.duration,
				'onComplete': this.handleCompleteAnim.bind(this,el)
			})
		},this)
		
		
		this.placeItems()
		//this.startCarousel.delay(this.delay,this)
		
		$('content').getElement('.subfeatures').setStyle('visibility','visible')
	},
	
	startCarousel: function(){
		this.timer = this.animate.periodical(this.delay,this)
	},
	
	stopCarousel: function(){
		$clear(this.timer)
	},
	
	animate: function(){
		this.subfeatItems.each(function(el){
			var x = el.getStyle('left').toInt()
			el.tween('left', x - this.itemWidth)
		},this)

	},
	
	handleCompleteAnim: function(el){
		var x = el.getStyle('left').toInt()
		var minX = -this.itemWidth
		
		if(x <= minX){
			el.setStyle('left', x + this.itemWidth * this.numberOfItems)
		}
	},
	
	placeItems: function(){
		this.subfeatItems.each(function(el,i){
			var el = this.subfeatItems[i]
			el.setStyle('left', i * el.getStyle('width').toInt())
		}, this)
	}
	
})





var Carousel2 = new Class({

	Implements: [Options],

	initialize: function(container, options){
		
		this.setOptions(options);
		this.numberOfItems = this.options.slides.length
		
		this.itemWidth = this.options.slides[0].getStyle('width').toInt()
		this.itemHeight = this.options.slides[0].getStyle('height').toInt()
		
		this.container = container
		
		this.container.setStyles({
			'overflow': 'hidden',
			'position': 'relative',
			'height': this.itemHeight
		})
		
		this.options.slides.each(function(el){
			el.setStyles({
				'position': 'absolute',
				'left': 0,
				'top': 0
			})
			el.set('tween',{
				'duration': this.options.crossFadeOptions.duration,
				'onComplete': this.handleCompleteAnim.bind(this,el)
			})
		},this)
		
		
		this.placeItems()
		
		this.container.setStyle('visibility','visible')
	},
	
	
	forward: function(){
		this.options.slides.each(function(el){
			var x = el.getStyle('left').toInt()
			el.tween('left', x - this.itemWidth)
		},this)

	},
	
	
	handleCompleteAnim: function(el){
		var x = el.getStyle('left').toInt()
		var minX = -this.itemWidth
		
		if(x <= minX){
			el.setStyle('left', x + this.itemWidth * this.numberOfItems)
		}
	},
	
	
	placeItems: function(){
		this.options.slides.each(function(el,i){
			var el = this.options.slides[i]
			el.setStyle('left', i * el.getStyle('width').toInt())
		}, this)
	}
	
})