var QuoteRotator = new Class({
	_quotes: [],
	_active: 0,
	
	initialize: function(container) {
		this._quotes = $$("#"+container+" .content");
		this.dots = new Element('div', {'id':"quoteDots"}).inject($("readall"), 'before');
		this._quotes.each(function(el, idx) {
			new Element('img', {'id':"dot-"+idx, 'src':"images/dot_off.png"}).inject(this.dots);
		}, this);
		var nextQuote = this.nextQuote.bind(this);		
		this._quotes[0].fade('show');
		$("dot-0").setProperty('src',"images/dot_on.png");
		this.nextQuote.delay(3000, this);
	},
		
	showQuote: function() {
		if((this._active+1) == this._quotes.length) this._active = 0;
		else this._active++;
		this._quotes[this._active].set('tween', {'duration': 1000, 'onComplete': function(){return}});
		this._quotes[this._active].setStyles({'visibility':'','opacity': 0});
		this._quotes[this._active].fade('in');
		$("dot-"+this._active).setProperty('src',"images/dot_on.png");
		this.nextQuote.delay(3000, this);
	},
	
	nextQuote: function() {
		var showQuote = this.showQuote.bind(this);
		this._quotes[this._active].set('tween', {'duration': 1000, 'onComplete': showQuote});
		this._quotes[this._active].fade('out');
		$("dot-"+this._active).setProperty('src',"images/dot_off.png");
	}
});
window.addEvent('load', function() {
	new QuoteRotator("wwli-quotes");
});