var idCounter = 1;
var ImageScroller = function (_imageScrollerParentDivID, _imageScrollerChildDivID) {
    this.id = idCounter++;

    var _imageScrollerParentDivID = getElem(_imageScrollerParentDivID);
    var _imageScrollerChildDivID = getElem(_imageScrollerChildDivID);
    var _ElementObj;
    var _origOffset = 0;
    var _currentOffset = 0;
    var _newOffset = 0;
    var _newScrollAmount = 1;

    var prImagePaths = new Array();
    var prImageValues = new Array();
    var prImageAltText = new Array();
    var prImageClicks = new Array();
    var prImageTitles = new Array();

    var iNumOfImages;
    var iNumOfRowImages;
    var iNumOfThumbsShown = 1;
    var iImageScrollAmount = 1;
    var iEnableThumbTitle = false;

    //variables for slide of image
    var iSmoothSlideInterval = 20;
    var iSmoothSlideAmount = 30;

    //image properties
    var THUMB_HEIGHT = 80;
    var THUMB_WIDTH = 80;
    var THUMB_BORDER_SIZE = 0;
    var THUMB_SELECTED_BORDER_SIZE = 0;
    var THUMB_SELECTED_COLOR = "#000000";
    var THUMB_TITLE_HEIGHT = 15;

    //functional properties
    var NUM_OF_ROWS = 1;
    var CURRENT_THUMB_INDEX = 1;
    var CURRENT_SELECTED_IMG = null;
    var NEW_REVERSE_OFFSET = 0;
    var MAX_REVERSE_OFFSET = 0;
    var NEW_FORWARD_OFFSET = 0;
    var IS_SCROLLING = false;

    //functions
    this.addThumbnail = function (_thumbnailURL, _thumbnailValue, _thumbnailAlt, _thumbnailTitle, _onClickFunc) {
        prImagePaths[prImagePaths.length] = _thumbnailURL;
        prImageValues[prImageValues.length] = _thumbnailValue;
        prImageAltText[prImageAltText.length] = _thumbnailAlt;
        prImageTitles[prImageTitles.length] = _thumbnailTitle;
        prImageClicks[prImageClicks.length] = _onClickFunc;
    };
    this.setNumOfImagesToScroll = function (_NumOfImagesToScroll) {
        iImageScrollAmount = parseInt(_NumOfImagesToScroll);
    };
    this.setScrollSpeed = function (_iSpeed) {
        if (_iSpeed > 0 && _iSpeed < 1000) {
            iSmoothSlideInterval = parseInt(_iSpeed);
        }
    };
    this.setScrollAmount = function (_iAmount) {
        if (_iAmount > 0 && _iAmount < 1000) {
            iSmoothSlideAmount = parseInt(_iAmount);
        }
    };
    this.setSelectedColor = function (_newSelectedColor) {
        THUMB_SELECTED_COLOR = _newSelectedColor;
    };
    this.setNumOfRows = function (_numOfRows) {
        NUM_OF_ROWS = parseInt(_numOfRows);
    };
    this.setThumbsShown = function (_newNumOfThumbsShown) {
        iNumOfThumbsShown = parseInt(_newNumOfThumbsShown);
    };
    this.setThumbnailHeight = function (_newThumbHeight) {
        THUMB_HEIGHT = parseInt(_newThumbHeight);
    };
    this.setThumbnailWidth = function (_newThumbWidth) {
        THUMB_WIDTH = parseInt(_newThumbWidth);
    };
    this.setThumbnailBorderSize = function (_newThumbBorderSize) {
        THUMB_BORDER_SIZE = parseInt(_newThumbBorderSize);
    };
    this.setThumbnailSelectedBorderSize = function (_newThumbSelectedBorderSize) {
        THUMB_SELECTED_BORDER_SIZE = parseInt(_newThumbSelectedBorderSize);
    }
    this.setThumbnailTitleHeight = function (_newTitleHeight) {
        THUMB_TITLE_HEIGHT = parseInt(_newTitleHeight);
    };
    this.getThumbnailHeight = function () {
        return THUMB_HEIGHT;
    };
    this.getThumbnailWidth = function () {
        return THUMB_WIDTH;
    };
    this.getThumbnailBorderSize = function () {
        return THUMB_BORDER_SIZE;
    };
    this.getCurrentThumbIndex = function () {
        return CURRENT_THUMB_INDEX;
    };
    this.getThumbnailCount = function () {
        return iNumOfImages;
    };
    this.getThumbsShown = function () {
        return iNumOfThumbsShown;
    };
    this.isScrollable = function () {
        return (iNumOfRowImages > iNumOfThumbsShown);
    };
    this.isScrollForwardEnd = function () {
        return (((CURRENT_THUMB_INDEX + iImageScrollAmount) + (iNumOfThumbsShown - 1)) >= iNumOfRowImages);
    };
    this.isScrollReverseEnd = function () {
        return ((CURRENT_THUMB_INDEX - iImageScrollAmount) <= 1);
    };
    this.enableThumbnailTitle = function (_isEnabled) {
        iEnableThumbTitle = _isEnabled;
    };
    this.renderScroller = function () {
        iNumOfImages = prImagePaths.length;
        iNumOfRowImages = Math.ceil(iNumOfImages / NUM_OF_ROWS);

        if (iNumOfThumbsShown > iNumOfRowImages) {
            iNumOfThumbsShown = iNumOfRowImages;
        }

        //remove title height if disabled
        if (!iEnableThumbTitle) {
            THUMB_TITLE_HEIGHT = 0;
        }

        //set max (left) scroll offset
        MAX_REVERSE_OFFSET = 0 - (iNumOfRowImages - iNumOfThumbsShown) * THUMB_WIDTH;
        if (THUMB_BORDER_SIZE > 0) {
            MAX_REVERSE_OFFSET = MAX_REVERSE_OFFSET - ((iNumOfRowImages - iNumOfThumbsShown) * (THUMB_BORDER_SIZE * 2));
        }
        if (THUMB_SELECTED_BORDER_SIZE > 0) {
            MAX_REVERSE_OFFSET = MAX_REVERSE_OFFSET - ((iNumOfRowImages - iNumOfThumbsShown) * (THUMB_SELECTED_BORDER_SIZE * 2));
        }

        //set up the two container attributes
        _imageScrollerParentDivID.style.width = (THUMB_WIDTH * iNumOfThumbsShown) + ((THUMB_BORDER_SIZE * 2) * iNumOfThumbsShown) + ((THUMB_SELECTED_BORDER_SIZE * 2) * iNumOfThumbsShown) + "px";
        _imageScrollerParentDivID.style.height = (((THUMB_HEIGHT + (THUMB_BORDER_SIZE * 2) + (THUMB_SELECTED_BORDER_SIZE * 2)) + THUMB_TITLE_HEIGHT) * NUM_OF_ROWS) + "px";
        _imageScrollerChildDivID.style.width = (THUMB_WIDTH * iNumOfRowImages) + ((THUMB_BORDER_SIZE * 2) * iNumOfRowImages) + ((THUMB_SELECTED_BORDER_SIZE * 2) * iNumOfRowImages) + "px";
        _imageScrollerChildDivID.style.height = ((THUMB_HEIGHT + (THUMB_BORDER_SIZE * 2) + (THUMB_SELECTED_BORDER_SIZE * 2) + (THUMB_TITLE_HEIGHT)) * NUM_OF_ROWS) + "px";
        _imageScrollerParentDivID.style.position = "relative";
        _imageScrollerParentDivID.style.overflow = "hidden";
        _imageScrollerParentDivID.style.margin = "0px";
        _imageScrollerParentDivID.style.padding = "0px";
        _imageScrollerChildDivID.style.position = "absolute";
        _imageScrollerChildDivID.style.top = "0px";
        _imageScrollerChildDivID.style.left = "0px";

        var oColDiv;
        var oOutDiv;
        var oInDiv;
        var oLabel;
        var oImage;
        for (i = 0; i < iNumOfImages; i++) {
            if ((i % NUM_OF_ROWS) == 0) {
                //column div
                oColDiv = document.createElement("div");
                oColDiv.id = "ScrollLayout_" + this.id + "_coldiv_" + i;
                oColDiv.style.width = (THUMB_WIDTH + (THUMB_BORDER_SIZE * 2) + (THUMB_SELECTED_BORDER_SIZE * 2)) + "px";
                oColDiv.style.height = ((THUMB_HEIGHT + (THUMB_BORDER_SIZE * 2) + (THUMB_SELECTED_BORDER_SIZE * 2) + (THUMB_TITLE_HEIGHT)) * NUM_OF_ROWS) + "px";
                if (oColDiv.style.styleFloat != null) {
                    oColDiv.style.styleFloat = "left";
                }
                else {
                    oColDiv.style.cssFloat = "left";
                }
            }

            //main outer div
            oOutDiv = document.createElement("div");
            oOutDiv.id = "ScrollLayout_" + this.id + "_outdiv_" + i;
            oOutDiv.style.padding = THUMB_BORDER_SIZE + "px";
            oOutDiv.style.width = (THUMB_WIDTH + (THUMB_SELECTED_BORDER_SIZE * 2)) + "px";
            oOutDiv.style.height = (THUMB_HEIGHT + (THUMB_SELECTED_BORDER_SIZE * 2) + (THUMB_TITLE_HEIGHT)) + "px";

            //selected inner div
            oInDiv = document.createElement("div");
            oInDiv.id = "ScrollLayout_" + this.id + "_indiv_" + i;
            oInDiv.style.backgroundColor = "#FFFFFF";
            oInDiv.style.padding = THUMB_SELECTED_BORDER_SIZE + "px";
            oInDiv.style.height = (THUMB_HEIGHT + THUMB_TITLE_HEIGHT) + "px";
            oInDiv.style.width = THUMB_WIDTH + "px";

            //image title label
            if (iEnableThumbTitle) {
                oLabel = document.createElement("label");
                oLabel.id = "ScrollLayout_" + this.id + "_lbl_" + i;
                oLabel.innerText = prImageTitles[i];
                oLabel.style.overflow = "hidden";
                oLabel.style.fontSize = "12px";
                oLabel.style.fontWeight = "bold";
                oLabel.style.fontFamily = "Arial";
                oLabel.style.color = "#000000";
                oLabel.style.height = THUMB_TITLE_HEIGHT + "px";
                oLabel.style.width = THUMB_WIDTH + "px";

                oInDiv.appendChild(oLabel);
            }

            //image
            oImage = document.createElement("img");
            oImage.id = "ScrollLayout_" + this.id + "_img_" + i;
            oImage.name = decodeURI(prImagePaths[i].substring((prImagePaths[i].lastIndexOf("/") + 1), prImagePaths[i].length));
            oImage.src = prImagePaths[i];
            oImage.alt = prImageAltText[i];
            oImage.title = prImageTitles[i];
            oImage.value = prImageValues[i];
            oImage.border = 0;
            oImage.width = THUMB_WIDTH;
            oImage.height = THUMB_HEIGHT;
            oImage.style.cursor = "pointer";
            oImage.onclick = new Function(prImageClicks[i]);

            //append html elements
            oInDiv.appendChild(oImage);
            oOutDiv.appendChild(oInDiv);
            oColDiv.appendChild(oOutDiv);
            if ((i % NUM_OF_ROWS) == 0) {
                _imageScrollerChildDivID.appendChild(oColDiv);
            }
        }
    };
    this.scrollReverse = function () {
        if (this.isScrollable() && IS_SCROLLING == false) {
            _origOffset = parseInt(_imageScrollerChildDivID.style.left);
            _currentOffset = parseInt(_imageScrollerChildDivID.style.left);

            _newScrollAmount = iImageScrollAmount;
            if ((CURRENT_THUMB_INDEX - _newScrollAmount) < 1) {
                _newScrollAmount = _newScrollAmount + ((CURRENT_THUMB_INDEX - _newScrollAmount) - 1);
            }

            _newOffset = _currentOffset + (THUMB_WIDTH * _newScrollAmount);
            if (THUMB_BORDER_SIZE > 0) {
                _newOffset = _newOffset + (THUMB_BORDER_SIZE * (_newScrollAmount * 2));
            }
            if (THUMB_SELECTED_BORDER_SIZE > 0) {
                _newOffset = _newOffset + (THUMB_SELECTED_BORDER_SIZE * (_newScrollAmount * 2));
            }

            if (_newOffset <= 0) {
                if (_currentOffset > (_origOffset - (THUMB_WIDTH * _newScrollAmount))) {
                    if (IS_SCROLLING == false) {
                        NEW_REVERSE_OFFSET = _newOffset;
                        moveScrollerRight();
                    }
                }
            }
        }
    };
    this.scrollForward = function () {
        if (this.isScrollable() && IS_SCROLLING == false) {
            _origOffset = parseInt(_imageScrollerChildDivID.style.left);
            _currentOffset = parseInt(_imageScrollerChildDivID.style.left);

            _newScrollAmount = iImageScrollAmount;
            if (((CURRENT_THUMB_INDEX + _newScrollAmount) + (iNumOfThumbsShown - 1)) > iNumOfRowImages) {
                _newScrollAmount = _newScrollAmount - (((CURRENT_THUMB_INDEX + _newScrollAmount) + (iNumOfThumbsShown - 1)) - iNumOfRowImages);
            }

            _newOffset = _currentOffset - (THUMB_WIDTH * _newScrollAmount);
            if (THUMB_BORDER_SIZE > 0) {
                _newOffset = _newOffset - (_newScrollAmount * (THUMB_BORDER_SIZE * 2));
            }
            if (THUMB_SELECTED_BORDER_SIZE > 0) {
                _newOffset = _newOffset - (_newScrollAmount * (THUMB_SELECTED_BORDER_SIZE * 2));
            }

            if (IS_SCROLLING == false && _newOffset >= MAX_REVERSE_OFFSET) {
                NEW_FORWARD_OFFSET = _newOffset;
                moveScrollerLeft();
            }
        }
    };
    this.scrollEnd = function () {
        if (this.isScrollable() && IS_SCROLLING == false) {
            NEW_FORWARD_OFFSET = MAX_REVERSE_OFFSET;
            moveScrollerLeft();
        }
    };
    this.scrollBegin = function () {
        if (this.isScrollable() && IS_SCROLLING == false) {
            NEW_REVERSE_OFFSET = 0;
            moveScrollerRight();
        }
    };
    this.changeSelected = function (obj) {
        for (i = 0; i < iNumOfImages; i++) {
            if (obj.id == "ScrollLayout_" + this.id + "_img_" + i) {
                getElem("ScrollLayout_" + this.id + "_indiv_" + i).style.backgroundColor = THUMB_SELECTED_COLOR;
                if (iEnableThumbTitle) {
                    getElem("ScrollLayout_" + this.id + "_lbl_" + i).style.color = "#FFFFFF";
                }
                CURRENT_SELECTED_IMG = obj;
            }
            else {
                getElem("ScrollLayout_" + this.id + "_indiv_" + i).style.backgroundColor = "#FFFFFF";
                if (iEnableThumbTitle) {
                    getElem("ScrollLayout_" + this.id + "_lbl_" + i).style.color = "#000000";
                }
            }
        }
    };
    this.changeSelectedByImageName = function (name) {
        var oImage;
        for (i = 0; i < iNumOfImages; i++) {
            oImage = getElem("ScrollLayout_" + this.id + "_img_" + i);
            if (oImage.name == name) {
                this.changeSelected(oImage);
                break;
            }
        }
    };
    this.changeSelectedByValue = function (value) {
        var oImage;
        for (i = 0; i < iNumOfImages; i++) {
            oImage = getElem("ScrollLayout_" + this.id + "_img_" + i);
            if (oImage.value == value) {
                this.changeSelected(oImage);
                break;
            }
        }
    };
    this.changeSelectedByIndex = function (index) {
        var oImage = getElem("ScrollLayout_" + this.id + "_img_" + index);
        if (!(oImage == null)) {
            this.changeSelected(oImage);
        }
    };
    this.getSelectedImage = function () {
        return CURRENT_SELECTED_IMG;
    };
    this.clearSelectedImage = function () {
        for (i = 0; i < iNumOfImages; i++) {
            getElem("ScrollLayout_" + this.id + "_indiv_" + i).style.backgroundColor = "#FFFFFF";
            if (iEnableThumbTitle) {
                getElem("ScrollLayout_" + this.id + "_lbl_" + i).style.color = "#000000";
            }
        }
    };
    function moveScrollerRight() {
        _ElementObj = _imageScrollerChildDivID;
        _currentOffset = parseInt(_ElementObj.style.left);
        if (_currentOffset < NEW_REVERSE_OFFSET && (_currentOffset + iSmoothSlideAmount) <= NEW_REVERSE_OFFSET) {
            IS_SCROLLING = true;
            _ElementObj.style.left = _currentOffset + iSmoothSlideAmount + "px";
            moveTimer = window.setTimeout(moveScrollerRight, iSmoothSlideInterval);
        }
        else if (_currentOffset < NEW_REVERSE_OFFSET && (_currentOffset + 5) <= NEW_REVERSE_OFFSET) {
            IS_SCROLLING = true;
            _ElementObj.style.left = _currentOffset + 5 + "px";
            moveTimer = window.setTimeout(moveScrollerRight, iSmoothSlideInterval);
        }
        else if (_currentOffset < NEW_REVERSE_OFFSET) {
            IS_SCROLLING = true;
            _ElementObj.style.left = _currentOffset + 1 + "px";
            moveTimer = window.setTimeout(moveScrollerRight, iSmoothSlideInterval);
        }
        else {
            IS_SCROLLING = false;
            CURRENT_THUMB_INDEX = CURRENT_THUMB_INDEX - _newScrollAmount;
            window.clearTimeout(moveTimer);
        }
    };
    function moveScrollerLeft() {
        _ElementObj = _imageScrollerChildDivID;
        _currentOffset = parseInt(_ElementObj.style.left);
        if (_currentOffset > NEW_FORWARD_OFFSET && (_currentOffset - iSmoothSlideAmount) >= NEW_FORWARD_OFFSET) {
            IS_SCROLLING = true;
            _ElementObj.style.left = _currentOffset - iSmoothSlideAmount + "px";
            moveTimer = window.setTimeout(moveScrollerLeft, iSmoothSlideInterval);
        }
        else if (_currentOffset > NEW_FORWARD_OFFSET && (_currentOffset - 5) >= NEW_FORWARD_OFFSET) {
            IS_SCROLLING = true;
            _ElementObj.style.left = _currentOffset - 5 + "px";
            moveTimer = window.setTimeout(moveScrollerLeft, iSmoothSlideInterval);
        }
        else if (_currentOffset > NEW_FORWARD_OFFSET) {
            IS_SCROLLING = true;
            _ElementObj.style.left = _currentOffset - 1 + "px";
            moveTimer = window.setTimeout(moveScrollerLeft, iSmoothSlideInterval);
        }
        else {
            IS_SCROLLING = false;
            CURRENT_THUMB_INDEX = CURRENT_THUMB_INDEX + _newScrollAmount;
            window.clearTimeout(moveTimer);
        }
    };
    function getElem(_elemID) {
        return document.getElementById(_elemID);
    };
};