var Featured = new Class({
	
	//implements
	Implements: [Options, Events],

	options: {
		showDuration: 7000,
		currentIndex: 0,
		tocLeft: 360,
		tocRight: 40,
		tocMargin: 2,
		tocWidth: 18,
		tocActive: 'toc-active'
	},
	
	initialize: function(container, elements, options) {
		this.setOptions(options);
		
		this.container = $(container);
		this.elements = $$(elements);
		this.currentIndex = 0;
		this.interval = '';
		this.toc = [];
		
		this.elements.each(function(el,i){
			this.toc.push(new Element('a',{
				text: i+1,
				href: '#',
				'class': 'toc' + (i == 0 ? ' ' + this.options.tocActive : ''),
				events: {
					click: function(e) {
						if(e) e.stop();
						this.stop();
						this.show(i);
					}.bind(this)
				}
			}).inject(this.container));

			this.toc.each(function(el,i){
				el.setStyle('right', (this.options.tocRight + (this.options.tocWidth + this.options.tocMargin) * (this.elements.length - i - 1))+'px');
			},this);
		},this);
		
		this.container.addEvents({
			mouseenter: function() { this.stop();  }.bind(this),
			mouseleave: function() { this.start(); }.bind(this)
		});
	},
	
	show: function(to) {
		this.elements[this.currentIndex].set('opacity',0);
		this.toc[this.currentIndex].removeClass(this.options.tocActive);
		this.elements[this.currentIndex = ($defined(to) ? to : (this.currentIndex < this.elements.length - 1 ? this.currentIndex + 1 : 0))].set('opacity',1);
		this.toc[this.currentIndex].addClass(this.options.tocActive);
	},
	
	start: function() {
		this.interval = this.show.bind(this).periodical(this.options.showDuration);
	},

	stop: function() {
		$clear(this.interval);
	}

});

/* usage */
window.addEvent('domready',function() {
	if($('featured_container'))
	{
		var featured = new Featured('featured_container','#featured_container > div');
		featured.start();	
	}
});