// JavaScript Document
var Feature = new Class({

	interval: 5000,
	fadetime: 1200,
	autoStart: true,
	current: 0,
	zindex: 5,

	initialize: function(container,options){
		if(options) for(var o in options) this[o]=options[o];
		this.links = container.getChildren()[0].getChildren();
		this.feats = container.getChildren()[1].getChildren();
		
		this.feats.setStyle('opacity',0);
		this.feats[this.current].setStyle('opacity',1);
		this.links[this.current].addClass('active');
		this.timer = null;
		this.links.each(function(el,index) {
			el.addEvent('click',function() {
				this.changeFeat(index);
			}.bind(this));
		}.bind(this));
		
		if(this.autoStart) {
			this.timer = this.next.periodical(this.interval,this,[false]);
			container.addEvent('mouseenter',function() {
				$clear(this.timer);										 
			}.bind(this));
			container.addEvent('mouseleave',function() {
				this.timer = this.next.periodical(this.interval,this,[false]);									 
			}.bind(this));
		}
	},
	
	changeFeat: function(index) {
		this.feats[this.current].set('tween',{duration:this.fadetime}).tween('opacity',1,0);
		this.feats[index].set('tween',{duration:this.fadetime}).tween('opacity',0,1).setStyle('z-index',this.zindex);
		this.links[this.current].removeClass('active');
		this.links[index].addClass('active');
		this.current = index;
		this.zindex++;
	},
	
	next: function() {
		if(this.current == this.links.length-1) {
			this.changeFeat(0);
		} else {
			this.changeFeat(this.current+1);
		}
	}

});