/**
 * The ImageScroller uses prototype and scriptaculous to scroll a set of images
 * inside a container. Images are expected to sit an A tag i.e. <a><img /></a>
 */
var ImageScroller = Class.create({
	
	images:		 null,
	selectors:   null,
	imageCount:	 0,
	currentImage:0,
	pause:		 false,
	speed:		 5000,
	callback:	 null,

	initialize: function(options) {
		this.images = $(options.imageContainer).select("a");
		this.selectors = options.selectorListItems

		this.imageCount = this.images.size();
		this.currentImage = 0;
		this.speed = options.delay;
		this.overlay = $(options.overlay);
		
		if(this.overlay){
			this.overlay.observe('mouseover', function(){
				this.pause = true;
			}.bind(this));

			this.overlay.observe('mouseout', function(){
				this.pause = false;
			}.bind(this));
		}

	},

	start: function(){
		
		this.timer = window.setInterval(function(){		
			this.selectNext(true);
		}.bind(this), this.speed)
		
	},

	stop: function(){
		this.timer = null;
	},

	selectNext: function(onTimer){
		if(!this.pause || !onTimer){
			var nextImage = (this.currentImage + 1) % this.imageCount;
			this.selectSpecific(nextImage, "right");
		}
	},
	
	selectPrevious: function(onTimer){
		if(!this.pause || !onTimer){
			var prevImage = ( ( (this.currentImage - 1) % this.imageCount ) + this.imageCount ) % this.imageCount
			this.selectSpecific(prevImage, "left");
		}
	},

	/**
	 * 
	 * @param index
	 * @param direction Select to move in from the left vs the right
	 */
	selectSpecific: function(index, direction){
		
		direction = (direction) ? direction : "left";
		
		if(this.currentImage != index && !this.pause){
			
			this.pause = true;
			
			if(direction == "left"){
				this.images[index].setStyle({
					'zIndex': '11',
					'position': "absolute",
					'left': this.images[this.currentImage].getWidth() + "px"
				});

			}else if(direction == "right"){
				this.images[index].setStyle({
					'zIndex': '11',
					'position': "absolute",
					'left': 0 - this.images[this.currentImage].getWidth() + "px"
				});
			}
			
			
			this.images[this.currentImage].setStyle({
				'zIndex': '10'
			});
			
			$(this.images).each(function(v,i){
				if(i != index && i != this.currentImage){
					this.images[i].setStyle({
						'zIndex': '9'
					});
				}
			}.bind(this));

			new Effect.Move(this.images[index],{
				y: 0,
				mode: "absolute",
				afterFinish: function(){
					this.pause = false;
				
				}.bind(this)
			});

			if(!this.overlay){
				this.images[index].observe('mouseover', function(){
					this.pause = true;
				});

				this.images[index].observe('mouseout', function(){
					this.pause = false;
				});

				this.images[this.currentImage].stopObserving('mouseover');
				this.images[this.currentImage].stopObserving('mouseout');
			}


			this.images[this.currentImage].stopObserving('mouseover');
			this.images[this.currentImage].stopObserving('mouseout');
			
			if(this.selectors){
				this.selectors[this.currentImage].select("a")[0].removeClassName("active");
				this.selectors[index].select("a")[0].addClassName("active");
			}
			

			if(this.overlay){
				this.overlay.onclick = function(){
					window.location = this.images[index].href
				}.bind(this);
			}

			this.currentImage = index;
			
		}

	},

	/*
	 * Pauses the scroller for n seconds
	 */
	pauseFor: function(seconds){
		this.pause = true;

		window.setTimeout(function(){
			this.pause = false;
		}.bind(this), seconds * 1000);

	}
  
});