var imgScrollArrowLeft = new Image();
var imgScrollArrowRight = new Image();
var defaultScreenWidth = 800;

function correctWidth(source) {
defaultScreenWidth = 800;
var currWidth = document.body.clientWidth;
if(defaultScreenWidth == currWidth || currWidth <= 1024) {
return source;
}
if(currWidth > defaultScreenWidth && currWidth <= 1400){
defaultScreenWidth = 1000;
} else if(currWidth > 1400 && currWidth <= 1700){
defaultScreenWidth = 930;
} else {
defaultScreenWidth = 890;
}
var ratio = currWidth / defaultScreenWidth;
var result = source * ratio;
return result;
} 

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;
    // Элемент - изображения стрелки скролла влево
    imgScrollArrowLeft = componentLeftArrowImg;
    // Элемент - изображения стрелки скролла вправо
    imgScrollArrowRight = 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";

        var action = this.varName + '.runScroll()';
        setTimeout(action, 1);

        if (this.currentPos == 0) {
            imgScrollArrowLeft.style.backgroundColor = "#eef2f4";
            imgScrollArrowLeft.style.cursor = "text";
        }
        else {
            imgScrollArrowLeft.style.backgroundColor = "#c2e8cd";
            imgScrollArrowLeft.style.cursor = "pointer";
        }
        if (this.currentPos >= this.maxPos()) {
            imgScrollArrowRight.style.backgroundColor = "#eef2f4";
            imgScrollArrowRight.style.cursor = "text";
        }
        else {
            imgScrollArrowRight.style.backgroundColor = "#c2e8cd";
            imgScrollArrowRight.style.cursor = "pointer";
        }

    };
}