RiverbendBanner = Class.create(Papercut.Base, {
	width: 749
	,height: 307
	,container: 'banner-images'
	,overlay: 'banner-overlay'
	,nextButton: 'banner-next'
	,previousButton: 'banner-previous'
	,currentIndex: 0
	,itemSelector: '.banner-item'
	,items: []
	,animating: false
	,wait: 7
	,animationDuration: 1
	,easing: 'bounceOut'
	,autoStart: true
	,interval: null
	
	,init: function(){
		this.container = Ext.get(this.container);
		this.overlay = Ext.get(this.overlay);
		this.nextButton = Ext.get(this.nextButton);
		this.previousButton = Ext.get(this.previousButton);
		
		this.initButtons();
		this.initItems();
		this.container.show();
		
		if(this.autoStart){
			this.start();
		}
		
	}
	
	,initItems: function(){
		this.getItems();
	}
	
	,initButtons: function(){
		this.nextButton.on('click', this.next, this);
		this.previousButton.on('click', this.previous, this);
		
		if(this.overlay != null){
			this.overlay.on('mouseover', function(){
				this.stop();
			}, this);
			this.overlay.on('mouseout', function(){
				this.start();
			}, this);
		}
	}
	
	,getItems: function(){
		this.items = this.container.select(this.itemSelector);
		
		//Hide them all
		this.items.each(function(el){
			el.hide();
		});
		
		//Align and show the first
		Ext.get(this.items.elements[0]).setLeft(0 + 'px');
		Ext.get(this.items.elements[0]).show();
	}
	
	,alignItems: function(lastIndex, currentIndex, next){
		if(next == null){
			next = true;
		}
		var currentItem = Ext.get(this.items.elements[lastIndex]);
		var nextItem = Ext.get(this.items.elements[currentIndex]);
		var left = this.width;
		if(!next){
			left = -this.width;
		}
		
		//Position the next item
		nextItem.setLeft(left + 'px');
		nextItem.show();
	}
	
	,next: function(){
		if(!this.animating){
			//get the old index
			var lastIndex = this.currentIndex;
			
			//Increment the current item
			this.currentIndex++;
			
			//Check the doundaries
			if(this.currentIndex > this.items.elements.length-1){
				this.currentIndex = 0;
			}
			
			//align the items
			this.alignItems(lastIndex, this.currentIndex, true);
			
			//animate the container
			this.container.animate(
			    {left: { to: -this.width, unit: 'px'} },
			    this.animationDuration,
			    this.animationComplete.createDelegate(this),
			    this.easing,
			    'motion'
			);
			
			//is animating
			this.animating = true;
			
			//restart interval
			this.stop();
			this.start();
		}
	}
	
	,previous: function(){
		if(!this.animating){
			
			//get the old index
			var lastIndex = this.currentIndex;
			
			//Decrement the currentIndex
			this.currentIndex--;
			
			//Check boundaries
			if(this.currentIndex < 0){
				this.currentIndex = this.items.elements.length-1;
			}
			
			//Align the items
			this.alignItems(lastIndex, this.currentIndex, false);
			
			//Animate the container
			this.container.animate(
			    {left: { to: this.width, unit: 'px'} },
			    this.animationDuration,
			    this.animationComplete.createDelegate(this),
			    this.easing,
			    'motion'
			);
			
			//Is animating
			this.animating = true;
			
			//restart interval
			this.stop();
			this.start();
		}
	}
	
	,animationComplete: function(){
		//hide all but the current
		for(var i=0; i < this.items.elements.length; i++){
			if(i != this.currentIndex){
				Ext.get(this.items.elements[i]).hide();
			}
		}
		
		//Set offsets back to zero
		var currentItem = Ext.get(this.items.elements[this.currentIndex]);
		currentItem.setLeft(0);
		this.container.setLeft(0);
		
		this.animating = false;
	}
	
	,start: function(){
		var t = this;
		this.interval = setInterval(function(){
			this.next();
		}.createDelegate(this), (this.wait*1000));
	}
	
	,stop: function(){
		clearInterval(this.interval);
	}
	
});


RiverbendBannerFade = Class.create(Papercut.Base, {
	width: 749
	,height: 307
	,container: null
	,selector: ''
	,items:[]
	,interval: null
	,currentIndex: 0
	,autoStart: true
	,easing: 'easeNone'
	,animationDuration: .5
	,wait: 5
	,nextButton: null
	,previousButton: null
	
	,init: function(){
		this.container = Ext.get(this.container);
		this.nextButton = Ext.get(this.nextButton);
		this.previousButton = Ext.get(this.previousButton);
		if(this.container != null){
			this.initItems();
			this.initButtons();
			
			if(this.items.length > 1 && this.autoStart){
				this.start();
			}
			
			//If there is only one image, hide buttons
			if(this.items.length <= 1){
				this.nextButton.hide();
				this.previousButton.hide();
			}
		}
	}
	
	,initItems: function(){
		this.items = this.container.select(this.selector).elements;
		for(var i=0; i < this.items.length; i++){
			if(i){
				var el = Ext.get(this.items[i]);
				//Hide them all
				el.hide();
				el.dom.style.position = 'absolute';
				el.setLeft(0 + 'px');
				el.setTop(0 + 'px');
			}
		}
	}
	,initButtons: function(){
		if(this.nextButton != null){
			this.nextButton.on('click', this.next, this);
		}
		
		if(this.previousButton != null){
			this.previousButton.on('click', this.previous, this);
		}
		
		if(this.overlay != null){
			this.overlay.on('mouseover', function(){
				this.stop();
			}, this);
			this.overlay.on('mouseout', function(){
				this.start();
			}, this);
		}
	}
	
	,alignItems: function(lastIndex, currentIndex){
		var currentItem = Ext.get(this.items[lastIndex]);
		var nextItem = Ext.get(this.items[currentIndex]);
		
		currentItem.dom.style.zIndex = 0;
		nextItem.dom.style.zIndex = 1;
		
	}
	
	,next: function(){
		if(!this.animating){
			//get the old index
			var lastIndex = this.currentIndex;
			
			//Increment the current item
			this.currentIndex++;
			
			//Check the doundaries
			if(this.currentIndex > this.items.length-1){
				this.currentIndex = 0;
			}
			
			//align the items
			this.alignItems(lastIndex, this.currentIndex);
			
			//animate the container
			Ext.get(this.items[this.currentIndex]).fadeIn({
				scope: this,
			    endOpacity: 1,
			    easing: this.easing,
			    duration: this.animationDuration,
			    callback: this.animationComplete
			});
			
			//is animating
			this.animating = true;
			
			//restart interval
			this.stop();
			this.start();
		}
	}
	
	,previous: function(){
		if(!this.animating){
			
			//get the old index
			var lastIndex = this.currentIndex;
			
			//Decrement the currentIndex
			this.currentIndex--;
			
			//Check boundaries
			if(this.currentIndex < 0){
				this.currentIndex = this.items.length-1;
			}
			
			//Align the items
			this.alignItems(lastIndex, this.currentIndex);
			
			//animate the container
			Ext.get(this.items[this.currentIndex]).fadeIn({
				scope: this,
			    endOpacity: 1,
			    easing: this.easing,
			    duration: this.animationDuration,
			    callback: this.animationComplete
			});
			
			//Is animating
			this.animating = true;
			
			//restart interval
			this.stop();
			this.start();
		}
	}
	
	,animationComplete: function(){
		//hide all but the current
		for(var i=0; i < this.items.length; i++){
			if(i != this.currentIndex){
				Ext.get(this.items[i]).hide();
			}
		}
		this.animating = false;
	}
	
	,start: function(){
		var t = this;
		this.interval = setInterval(function(){
			this.next();
		}.createDelegate(this), (this.wait*1000));
	}
	
	,stop: function(){
		clearInterval(this.interval);
	}
	
});