var imgScrollArrowLeft = new Image();
var imgScrollArrowRight = new Image();
var imgScrollDisabledArrowLeft = new Image();
var imgScrollDisabledArrowRight = new Image();

function ScrollPanel(scrollStep, varName,
                     cellWidth, delimiterWidth,
                     cellCount, cellsToView,
                     component,
                     componentLeftArrowImg,
                     componentRightArrowImg)
{
    this.varName = varName;
    // Компонент, который будет скроллиться
    this.component = component;
    // Шаг скроллинга
    this.scrollStep = scrollStep;
    // Количество ячеек в панели всего
    this.cellCount = cellCount;
    // Количество отображаемых ячеек
    this.cellsToView = cellsToView;
    // Ширина ячейки
    this.cellWidth = cellWidth;
    // Ширина разделителя между ячейками
    this.delimiterWidth = delimiterWidth;
    // Элемент - изображения стрелки скролла влево
    this.componentLeftArrowImg = componentLeftArrowImg;
    // Элемент - изображения стрелки скролла вправо
    this.componentRightArrowImg = componentRightArrowImg;

    // Текущее значение шага скроллинга
    this.scroll = 0;
    // Текущая позиция от левого края, начиная с которой отображается фрагмент
    this.currentPos = 0;
    // Следующая позиция с которой должен отображаться фрагмент
    this.nextPos = 0;
    // Позиция левого края панели относительно начального положения
    this.posLeft = 0;


    this.scrollLeft = function()
    {
        if (this.currentPos <= 0 || this.scroll != 0) return;
        this.scroll = -this.scrollStep;
        this.nextPos = this.currentPos - this.cellWidth - this.delimiterWidth;
        this.runScroll();
    };

    this.scrollRight = function()
    {
        if (this.nextPos >= this.maxPos() || this.scroll != 0)
            return;
        this.scroll = this.scrollStep;
        this.nextPos = this.currentPos + this.cellWidth + this.delimiterWidth;
        this.runScroll();
    };

    this.componentWidth = function()
    {
        if (this.componentWidthPx == undefined)
        {
            this.componentWidthPx = this.cellCount * this.cellWidth + (this.cellCount - 1) * this.delimiterWidth;
        }
        return this.componentWidthPx;
    };

    this.windowWidth = function()
    {
        if (this.windowWidthPx == undefined)
        {
            this.windowWidthPx = this.cellsToView * this.cellWidth + (this.cellsToView - 1) * this.delimiterWidth;
        }
        return this.windowWidthPx;
    };

    this.maxPos = function()
    {
        if (this.maxPosPx == undefined)
            this.maxPosPx = this.componentWidth() - this.windowWidth();
        return this.maxPosPx;
    };

    this.runScroll = function ()
    {
        if (this.scroll == 0) return;
        if (this.currentPos >= this.nextPos && this.scroll > 0)
        {
            this.scroll = 0;
            return;
        }
        if (this.currentPos <= this.nextPos && this.scroll < 0)
        {
            this.scroll = 0;
            return;
        }
        var oldPos = this.currentPos;
        this.currentPos += this.scroll;
        if (this.currentPos > this.nextPos && this.scroll > 0)
        {
            this.scroll = 0;
            this.currentPos = this.nextPos;
        }
        if (this.currentPos <= this.nextPos && this.scroll < 0)
        {
            this.scroll = 0;
            this.currentPos = this.nextPos;
        }
        var rightBorderPos = this.windowWidth() + this.currentPos;
        this.component.style.clip = "rect(0px, " + rightBorderPos + "px, 149px, " + this.currentPos + "px)";
        this.posLeft -= (this.currentPos - oldPos);
        this.component.style.left = this.posLeft + "px";
        if (this.currentPos == 0)
            this.componentLeftArrowImg.src = imgScrollDisabledArrowLeft.src;
        else
            this.componentLeftArrowImg.src = imgScrollArrowLeft.src;
        if (this.currentPos >= this.maxPos())
            this.componentRightArrowImg.src = imgScrollDisabledArrowRight.src;
        else
            this.componentRightArrowImg.src = imgScrollArrowRight.src;
        var action = this.varName + '.runScroll()';
        setTimeout(action, 1);
    };
}