/**************************************
 *	Fadeshow
 **************************************/

var Fadeshow = new Class({
	container: null,
	data: null,
	index: 0,
	effect: null,
	periodicalTimer: null,
	
	setOptions: function(options){
		this.options = {
			interval: 3000,
			duration: 1000
		}
		Object.extend(this.options, options || {});
	},
	
	initialize: function(container, data, options){
		this.container	= container;
		this.data		= data;
		this.setOptions(options);
		if (this.options.duration > this.options.interval) { this.options.interval = this.options.duration + 2000 }
		
		this.showNew();
		this.periodicalTimer = this.transist.periodical(this.options.interval, this);
	},
	
	transist: function(){
		//Fade out
		this.effect = new Fx.Tween(this.container, { duration: this.options.duration} );
		this.effect.start('opacity', 1, 0).chain(this.showNew.bind(this));
	},
	
	showNew: function(){
		//Set new image
		this.container.setStyle('backgroundImage', 'url(/design/images/brands/'+this.data[this.index]+')');
		
		//Fade in
		this.effect = new Fx.Tween(this.container, { duration: this.options.duration} );
		this.effect.start('opacity', 0, 1);
		
		//Next index
		if(this.index == this.data.length -1) { 
			this.index = 0;
		} else { 
			this.index++;
		}
	}
})


window.addEvent('domready', function(){
	if(fadeShow = $('brandFadeshow')){
		var data = JSON.decode(fadeShow.getElement('input').value);
		new Fadeshow(fadeShow, data , {duration: 2000, interval: 6000} );
	};
});