var BannerRotator = new Class({
	preloadedNum: 0,
	currentIndex: 0,
	bufferLayerFx: null,

	options: {
		Images: [],
		Content: [],
		Interval: 1000,
		TransitionInterval: 500,
		BufferLayer: 'bufferLayler',
		BannerContent: 'bannerContent',
		BannerInner: 'bannerInner',
		RotateContent: true
	},

	initialize: function(options)
	{
		this.setOptions(options);
		this.bufferLayerFx = new Fx.Style(this.options.BufferLayer, 'opacity', {
			duration: this.options.TransitionInterval,
			onComplete: this.switchBuffers.bind(this)});

		if ( this.options.RotateContent )
			$(this.options.BannerContent).innerHTML = this.options.Content[0];

		this.preloadImages();
	},

	preloadImages: function()
	{
		this.options.Images.each(function(image){
			new Asset.image(image, {onload: this.imageLoaded.bind(this)});
		}.bind(this));
	},

	imageLoaded: function()
	{
		this.preloadedNum++;
		if ( this.preloadedNum == this.options.Images.length )
			this.startRotator.delay(200, this);
	},

	startRotator: function()
	{
		$(this.options.BannerInner).setStyle('backgroundImage', 'url(' + this.options.Images[0] + ')');
		this.changeBanner.periodical(this.options.Interval, this);
	},

	changeBanner: function()
	{
		this.currentIndex = this.currentIndex < this.options.Images.length - 1 ? this.currentIndex + 1 : 0;
		$(this.options.BannerInner).setStyle('backgroundImage', 'url(' + this.options.Images[this.currentIndex] + ')');
		this.bufferLayerFx.start(1, 0);
	},

	switchBuffers: function(nextIndex)
	{
		$(this.options.BufferLayer).setStyle('backgroundImage', $(this.options.BannerInner).getStyle('backgroundImage') );
		$(this.options.BufferLayer).setStyle('opacity', 1 );

		if ( this.options.RotateContent )
			$(this.options.BannerContent).innerHTML = this.options.Content[this.currentIndex];
	}
});

BannerRotator.implement(new Options);