var BannerSlider = new Class({

	getOptions: function(){
		return {
			effect: 'fade', //fade|wipe|slide
			duration: 1000,
			transition: Fx.Transitions.linear,
			direction: 'right', //top|right|bottom|left|random
			wait: 5000,
			itemClass: 'banner-item'
		};
	},
	
	initialize: function(container, options){
		this.setOptions(this.getOptions(), options);
		this.container = $(container);
		this.container.setStyles({
			position: 'relative',
			overflow: 'hidden'
		});
		
		this.bannerContainer = new Element('div').addClass('banner-module').setStyles({
			position: 'relative',
			overflow: 'hidden',
			top: 0,
			left: 0,
			width: this.container.getStyle('width'),
			height: this.container.getStyle('height'),
			display: 'block'
		}).injectInside(this.container);
		
		this.loading = new Element('div').addClass('banner-loading').setStyles({
			position: 'absolute',
			top: 0,
			left: 0,
			zIndex: 3,
			display: 'none',
			width: this.container.getStyle('width'),
			height: this.container.getStyle('height')
		}).injectInside(this.container);
		
		this.bannerItems = [];
		this.container.getElements('.' + this.options.itemClass).each(
			function(el, pos)
			{	
				var new_class = this.options.itemClass + '-' + pos;
				el.addClass(new_class).setStyles({
					position: 'absolute',
					overflow: 'hidden',
					top: 0,
					left: 0,
					display: 'block',
					width: this.container.getStyle('width'),
					height: this.container.getStyle('height')
				}).injectInside(this.bannerContainer);
				
				this.bannerItems.push(new_class);
				
				if(pos == 0)
				{
					el.setStyles({visibility:'visible', opacity: 1});
					this.oldBanner = el;
				}
				else
					el.setStyles({visibility:'hidden', opacity: 0});
			}
		, this);
		
		if(this.bannerItems.length <= 1)
			return;
			
		this.timer = 0;
		this.banner = 0;
		this.bannerLoaded = 1;
		this.animating = false;
		this.wait();
	},
	
	wait: function(){
		this.timer = this.load.delay(this.options.wait,this);
	},
	
	load: function()
	{	
		$clear(this.timer);
		this.loading.setStyle('display','block');
		this.banner++;
		var banner_class = this.bannerItems[this.banner];
		delete this.newBanner;
		this.newBanner = this.bannerContainer.getElement('.' + banner_class);
		if(this.newBanner)
			this.show();
	},

	show: function(){
		this.newBanner.setStyles({
			zIndex: 1,
			opacity: 0
		});
		this.bannerLoaded = this.banner;
		this.loading.setStyle('display','none');
		this.effect();
	},
	
	effect: function(){
		this.animating = true;
		this.effectObj = this.newBanner.effects({
			duration: this.options.duration,
			transition: this.options.transition
		});
		var myFxTypes = ['fade','wipe','slide'];
		var myFxDir = ['top','right','bottom','left'];
		if(this.options.effect == 'fade'){
			this.fade();
		}else if(this.options.effect == 'wipe'){
			if(this.options.direction == 'random'){
				this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
			}else{
				this.setup(this.options.direction);
			}
			this.wipe();
		}else if(this.options.effect == 'slide'){
			if(this.options.direction == 'random'){
				this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
			}else{
				this.setup(this.options.direction);
			}
			this.slide();
		}
	},
	
	next: function(){
		var doNext = true;
		if(this.animating)
			doNext = false;
		if(doNext){
			this.replaceOldNew();
			$clear(this.timer);
			if(this.banner >= this.bannerItems.length - 1)
				this.banner = -1;
			this.wait();	
		}
	},
	
	replaceOldNew: function(){
		this.oldBanner.setStyles({opacity:0});
		this.newBanner.setStyles({
			zIndex: 0,
			top: 0,
			left: 0,
			opacity: 1
		});
		delete this.oldBanner;
		this.oldBanner = this.newBanner;
	},
	
	resetAnimation: function(){
		this.animating = false;
	},
	
	setup: function(dir){
		if(dir == 'top'){
			this.top = -this.container.getStyle('height').toInt();
			this.left = 0;
			this.topOut = this.container.getStyle('height').toInt();
			this.leftOut = 0;
			
		}else if(dir == 'right'){
			this.top = 0;
			this.left = this.container.getStyle('width').toInt();
			this.topOut = 0;
			this.leftOut = -this.container.getStyle('width').toInt();
			
		}else if(dir == 'bottom'){
			this.top = this.container.getStyle('height').toInt();
			this.left = 0;
			this.topOut = -this.container.getStyle('height').toInt();
			this.leftOut = 0;
			
		}else if(dir == 'left'){
			this.top = 0;
			this.left = -this.container.getStyle('width').toInt();
			this.topOut = 0;
			this.leftOut = this.container.getStyle('width').toInt();
			
		}else{
			this.top = 0;
			this.left = 0;
			this.topOut = 0;
			this.leftOut = 0;
		}
	},
	
	fade: function(){
		this.effectObj.start({opacity: [0,1]});
		this.resetAnimation.delay(this.options.duration+90,this);
		this.next.delay(this.options.duration+100,this,true);
	},
	
	wipe: function(){
		this.oldBanner.effects({
			duration: this.options.duration,
			transition: this.options.transition
		}).start({
			top: [0,this.topOut],
			left: [0, this.leftOut]
		})
		this.effectObj.start({
			top: [this.top,0],
			left: [this.left,0],
			opacity: [1,1]
		},this);
		this.resetAnimation.delay(this.options.duration+90,this);
		if(!this.stopped){
		this.next.delay(this.options.duration+100,this,true);
		}
	},
	
	slide: function(){
		this.effectObj.start({
			top: [this.top,0],
			left: [this.left,0],
			opacity: [1,1]
		},this);
		this.resetAnimation.delay(this.options.duration+90,this);
		if(!this.stopped){
		this.next.delay(this.options.duration+100,this,true);
		}
	}
});
BannerSlider.implement(new Options);
BannerSlider.implement(new Events);