var Slideshow = Class.create({
	initialize: function(container) {
		this.container = $(container) || $("featured");
		this.images    = this.container.select("#featured-images img");
		this.togglers  = this.container.select("#featured-description li");
		this.count     = this.images.length;
		this.active    = 0;
		this.setup();
	},
	setup: function() {
		this.togglers.each(function(el, i) {
			el.observe("mouseover", this.show.bindAsEventListener(this, i)) 
		}.bind(this));

		this.play = new PeriodicalExecuter(function(pe) {
			this.deactivate(this.active);
			this.active += 1;
			if (this.active >= this.count) this.active = 0;
			this.activate(this.active);
		}.bind(this), 4);
	},
	show: function(event, sel) {
		for (var i = 0; i < this.count; i++) {
			this.deactivate(i);
		}
		this.activate(sel);
		event.stop();
	},
	deactivate: function(pos) {
		this.togglers[pos].removeClassName("active");
		this.images[pos].removeClassName("active");
	},
	activate: function(pos) {
		this.togglers[pos].addClassName("active");
		this.images[pos].addClassName("active");
		this.active = pos;
	}
});

/* ---------------------------------------------------------------- */

document.observe("dom:loaded", function(){
	new Slideshow("featured");
});