AutoPlay = Class.create(ContentCarousel, {
	
	initialize: function($super, domElementNamespace, perWindow) {
		/* business as usual */
		$super(domElementNamespace, perWindow, this._fadeTransition);
		
		/* override some defaults */
		this._behaviourOptions.cyclicalWindowMovement = true;
		this._behaviourOptions.transitionEffectOnClick = false; 

		this._setIndicator();
		this._autoplayTimer = null;
		
		/* let's be safe and wait */
		document.observe('dom:loaded', function() {
			this._items().each(function(i) {
				i.show();
			});
			this._play();
		}.bind(this));
	},
	
	next: function($super) {
		this._resetTimer(this._isPlaying() && this._isClickEvent(arguments[1]));
		$super(arguments[1]);
		this._setIndicator();
	},
	
	previous: function($super) {
		this._resetTimer(this._isPlaying() && this._isClickEvent(arguments[1]));
		$super(arguments[1]);
		this._setIndicator();		
	},
	
	pause: function() {
		if(this._autoplayTimer == null) { /* we're paused, let's play */
			this._play();
			this.next();
			this._pauseControlElement().pause(false);
		}
		else { /* we're playing, let's pause */
			this._autoplayTimer.stop();
			this._autoplayTimer = null;
			this._pauseControlElement().pause(true);
		}
	},
	
	_play: function() {
		if(this._items().size() > 1) this._autoplayTimer = new PeriodicalExecuter(this.next.bind(this), 8);
	},
	
	_resetTimer: function(conditional) {
		if(conditional) {
			this._autoplayTimer.stop();
			this._play();
		}
	},
	
	_initEventListeners: function($super) {
		this._pauseControlElement().observe('click', this.pause.bind(this));
		this._pauseControlElement().pause = function(paused) {
			paused ? $(this).addClassName('paused') : $(this).removeClassName('paused');
		};
		$super();
	},
	
	_prepDomElements: function($super) {
		$super();
		if(!this._needControls()) {
			this._pauseControlElement().hide();
		}
	},
	
	_pauseControlElement: function() {
		return this._lazyLoad('__pauseControlElement', function() {
			return $(this._elementName('pause'));
		});
	},
	
	_positionIndicatorElement: function() {
		return this._lazyLoad('__positionIndicatorElement', function() {
			return $(this._elementName('item-number'));
		});
	},
	
	_isPlaying: function() {
		return this._autoplayTimer != null
	},
	
	_fadeTransition: function(carousel, leftValue) {
		
		fadeElement = $('autoplay-overlay')
		
		function next(direction, opacity, after) {
			setTimeout( function() {
										fade(direction,opacity,after);
									},
									50 );
		}

		function fade(direction,opacity,after) {
			
			if( (direction == 1 && opacity <= 1) ||
					(direction == -1 && opacity >= 0 )) {
					
						fadeElement.setOpacity(opacity);
						next(direction, opacity + (direction * .05), after)
						
			}
			else {
				after();
			}
			
		}
		
		fadeElement.show();
		dim = carousel._itemContainer().getDimensions();
		fadeElement.setStyle({ height: dim.height.toString() + 'px', width: dim.width.toString() + 'px' });
		
		fade(1, 0, function() {
			carousel._itemContainer().setStyle({left: leftValue.toString() + 'px'});
			carousel._setIndicator();
			fade(-1, 1, function() { fadeElement.hide()});
		})
		
			
	},
	
 	_setIndicator: function() {
		if(this._items().size() == 1) return;
		text = "";
		for(i = 0; i < this._items().size(); i++) {
			if(i == this._currentWindow()) text += "<span style='color:#1779C4;font-weight:bold;'>&bull;</span>";
			else text += "&bull;";
		}
		this._positionIndicatorElement().update(text)
	}
	
});