// JavaScript Document



/**
 * Constructor
 *
 * @param slider		String		The ID of the <div> that will contain
 *									ALL content of the slider.  This div will 
 *									be moved back and forth to create the
 *									sliding effect, and should be inside of
 *									a parent container with overflow:hidden.
 *
 * @param s 			Number		The speed at which to move.
 *
 * @param w				Number		The width in pixels that each slide will be.
 *									NOTE: they must all have the same width
 *
 * @param navSrc		String		The source path of the 'nav' button image 
 *
 * @param navSelSrc		String		The source path of the 'nav selected' button 
 *									image.  All nav buttons when clicked will be
 *									set to this image.
 *
 * @param navIDPrefix	String		The ID prefix of all nav IDs.  The prefix 
 *									will have a suffix as a number.  E.g.
 *									[navIDPrefix]0, [navIDPrefix]1, etc
 */
ClickSlider = function(sliderID, s, w, navSrc, navSelSrc, navIDPrefix){
	/**
	 * Public Vars
	 */
		/**
		 * Class Name
		 */
		this.type = 'ClickSlider';
		
		/**
		 * This property will be set every time a roll-over
		 * event happens- this is where the whole menu is
		 * supposed to scroll to.
		 */
		this.targetX = 0;
		
		/**
		 * The current position of the scrolling elements.
		 */
		this.currentX = 0;
		
		/**
		 * The width of this object
		 */
		this.width = w;
		
		/**
		 * The list of visible scrolling items as objects with
		 * 2 parameters: width and ID (as a string)
		 */
		this.list = new Array();

		/**
		 * The speed at which to scroll.  This is a trivial
		 * number and you have to play with it to decide.
		 * starting at '1' is a good idea.
		 */
		this.speed;
		if(s > 1){
			this.speed = 1;
		}
		else if(s < .001){
			this.speed = .001;	
		}
		else{
			this.speed = s;	
		}
		
		/**
		 * This is the div that will be actually moved, 
		 * specified by ID
		 */
		this.sliderDiv = sliderID;
		
		//This is the timer for the actual animation of the slides
		this.interval;
		
		//The source location of the nav button image
		this.navBSrc = navSrc;
		
		//The source location of the "selected" nav button image
		this.navSSrc = navSelSrc
		
		//The string prefix for the nav ID's so we can reference 
		//them dynamically
		this.navPrefix = navIDPrefix
		
		//What slide is currently showing.
		this.currentSlide = 0;
		
		//The length of time between slides.  Defaults to 5 seconds, can
		//be changed with the this.setIntervalLength method.
		this.intervalLength = 8000;
};



ClickSlider.prototype = {
	
	/**
	 * Registers a slide with this object.  This is 
	 * absolutely necessary for every object in the slideshow.
	 */
	addSlide:function(id){		
		/**
		 * Build the object to be inserted into the list of
		 * slides
		 */
		obj = {};
		
		/**
		 * This will be set to this object's x position within
		 * the parent container
		 */
		obj.xPos = this.list.length * this.width;

		/**
		 * This object's ID
		 */
		obj.id = id;
		
		/**
		 * This object's width
		 */
		obj.w = this.width;
		
		/**
		 * Add it to the list
		 */
		this.list.push(obj);
	},
	
	
	
	/**
	 * Handles the occurrance of a nav click.
	 *
	 * @param x 		INT			The slide to navigate to as referenced by
	 *								it's position in the this.list array
	 */
	navClicked:function(x){
		this.stop();
		this.start();
		this.goToSlide(x);
	},
	
	
	
	/**
	 * Goes to the supplied target slide
	 */
	goToSlide:function(x){
		//First set all nav items to the "unclicked" src image
		for(i = 0; i < this.list.length; i++){
			navItem = document.getElementById(this.navPrefix + i);
			navItem.src = this.navBSrc;
		}
		//Now set the target to the "clicked" state, and go to the
		//target slide.
		navItem = document.getElementById(this.navPrefix + x);
		navItem.src = this.navSSrc;
		
		//Set the target x (where the parent div will be located when
		//it finishes)
		this.targetX = -this.list[x].xPos;
		clearTimeout(this.interval);
		this.currentSlide = x;
		this.move();
	},
	
	move:function(){
		target = document.getElementById(this.sliderDiv);

		/**
		 * The target slide is to the right, so we need to 
		 * move right (increment)
		 */
		if(this.currentX > this.targetX){
			/**
			 * Continue moving
			 */
			if(this.currentX > this.targetX + 5){
				distance = (this.targetX - this.currentX) * this.speed;
				this.currentX = this.currentX + distance;
				target.style.left = this.currentX + 'px';
			}
			else{
				this.currentX = this.targetX;
				target.style.left = this.currentX + 'px';	
			}
		}
		/**
		 * Target slide is to the left, we need to move left
		 */
		else{
			/**
			 * Continue moving
			 */
			if(this.currentX < this.targetX - 5){
				distance = (this.targetX - this.currentX) * this.speed;
				this.currentX = this.currentX + distance;
				target.style.left = this.currentX + 'px';
			}
			else{
				this.currentX = this.targetX;
				target.style.left = this.currentX + 'px';	
			}
		}
		
		var scope = this;
		if(this.currentX != this.targetX) this.interval = setTimeout(function(){ scope.move() }, 33);		
	},
	
	
	
	start:function(){
		var scope = this;
		this.slideInterval = setInterval(function(){scope.intervalComplete()}, this.intervalLength);
	},
	
	
	
	intervalComplete:function(){
		if((this.currentSlide + 1) == this.list.length) 
			targetSlide = 0;
		else targetSlide = this.currentSlide + 1;
		this.goToSlide(targetSlide);
	},
	
	
	
	//Stops the timer that automates slide rotation
	stop:function(){
		window.clearInterval(this.slideInterval);
	},
	
	
	
	/**
	 * Set the length of time in milliseconds between
	 * slides
	 *
	 * @param x		INT			The length of time between slides, in milliseconds
	 */
	setIntervalLength:function(x){
		this.intervalLength = x;
	}
}