﻿/*!
 * simpleHorizontalSlider v1.0
 *
 * Copyright (c) 2009 Matthew Hale
 * Dual licensed under the MIT and GPL licenses.
 *
 * Date: 2009-05-12 13:34:21 -0600 (5 May 2009)
 * Revision: 312
 *
 * Requires jQuery 1.3.2 or greater
 * 
 * <script src="http://code.jquery.com/jquery-latest.js"></script>
 * <script src="simpleHorizontalSlider.js"></script>
 * <script type="text/javascript">
 * $(document).ready(function() {
 *   sliderAnyname = new simpleHorizontalSlider('scroll_left_div_id','scroll_right_div_id','class_name_of_elements_to_scroll_through',int_how_many_elements_to_show_at_any_time, {moveThisManyOnClick: int_how_many_elements_to_move_over_on_click, elementWidth: "width in px of each element div. they must all be the same"} );
 *   sliderAnyname = new simpleHorizontalSlider('button_left','button_right','myDivItems',6, {moveThisManyOnClick: 4, elementWidth: "100px"} );
 * });
 * </script>
 * <div id="button_left">Scroll Left</div>
 * <div class="myDivItems">Item 1</div> <div class="myDivItems">Item 2</div> <div class="myDivItems">Item 3</div>
 * <div class="myDivItems">Item 4</div> <div class="myDivItems">Item 5</div> <div class="myDivItems">Item 6</div>
 * <div class="myDivItems">Item 7</div> <div class="myDivItems">Item 8</div> <div class="myDivItems">Item 9</div>
 * <div class="myDivItems">Item 10</div> <div class="myDivItems">Item 11</div> <div class="myDivItems">Item 12</div>
 * <div id="button_right">Scroll Right</div>
 */

function simpleHorizontalSlider(leftClick, rightClick, elementClassName, howManyDivsWidth, optionsArray) {
    this.randInt = Math.floor(Math.random() * 500 + 1);
    this.sliderName = eval("'slider" + this.randInt + "'");
    eval("" + this.sliderName + " = this; ");
    eval("$(\"#\" + leftClick).click(function() {" + this.sliderName + ".clickRight();});");
    eval("$(\"#\" + rightClick).click(function() {" + this.sliderName + ".clickLeft();});");
    this.leftClick = leftClick;
    this.rightClick = rightClick;
    this.elementClassName = elementClassName;
    this.howManyDivsWidth = howManyDivsWidth;
    this.options = optionsArray || {};
    if (!this.options.moveThisManyOnClick) { this.options.moveThisManyOnClick = '1'; }
    this.lLocation = 1;
    this.rLocation = howManyDivsWidth;
    this.divBucket = new Array();
    this.totalDivs = 0;
    this.showWidth = 0;
    this.divs = $("." + this.elementClassName);
    this.divBucket = new Array();
    this.divCount = 1;
    this.i = 0;
    for (this.i in this.divs) {
        this.newdiv = this.divs[this.i];
        if (this.newdiv.innerHTML != undefined) {
            if (!this.newdiv.id) {
                this.randomDivID = Math.floor(Math.random() * 9999 + 1);
                this.newdiv.id = 'sliderdiv' + this.randInt + this.randomDivID + this.divCount;
            }
            this.divBucket[this.divCount] = this.newdiv.id;
            if (this.divCount > this.howManyDivsWidth) {
                this.hideBucketDiv(this.newdiv.id);
            }
            this.divCount++;
        }
    }
    this.totalDivs = (this.divCount--);
    this.initialized = true;
}
//simpleHorizontalSlider.prototype = new Object;
simpleHorizontalSlider.prototype.clickLeft = function() {
    howManyClicks = this.options.moveThisManyOnClick;
    var i=0;
    for (i=0;i<howManyClicks;i++)
    {
        maxlLocation = this.totalDivs - this.howManyDivsWidth;
        newlLocation = this.lLocation + 1;
    
        if (newlLocation <= maxlLocation) {
            this.hideBucketDiv(this.divBucket[this.lLocation]);
            this.lLocation++;
            this.rLocation++;
            this.showBucketDiv(this.divBucket[this.rLocation]);
        }
    }
}
simpleHorizontalSlider.prototype.clickRight = function() {
    howManyClicks = this.options.moveThisManyOnClick;
    var i=0;
    for (i=0;i<howManyClicks;i++)
    {

        maxlLocation = this.totalDivs - this.howManyDivsWidth;
        newrLocation = this.rLocation - 1;
        if (newrLocation >= this.howManyDivsWidth) {
            this.hideBucketDiv(this.divBucket[this.rLocation]);
            this.lLocation--;
            this.rLocation--;
            this.showBucketDiv(this.divBucket[this.lLocation]);
        }
    }
}
simpleHorizontalSlider.prototype.showBucketDiv = function(elementID) {
    $("#" + elementID).animate({
        width: this.options.elementWidth,
        opacity: 1,
        marginLeft: "0"
    },
    500);
}
simpleHorizontalSlider.prototype.hideBucketDiv = function(elementID) {

    $("#" + elementID).animate({
        width: "0%",
        opacity: 0,
        marginLeft: "0"
    },
    500,null,function() { $("#" + elementID).hide();  });
}
