/**************************************************************************
	Created by Chris Murphy
	CDW
	2008/04/28 
	
	Slider 1.02

	Div Slider function
	This function 'slides' the underlying div either left or right.

	Required framework - jQuery +

	CSS/HTML Layout -
		<a href="javascript: void(0)" id="btnSlideLeft" >left </a>
		<a href="javascript: void(0)" id="btnSlideRight" > right</a>


		<div id="slider" style="width: 375px; height: 100px; border: 1px solid #999; overflow: hidden; position: relative;">
			<div id="movieSliderContent" style="position: relative;">
				<!-- Build these dynamically and set the width property of 'movieSliderContent' to match the total width of your content -->
				
				<div id="box1" style="float: left; width: 375px; height: 100px; border-right: 0px dashed red; background-color: #ccc;">box 1</div>
				<div id="box2" style="float: left; width: 375px; height: 100px; border-right: 0px dashed red; background-color: #ddd;">box 2</div>
				<div id="box3" style="float: left; width: 375px; height: 100px; border-right: 0px dashed red; background-color: #eee;">box 3</div>
				
				<!-- /Build these dynamically -->		
			</div>
		</div>
	
	JS Code -
		<script language='javascript'>
								
			var mySlider = new Slider('slider', 'movieSliderContent', 10); 
			
			$('btnSlideLeft').onclick = function() { mySlider.slideLeft('mySlider'); };
			$('btnSlideRight').onclick = function() { mySlider.slideRight('mySlider'); };

		</script>

	REVISIONS -
		1.02 - Added motionLength(ms) parameter to constructor
*/

function Slider (parent, child, items, motionLength)
{
		// id of parent div that must have overflow: hidden;
		this.parent = parent;
		// id of div to slide
		this.child = child;
		// first location of object to show - 0 Based
		this.step = 1;
		//total number of steps
		this.totalSteps = items;
		// size of slide - px
		this.stepSize = jQuery('#'+this.parent).width();
		// left start position for motion - px
		this.motionStartPosition = this.step * this.stepSize;
		// left end position for motion - px
		this.motionEndPosition = null;
		// current position of motion - px
		this.motionCurrentPosition = this.step * this.stepSize;
		// timer used to make motion
		this.motionTimer = null;

		// total length of motion - milliseconds
		if(motionLength > 0)
			this.motionLength = motionLength;
		else
			this.motionLength = 500;
		// time motion was started
		this.startTime = null;	
		// frame rate
		this.speed = 40; // 1000ms/'40ms' = 25fps	

		// number of items to show ( sets the width of the child element based on the parents 'window' )
		// do not use the jQuery.css() method, as it breaks when mapquest maps are included on the same page (as in the movie guide)
		document.getElementById(this.child).style.left = '-' + this.step * this.stepSize + 'px';
		document.getElementById(this.child).style.width = items * this.stepSize + 'px';
		//jQuery('#'+this.child).css('left',"-" + this.step * this.stepSize + "px");
		//jQuery('#'+this.child).css('width',items * this.stepSize + "px");
		
		// width of div to slide
		this.sliderWidth = jQuery('#'+this.child).width();
		
	this.slideLeft = function(obj) {
		// clear the timer in case someone clicks before motion is complete
		clearInterval(this.motionTimer);

		// check current position
		var currentPosition = this.step * this.stepSize;
				
		if(this.step > 0) {
			// update step
			this.step--;
			
			// calculate new position
			var newPosition = this.step * this.stepSize;

			// set start position
			this.motionStartPosition = currentPosition;
			
			// set current position
			this.motionCurrentPosition = currentPosition;
			
			// set end position
			this.motionEndPosition = newPosition;

			// start motion
			this.motionTimer = setInterval(obj + ".startMotion()", this.speed);
		}
	}

	this.slideRight = function(obj) {
		// clear the timer in case someone clicks before motion is complete
		clearInterval(this.motionTimer);
		
		// check current position
		var currentPosition = this.step * this.stepSize;
					
		// calculate new position
		this.step++;
		var newPosition = this.step * this.stepSize;
		
		// slide it if the newPosition is within the visible slider
		if(newPosition <= this.sliderWidth - this.stepSize) {
			// set start position
			this.motionStartPosition = currentPosition;
			
			// set current position
			this.motionCurrentPosition = currentPosition;
			
			// set end position
			this.motionEndPosition = newPosition;

			// start motion
			this.motionTimer = setInterval(obj + ".startMotion()", this.speed);
		}
		else {
			// decrement the step or it will affect the other calls
			this.step--;
		}

	}
	this.startMotion = function() {
		if(!this.startTime) {
			// set motion start time
			this.startTime=new Date().getTime();
			//this.startTimeSet = true;
		}
		
		// get elapsed motion time
		var elapsedTime = new Date().getTime() - this.startTime;
		
		if(elapsedTime < this.motionLength) {
			// motion is still active
			if(this.motionStartPosition > this.motionEndPosition) {
				// move to the left

				// get percentage increment (cos)
				var increment = (1-Math.cos((elapsedTime/this.motionLength)*Math.PI)) / 2;
				
				// set new position
				this.motionCurrentPosition = this.motionStartPosition - (increment * this.stepSize);
			}
			else {
				// move to the right

				// get percentage increment (cos)
				var increment = (1-Math.cos((elapsedTime/this.motionLength)*Math.PI)) / 2;
				
				// set new position
				this.motionCurrentPosition = this.motionStartPosition + (increment * this.stepSize);
			}

			// update object
			document.getElementById(this.child).style.left = "-" + this.motionCurrentPosition  + "px";
			//jQuery('#'+this.child).css('left',"-" + this.motionCurrentPosition  + "px");
		}
		else {
			// motion should be complete
			clearInterval(this.motionTimer);
			
			// reset startTime
			this.startTime = null;
			
			// update object to ensure at end position
			if(this.motionEndPosition + this.stepSize == this.sliderWidth)
			{
			   //on the last frame (last frame is a duplicate of first frame
			   document.getElementById(this.child).style.left = '-' + this.stepSize + 'px';
			   //jQuery('#'+this.child).css('left',"-" + this.stepSize + "px");
			   this.step = 1;
			}
			else if(this.step == 0)
			{
			    this.step = this.totalSteps - 2;
				document.getElementById(this.child).style.left = "-" + (this.step * this.stepSize) + "px";
			    //jQuery('#'+this.child).css('left',"-" + (this.step * this.stepSize) + "px");
			    
			}
			else
				document.getElementById(this.child).style.left = "-" + this.motionEndPosition  + "px";
			    //jQuery('#'+this.child).css('left',"-" + this.motionEndPosition  + "px");
		}
	}
}

function MultiSlider(sliderwindow, content, item, items, show, motionLength) {
        // the visible section
        this.sliderWindow = sliderwindow;
        // id of div to slide
        this.content = content;
        // first location of object to show - 0 Based
        this.step = show - 1;
        // total number of steps
        this.totalSteps = items;
        // How many steps show at one time.
        this.showSteps = show;
        // size of slide - px
        this.stepWidth = jQuery("#"+item).outerWidth();
        // left start position for motion - px
        this.motionStartPosition = this.step * this.stepWidth;
        // left end position for motion - px
        this.motionEndPosition = null;
        // current position of motion - px
        this.motionCurrentPosition = this.step * this.stepWidth;
        // timer used to make motion
        this.motionTimer = null;
        // width of div to slide
        this.sliderWidth = this.stepWidth * this.totalSteps;

        // total length of motion - milliseconds
        if (motionLength > 0)
            this.motionLength = motionLength;
        else
            this.motionLength = 500;
        // time motion was started
        this.startTime = null;
        // frame rate
        this.speed = 40; // 1000ms/'40ms' = 25fps	
		 
        // moves the visible items to the appropriate starting location
        jQuery('#'+this.sliderWindow).css('width',this.showSteps * this.stepWidth + "px");
		
        // number of items to show ( sets the width of the child element based on the parents 'window' )
        jQuery('#'+this.content).css('left',"-" + this.step * this.stepWidth + "px");
        jQuery('#'+this.content).css('width',this.sliderWidth + "px");


    
        this.slideLeft = function(obj) {
        // clear the timer in case someone clicks before motion is complete
        clearInterval(this.motionTimer);

        if (this.step > 0) {
            // check current position
            var currentPosition = this.step * this.stepWidth;

            // update step
            this.step--;

            // calculate new position
            var newPosition = this.step * this.stepWidth;

            // set start position
            this.motionStartPosition = currentPosition;

            // set current position
            this.motionCurrentPosition = currentPosition;

            // set end position
            this.motionEndPosition = newPosition;

            // start motion
            this.motionTimer = setInterval(obj + ".startMotion()", this.speed);
        }
        else {
            this.step = this.totalSteps - this.showSteps;
            jQuery('#'+this.content).css('left',"-" + this.step * this.stepWidth + "px");

            // check current position
            var currentPosition = this.step * this.stepWidth;
            this.step = this.totalSteps - this.showSteps - 1;

            // calculate new position
            var newPosition = this.step * this.stepWidth;

            // set start position
            this.motionStartPosition = currentPosition;

            // set current position
            this.motionCurrentPosition = currentPosition;

            // set end position
            this.motionEndPosition = newPosition;

            // start motion
            this.motionTimer = setInterval(obj + ".startMotion()", this.speed);
        }
    }

    this.slideRight = function(obj) {
        // clear the timer in case someone clicks before motion is complete
        clearInterval(this.motionTimer);

        // check current position
        var currentPosition = this.step * this.stepWidth;

        // calculate new position
        this.step++;
        var newPosition = this.step * this.stepWidth;

        // slide it if the newPosition is within the visible slider
        if (newPosition <= this.sliderWidth - this.stepWidth) {
            // set start position
            this.motionStartPosition = currentPosition;

            // set current position
            this.motionCurrentPosition = currentPosition;

            // set end position
            this.motionEndPosition = newPosition;

            // start motion
            this.motionTimer = setInterval(obj + ".startMotion()", this.speed);
        }
        else {
            // decrement the step or it will affect the other calls
            this.step--;
        }
    }
   
	this.startMotion = function() {
        if (!this.startTime) {
            // set motion start time
            this.startTime = new Date().getTime();
            //this.startTimeSet = true;
        }

        // get elapsed motion time
        var elapsedTime = new Date().getTime() - this.startTime;

        if (elapsedTime < this.motionLength) {
            // motion is still active
            if (this.motionStartPosition > this.motionEndPosition) {
                // move to the left

                // get percentage increment (cos)
                var increment = (1 - Math.cos((elapsedTime / this.motionLength) * Math.PI)) / 2;

                // set new position
                this.motionCurrentPosition = this.motionStartPosition - (increment * this.stepWidth);
            }
            else {
                // move to the right

                // get percentage increment (cos)
                var increment = (1 - Math.cos((elapsedTime / this.motionLength) * Math.PI)) / 2;

                // set new position
                this.motionCurrentPosition = this.motionStartPosition + (increment * this.stepWidth);
            }

            // update object
            jQuery('#'+this.content).css('left',"-" + this.motionCurrentPosition + "px");
        }
        else {
            // motion should be complete
            clearInterval(this.motionTimer);

            // reset startTime
            this.startTime = null;

            // update object to ensure at end position
            if (this.motionEndPosition + this.stepWidth == this.sliderWidth) {
                //on the last frame (last frame is a duplicate of first frame
                if (this.showSteps > 1) {
                    jQuery('#'+this.content).css('left',"-" + this.stepWidth + "px");
                    this.step = 1;
                }
                else {
                    jQuery('#'+this.content).css('left',"-" + this.step * this.stepWidth + "px");
                    this.step = 0;
                }
            }
            else if (this.step < 0) {
                this.step = this.totalSteps - ((this.showSteps - 1) * 2) - 1;
                jQuery('#'+this.content).css('left',"-" + (this.step * this.stepWidth) + "px");

            }
            else if (this.step > (this.totalSteps - this.showSteps - 1)) {
                this.step = 0;
                jQuery('#'+this.content).css('left', "-" + this.step * this.stepWidth + "px");
            }
            else {
                jQuery('#'+ this.content).css('left',"-" + this.motionEndPosition + "px");
            }
        }
    }
}

function MultiSlider2(window, content, item, steps, show, motionLength, move) {
        // the visible section
        this.window = window;
        // id of div to slide
        this.content = content;
        // first location of object to show - 0 Based
        this.step = 0;
        // current step position
        this.currentStep = this.step;
        // total number of steps
        this.totalSteps = steps;
        // How many steps show at one time.
        this.showSteps = show;
        // How many steps to move at one time.
        this.moveSteps = move;
        // timer used to make motion
        this.motionTimer = null;
        // Direction to move
        this.direction = null;

        // Get each item
        this.items = new Array();
        for (x = 0; x < this.totalSteps; x++) {
            this.items[x] = jQuery('#'+item + "_" + x);
        }
        // size of slide - px
        this.stepWidth = this.items[0].width();
        this.stepHeight = this.items[0].height();
        // width of content div.  Contains all items and extra width on each side
        this.sliderWidth = (this.moveSteps * this.stepWidth);

        // Motion Start
        this.startPosition = 0;
        // Motion End
        this.endPosition = this.startPosition;
        // Current motion position
        this.currentPosition = this.startPosition;
        // number of end items that have been moved to the front
        this.itemsMoved = 0;

        // total length of motion - milliseconds
        if (motionLength > 0)
            this.motionLength = motionLength;
        else
            this.motionLength = 500;
        // time motion was started
        this.startTime = null;
        // frame rate
        this.speed = 40; // 1000ms/'40ms' = 25fps

        // This is done to set the appropriate hieght on the Window
        for (x = 0; x < this.totalSteps; x++) {
            if (this.items[x].height() > this.stepHeight)
                this.stepHeight = this.items[x].height();
        }
        // moves the visible items to the appropriate starting location
        jQuery('#'+this.window).css('width',(this.showSteps * this.stepWidth) + "px");
        jQuery('#'+this.window).css('height',this.stepHeight + "px");
        // number of items to show ( sets the width of the child element based on the parents 'window' )
        jQuery('#'+this.content).css('width',(this.totalSteps * this.stepWidth) + "px");
        // Set the size and position of each item
        this.lefts = new Array();
        for (x = 0; x < this.totalSteps; x++) {
            this.lefts[x] = ((this.stepWidth * x));
            this.items[x].css('left',this.lefts[x] + "px");
            this.items[x].css('width',this.stepWidth + "px");
            this.items[x].css('height',this.stepHeight + "px");
        }

    this.slideLeft = function(obj) {
        if (this.direction == null) {
            // clear the timer in case someone clicks before motion is complete
            clearInterval(this.motionTimer);

            // update position
            this.step -= this.moveSteps;
            if (this.step < 0)
                this.step = this.totalSteps + this.step;

            // Direction to move
            this.direction = "left";
            this.endPosition = this.startPosition + (this.stepWidth * this.moveSteps);
            this.currentPosition = this.startPosition;

            // start motion
            this.motionTimer = setInterval(obj + ".startMotion()", this.speed);
        }
    }

    this.slideRight = function(obj) {
        if (this.direction == null) {
            // clear the timer in case someone clicks before motion is complete
            clearInterval(this.motionTimer)
            ;
            // update position
            this.step += this.moveSteps;
            // loop around to the beginning
            if (this.step > this.totalSteps)
                this.step = this.step - this.totalSteps;

            // Direction to move
            this.direction = "right";
            this.endPosition = this.startPosition - (this.stepWidth * this.moveSteps);
            this.currentPosition = this.startPosition;

            // start motion
            this.motionTimer = setInterval(obj + ".startMotion()", this.speed);
        }
    }
    this.startMotion = function() {
        if (!this.startTime) {
            // set motion start time
            this.startTime = new Date().getTime();
            //this.startTimeSet = true;
        }

        // get elapsed motion time
        var elapsedTime = new Date().getTime() - this.startTime;
        var increment = (1 - Math.cos((elapsedTime / this.motionLength) * Math.PI)) / 2;

        if (elapsedTime < this.motionLength) {
            if (this.direction == "left") { // Move left
                this.currentPosition = this.startPosition + (increment * (this.sliderWidth));
                if (this.currentPosition <= this.endPosition) {
                    // Move each item right
                    for (x = this.totalSteps - 1; x >= 0; x--) {
                        var left = this.lefts[x] + this.currentPosition;
                        if ((left) > (this.showSteps * this.stepWidth)) {
                            this.itemsMoved++;
                            this.lefts[x] = (-1 * this.itemsMoved) * this.stepWidth;
                            left = this.lefts[x] + this.currentPosition;
                        }
                        this.items[x].css('left',left + "px");
                    }
                }
            }
            else if (this.direction == "right") { // move right
                this.currentPosition = this.startPosition - (increment * (this.sliderWidth));
                if (this.currentPosition >= this.endPosition) {
                    // Move each item left
                    for (x = 0; x < this.totalSteps; x++) {
                        var left = this.lefts[x] + this.currentPosition;
                        if (left <= (-1 * this.stepWidth)) {
                            this.lefts[x] = (this.lefts[x] + (this.totalSteps * this.stepWidth));
                            left = this.lefts[x] + this.currentPosition;
                        }
                        this.items[x].css('left',left + "px");
                    }
                }
            }
        }
        else {
            // motion should be complete
            clearInterval(this.motionTimer);

            // reset startTime
            this.startTime = null;

            // set the current position
            this.currentStep = this.step;

            // Complete the move for each item
            for (x = 0; x < this.totalSteps; x++) {
                this.lefts[x] += this.endPosition
                if (this.lefts[x] <= (-1 * this.stepWidth)) {
                    this.lefts[x] += (this.totalSteps * this.stepWidth);
                }
                this.items[x].css('left',this.lefts[x] + "px");
            }

            this.startPosition = 0;
            this.currentPosition = 0;
            this.endPosition = 0;
            this.itemsMoved = 0;
            this.direction = null;
        }
    }
}