"use strict";

(	/**
* @param {Window} window
* @param {undefined} undefined
*/
function (window, undefined) {
var debug = false;

var ScrollArrowType = {
    ARROW_TOP:0,
    ARROW_RIGHT:1,
    ARROW_BOTTOM:2,
    ARROW_LEFT:3
};
var ScrollOverType = {
    NONE:0,
    OVER:1,
    ACTIVE:2,
    STABLE:3,
    LAYER:4
};

var ArrowStatus = {
    upLeftArrowHover_downRightArrowNonActive:0,
    upLeftArrowActive_downRightArrowNonActive:1,
    upLeftArrowNonActive_downRightArrowHover:2,
    upLeftArrowNonActive_downRightArrowActive:3,
    upLeftArrowNonActive_downRightArrowNonActive:4,
    arrowHover:5
};

function GetClientWidth( elem ) {
    var _w = elem.clientWidth;
    if ( 0 != _w )
        return _w;

    var _string_w = "" + elem.style.width;
    if ( -1 < _string_w.indexOf( "%" ) )
        return 0;

    var _intVal = parseInt( _string_w );
    if ( !isNaN( _intVal ) && 0 < _intVal )
        return _intVal;

    return 0;
}
function GetClientHeight( elem ) {
    var _w = elem.clientHeight;
    if ( 0 != _w )
        return _w;

    var _string_w = "" + elem.style.height;
    if ( -1 < _string_w.indexOf( "%" ) )
        return 0;

    var _intVal = parseInt( _string_w );
    if ( !isNaN( _intVal ) && 0 < _intVal )
        return _intVal;

    return 0;
}

function CArrowDrawer( settings ) {
    // размер квадратика в пикселах
    this.Size = 16;
    this.SizeW = 16;
    this.SizeH = 16;

    this.SizeNaturalW = this.SizeW;
    this.SizeNaturalH = this.SizeH;

    this.IsRetina = false;

    // просто рисовать - неправильно. рисуется с антиалиазингом - и получается некрасиво
    /*this.ColorGradStart = {R:69, G:70, B:71};
     this.ColorGradEnd = {R:116, G:117, B:118};*/

    function HEXTORGB( colorHEX ) {
        return {
            R:parseInt( colorHEX.substring( 1, 3 ), 16 ),
            G:parseInt( colorHEX.substring( 3, 5 ), 16 ),
            B:parseInt( colorHEX.substring( 5, 7 ), 16 )
        }
    }

    this.ColorGradStart = [];
    this.ColorGradEnd = [];

    this.ColorGradStart[ScrollOverType.NONE] = HEXTORGB( settings && settings.arrowColor ? settings.arrowColor : "#888888" );
    this.ColorGradEnd[ScrollOverType.NONE] = HEXTORGB( settings && settings.arrowColor ? settings.arrowColor : "#888888" );

    this.ColorGradStart[ScrollOverType.STABLE] = HEXTORGB( settings && settings.arrowStableColor ? settings.arrowStableColor : "#888888" );
    this.ColorGradEnd[ScrollOverType.STABLE] = HEXTORGB( settings && settings.arrowStableColor ? settings.arrowStableColor : "#888888" );

    this.ColorGradStart[ScrollOverType.OVER] = HEXTORGB( settings && settings.arrowOverColor ? settings.arrowOverColor : "#f1f1f1" );
    this.ColorGradEnd[ScrollOverType.OVER] = HEXTORGB( settings && settings.arrowOverColor ? settings.arrowOverColor : "#f1f1f1" );

    this.ColorGradStart[ScrollOverType.ACTIVE] = HEXTORGB( settings && settings.arrowActiveColor ? settings.arrowActiveColor : "#f1f1f1" );
    this.ColorGradEnd[ScrollOverType.ACTIVE] = HEXTORGB( settings && settings.arrowActiveColor ? settings.arrowActiveColor : "#f1f1f1" );

    this.ColorBorderNone = settings && settings.arrowBorderColor ? settings.arrowBorderColor : "#cfcfcf";
    this.ColorBorderStable = settings && settings.arrowStableBorderColor ? settings.arrowStableBorderColor : "#cfcfcf";
    this.ColorBorderOver = settings && settings.arrowOverBorderColor ? settings.arrowOverBorderColor : "#cfcfcf";
    this.ColorBorderActive = settings && settings.arrowActiveBorderColor ? settings.arrowActiveBorderColor : "#848484";

    this.ColorBackNone = settings && settings.arrowBackgroundColor ? settings.arrowBackgroundColor : "#F1F1F1";
    this.ColorBackStable = settings && settings.arrowStableBackgroundColor ? settings.arrowStableBackgroundColor : "#F1F1F1";
    this.ColorBackOver = settings && settings.arrowOverBackgroundColor ? settings.arrowOverBackgroundColor : "#cfcfcf";
    this.ColorBackActive = settings && settings.arrowActiveBackgroundColor ? settings.arrowActiveBackgroundColor : "#848484";

    // вот такие мега настройки для кастомизации)
    this.IsDrawBorderInNoneMode = false;
    this.IsDrawBorders = true

    // имя - направление стрелки
    this.ImageLeft = null;
    this.ImageTop = null;
    this.ImageRight = null;
    this.ImageBottom = null;

    this.IsNeedInvertOnActive = settings && settings.isNeedInvertOnActive ? settings.isNeedInvertOnActive : false;

    this.lastArrowStatus1 = -1;
    this.lastArrowStatus2 = -1;
    this.startColorFadeInOutStart1 = {R:-1,G:-1,B:-1};
    this.startColorFadeInOutStart2 = {R:-1,G:-1,B:-1};

    this.fadeInTimeoutFirst = -1;
    this.fadeOutTimeoutFirst = -1;

    this.fadeInTimeout1 = -1;
    this.fadeOutTimeout1 = -1;
    this.fadeInTimeout2 = -1;
    this.fadeOutTimeout2 = -1;


    this.fadeInActive1 = false;
    this.fadeOutActive1 = false;

    this.fadeInActive2 = false;
    this.fadeOutActive2 = false;

    this.fadeInFadeOutDelay = settings.fadeInFadeOutDelay ? settings.fadeInFadeOutDelay : 30;

}
CArrowDrawer.prototype.InitSize = function ( sizeW, sizeH, is_retina ) {
    if ( ( sizeH == this.SizeH || sizeW == this.SizeW ) && is_retina == this.IsRetina && null != this.ImageLeft )
        return;

    this.SizeW = Math.max( sizeW, 1 );
    this.SizeH = Math.max( sizeH, 1 );
    this.IsRetina = is_retina;

    this.SizeNaturalW = this.SizeW;
    this.SizeNaturalH = this.SizeH;

    if ( this.IsRetina ) {
        this.SizeW <<= 1;
        this.SizeH <<= 1;

        this.SizeNaturalW <<= 1;
        this.SizeNaturalH <<= 1;
    }

    this.ImageLeft = [document.createElement( 'canvas' ), document.createElement( 'canvas' ), document.createElement( 'canvas' ), document.createElement( 'canvas' )];
    this.ImageTop = [document.createElement( 'canvas' ), document.createElement( 'canvas' ), document.createElement( 'canvas' ), document.createElement( 'canvas' )];
    this.ImageRight = [document.createElement( 'canvas' ), document.createElement( 'canvas' ), document.createElement( 'canvas' ), document.createElement( 'canvas' )];
    this.ImageBottom = [document.createElement( 'canvas' ), document.createElement( 'canvas' ), document.createElement( 'canvas' ), document.createElement( 'canvas' )];

    this.ImageLeft[ScrollOverType.NONE].width = this.SizeW;
    this.ImageLeft[ScrollOverType.NONE].height = this.SizeH;
    this.ImageLeft[ScrollOverType.STABLE].width = this.SizeW;
    this.ImageLeft[ScrollOverType.STABLE].height = this.SizeH;
    this.ImageLeft[ScrollOverType.OVER].width = this.SizeW;
    this.ImageLeft[ScrollOverType.OVER].height = this.SizeH;
    this.ImageLeft[ScrollOverType.ACTIVE].width = this.SizeW;
    this.ImageLeft[ScrollOverType.ACTIVE].height = this.SizeH;

    this.ImageTop[ScrollOverType.NONE].width = this.SizeW;
    this.ImageTop[ScrollOverType.NONE].height = this.SizeH;
    this.ImageTop[ScrollOverType.STABLE].width = this.SizeW;
    this.ImageTop[ScrollOverType.STABLE].height = this.SizeH;
    this.ImageTop[ScrollOverType.OVER].width = this.SizeW;
    this.ImageTop[ScrollOverType.OVER].height = this.SizeH;
    this.ImageTop[ScrollOverType.ACTIVE].width = this.SizeW;
    this.ImageTop[ScrollOverType.ACTIVE].height = this.SizeH;

    this.ImageRight[ScrollOverType.NONE].width = this.SizeW;
    this.ImageRight[ScrollOverType.NONE].height = this.SizeH;
    this.ImageRight[ScrollOverType.STABLE].width = this.SizeW;
    this.ImageRight[ScrollOverType.STABLE].height = this.SizeH;
    this.ImageRight[ScrollOverType.OVER].width = this.SizeW;
    this.ImageRight[ScrollOverType.OVER].height = this.SizeH;
    this.ImageRight[ScrollOverType.ACTIVE].width = this.SizeW;
    this.ImageRight[ScrollOverType.ACTIVE].height = this.SizeH;

    this.ImageBottom[ScrollOverType.NONE].width = this.SizeW;
    this.ImageBottom[ScrollOverType.NONE].height = this.SizeH;
    this.ImageBottom[ScrollOverType.STABLE].width = this.SizeW;
    this.ImageBottom[ScrollOverType.STABLE].height = this.SizeH;
    this.ImageBottom[ScrollOverType.OVER].width = this.SizeW;
    this.ImageBottom[ScrollOverType.OVER].height = this.SizeH;
    this.ImageBottom[ScrollOverType.ACTIVE].width = this.SizeW;
    this.ImageBottom[ScrollOverType.ACTIVE].height = this.SizeH;


    var len = 6;
    if ( this.SizeH < 6 )
        return;

    if (this.IsRetina)
        len <<= 1;

//        else (this.SizeH > 12)
//        len = this.Size - 8;

    // теперь делаем нечетную длину
    if ( 0 == (len & 1) )
        len += 1;

    var countPart = (len + 1) >> 1,
        plusColor, _data, px,
        _x = ((this.SizeW - len) >> 1),
        _y = this.SizeH - ((this.SizeH - countPart) >> 1),
        _radx = _x + (len >> 1),
        _rady = _y - (countPart >> 1),
        ctx_lInactive, ctx_tInactive, ctx_rInactive, ctx_bInactive,
        r, g, b;

    for ( var index = 0; index < this.ImageTop.length; index++ ) {
        var __x = _x, __y = _y, _len = len;
        r = this.ColorGradStart[index].R;
        g = this.ColorGradStart[index].G;
        b = this.ColorGradStart[index].B;

        ctx_tInactive = this.ImageTop[index].getContext( '2d' );
        ctx_lInactive = this.ImageLeft[index].getContext( '2d' );
        ctx_rInactive = this.ImageRight[index].getContext( '2d' );
        ctx_bInactive = this.ImageBottom[index].getContext( '2d' );

        plusColor = (this.ColorGradEnd[index].R - this.ColorGradStart[index].R) / countPart;

        _data = ctx_tInactive.createImageData( this.SizeW, this.SizeH );
        px = _data.data;

        while ( _len > 0 ) {
            var ind = 4 * ( this.SizeW * __y + __x );
            for ( var i = 0; i < _len; i++ ) {
                px[ind++] = r;
                px[ind++] = g;
                px[ind++] = b;
                px[ind++] = 255;
            }

            r = (r + plusColor) >> 0;
            g = (g + plusColor) >> 0;
            b = (b + plusColor) >> 0;

            __x += 1;
            __y -= 1;
            _len -= 2;
        }

        ctx_tInactive.putImageData( _data, 0, -1 );

        ctx_lInactive.translate( _radx, _rady + 1 );
        ctx_lInactive.rotate( -Math.PI / 2 );
        ctx_lInactive.translate( -_radx, -_rady );
        ctx_lInactive.drawImage( this.ImageTop[index], 0, 0 );

        ctx_rInactive.translate( _radx + 1, _rady );
        ctx_rInactive.rotate( Math.PI / 2 );
        ctx_rInactive.translate( -_radx, -_rady );
        ctx_rInactive.drawImage( this.ImageTop[index], 0, 0 );

        ctx_bInactive.translate( _radx + 1, _rady + 1 );
        ctx_bInactive.rotate( Math.PI );
        ctx_bInactive.translate( -_radx, -_rady );
        ctx_bInactive.drawImage( this.ImageTop[index], 0, 0 );

    }

    if ( this.IsRetina ) {
        this.SizeW >>= 1;
        this.SizeH >>= 1;
    }
};
CArrowDrawer.prototype.drawArrow = function ( type, mode, ctx, w, h ) {

    ctx.beginPath();

    var startColorFadeIn = _HEXTORGB_( this.ColorBackNone ),
        startColorFadeOut = _HEXTORGB_( this.ColorBackOver ),
        that = this,
        img = this.ImageTop[mode],
        x = 0, y = 0, is_vertical = true,
        bottomRightDelta = 1,
        xDeltaIMG = 0, yDeltaIMG = 0, xDeltaBORDER = 0.5, yDeltaBORDER = 1.5,
        tempIMG1 = document.createElement( 'canvas' ),
        tempIMG2 = document.createElement( 'canvas' );

    tempIMG1.width = this.SizeNaturalW;
    tempIMG1.height = this.SizeNaturalH;
    tempIMG2.width = this.SizeNaturalW;
    tempIMG2.height = this.SizeNaturalH;

    var ctx1 = tempIMG1.getContext('2d'),
        ctx2 = tempIMG2.getContext('2d');

    if (this.IsRetina)
    {
        ctx1.setTransform(2, 0, 0, 2, 0, 0);
        ctx2.setTransform(2, 0, 0, 2, 0, 0);
    }

    function fadeIn(){

        ctx1.fillStyle = "rgb(" + that.startColorFadeInOutStart1.R + "," +
                                 that.startColorFadeInOutStart1.G + "," +
                                 that.startColorFadeInOutStart1.B + ")";

        startColorFadeIn.R -= 2;
        startColorFadeIn.G -= 2;
        startColorFadeIn.B -= 2;

        ctx1.rect( x + xDeltaBORDER, y + yDeltaBORDER, strokeW, strokeH );
        ctx1.fill();

        if ( that.IsDrawBorders ) {
            ctx.strokeStyle = that.ColorBorderOver;
            ctx.stroke();
        }

        ctx1.drawImage( img, x + xDeltaIMG, y + yDeltaIMG, that.SizeW, that.SizeH );

        if ( startColorFadeIn.R >= 207 ) {
            that.startColorFadeInOutStart1 = startColorFadeIn;
            that.fadeInTimeout = setTimeout( fadeIn, that.fadeInFadeOutDelay );
        }
        else {
            clearTimeout( that.fadeInTimeout );
            that.fadeInTimeout = null;
            that.fadeInActiveFirst = false;
            startColorFadeIn.R += 2;
            startColorFadeIn.G += 2;
            startColorFadeIn.B += 2;
            that.startColorFadeInOutStart1 = startColorFadeIn;
        }

    }

    function fadeOut(){

        ctx.fillStyle = "rgb(" + that.startColorFadeInOutStart1.R + "," +
                                 that.startColorFadeInOutStart1.G + "," +
                                 that.startColorFadeInOutStart1.B + ")";

        startColorFadeOut.R += 2;
        startColorFadeOut.G += 2;
        startColorFadeOut.B += 2;

        ctx.rect( x + xDeltaBORDER, y + yDeltaBORDER, strokeW, strokeH );
        ctx.fill();

        if ( that.IsDrawBorders ) {
            ctx.strokeStyle = that.ColorBorderOver;
            ctx.stroke();
        }

        ctx.drawImage( img, x + xDeltaIMG, y + yDeltaIMG, that.SizeW, that.SizeH );

        if ( startColorFadeOut.R <= 241 ) {
            that.startColorFadeInOutStart1 = startColorFadeOut;
            that.fadeOutTimeout = setTimeout( fadeOut, that.fadeInFadeOutDelay );
        }
        else {
            clearTimeout( that.fadeOutTimeout );
            that.fadeOutTimeout = null;
            that.fadeOutActiveFirst = false;
            startColorFadeOut.R -= 2;
            startColorFadeOut.G -= 2;
            startColorFadeOut.B -= 2;
            that.startColorFadeInOutStart1 = startColorFadeOut;
        }

    }

    if ( mode === null || mode === undefined ) {
        mode = ScrollOverType.NONE;
    }

    switch ( type ) {
        case ScrollArrowType.ARROW_LEFT:
        {
            x = 1;
            y = -1;
            is_vertical = false;
            img = this.ImageLeft[mode];
            break;
        }
        case ScrollArrowType.ARROW_RIGHT:
        {
            is_vertical = false;
            x = w - this.SizeW - bottomRightDelta;
            y = -1;
            img = this.ImageRight[mode];
            break;
        }
        case ScrollArrowType.ARROW_BOTTOM:
        {
            y = h - this.SizeH - bottomRightDelta - 1;
            img = this.ImageBottom[mode];
            break;
        }
        default:{
            y = 0;
            break;
        }
    }

    ctx.lineWidth = 1;
    var strokeW = is_vertical ? this.SizeW - 1 : this.SizeW - 1;
    var strokeH = is_vertical ? this.SizeH - 1 : this.SizeH - 1;

    switch ( mode ) {
        case ScrollOverType.NONE:
        {
            if ( this.lastArrowStatus1 == ScrollOverType.OVER ) {

                clearTimeout( this.fadeInTimeout );
                this.fadeInTimeout = null;
                clearTimeout( this.fadeOutTimeout );
                this.fadeOutTimeout = null;

                this.lastArrowStatus1 = mode;
                this.startColorFadeInOutStart1 = this.startColorFadeInOutStart1.R < 0 ? startColorFadeOut : this.startColorFadeInOutStart1;
                this.fadeOutActiveFirst = true;
                fadeOut();
            }
            else{
                ctx.fillStyle = this.ColorBackNone;
                ctx.fillRect( x + 0, y + 0, strokeW + xDeltaBORDER + 1, strokeH + yDeltaBORDER + 1 );
                ctx.beginPath();
                ctx.drawImage( img, x + xDeltaIMG, y + yDeltaIMG, this.SizeW, this.SizeH );
                if ( this.IsDrawBorders ) {
                    ctx.strokeStyle = this.ColorBorderNone;
                    ctx.rect( x + xDeltaBORDER, y + yDeltaBORDER, strokeW, strokeH );
                    ctx.stroke();
                }
            }
            break;
        }
        case ScrollOverType.STABLE:
        {
            if ( this.lastArrowStatus1 == ScrollOverType.OVER ) {

                clearTimeout( this.fadeInTimeout );
                this.fadeInTimeout = null;
                clearTimeout( this.fadeOutTimeout );
                this.fadeOutTimeout = null;

                this.lastArrowStatus1 = mode;
                this.startColorFadeInOutStart1 = this.startColorFadeInOutStart1.R < 0 ? startColorFadeOut : this.startColorFadeInOutStart1;
                this.fadeOutActiveFirst = true;
                fadeOut();
            }
            else{
                ctx.fillStyle = this.ColorBackStable;
                ctx.fillRect( x + 0, y + 0, strokeW + xDeltaBORDER + 1, strokeH + yDeltaBORDER + 1 );
                ctx.beginPath();
                ctx.drawImage( img, x + xDeltaIMG, y + yDeltaIMG, this.SizeW, this.SizeH );
                ctx.strokeStyle = this.ColorBackStable;
                if ( this.IsDrawBorders ) {
                    ctx.strokeStyle = this.ColorBorderStable;
                    ctx.rect( x + xDeltaBORDER, y + yDeltaBORDER, strokeW, strokeH );
                    ctx.stroke();
                }
            }
            break;
        }
        case ScrollOverType.OVER:
        {

            if ( this.lastArrowStatus1 == ScrollOverType.NONE || this.lastArrowStatus1 == ScrollOverType.STABLE ) {

                clearTimeout( this.fadeInTimeout );
                this.fadeInTimeout = null;
                clearTimeout( this.fadeOutTimeout );
                this.fadeOutTimeout = null;

                this.lastArrowStatus1 = mode;
                this.startColorFadeInOutStart1 = this.startColorFadeInOutStart1.R < 0 ? startColorFadeIn : this.startColorFadeInOutStart1;
                this.fadeInActiveFirst = true;
                fadeIn();
            }
            else{
                ctx.beginPath();
                ctx.fillStyle = this.ColorBackOver;

                ctx.fillRect( x + xDeltaBORDER - .5, y + yDeltaBORDER - .5, strokeW + 1, strokeH + 1 );
                ctx.drawImage( img, x + xDeltaIMG, y + yDeltaIMG, this.SizeW, this.SizeH );
                if ( this.IsDrawBorders ) {
                    ctx.strokeStyle = this.ColorBorderOver;
                    ctx.rect( x + xDeltaBORDER, y + yDeltaBORDER, strokeW, strokeH );
                    ctx.stroke();
                }

            }
            break;
        }
        case ScrollOverType.ACTIVE:
        {
            ctx.fillStyle = this.ColorBackActive;
            ctx.fillRect( x + 0, y + 0, strokeW + xDeltaBORDER + 1, strokeH + yDeltaBORDER + 1 );
            ctx.beginPath();
            ctx.fillStyle = this.ColorBackActive;
            ctx.fillRect( x + xDeltaBORDER - .5, y + yDeltaBORDER - .5, strokeW + 1, strokeH + 1 );

            if ( !this.IsNeedInvertOnActive ) {
                ctx.drawImage( img, x + xDeltaIMG, y + yDeltaIMG, this.SizeW, this.SizeH );
            }
            else {
                // slow method
                var _ctx = img.getContext( "2d" );

                var _data = _ctx.getImageData( 0, 0, this.SizeNaturalW, this.SizeNaturalH );
                var _data2 = _ctx.getImageData( 0, 0, this.SizeNaturalW, this.SizeNaturalH );

                var _len = 4 * this.SizeNaturalW * this.SizeNaturalH;
                for ( var i = 0; i < _len; i += 4 ) {
                    if ( _data.data[i + 3] == 255 ) {
                        _data.data[i] = 255;// - _data.data[i];
                        _data.data[i + 1] = 255;// - _data.data[i + 1];
                        _data.data[i + 2] = 255;// - _data.data[i + 2];
                    }
                }

                _ctx.putImageData( _data, 0, 0 );
                ctx.drawImage( img, x + xDeltaIMG, y + yDeltaIMG, this.SizeW, this.SizeH );

                for ( var i = 0; i < _len; i += 4 ) {
                    if ( _data.data[i + 3] == 255 ) {
                        _data.data[i] = 255 - _data.data[i];
                        _data.data[i + 1] = 255 - _data.data[i + 1];
                        _data.data[i + 2] = 255 - _data.data[i + 2];
                    }
                }
                _ctx.putImageData( _data2, 0, 0 );

                _data = null;
                _data2 = null;
            }
            if ( this.IsDrawBorders ) {
                ctx.strokeStyle = this.ColorBorderActive;
                ctx.rect( x + xDeltaBORDER, y + yDeltaBORDER, strokeW, strokeH );
                ctx.stroke();
            }
            break;
        }
        default:{
            break;
        }
    }

    this.lastArrowStatus1 = mode;

};
CArrowDrawer.prototype.drawTopLeftArrow = function(type,mode,ctx,w,h){

    clearTimeout( this.fadeInTimeout1 );
    this.fadeInTimeout1 = null;
    clearTimeout( this.fadeOutTimeout1 );
    this.fadeOutTimeout1 = null;

    ctx.beginPath();

    var startColorFadeIn = this.startColorFadeInOutStart1.R < 0 ? _HEXTORGB_( this.ColorBackNone ) :  this.startColorFadeInOutStart1,
        startColorFadeOut = this.startColorFadeInOutStart1.R < 0 ? _HEXTORGB_( this.ColorBackOver ) : this.startColorFadeInOutStart1,
        that = this,
        img1 = this.ImageTop[mode],
        x1 = 0, y1 = 0,
        is_vertical = true,
        xDeltaIMG = 0, yDeltaIMG = 0, xDeltaBORDER = 0.5, yDeltaBORDER = 1.5,
        tempIMG1 = document.createElement( 'canvas' );

    tempIMG1.width = this.SizeNaturalW;
    tempIMG1.height = this.SizeNaturalH;

    var ctx1 = tempIMG1.getContext('2d');
    if (this.IsRetina)
    {
        ctx1.setTransform(2, 0, 0, 2, 0, 0);
    }

    function fadeIn(){

        var ctx_piperImg, px, _len;

        ctx1.fillStyle = "rgb(" + that.startColorFadeInOutStart1.R + "," +
                                  that.startColorFadeInOutStart1.G + "," +
                                  that.startColorFadeInOutStart1.B + ")";

        startColorFadeIn.R -= 2;
        startColorFadeIn.G -= 2;
        startColorFadeIn.B -= 2;

        ctx1.rect( 0.5, 1.5, strokeW, strokeH );
        ctx1.fill();

        if ( that.IsDrawBorders ) {
            ctx1.strokeStyle = that.ColorBorderOver;
            ctx1.stroke();
        }

        ctx_piperImg = img1.getContext( '2d' );
        _data = ctx_piperImg.getImageData( 0, 0, img1.width, img1.height );
        px = _data.data;

        _len = px.length;

        for ( var i = 0; i < _len; i += 4 ) {
            if ( px[i + 3] == 255 ) {
                px[i] += 4;
                px[i + 1] += 4;
                px[i + 2] += 4;
            }
        }
        ctx_piperImg.putImageData( _data, 0, 0 );

        ctx1.drawImage( img1, 0, 0, that.SizeW, that.SizeH );

        if ( startColorFadeIn.R >= 207 ) {
            that.startColorFadeInOutStart1 = startColorFadeIn;
            ctx.drawImage(tempIMG1,x1 + xDeltaIMG,y1 + yDeltaIMG, that.SizeW, that.SizeH);
            that.fadeInTimeout1 = setTimeout( fadeIn, that.fadeInFadeOutDelay );
        }
        else {
            clearTimeout( that.fadeInTimeout1 );
            that.fadeInTimeout1 = null;
            that.fadeInActive1 = false;
            startColorFadeIn.R += 2;
            startColorFadeIn.G += 2;
            startColorFadeIn.B += 2;
            that.startColorFadeInOutStart1 = startColorFadeIn;

            ctx_piperImg = img1.getContext( '2d' );
            _data = ctx_piperImg.getImageData( 0, 0, img1.width, img1.height );
            px = _data.data;

            _len = px.length;

            for ( var i = 0; i < _len; i += 4 ) {
                if ( px[i + 3] == 255 ) {
                    px[i] -= 4;
                    px[i + 1] -= 4;
                    px[i + 2] -= 4;
                }
            }
            ctx_piperImg.putImageData( _data, 0, 0 );
        }

    }

    function fadeOut(){

        var ctx_piperImg, px, _len;

        ctx1.fillStyle = "rgb(" + that.startColorFadeInOutStart1.R + "," +
                                  that.startColorFadeInOutStart1.G + "," +
                                  that.startColorFadeInOutStart1.B + ")";

        startColorFadeOut.R += 2;
        startColorFadeOut.G += 2;
        startColorFadeOut.B += 2;

        ctx1.rect( 0.5, 1.5, strokeW, strokeH  );
        ctx1.fill();

        if ( that.IsDrawBorders ) {
            ctx1.strokeStyle = that.ColorBorderOver;
            ctx1.stroke();
        }

        ctx_piperImg = img1.getContext( '2d' );
        _data = ctx_piperImg.getImageData( 0, 0, img1.width, img1.height );
        px = _data.data;

        _len = px.length;

        for ( var i = 0; i < _len; i += 4 ) {
            if ( px[i + 3] == 255 ) {
//                console.log("3 " + i + " " +  " " + px[i])
                px[i] -= 4;
                px[i + 1] -= 4;
                px[i + 2] -= 4;
            }
        }
        ctx_piperImg.putImageData( _data, 0, 0 );

        ctx1.drawImage( img1, 0, 0, that.SizeW, that.SizeH );

        if ( startColorFadeOut.R <= 241 ) {
            that.startColorFadeInOutStart1 = startColorFadeOut;
            ctx.drawImage(tempIMG1,x1 + xDeltaIMG,y1 + yDeltaIMG, that.SizeW, that.SizeH);
            that.fadeOutTimeout1 = setTimeout( fadeOut, that.fadeInFadeOutDelay );
        }
        else {
            clearTimeout( that.fadeOutTimeout1 );
            that.fadeOutTimeout1 = null;
            that.fadeOutActive1 = false;
            startColorFadeOut.R -= 2;
            startColorFadeOut.G -= 2;
            startColorFadeOut.B -= 2;
            that.startColorFadeInOutStart1 = startColorFadeOut;

            ctx_piperImg = img1.getContext( '2d' );
            _data = ctx_piperImg.getImageData( 0, 0, img1.width, img1.height );
            px = _data.data;

            _len = px.length;

            for ( var i = 0; i < _len; i += 4 ) {
                if ( px[i + 3] == 255 ) {
                    px[i] += 4;
                    px[i + 1] += 4;
                    px[i + 2] += 4;
                }
            }
            ctx_piperImg.putImageData( _data, 0, 0 );
        }

    }

    if ( mode === null || mode === undefined ) {
        mode = ScrollOverType.NONE;
    }

    switch ( type ) {
        case ScrollArrowType.ARROW_LEFT:
        {
            x1 = 1;
            y1 = -1;
            is_vertical = false;
            img1 = this.ImageLeft[mode];
            break;
        }
        default:
        {
            y1 = 0;
            img1 = this.ImageTop[mode];
            break;
        }
    }

    ctx.lineWidth = 1;
    var strokeW = is_vertical ? this.SizeW - 1 : this.SizeW - 1;
    var strokeH = is_vertical ? this.SizeH - 1 : this.SizeH - 1;

    switch ( mode ) {
        case ScrollOverType.NONE:
        {
            if ( this.lastArrowStatus1 == ScrollOverType.OVER ) {

                switch ( type ) {
                    case ScrollArrowType.ARROW_LEFT:
                    {
                        img1 = this.ImageLeft[ScrollOverType.STABLE];
                        break;
                    }
                    default:
                    {
                        img1 = this.ImageTop[ScrollOverType.STABLE];
                        break;
                    }
                }

                this.lastArrowStatus1 = mode;
                this.startColorFadeInOutStart1 = this.startColorFadeInOutStart1.R < 0 ? startColorFadeOut : this.startColorFadeInOutStart1;
                this.fadeOutActive1 = true;
                fadeOut();
            }
            else{

                if ( this.lastArrowStatus1 == ScrollOverType.ACTIVE ) {

                    var im, ctx_im, px, _data, c = this.ColorGradStart[ScrollOverType.STABLE];

                    switch ( type ) {
                        case ScrollArrowType.ARROW_LEFT:
                        {
                            im = this.ImageLeft[ScrollOverType.STABLE];
                            break;
                        }
                        default:
                        {
                            im = this.ImageTop[ScrollOverType.STABLE];
                            break;
                        }
                    }

                    ctx_im = im.getContext( '2d' );
                    _data = ctx_im.getImageData( 0, 0, img1.width, img1.height );
                    px = _data.data;

                    _len = px.length;

                    for ( var i = 0; i < _len; i += 4 ) {
                        if ( px[i + 3] == 255 ) {
                            px[i] = c.R;
                            px[i + 1] = c.G;
                            px[i + 2] = c.B;
                        }
                    }

                    this.startColorFadeInOutStart1 = {R:-1,G:-1,B:-1};

                    ctx_im.putImageData( _data, 0, 0 )

                }

                ctx.beginPath();
                ctx.fillStyle = this.ColorBackNone;
                ctx.fillRect( x1 + 0, y1 + 0, strokeW + xDeltaBORDER + 1, strokeH + yDeltaBORDER + 1 );
                ctx.drawImage( img1, x1 + xDeltaIMG, y1 + yDeltaIMG, this.SizeW, this.SizeH );
                if ( this.IsDrawBorders ) {
                    ctx.strokeStyle = this.ColorBorderNone;
                    ctx.rect( x1 + xDeltaBORDER, y1 + yDeltaBORDER, strokeW, strokeH );
                    ctx.stroke();
                }
            }
            break;
        }
        case ScrollOverType.STABLE:
        {
            if ( this.lastArrowStatus1 == ScrollOverType.OVER ) {

                switch ( type ) {
                    case ScrollArrowType.ARROW_LEFT:
                    {
                        img1 = this.ImageLeft[ScrollOverType.STABLE];
                        break;
                    }
                    default:
                    {
                        img1 = this.ImageTop[ScrollOverType.STABLE];
                        break;
                    }
                }

                this.lastArrowStatus1 = mode;
                this.startColorFadeInOutStart1 = this.startColorFadeInOutStart1.R < 0 ? startColorFadeOut : this.startColorFadeInOutStart1;
                this.fadeOutActive1 = true;
                fadeOut();
            }
            else{

                if ( this.lastArrowStatus1 != ScrollOverType.STABLE ) {

                    var im, ctx_im, px, _data, c = this.ColorGradStart[ScrollOverType.STABLE];

                    switch ( type ) {
                        case ScrollArrowType.ARROW_LEFT:
                        {
                            im = this.ImageLeft[ScrollOverType.STABLE];
                            break;
                        }
                        default:
                        {
                            im = this.ImageTop[ScrollOverType.STABLE];
                            break;
                        }
                    }

                    ctx_im = im.getContext( '2d' );
                    _data = ctx_im.getImageData( 0, 0, img1.width, img1.height );
                    px = _data.data;

                    _len = px.length;

                    for ( var i = 0; i < _len; i += 4 ) {
                        if ( px[i + 3] == 255 ) {
                            px[i] = c.R;
                            px[i + 1] = c.G;
                            px[i + 2] = c.B;
                        }
                    }

                    this.startColorFadeInOutStart1 = {R:-1,G:-1,B:-1};

                    ctx_im.putImageData( _data, 0, 0 )

                }

                ctx.beginPath();
                ctx.fillStyle = this.ColorBackStable;
                ctx.fillRect( x1 + 0, y1 + 0, strokeW + xDeltaBORDER + 1, strokeH + yDeltaBORDER + 1 );
                ctx.drawImage( img1, x1 + xDeltaIMG, y1 + yDeltaIMG, this.SizeW, this.SizeH );
                if ( this.IsDrawBorders ) {
                    ctx.strokeStyle = this.ColorBorderStable;
                    ctx.rect( x1 + xDeltaBORDER, y1 + yDeltaBORDER, strokeW, strokeH );
                    ctx.stroke();
                }
            }
            break;
        }
        case ScrollOverType.OVER:
        {
            if ( this.lastArrowStatus1 == ScrollOverType.NONE || this.lastArrowStatus1 == ScrollOverType.STABLE ) {

                switch ( type ) {
                    case ScrollArrowType.ARROW_LEFT:
                    {
                        img1 = this.ImageLeft[ScrollOverType.STABLE];
                        break;
                    }
                    default:
                    {
                        img1 = this.ImageTop[ScrollOverType.STABLE];
                        break;
                    }
                }

                this.lastArrowStatus1 = mode;
                this.startColorFadeInOutStart1 = this.startColorFadeInOutStart1.R < 0 ? startColorFadeIn : this.startColorFadeInOutStart1;
                this.fadeInActive1 = true;
                fadeIn();
            }
            else{
                ctx.beginPath();
                ctx.fillStyle = this.ColorBackOver;
                ctx.fillRect( x1 + xDeltaBORDER - .5, y1 + yDeltaBORDER - .5, strokeW + 1, strokeH + 1 );
                ctx.drawImage( img1, x1 + xDeltaIMG, y1 + yDeltaIMG, this.SizeW, this.SizeH );
                if ( this.IsDrawBorders ) {
                    ctx.strokeStyle = this.ColorBorderOver;
                    ctx.rect( x1 + xDeltaBORDER, y1 + yDeltaBORDER, strokeW, strokeH );
                    ctx.stroke();
                }
            }
            break;
        }
        case ScrollOverType.ACTIVE:
        {
            ctx.beginPath();
            ctx.fillStyle = this.ColorBackActive;
            ctx.fillRect( x1 + xDeltaBORDER - .5, y1 + yDeltaBORDER - .5, strokeW + 1, strokeH + 1 );

            if ( !this.IsNeedInvertOnActive ) {
                ctx.drawImage( img1, x1 + xDeltaIMG, y1 + yDeltaIMG, this.SizeW, this.SizeH );
            }
            else {
                // slow method
                var _ctx = img1.getContext( "2d" );

                var _data = _ctx.getImageData( 0, 0, this.SizeW, this.SizeH );
                var _data2 = _ctx.getImageData( 0, 0, this.SizeW, this.SizeH );

                var _len = 4 * this.SizeW * this.SizeH;
                for ( var i = 0; i < _len; i += 4 ) {
                    if ( _data.data[i + 3] == 255 ) {
                        _data.data[i] = 255;// - _data.data[i];
                        _data.data[i + 1] = 255;// - _data.data[i + 1];
                        _data.data[i + 2] = 255;// - _data.data[i + 2];
                    }
                }

                _ctx.putImageData( _data, 0, 0 );
                ctx.drawImage( img1, x1 + xDeltaIMG, y1 + yDeltaIMG, this.SizeW, this.SizeH );

                for ( var i = 0; i < _len; i += 4 ) {
                    if ( _data.data[i + 3] == 255 ) {
                        _data.data[i] = 255 - _data.data[i];
                        _data.data[i + 1] = 255 - _data.data[i + 1];
                        _data.data[i + 2] = 255 - _data.data[i + 2];
                    }
                }
                _ctx.putImageData( _data2, 0, 0 );

                _data = null;
                _data2 = null;
            }
            if ( this.IsDrawBorders ) {
                ctx.strokeStyle = this.ColorBorderActive;
                ctx.rect( x1 + xDeltaBORDER, y1 + yDeltaBORDER, strokeW, strokeH );
                ctx.stroke();
            }
            break;
        }
        default:{
            break;
        }
    }

    this.lastArrowStatus1 = mode;

};
CArrowDrawer.prototype.drawBottomRightArrow = function(type,mode,ctx,w,h){

    clearTimeout( this.fadeInTimeout2 );
    this.fadeInTimeout2 = null;
    clearTimeout( this.fadeOutTimeout2 );
    this.fadeOutTimeout2 = null;

    ctx.beginPath();

    var startColorFadeIn = this.startColorFadeInOutStart2.R < 0 ? _HEXTORGB_( this.ColorBackNone ) :  this.startColorFadeInOutStart2,
        startColorFadeOut =  this.startColorFadeInOutStart2.R < 0 ? _HEXTORGB_( this.ColorBackOver ) : this.startColorFadeInOutStart2,
        that = this,
        img1 = this.ImageTop[mode],
        x1 = 0, y1 = 0,
        is_vertical = true,
        bottomRightDelta = 1,
        xDeltaIMG = 0, yDeltaIMG = 0, xDeltaBORDER = 0.5, yDeltaBORDER = 1.5,
        tempIMG1 = document.createElement( 'canvas' );

    tempIMG1.width = this.SizeNaturalW;
    tempIMG1.height = this.SizeNaturalH;

    var ctx1 = tempIMG1.getContext('2d');

    if (this.IsRetina)
    {
        ctx1.setTransform(2, 0, 0, 2, 0, 0);
    }

    function fadeIn(){

        var ctx_piperImg, px, _len;

        ctx1.fillStyle = "rgb(" + that.startColorFadeInOutStart2.R + "," +
                                  that.startColorFadeInOutStart2.G + "," +
                                  that.startColorFadeInOutStart2.B + ")";

        startColorFadeIn.R -= 2;
        startColorFadeIn.G -= 2;
        startColorFadeIn.B -= 2;

        ctx1.rect( .5, 1.5, strokeW, strokeH );
        ctx1.fill();

        if ( that.IsDrawBorders ) {
            ctx1.strokeStyle = that.ColorBorderOver;
            ctx1.stroke();
        }

        ctx_piperImg = img1.getContext( '2d' );
        _data = ctx_piperImg.getImageData( 0, 0, img1.width, img1.height );
        px = _data.data;

        _len = px.length;

        for ( var i = 0; i < _len; i += 4 ) {
            if ( px[i + 3] == 255 ) {
                px[i] += 4;
                px[i + 1] += 4;
                px[i + 2] += 4;
            }
        }
        ctx_piperImg.putImageData( _data, 0, 0 );

        ctx1.drawImage( img1, 0, 0, that.SizeW, that.SizeH );

        if ( startColorFadeIn.R >= 207 ) {
            that.startColorFadeInOutStart2 = startColorFadeIn;
            ctx.drawImage(tempIMG1,x1 + xDeltaIMG,y1 + yDeltaIMG, that.SizeW, that.SizeH);
            that.fadeInTimeout2 = setTimeout( fadeIn, that.fadeInFadeOutDelay );
        }
        else {
            clearTimeout( that.fadeInTimeout2 );
            that.fadeInTimeout2 = null;
            that.fadeInActive2 = false;
            startColorFadeIn.R += 2;
            startColorFadeIn.G += 2;
            startColorFadeIn.B += 2;
            that.startColorFadeInOutStart2 = startColorFadeIn;

            ctx_piperImg = img1.getContext( '2d' );
            _data = ctx_piperImg.getImageData( 0, 0, img1.width, img1.height );
            px = _data.data;

            _len = px.length;

            for ( var i = 0; i < _len; i += 4 ) {
                if ( px[i + 3] == 255 ) {
                    px[i] -= 4;
                    px[i + 1] -= 4;
                    px[i + 2] -= 4;
                }
            }
            ctx_piperImg.putImageData( _data, 0, 0 );

        }

    }

    function fadeOut(){

        var ctx_piperImg, px, _len;

        ctx1.fillStyle = "rgb(" + that.startColorFadeInOutStart2.R + "," +
                                  that.startColorFadeInOutStart2.G + "," +
                                  that.startColorFadeInOutStart2.B + ")";

        startColorFadeOut.R += 2;
        startColorFadeOut.G += 2;
        startColorFadeOut.B += 2;

        ctx1.rect( .5, 1.5, strokeW, strokeH  );
        ctx1.fill();

        if ( that.IsDrawBorders ) {
            ctx1.strokeStyle = that.ColorBorderOver;
            ctx1.stroke();
        }

        ctx_piperImg = img1.getContext( '2d' );
        _data = ctx_piperImg.getImageData( 0, 0, img1.width, img1.height );
        px = _data.data;
        _len = px.length;

        for ( var i = 0; i < _len; i += 4 ) {
            if ( px[i + 3] == 255 ) {
                px[i] -= 4;
                px[i + 1] -= 4;
                px[i + 2] -= 4;
            }
        }

        ctx_piperImg.putImageData( _data, 0, 0 );

        ctx1.drawImage( img1, 0, 0, that.SizeW, that.SizeH );

        if ( startColorFadeOut.R <= 241 ) {
            that.startColorFadeInOutStart2 = startColorFadeOut;
            ctx.drawImage(tempIMG1,x1 + xDeltaIMG,y1 + yDeltaIMG, that.SizeW, that.SizeH);
            that.fadeOutTimeout2 = setTimeout( fadeOut, that.fadeInFadeOutDelay );
        }
        else {
            clearTimeout( that.fadeOutTimeout2 );
            that.fadeOutTimeout2 = null;
            that.fadeOutActive2 = false;
            startColorFadeOut.R -= 2;
            startColorFadeOut.G -= 2;
            startColorFadeOut.B -= 2;
            that.startColorFadeInOutStart2 = startColorFadeOut;

            ctx_piperImg = img1.getContext( '2d' );
            _data = ctx_piperImg.getImageData( 0, 0, img1.width, img1.height );
            px = _data.data;

            _len = px.length;

            for ( var i = 0; i < _len; i += 4 ) {
                if ( px[i + 3] == 255 ) {
                    px[i] += 4;
                    px[i + 1] += 4;
                    px[i + 2] += 4;
                }
            }
            ctx_piperImg.putImageData( _data, 0, 0 );

        }

    }

    if ( mode === null || mode === undefined ) {
        mode = ScrollOverType.NONE;
    }

    switch ( type ) {
        case ScrollArrowType.ARROW_RIGHT:
        {
            is_vertical = false;
            x1 = w - this.SizeW - bottomRightDelta;
            y1 = -1;
            img1 = this.ImageRight[mode];

            break;
        }
        case ScrollArrowType.ARROW_BOTTOM:
        {
            y1 = h - this.SizeH - bottomRightDelta - 1;
            img1 = this.ImageBottom[mode];

            break;
        }
    }

    ctx.lineWidth = 1;
    var strokeW = is_vertical ? this.SizeW - 1 : this.SizeW - 1;
    var strokeH = is_vertical ? this.SizeH - 1 : this.SizeH - 1;

    switch ( mode ) {
        case ScrollOverType.NONE:
        {
            if ( this.lastArrowStatus2 == ScrollOverType.OVER ) {

                switch ( type ) {
                    case ScrollArrowType.ARROW_RIGHT:
                    {
                        img1 = this.ImageRight[ScrollOverType.STABLE];
                        break;
                    }
                    default:
                    {
                        img1 = this.ImageBottom[ScrollOverType.STABLE];
                        break;
                    }
                }

                this.lastArrowStatus2 = mode;
                this.startColorFadeInOutStart2 = this.startColorFadeInOutStart2.R < 0 ? startColorFadeOut : this.startColorFadeInOutStart2;
                this.fadeOutActive2 = true;
                fadeOut();
            }
            else{

                if ( this.lastArrowStatus2 == ScrollOverType.ACTIVE ) {

                    var im, ctx_im, px, _data, c = this.ColorGradStart[ScrollOverType.STABLE];

                    switch ( type ) {
                        case ScrollArrowType.ARROW_RIGHT:
                        {
                            im = this.ImageRight[ScrollOverType.STABLE];
                            break;
                        }
                        default:
                        {
                            im = this.ImageBottom[ScrollOverType.STABLE];
                            break;
                        }
                    }

                    ctx_im = im.getContext( '2d' );
                    _data = ctx_im.getImageData( 0, 0, img1.width, img1.height );
                    px = _data.data;

                    _len = px.length;

                    for ( var i = 0; i < _len; i += 4 ) {
                        if ( px[i + 3] == 255 ) {
                            px[i] = c.R;
                            px[i + 1] = c.G;
                            px[i + 2] = c.B;
                        }
                    }

                    this.startColorFadeInOutStart2 = {R:-1,G:-1,B:-1};

                    ctx_im.putImageData( _data, 0, 0 )

                }

                ctx.beginPath();
                ctx.fillStyle = this.ColorBackNone;
                ctx.fillRect( x1 + 0, y1 + 0, strokeW + xDeltaBORDER + 1, strokeH + yDeltaBORDER + 1 );
                ctx.drawImage( img1, x1 + xDeltaIMG, y1 + yDeltaIMG, this.SizeW, this.SizeH );
                if ( this.IsDrawBorders ) {
                    ctx.strokeStyle = this.ColorBorderNone;
                    ctx.rect( x1 + xDeltaBORDER, y1 + yDeltaBORDER, strokeW, strokeH );
                    ctx.stroke();
                }
            }
            break;
        }
        case ScrollOverType.STABLE:
        {
            if ( this.lastArrowStatus2 == ScrollOverType.OVER ) {

                switch ( type ) {
                    case ScrollArrowType.ARROW_RIGHT:
                    {
                        img1 = this.ImageRight[ScrollOverType.STABLE];
                        break;
                    }
                    default:
                    {
                        img1 = this.ImageBottom[ScrollOverType.STABLE];
                        break;
                    }
                }

                this.lastArrowStatus2 = mode;
                this.startColorFadeInOutStart2 = this.startColorFadeInOutStart2.R < 0 ? startColorFadeOut : this.startColorFadeInOutStart2;
                this.fadeOutActive2 = true;
                fadeOut();
            }
            else{

                if ( this.lastArrowStatus2 != ScrollOverType.STABLE ) {

                    var im, ctx_im, px, _data, c = this.ColorGradStart[ScrollOverType.STABLE];

                    switch ( type ) {
                        case ScrollArrowType.ARROW_RIGHT:
                        {
                            im = this.ImageRight[ScrollOverType.STABLE];
                            break;
                        }
                        default:
                        {
                            im = this.ImageBottom[ScrollOverType.STABLE];
                            break;
                        }
                    }

                    ctx_im = im.getContext( '2d' );
                    _data = ctx_im.getImageData( 0, 0, img1.width, img1.height );
                    px = _data.data;

                    _len = px.length;

                    for ( var i = 0; i < _len; i += 4 ) {
                        if ( px[i + 3] == 255 ) {
                            px[i] = c.R;
                            px[i + 1] = c.G;
                            px[i + 2] = c.B;
                        }
                    }

                    this.startColorFadeInOutStart2 = {R:-1,G:-1,B:-1};

                    ctx_im.putImageData( _data, 0, 0 )

                }

                ctx.beginPath();
                ctx.fillStyle = this.ColorBackStable;
                ctx.fillRect( x1 + 0, y1 + 0, strokeW + xDeltaBORDER + 1, strokeH + yDeltaBORDER + 1 );
                ctx.drawImage( img1, x1 + xDeltaIMG, y1 + yDeltaIMG, this.SizeW, this.SizeH );
                ctx.strokeStyle = this.ColorBackStable;
                if ( this.IsDrawBorders ) {
                    ctx.strokeStyle = this.ColorBorderStable;
                    ctx.rect( x1 + xDeltaBORDER, y1 + yDeltaBORDER, strokeW, strokeH );
                    ctx.stroke();
                }
            }
            break;
        }
        case ScrollOverType.OVER:
        {

            if ( this.lastArrowStatus2 == ScrollOverType.NONE || this.lastArrowStatus2 == ScrollOverType.STABLE ) {

                switch ( type ) {
                    case ScrollArrowType.ARROW_RIGHT:
                    {
                        img1 = this.ImageRight[ScrollOverType.STABLE];
                        break;
                    }
                    default:
                    {
                        img1 = this.ImageBottom[ScrollOverType.STABLE];
                        break;
                    }
                }

                this.lastArrowStatus2 = mode;
                this.startColorFadeInOutStart2 = this.startColorFadeInOutStart2.R < 0 ? startColorFadeIn : this.startColorFadeInOutStart2;
                this.fadeInActive2 = true;
                fadeIn();
            }
            else{
                ctx.beginPath();
                ctx.fillStyle = this.ColorBackOver;
                ctx.fillRect( x1 + xDeltaBORDER - .5, y1 + yDeltaBORDER - .5, strokeW + 1, strokeH + 1 );
                ctx.drawImage( img1, x1 + xDeltaIMG, y1 + yDeltaIMG, this.SizeW, this.SizeH );
                if ( this.IsDrawBorders ) {
                    ctx.strokeStyle = this.ColorBorderOver;
                    ctx.rect( x1 + xDeltaBORDER, y1 + yDeltaBORDER, strokeW, strokeH );
                    ctx.stroke();
                }

            }
            break;
        }
        case ScrollOverType.ACTIVE:
        {
            ctx.beginPath();
            ctx.fillStyle = this.ColorBackNone;
            ctx.fillRect( x1 + 0, y1 + 0, strokeW + xDeltaBORDER + 1, strokeH + yDeltaBORDER + 1 );
            ctx.fillStyle = this.ColorBackActive;
            ctx.fillRect( x1 + xDeltaBORDER - .5, y1 + yDeltaBORDER - .5, strokeW + 1, strokeH + 1 );

            if ( !this.IsNeedInvertOnActive ) {
                ctx.drawImage( img1, x1 + xDeltaIMG, y1 + yDeltaIMG, this.SizeW, this.SizeH );
            }
            else {
                // slow method
                var _ctx = img1.getContext( "2d" );

                var _data = _ctx.getImageData( 0, 0, this.SizeW, this.SizeH );
                var _data2 = _ctx.getImageData( 0, 0, this.SizeW, this.SizeH );

                var _len = 4 * this.SizeW * this.SizeH;
                for ( var i = 0; i < _len; i += 4 ) {
                    if ( _data.data[i + 3] == 255 ) {
                        _data.data[i] = 255;// - _data.data[i];
                        _data.data[i + 1] = 255;// - _data.data[i + 1];
                        _data.data[i + 2] = 255;// - _data.data[i + 2];
                    }
                }

                _ctx.putImageData( _data, 0, 0 );
                ctx.drawImage( img1, x1 + xDeltaIMG, y1 + yDeltaIMG, this.SizeW, this.SizeH );

                for ( var i = 0; i < _len; i += 4 ) {
                    if ( _data.data[i + 3] == 255 ) {
                        _data.data[i] = 255 - _data.data[i];
                        _data.data[i + 1] = 255 - _data.data[i + 1];
                        _data.data[i + 2] = 255 - _data.data[i + 2];
                    }
                }
                _ctx.putImageData( _data2, 0, 0 );

                _data = null;
                _data2 = null;
            }
            if ( this.IsDrawBorders ) {
                ctx.strokeStyle = this.ColorBorderActive;
                ctx.rect( x1 + xDeltaBORDER, y1 + yDeltaBORDER, strokeW, strokeH );
                ctx.stroke();
            }
            break;
        }
        default:{
            break;
        }
    }

    this.lastArrowStatus2 = mode;
};

function _HEXTORGB_( colorHEX ) {
    return {
        R:parseInt( colorHEX.substring( 1, 3 ), 16 ),
        G:parseInt( colorHEX.substring( 3, 5 ), 16 ),
        B:parseInt( colorHEX.substring( 5, 7 ), 16 )
    }
}

/**
 * @constructor
 */
function ScrollObject( elemID, settings, dbg ) {
    if ( dbg )
        debug = dbg;
    var that = this;
    this.that = this;

    var extendSettings = function ( settings1, settings2 ) {
        var _st = {};
        if ( settings1 == null || settings1 == undefined )
            return settings2;
        else for ( var _item in settings1 ) {
            if ( typeof settings1[_item] === "object" )
                _st[_item] = extendSettings( _st, settings1[_item] );
            else
                _st[_item] = settings1[_item];
        }
        for ( var _item in settings2 ) {
            if ( !_st.hasOwnProperty( _item ) ) {
                if ( typeof settings2[_item] === "object" )
                    _st[_item] = extendSettings( _st, settings2[_item] );
                else
                    _st[_item] = settings2[_item];
            }
        }
        return _st;
    };

    var scrollSettings = {
        showArrows:false,
        screenW:-1,
        screenH:-1,
        scrollerMinHeight:34,
        scrollerMaxHeight:99999,
        scrollerMinWidth:34,
        scrollerMaxWidth:99999,
        initialDelay:300,
        arrowRepeatFreq:50,
        trackClickRepeatFreq:70,
        scrollPagePercent:1. / 8,
        arrowDim:13,
        marginScroller:4,
        scrollerColor:"#f1f1f1",
        scrollerColorOver:"#cfcfcf",
        scrollerColorLayerOver:"#cfcfcf",
        scrollerColorActive:"#ADADAD",
        scrollBackgroundColor:"#f4f4f4",
        scrollBackgroundColorHover:"#f4f4f4",
        scrollBackgroundColorActive:"#f4f4f4",
        strokeStyleNone:"#cfcfcf",
        strokeStyleOver:"#cfcfcf",
        strokeStyleActive:"#ADADAD",
        vscrollStep:10,
        hscrollStep:10,
        wheelScrollLines:1,
        arrowColor:"#ADADAD",
        arrowBorderColor:"#cfcfcf",
        arrowBackgroundColor:"#F1F1F1",
        arrowStableColor:"#ADADAD",
        arrowStableBorderColor:"#cfcfcf",
        arrowStableBackgroundColor:"#F1F1F1",
        arrowOverColor:"#f1f1f1",
        arrowOverBorderColor:"#cfcfcf",
        arrowOverBackgroundColor:"#cfcfcf",
        arrowActiveColor:"#f1f1f1",
        arrowActiveBorderColor:"#ADADAD",
        arrowActiveBackgroundColor:"#ADADAD",
        fadeInFadeOutDelay:20,
        piperColor:"#cfcfcf",
        piperColorHover:"#f1f1f1",
        arrowSizeW: 13,
        arrowSizeH: 13,
        cornerRadius: 0,
        slimScroll: false
    };

    this.settings = extendSettings( settings, scrollSettings );

    this.ArrowDrawer = new CArrowDrawer( this.settings );

    this.mouseUp = false;
    this.mouseDown = false;

    this.that.mouseover = false;

    this.that.mouseOverOut = -1;

    this.scrollerMouseDown = false;
    this.scrollerStatus = ScrollOverType.NONE;
    this.lastScrollerStatus = this.scrollerStatus;

    this.moveble = false;
    this.lock = false;
    this.scrollTimeout = null;

    this.StartMousePosition = {x:0, y:0};
    this.EndMousePosition = {x:0, y:0};

    this.dragMinY = 0;
    this.dragMaxY = 0;

    this.scrollVCurrentY = 0;
    this.scrollHCurrentX = 0;
    this.arrowPosition = 0;

    this.verticalTrackHeight = 0;
    this.horizontalTrackWidth = 0;

    this.paneHeight = 0;
    this.paneWidth = 0;

    this.maxScrollY = 0;
    this.maxScrollX = 0;

    this.scrollCoeff = 0;

    this.scroller = {x:0, y:1, h:0, w:0};

    this.endByX = false;
    this.endByY = false;

    this.canvas = null;
    this.context = null;

    this.eventListeners = [];

    this.IsRetina = false;
    this.canvasW = 1;
    this.canvasH = 1;

    this.ScrollOverType1 = -1;
    this.ScrollOverType2 = -1;

    this.fadeInActive = false;
    this.fadeOutActive = false;
    this.fadeInTimeout = null;
    this.fadeOutTimeout = null;
    this.startColorFadeInStart = _HEXTORGB_(this.settings.scrollerColor).R;
    this.startColorFadeOutStart = _HEXTORGB_(this.settings.scrollerColorOver).R;
    this.startColorFadeInOutStart = -1;

    if ( window.devicePixelRatio == 2 )
        this.IsRetina = true;

    this.piperImgVert = [document.createElement( 'canvas' ), document.createElement( 'canvas' )];
    this.piperImgHor = [document.createElement( 'canvas' ), document.createElement( 'canvas' )];

    this.piperImgVert[0].height = 13;
    this.piperImgVert[1].height = 13;
    this.piperImgVert[0].width = 5;
    this.piperImgVert[1].width = 5;

    this.piperImgHor[0].width = 13;
    this.piperImgHor[1].width = 13;
    this.piperImgHor[0].height = 5;
    this.piperImgHor[1].height = 5;

    if(this.settings.slimScroll){
        this.piperImgVert[0].width =
        this.piperImgVert[1].width =
        this.piperImgHor[0].height =
        this.piperImgHor[1].height = 3;
    }

    var r, g, b, ctx_piperImg, _data, px, k;
    r = _HEXTORGB_( this.settings.piperColor );
    g = r.G;
    b = r.B;
    r = r.R;

    k = this.piperImgVert[0].width * 4;

    for ( var index = 0; index < this.piperImgVert.length; index++ ) {
        ctx_piperImg = this.piperImgVert[index].getContext( '2d' );
        _data = ctx_piperImg.createImageData( this.piperImgVert[index].width, this.piperImgVert[index].height );
        px = _data.data;

        for ( var i = 0; i < this.piperImgVert[index].width * this.piperImgVert[index].height * 4; ) {
            px[i++] = r;
            px[i++] = g;
            px[i++] = b;
            px[i++] = 255;
            i = ( i % k === 0 ) ? i + k : i
        }

        ctx_piperImg.putImageData( _data, 0, 0 )

        ctx_piperImg = this.piperImgHor[index].getContext( '2d' );

        _data = ctx_piperImg.createImageData( this.piperImgHor[index].width, this.piperImgHor[index].height );
        px = _data.data;

        for ( var i = 0; i < this.piperImgHor[index].width * this.piperImgHor[index].height * 4; ) {
            px[i++] = r;
            px[i++] = g;
            px[i++] = b;
            px[i++] = 255;
            i = ( i % 4 === 0 && i % 52 !== 0 ) ? i + 4 : i
        }

        ctx_piperImg.putImageData( _data, 0, 0 )

        r = _HEXTORGB_( this.settings.piperColorHover );
        g = r.G;
        b = r.B;
        r = r.R;

    }

    this._init( elemID );
}
ScrollObject.prototype = {

    _init:function ( elemID ) {
        if ( !elemID ) return false;

        var holder = document.getElementById( elemID );

        if ( holder.getElementsByTagName( 'canvas' ).length == 0 ){
            this.canvas = holder.appendChild( document.createElement( "CANVAS" ) );
        }
        else {
            this.canvas = holder.children[1];
        }

        this.canvas.style.width = "100%";
        this.canvas.style.height = "100%";

        this.canvas.that = this;
        this.canvas.style.zIndex = 100;
        this.canvas.style.position = "absolute";
        this.canvas.style.top = "0px";
        if ( navigator.userAgent.toLowerCase().indexOf( "webkit" ) != -1 ){
            this.canvas.style.webkitUserSelect = "none";
        }

        this.context = this.canvas.getContext( '2d' );
        if ( !this.IsRetina ){
            this.context.setTransform( 1, 0, 0, 1, 0, 0 );
        }
        else{
            this.context.setTransform( 2, 0, 0, 2, 0, 0 );
        }

        if ( this.settings.showArrows ){
            this.arrowPosition = this.settings.arrowDim + 2;
        }
        else{
            this.arrowPosition = this.settings.marginScroller;
        }

        this._setDimension( holder.clientHeight, holder.clientWidth );
        this.maxScrollY = holder.firstElementChild.clientHeight - this.settings.screenH > 0 ? holder.firstElementChild.clientHeight - this.settings.screenH : 0;
        this.maxScrollX = holder.firstElementChild.clientWidth - this.settings.screenW > 0 ? holder.firstElementChild.clientWidth - this.settings.screenW : 0;

        this.isVerticalScroll = holder.firstElementChild.clientHeight / Math.max( this.canvasH, 1 ) > 1;
        this.isHorizontalScroll = holder.firstElementChild.clientWidth / Math.max( this.canvasW, 1 ) > 1;

        this._setScrollerHW();

        this.paneHeight = this.canvasH - this.arrowPosition * 2;
        this.paneWidth = this.canvasW - this.arrowPosition * 2;

        this.RecalcScroller();

        this.canvas.onmousemove = this.evt_mousemove;
        this.canvas.onmouseout = this.evt_mouseout;
        this.canvas.onmouseup = this.evt_mouseup;
        this.canvas.onmousedown = this.evt_mousedown;
        this.canvas.onmousewheel = this.evt_mousewheel;
        this.canvas.onmouseover = this.evt_mouseover;

        var _that = this;
        this.canvas.ontouchstart = function ( e ) {
            _that.evt_mousedown( e.touches[0] );
            return false;
        }
        this.canvas.ontouchmove = function ( e ) {
            _that.evt_mousemove( e.touches[0] );
            return false;
        }
        this.canvas.ontouchend = function ( e ) {
            _that.evt_mouseup( e.changedTouches[0] );
            return false;
        }

        if ( this.canvas.addEventListener ){
            this.canvas.addEventListener( 'DOMMouseScroll', this.evt_mousewheel, false );
        }

        this.context.fillStyle = this.settings.scrollBackgroundColor;
        this.context.fillRect(0,0,this.canvasW,this.canvasH);

        this._drawArrow();
        this._draw();

        return true;
    },
    getMousePosition:function ( evt ) {
        // get canvas position
        var obj = this.canvas;
        var top = 0;
        var left = 0;
        while ( obj && obj.tagName != 'BODY' ) {
            top += obj.offsetTop;
            left += obj.offsetLeft;
            obj = obj.offsetParent;
        }

        // return relative mouse position
        var mouseX = evt.clientX - left + window.pageXOffset;
        var mouseY = evt.clientY - top + window.pageYOffset;
        return {
            x:mouseX,
            y:mouseY
        };
    },
    RecalcScroller:function ( startpos ) {
        if ( this.isVerticalScroll ) {
            if ( this.settings.showArrows ) {
                this.verticalTrackHeight = this.canvasH - this.arrowPosition * 2;
                this.scroller.y = this.arrowPosition;
            }
            else {
                this.verticalTrackHeight = this.canvasH;
                this.scroller.y = 1;
            }
            var percentInViewV;

            percentInViewV = (this.maxScrollY + this.paneHeight ) / this.paneHeight;
            this.scroller.h = Math.ceil( 1 / percentInViewV * this.verticalTrackHeight );

            if ( this.scroller.h < this.settings.scrollerMinHeight )
                this.scroller.h = this.settings.scrollerMinHeight;
            else if ( this.scroller.h > this.settings.scrollerMaxHeight )
                this.scroller.h = this.settings.scrollerMaxHeight;
            this.scrollCoeff = this.maxScrollY / Math.max( 1, this.paneHeight - this.scroller.h );
            if ( startpos ) {
                this.scroller.y = startpos / this.scrollCoeff + this.arrowPosition;
            }
            this.dragMaxY = this.canvasH - this.arrowPosition - this.scroller.h + 1;
            this.dragMinY = this.arrowPosition;
        }

        if ( this.isHorizontalScroll ) {
            if ( this.settings.showArrows ) {
                this.horizontalTrackWidth = this.canvasW - this.arrowPosition * 2;
                this.scroller.x = this.arrowPosition + 1;
            }
            else {
                this.horizontalTrackWidth = this.canvasW;
                this.scroller.x = 1;
            }
            var percentInViewH;
            percentInViewH = ( this.maxScrollX + this.paneWidth ) / this.paneWidth;
            this.scroller.w = Math.ceil( 1 / percentInViewH * this.horizontalTrackWidth );

            if ( this.scroller.w < this.settings.scrollerMinWidth )
                this.scroller.w = this.settings.scrollerMinWidth
            else if ( this.scroller.w > this.settings.scrollerMaxWidth )
                this.scroller.w = this.settings.scrollerMaxWidth;
            this.scrollCoeff = this.maxScrollX / Math.max( 1, this.paneWidth - this.scroller.w );
            if ( typeof startpos !== "undefined" ) {
                this.scroller.x = startpos / this.scrollCoeff + this.arrowPosition;
            }
            this.dragMaxX = this.canvasW - this.arrowPosition - this.scroller.w;
            this.dragMinX = this.arrowPosition;
        }
    },
    Repos:function ( settings, bIsHorAttack, bIsVerAttack )
    {
        if (bIsVerAttack)
        {
            var _canvasH = settings.screenH;
            if (undefined !== _canvasH && undefined !== settings.screenAddH)
                _canvasH += settings.screenAddH;

            if (_canvasH == this.canvasH && undefined !== settings.contentH)
            {
                var _maxScrollY = settings.contentH - settings.screenH > 0 ? settings.contentH - settings.screenH : 0;
                if (_maxScrollY == this.maxScrollY)
                    return;
            }
        }
        if (bIsHorAttack)
        {
            if (settings.screenW == this.canvasW && undefined !== settings.contentW)
            {
                var _maxScrollX = settings.contentW - settings.screenW > 0 ? settings.contentW - settings.screenW : 0;
                if (_maxScrollX == this.maxScrollX)
                    return;
            }
        }

        var _parentClientW = GetClientWidth( this.canvas.parentNode );
        var _parentClientH = GetClientHeight( this.canvas.parentNode );

        var _firstChildW = GetClientWidth( this.canvas.parentNode.firstElementChild );
        var _firstChildH = GetClientHeight( this.canvas.parentNode.firstElementChild );

        this._setDimension( _parentClientH, _parentClientW );
        this.maxScrollY = _firstChildH - settings.screenH > 0 ? _firstChildH - settings.screenH : 0;
        this.maxScrollX = _firstChildW - settings.screenW > 0 ? _firstChildW - settings.screenW : 0;

        this.isVerticalScroll = _firstChildH / Math.max( this.canvasH, 1 ) > 1 || this.isVerticalScroll || (true === bIsVerAttack);
        this.isHorizontalScroll = _firstChildW / Math.max( this.canvasW, 1 ) > 1 || this.isHorizontalScroll || (true === bIsHorAttack);
        this._setScrollerHW();

        this.paneHeight = this.canvasH - this.arrowPosition * 2;
        this.paneWidth = this.canvasW - this.arrowPosition * 2;
        this.RecalcScroller();
        if ( this.isVerticalScroll ) {

            if (this.scrollVCurrentY > this.maxScrollY)
                this.scrollVCurrentY = this.maxScrollY;

            this.scrollToY( this.scrollVCurrentY );
            if(this.maxScrollY == 0){
                this.canvas.style.display = "none";
            }
            else{
                this.canvas.style.display = "";
            }
        }
        else if ( this.isHorizontalScroll ) {

            if (this.scrollHCurrentX > this.maxScrollX)
                this.scrollHCurrentX = this.maxScrollX;

            this.scrollToX( this.scrollHCurrentX );
            if(this.maxScrollX == 0){
                this.canvas.style.display = "none";
            }
            else{
                this.canvas.style.display = "";
            }
        }

        this._drawArrow();
        this._draw();
    },
    Reinit:function ( settings, pos ) {
        this._setDimension( this.canvas.parentNode.clientHeight, this.canvas.parentNode.clientWidth );
        this.maxScrollY = this.canvas.parentNode.firstElementChild.clientHeight - (settings.screenH || this.canvas.parentNode.offsetHeight) > 0 ?
            this.canvas.parentNode.firstElementChild.clientHeight - (settings.screenH || this.canvas.parentNode.offsetHeight) :
            0;

        this.maxScrollX = this.canvas.parentNode.firstElementChild.clientWidth - (settings.screenH || this.canvas.parentNode.offsetWidth) > 0 ?
            this.canvas.parentNode.firstElementChild.clientWidth - (settings.screenH || this.canvas.parentNode.offsetWidth) :
            0;

        this.isVerticalScroll = this.canvas.parentNode.firstElementChild.clientHeight / Math.max( this.canvasH, 1 ) > 1 || this.isVerticalScroll;
        this.isHorizontalScroll = this.canvas.parentNode.firstElementChild.clientWidth / Math.max( this.canvasW, 1 ) > 1 || this.isHorizontalScroll;
        this._setScrollerHW();

        this.paneHeight = this.canvasH - this.arrowPosition * 2;
        this.paneWidth = this.canvasW - this.arrowPosition * 2;
        this.RecalcScroller();
        this.reinit = true;
        if ( this.isVerticalScroll ) {
            pos !== undefined ? this.scrollByY( pos - this.scrollVCurrentY ) : this.scrollToY( this.scrollVCurrentY );
        }

        if ( this.isHorizontalScroll ) {
            pos !== undefined ? this.scrollByX( pos - this.scrollHCurrentX ) : this.scrollToX( this.scrollHCurrentX );
        }
        this.reinit = false;
        this._drawArrow();
        this._draw();
    },
    _scrollV:function ( that, evt, pos, isTop, isBottom, bIsAttack ) {
        if ( !this.isVerticalScroll ) {
            return;
        }

        if ( that.scrollVCurrentY !== pos || bIsAttack === true ) {
            that.scrollVCurrentY = pos;
            evt.scrollD = evt.scrollPositionY = that.scrollVCurrentY;
            evt.maxScrollY = that.maxScrollY;
            that._draw();
            that.handleEvents( "onscrollvertical", evt );
        }
        else if ( that.scrollVCurrentY === pos && pos > 0 && !this.reinit && !this.moveble && !this.lock ) {
            evt.pos = pos;
            that.handleEvents( "onscrollVEnd", evt );
        }
    },
    _correctScrollV:function ( that, yPos ) {
        if ( !this.isVerticalScroll )
            return null;

        var events = that.eventListeners["oncorrectVerticalScroll"];
        if ( events ) {
            if ( events.length != 1 )
                return null;

            return events[0].handler.apply( that, [yPos] );
        }
        return null;
    },
    _correctScrollByYDelta:function ( that, delta ) {
        if ( !this.isVerticalScroll )
            return null;

        var events = that.eventListeners["oncorrectVerticalScrollDelta"];
        if ( events ) {
            if ( events.length != 1 )
                return null;

            return events[0].handler.apply( that, [delta] );
        }
        return null;
    },
    _scrollH:function ( that, evt, pos, isTop, isBottom ) {
        if ( !this.isHorizontalScroll ) {
            return;
        }
        if ( that.scrollHCurrentX !== pos ) {
            that.scrollHCurrentX = pos;
            evt.scrollD = evt.scrollPositionX = that.scrollHCurrentX;
            evt.maxScrollX = that.maxScrollX;

//            that._drawArrow();
            that._draw();
            that.handleEvents( "onscrollhorizontal", evt );
        }
        else if ( that.scrollHCurrentX === pos && pos > 0 && !this.reinit && !this.moveble && !this.lock ) {
            evt.pos = pos;
            that.handleEvents( "onscrollHEnd", evt );
        }

    },
    scrollByY:function ( delta, bIsAttack ) {
        if ( !this.isVerticalScroll ) {
            return;
        }

        var result = this._correctScrollByYDelta( this, delta );
        if ( result != null && result.isChange === true )
            delta = result.Pos;

        var destY = this.scrollVCurrentY + delta, isTop = false, isBottom = false, vend = false;

        if ( destY < 0 ) {
            destY = 0;
            isTop = true;
            isBottom = false;
        }
        else if ( destY > this.maxScrollY && !this.endByY ) {
            // Новое смещение превышает maxScroll, надо вызвать ивент, спрашивающий что делать.
            // Чтобы не создавать новый, использую onscrollVEnd, он все равно больше нигде не используется
            // 50 = max число wheelScrollLine, если она больше, то будет работать неправильно
			for ( var c = 50; destY > this.maxScrollY && c > 0; --c ) {
                this.handleEvents( "onscrollVEnd", {} );
                vend = true;
            }
            if ( destY > this.maxScrollY ) {
                // Обработчик onscrollVEnd решил, что расширение области скрола не нужно, изменяем destY
                destY = this.maxScrollY;
            }
            isTop = false;
            isBottom = true;
        }

        this.scroller.y = destY / Math.max( 1, this.scrollCoeff ) + this.arrowPosition;
        if ( this.scroller.y < this.dragMinY )
            this.scroller.y = this.dragMinY + 1;
        else if ( this.scroller.y > this.dragMaxY )
            this.scroller.y = this.dragMaxY;

        var arrow = this.settings.showArrows ? this.arrowPosition : 0;
        if ( this.scroller.y + this.scroller.h > this.canvasH - arrow ) {
            this.scroller.y -= Math.abs( this.canvasH - arrow - this.scroller.y - this.scroller.h );
        }

        this.scroller.y = Math.round(this.scroller.y);

        if ( vend ) {
            this.moveble = true;
        }
        this._scrollV( this, {}, destY, isTop, isBottom, bIsAttack );
        if ( vend ) {
            this.moveble = false;
        }
    },
    scrollToY:function ( destY ) {
        if ( !this.isVerticalScroll ) {
            return;
        }

        this.scroller.y = destY / Math.max( 1, this.scrollCoeff ) + this.arrowPosition;
        if ( this.scroller.y < this.dragMinY )
            this.scroller.y = this.dragMinY + 1;
        else if ( this.scroller.y > this.dragMaxY )
            this.scroller.y = this.dragMaxY;

        var arrow = this.settings.showArrows ? this.arrowPosition : 0;
        if ( this.scroller.y + this.scroller.h > this.canvasH - arrow ) {
            this.scroller.y -= Math.abs( this.canvasH - arrow - this.scroller.y - this.scroller.h );
        }

        this.scroller.y = Math.round(this.scroller.y);

        this._scrollV( this, {}, destY, false, false );
    },
    scrollByX:function ( delta ) {
        if ( !this.isHorizontalScroll ) {
            return;
        }
        var destX = this.scrollHCurrentX + delta, isTop = false, isBottom = false, hend = false;

        if ( destX < 0 ) {
            destX = 0;
            isTop = true;
            isBottom = false;
        }
        else if ( destX > this.maxScrollX && !this.endByX ) {
            for ( var c = 50; destX > this.maxScrollX && c > 0; --c ) {
                this.handleEvents( "onscrollHEnd", {} );
                hend = true;
            }
            if ( destX > this.maxScrollX ) {
                destX = this.maxScrollX;
            }
            isTop = false;
            isBottom = true;
        }

        this.scroller.x = destX / Math.max( 1, this.scrollCoeff ) + this.arrowPosition;
        if ( this.scroller.x < this.dragMinX )
            this.scroller.x = this.dragMinX + 1;
        else if ( this.scroller.x > this.dragMaxX )
            this.scroller.x = this.dragMaxX;

        var arrow = this.settings.showArrows ? this.arrowPosition : 0;
        if ( this.scroller.x + this.scroller.w > this.canvasW - arrow ) {
            this.scroller.x -= Math.abs( this.canvasW - arrow - this.scroller.x - this.scroller.w );
        }

        this.scroller.x = Math.round(this.scroller.x);

        if ( hend ) {
            this.moveble = true;
        }
        this._scrollH( this, {}, destX, isTop, isBottom );
        if ( hend ) {
            this.moveble = true;
        }
    },
    scrollToX:function ( destX ) {
        if ( !this.isHorizontalScroll ) {
            return;
        }

        this.scroller.x = destX / Math.max( 1, this.scrollCoeff ) + this.arrowPosition;
        if ( this.scroller.x < this.dragMinX )
            this.scroller.x = this.dragMinX + 1;
        else if ( this.scroller.x > this.dragMaxX )
            this.scroller.x = this.dragMaxX;

        var arrow = this.settings.showArrows ? this.arrowPosition : 0;
        if ( this.scroller.x + this.scroller.w > this.canvasW - arrow ) {
            this.scroller.x -= Math.abs( this.canvasW - arrow - this.scroller.x - this.scroller.w );
        }

        this.scroller.x = Math.round(this.scroller.x);

        this._scrollH( this, {}, destX, false, false );
    },
    scrollTo:function ( destX, destY ) {
        this.scrollToX( destX );
        this.scrollToY( destY );
    },
    scrollBy:function ( deltaX, deltaY ) {
        this.scrollByX( deltaX );
        this.scrollByY( deltaY );
    },

    roundRect:function ( x, y, width, height, radius ) {
        if ( typeof radius === "undefined" ) {
            radius = 1;
        }
        this.context.beginPath();
        this.context.moveTo( x + radius, y );
        this.context.lineTo( x + width - radius, y );
        this.context.quadraticCurveTo( x + width, y, x + width, y + radius );
        this.context.lineTo( x + width, y + height - radius );
        this.context.quadraticCurveTo( x + width, y + height, x + width - radius, y + height );
        this.context.lineTo( x + radius, y + height );
        this.context.quadraticCurveTo( x, y + height, x, y + height - radius );
        this.context.lineTo( x, y + radius );
        this.context.quadraticCurveTo( x, y, x + radius, y );
        this.context.closePath();
    },

    _clearContent:function () {
        this.context.clearRect( 0, 0, this.canvasW, this.canvasH );
    },
    _draw:function () {
        // очистку не нужно делать - если потом рисовать рект такой же
        //this._clearContent();
        var piperImgIndex = 0, that = this,
            startColorFadeIn = this.startColorFadeInOutStart < 0 ? this.startColorFadeInStart : this.startColorFadeInOutStart,
            startColorFadeOut = this.startColorFadeInOutStart < 0 ? this.startColorFadeOutStart : this.startColorFadeInOutStart;

        function fadeIn() {

            clearTimeout( that.fadeInTimeout );
            that.fadeInTimeout = null;
            clearTimeout( that.fadeOutTimeout );
            that.fadeOutTimeout = null;

            var x, y, img, ctx_piperImg, _data, px;

            that.context.beginPath();

            drawScroller();

            that.context.fillStyle = "rgb(" + that.startColorFadeInOutStart + "," + that.startColorFadeInOutStart + "," + that.startColorFadeInOutStart + ")";
            that.context.strokeStyle = that.settings.strokeStyleOver;

            that.context.fill();
            that.context.stroke();

            startColorFadeIn -= 2;

            if ( that.isVerticalScroll && that.maxScrollY != 0 ) {
                x = that.scroller.x + (that.settings.slimScroll ? 2 : 3);
                y = (that.scroller.y >> 0) + Math.floor( that.scroller.h / 2 ) - 6;

                ctx_piperImg = that.piperImgVert[0].getContext( '2d' );
                _data = ctx_piperImg.getImageData( 0, 0, that.piperImgVert[0].width, that.piperImgVert[0].height );
                px = _data.data;

                for ( var i = 0; i < that.piperImgVert[0].width * that.piperImgVert[0].height * 4; i += 4 ) {
                    if ( px[i + 3] == 255 ) {
                        px[i] += 2;
                        px[i + 1] += 2;
                        px[i + 2] += 2;
                    }
                }

                ctx_piperImg.putImageData( _data, 0, 0 );

                img = that.piperImgVert[0];
            }
            else if ( that.isHorizontalScroll && that.maxScrollX != 0 ) {
                x = (that.scroller.x >> 0) + Math.floor( that.scroller.w / 2 ) - 6;
                y = that.scroller.y + (that.settings.slimScroll ? 2 : 3);

                ctx_piperImg = that.piperImgHor[0].getContext( '2d' );
                _data = ctx_piperImg.getImageData( 0, 0, that.piperImgHor[0].width, that.piperImgHor[0].height );
                px = _data.data;

                for ( var i = 0; i < that.piperImgHor[0].width * that.piperImgHor[0].height * 4; i += 4) {
                    if ( px[i + 3] == 255 ) {
                        px[i] += 2;
                        px[i + 1] += 2;
                        px[i + 2] += 2;
                    }
                }

                ctx_piperImg.putImageData( _data, 0, 0 )

                img = that.piperImgHor[0];
            }

            if ( startColorFadeIn >= _HEXTORGB_(that.settings.scrollerColorOver).R ) {
                that.startColorFadeInOutStart = startColorFadeIn;
                that.fadeInTimeout = setTimeout( fadeIn, that.settings.fadeInFadeOutDelay );
            }
            else {
                clearTimeout( that.fadeInTimeout );
                that.fadeInTimeout = null;
                that.fadeInActive = false;
                that.startColorFadeInOutStart = startColorFadeIn + 2;

                if ( that.isVerticalScroll && that.maxScrollY != 0 ) {

                    ctx_piperImg = that.piperImgVert[0].getContext( '2d' );
                    _data = ctx_piperImg.getImageData( 0, 0, that.piperImgVert[0].width, that.piperImgVert[0].height );
                    px = _data.data;

                    for ( var i = 0; i < that.piperImgVert[0].width * that.piperImgVert[0].height * 4; i += 4 ) {
                        if ( px[i + 3] == 255 ) {
                            px[i] -= 2;
                            px[i + 1] -= 2;
                            px[i + 2] -= 2;
                        }
                    }

                    ctx_piperImg.putImageData( _data, 0, 0 );

                    img = that.piperImgVert[0];

                }
                else if ( that.isHorizontalScroll && that.maxScrollX != 0 ) {

                    ctx_piperImg = that.piperImgHor[0].getContext( '2d' );
                    _data = ctx_piperImg.getImageData( 0, 0, that.piperImgHor[0].width, that.piperImgHor[0].height );
                    px = _data.data;

                    for ( var i = 0; i < that.piperImgHor[0].width * that.piperImgHor[0].height * 4; i += 4) {
                        if ( px[i + 3] == 255 ) {
                            px[i] -= 2;
                            px[i + 1] -= 2;
                            px[i + 2] -= 2;
                        }
                    }

                    ctx_piperImg.putImageData( _data, 0, 0 )

                    img = that.piperImgHor[0];

                }
            }

            if(img){
                that.context.drawImage( img, x, y );
            }

        }

        function fadeOut() {

            clearTimeout( that.fadeInTimeout );
            that.fadeInTimeout = null;
            clearTimeout( that.fadeOutTimeout );
            that.fadeOutTimeout = null;

            var x, y, img, ctx_piperImg, _data, px;

            that.context.beginPath();

            drawScroller();

            that.context.fillStyle = "rgb(" + that.startColorFadeInOutStart + "," + that.startColorFadeInOutStart + "," + that.startColorFadeInOutStart + ")";
            that.context.strokeStyle = that.settings.strokeStyleOver;

            that.context.fill();
            that.context.stroke();

            startColorFadeOut += 2;

            if ( that.isVerticalScroll && that.maxScrollY != 0 ) {
                x = that.scroller.x + (that.settings.slimScroll ? 2 : 3);
                y = (that.scroller.y >> 0) + Math.floor( that.scroller.h / 2 ) - 6;

                ctx_piperImg = that.piperImgVert[0].getContext( '2d' );
                _data = ctx_piperImg.getImageData( 0, 0, that.piperImgVert[0].width, that.piperImgVert[0].height );
                px = _data.data;

                for ( var i = 0; i < that.piperImgVert[0].width * that.piperImgVert[0].height * 4; i += 4) {

                    if ( px[i + 3] == 255 ) {
                        px[i] -= 2;
                        px[i + 1] -= 2;
                        px[i + 2] -= 2;
                    }
                }

                ctx_piperImg.putImageData( _data, 0, 0 );

                img = that.piperImgVert[0];

            }
            else if ( that.isHorizontalScroll && that.maxScrollX != 0 ) {
                x = (that.scroller.x >> 0) + Math.floor( that.scroller.w / 2 ) - 6;
                y = that.scroller.y + (that.settings.slimScroll ? 2 : 3);

                ctx_piperImg = that.piperImgHor[0].getContext( '2d' );
                _data = ctx_piperImg.getImageData( 0, 0, that.piperImgHor[0].width, that.piperImgHor[0].height );
                px = _data.data;

                for ( var i = 0; i < that.piperImgHor[0].width * that.piperImgHor[0].height * 4; i+=4 ) {
                    if ( px[i + 3] == 255 ) {
                        px[i] -= 2;
                        px[i + 1] -= 2;
                        px[i + 2] -= 2;
                    }
                }

                ctx_piperImg.putImageData( _data, 0, 0 )

                img = that.piperImgHor[0];
            }

            if ( startColorFadeOut <= _HEXTORGB_(that.settings.scrollerColor).R ) {
                that.startColorFadeInOutStart = startColorFadeOut;
                that.fadeOutTimeout = setTimeout( fadeOut, that.settings.fadeInFadeOutDelay );
            }
            else {
                clearTimeout( that.fadeOutTimeout );
                that.fadeOutTimeout = null;
                that.startColorFadeInOutStart = startColorFadeOut - 2;
                that.fadeOutActive = false;

                if ( that.isVerticalScroll && that.maxScrollY != 0 ) {

                    ctx_piperImg = that.piperImgVert[0].getContext( '2d' );
                    _data = ctx_piperImg.getImageData( 0, 0, that.piperImgVert[0].width, that.piperImgVert[0].height );
                    px = _data.data;

                    for ( var i = 0; i < that.piperImgVert[0].width * that.piperImgVert[0].height * 4; i+= 4 ) {
                        if ( px[i + 3] == 255 ) {
                            px[i] += 2;
                            px[i + 1] += 2;
                            px[i + 2] += 2;
                        }
                    }

                    ctx_piperImg.putImageData( _data, 0, 0 );

                    img = that.piperImgVert[0];

                }
                else if ( that.isHorizontalScroll && that.maxScrollX != 0 ) {
                    x = (that.scroller.x >> 0) + Math.floor( that.scroller.w / 2 ) - 6;
                    y = that.scroller.y + 3;

                    ctx_piperImg = that.piperImgHor[0].getContext( '2d' );
                    _data = ctx_piperImg.getImageData( 0, 0, that.piperImgHor[0].width, that.piperImgHor[0].height );
                    px = _data.data;

                    for ( var i = 0; i < that.piperImgHor[0].width * that.piperImgHor[0].height * 4; i+=4 ) {
                        if ( px[i + 3] == 255 ) {
                            px[i] += 2;
                            px[i + 1] += 2;
                            px[i + 2] += 2;
                        }
                    }

                    ctx_piperImg.putImageData( _data, 0, 0 )

                    img = that.piperImgHor[0];
                }
            }

            if(img){
                that.context.drawImage( img, x, y );
            }
        }

        function drawScroller() {


            that.context.beginPath();

            if ( that.isVerticalScroll ) {
                var _y = that.settings.showArrows ? that.arrowPosition : 0,
                    _h = that.canvasH - (_y << 1);

                if ( _h > 0 ) {
                    that.context.rect( 0, _y, that.canvasW, _h );
                }
            }
            else if ( that.isHorizontalScroll ) {
                var _x = that.settings.showArrows ? that.arrowPosition : 0,
                    _w = that.canvasW - (_x << 1);

                if ( _w > 0 ) {
                    that.context.rect( _x, 0, _w, that.canvasH );
                }
            }

            switch ( that.scrollerStatus ) {

                case ScrollOverType.OVER:
                {
                    that.context.fillStyle = that.settings.scrollBackgroundColorHover;
                    break;
                }
                case ScrollOverType.ACTIVE:
                {
                    that.context.fillStyle = that.settings.scrollBackgroundColorActive;
                    break;
                }
                case ScrollOverType.NONE:
                default:
                {
                    that.context.fillStyle = that.settings.scrollBackgroundColor;
                    break;
                }

            }

            that.context.fill();
            that.context.beginPath();

            if ( that.isVerticalScroll && that.maxScrollY != 0 ) {
                var _y = that.scroller.y >> 0, arrow = that.settings.showArrows ? that.arrowPosition : 0
                if ( _y < arrow ) {
                    _y = arrow;
                }
                var _b = Math.round(that.scroller.y + that.scroller.h)// >> 0;
                if ( _b > (that.canvasH - arrow - 1) ) {
                    _b = that.canvasH - arrow - 1;
                }

                if ( _b > _y ) {
                    that.roundRect( that.scroller.x - 0.5, _y + 0.5, that.scroller.w - 1, that.scroller.h - 1, that.settings.cornerRadius );
                }
            }
            else if ( that.isHorizontalScroll && that.maxScrollX != 0 ) {
                var _x = that.scroller.x >> 0, arrow = that.settings.showArrows ? that.arrowPosition : 0
                if ( _x < arrow ) {
                    _x = arrow;
                }
                var _r = (that.scroller.x + that.scroller.w) >> 0;
                if ( _r > (that.canvasW - arrow - 2) ) {
                    _r = that.canvasW - arrow - 1;
                }

                if ( _r > _x ) {
                    that.roundRect( _x + 0.5, that.scroller.y - 0.5, that.scroller.w - 1, that.scroller.h - 1, that.settings.cornerRadius );
                }
            }
        }

        if ( this.fadeInActive && this.lastScrollerStatus == ScrollOverType.OVER && this.scrollerStatus == ScrollOverType.OVER ) {
            return;
        }

        clearTimeout( this.fadeInTimeout );
        this.fadeInTimeout = null;
        clearTimeout( this.fadeOutTimeout );
        this.fadeOutTimeout = null;

        this.fadeInActive = false;
        this.fadeOutActive = false;

        drawScroller();

        this.context.lineWidth = 1;
        switch ( this.scrollerStatus ) {

            case ScrollOverType.LAYER:
            case ScrollOverType.OVER:
            {
                if ( this.lastScrollerStatus == ScrollOverType.NONE ) {
                    this.lastScrollerStatus = this.scrollerStatus;
                    this.startColorFadeInOutStart = this.startColorFadeInOutStart < 0 ? startColorFadeIn : this.startColorFadeInOutStart;
                    this.fadeInActive = true;
                    fadeIn();
                }
                else{
                    this.context.fillStyle = this.settings.scrollerColorOver;
                    this.context.strokeStyle = this.settings.strokeStyleOver;
                    piperImgIndex = 1;
                }
                break;
            }
            case ScrollOverType.ACTIVE:
            {
                this.context.fillStyle = this.settings.scrollerColorActive;
                this.context.strokeStyle = this.settings.strokeStyleActive;
                piperImgIndex = 1;
                break;
            }
            case ScrollOverType.NONE:
            default:
            {
                if ( this.lastScrollerStatus == ScrollOverType.OVER ) {
                    this.lastScrollerStatus = this.scrollerStatus;
                    this.startColorFadeInOutStart = this.startColorFadeInOutStart < 0 ? startColorFadeOut : this.startColorFadeInOutStart;
                    this.fadeOutActive = true;
                    fadeOut();
                }
                else{
                    this.context.fillStyle = this.settings.scrollerColor;
                    this.context.strokeStyle = this.settings.strokeStyleNone;

                    this.startColorFadeInOutStart = this.startColorFadeInStart = _HEXTORGB_(this.settings.scrollerColor).R;
                    this.startColorFadeOutStart = _HEXTORGB_(this.settings.scrollerColorOver).R;

                    piperImgIndex = 0;

                    var r, g, b, ctx_piperImg, _data, px, _len
                    r = _HEXTORGB_( this.settings.piperColor );
                    g = r.G;
                    b = r.B;
                    r = r.R;

                    if ( this.isVerticalScroll ) {
                        ctx_piperImg = this.piperImgVert[piperImgIndex].getContext( '2d' );
                        _data = ctx_piperImg.getImageData( 0, 0, this.piperImgVert[piperImgIndex].width, this.piperImgVert[piperImgIndex].height );
                    }
                    else if ( this.isHorizontalScroll ) {
                        ctx_piperImg = this.piperImgHor[piperImgIndex].getContext( '2d' );
                        _data = ctx_piperImg.getImageData( 0, 0, this.piperImgHor[piperImgIndex].width, this.piperImgHor[piperImgIndex].height );
                    }

                    if( this.isVerticalScroll || this.isHorizontalScroll ){

                        px = _data.data;
                        _len = px.length;

                        for ( var i = 0; i < _len; i += 4 ) {
                            if ( px[i + 3] == 255 ) {
                                px[i] = r;
                                px[i + 1] = g;
                                px[i + 2] = b;
                            }
                        }

                        ctx_piperImg.putImageData( _data, 0, 0 );

                    }

                }
                break;
            }

        }

        if ( !this.fadeInActive && !this.fadeOutActive ) {
            this.context.fill();
            this.context.stroke();

            if ( this.isVerticalScroll && this.maxScrollY != 0 ) {
                this.context.drawImage( this.piperImgVert[piperImgIndex], this.scroller.x + (this.settings.slimScroll ? 2 : 3), (this.scroller.y >> 0) + Math.floor( this.scroller.h / 2 ) - 6 );
            }
            else if ( this.isHorizontalScroll && this.maxScrollX != 0 ) {
                this.context.drawImage( this.piperImgHor[piperImgIndex], (this.scroller.x >> 0) + Math.floor( this.scroller.w / 2 ) - 6, this.scroller.y + (this.settings.slimScroll ? 2 : 3) );
            }

        }

        this.lastScrollerStatus = this.scrollerStatus;

    },
    _drawArrow:function ( type ) {
        if ( this.settings.showArrows ) {
            var w = this.canvasW;
            var h = this.canvasH;
            if ( this.isVerticalScroll ) {
                switch ( type ) {
                    case ArrowStatus.upLeftArrowHover_downRightArrowNonActive://upArrow mouse hover, downArrow stable
                        if ( ScrollOverType.OVER != this.ScrollOverType1 ) {
                            this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_TOP, ScrollOverType.OVER, this.context, w, h);
                            this.ScrollOverType1 = ScrollOverType.OVER;
                        }
                        if ( ScrollOverType.STABLE != this.ScrollOverType2 ) {
                            this.ArrowDrawer.drawBottomRightArrow( ScrollArrowType.ARROW_BOTTOM, ScrollOverType.STABLE, this.context, w, h );
                            this.ScrollOverType2 = ScrollOverType.STABLE;
                        }
                        break;
                    case ArrowStatus.upLeftArrowActive_downRightArrowNonActive://upArrow mouse down, downArrow stable
                        if ( ScrollOverType.ACTIVE != this.ScrollOverType1 ) {
                            this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_TOP, ScrollOverType.ACTIVE, this.context, w, h);
                            this.ScrollOverType1 = ScrollOverType.ACTIVE;
                        }
                        if ( ScrollOverType.STABLE != this.ScrollOverType2 ) {
                            this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_BOTTOM, ScrollOverType.STABLE, this.context, w, h);
                            this.ScrollOverType2 = ScrollOverType.STABLE;
                        }
                        break;
                    case ArrowStatus.upLeftArrowNonActive_downRightArrowHover://upArrow stable, downArrow mouse hover
                        if ( ScrollOverType.STABLE != this.ScrollOverType1 ) {
                            this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_TOP, ScrollOverType.STABLE, this.context, w, h);
                            this.ScrollOverType1 = ScrollOverType.STABLE;
                        }
                        if ( ScrollOverType.OVER != this.ScrollOverType2 ) {
                            this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_BOTTOM, ScrollOverType.OVER, this.context, w, h);
                            this.ScrollOverType2 = ScrollOverType.OVER;
                        }
                        break;
                    case ArrowStatus.upLeftArrowNonActive_downRightArrowActive://upArrow stable, downArrow mouse down
                        if ( ScrollOverType.STABLE != this.ScrollOverType1 ) {
                            this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_TOP, ScrollOverType.STABLE, this.context, w, h);
                            this.ScrollOverType1 = ScrollOverType.STABLE;
                        }
                        if ( ScrollOverType.ACTIVE != this.ScrollOverType2 ) {
                            this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_BOTTOM, ScrollOverType.ACTIVE, this.context, w, h);
                            this.ScrollOverType2 = ScrollOverType.ACTIVE;
                        }
                        break;
                    case ArrowStatus.arrowHover://upArrow stable, downArrow mouse down
                        if ( ScrollOverType.STABLE != this.ScrollOverType1 ) {
                            this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_TOP, ScrollOverType.STABLE, this.context, w, h);
                            this.ScrollOverType1 = ScrollOverType.STABLE;
                        }
                        if ( ScrollOverType.STABLE != this.ScrollOverType2 ) {
                            this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_BOTTOM, ScrollOverType.STABLE, this.context, w, h);
                            this.ScrollOverType2 = ScrollOverType.STABLE;
                        }
                        break;
                    default ://upArrow stable, downArrow stable
                        if ( ScrollOverType.NONE != this.ScrollOverType1 ) {
                            this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_TOP, ScrollOverType.NONE, this.context, w, h);
                            this.ScrollOverType1 = ScrollOverType.NONE;
                        }
                        if ( ScrollOverType.NONE != this.ScrollOverType2 ) {
                            this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_BOTTOM, ScrollOverType.NONE, this.context, w, h);
                            this.ScrollOverType2 = ScrollOverType.NONE;
                        }
                        break;
                }
            }
            if ( this.isHorizontalScroll ) {
                switch ( type ) {
                    case ArrowStatus.upLeftArrowHover_downRightArrowNonActive://leftArrow mouse hover, rightArrow stable
                        if ( ScrollOverType.OVER != this.ScrollOverType1 ) {
                            this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_LEFT, ScrollOverType.OVER, this.context, w, h);
                            this.ScrollOverType1 = ScrollOverType.OVER;
                        }
                        if ( ScrollOverType.STABLE != this.ScrollOverType2 ) {
                            this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_RIGHT, ScrollOverType.STABLE, this.context, w, h);
                            this.ScrollOverType2 = ScrollOverType.STABLE;
                        }
                        break;
                    case ArrowStatus.upLeftArrowActive_downRightArrowNonActive://leftArrow mouse down, rightArrow stable
                        if ( ScrollOverType.ACTIVE != this.ScrollOverType1 ) {
                            this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_LEFT, ScrollOverType.ACTIVE, this.context, w, h);
                            this.ScrollOverType1 = ScrollOverType.ACTIVE;
                        }
                        if ( ScrollOverType.STABLE != this.ScrollOverType2 ) {
//                            this.ArrowDrawer.drawArrow( ScrollArrowType.ARROW_RIGHT, ScrollOverType.STABLE, this.context, w, h );
                            this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_RIGHT, ScrollOverType.STABLE, this.context, w, h);
                            this.ScrollOverType2 = ScrollOverType.STABLE;
                        }
                        break;
                    case ArrowStatus.upLeftArrowNonActive_downRightArrowHover://leftArrow stable, rightArrow mouse hover
                        if ( ScrollOverType.STABLE != this.ScrollOverType1 ) {
                            this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_LEFT, ScrollOverType.STABLE, this.context, w, h);
                            this.ScrollOverType1 = ScrollOverType.STABLE;
                        }
                        if ( ScrollOverType.OVER != this.ScrollOverType2 ) {
                            this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_RIGHT, ScrollOverType.OVER, this.context, w, h);
                            this.ScrollOverType2 = ScrollOverType.OVER;
                        }
                        break;
                    case ArrowStatus.upLeftArrowNonActive_downRightArrowActive://leftArrow stable, rightArrow mouse down
                        if ( ScrollOverType.STABLE != this.ScrollOverType1 ) {
                            this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_LEFT, ScrollOverType.STABLE, this.context, w, h);
                            this.ScrollOverType1 = ScrollOverType.STABLE;
                        }
                        if ( ScrollOverType.ACTIVE != this.ScrollOverType2 ) {
                            this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_RIGHT, ScrollOverType.ACTIVE, this.context, w, h);
                            this.ScrollOverType2 = ScrollOverType.ACTIVE;
                        }
                        break;
                    case ArrowStatus.arrowHover://upArrow stable, downArrow mouse down
                        if ( ScrollOverType.STABLE != this.ScrollOverType1 ) {
                            this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_LEFT, ScrollOverType.STABLE, this.context, w, h);
                            this.ScrollOverType1 = ScrollOverType.STABLE;
                        }
                        if ( ScrollOverType.STABLE != this.ScrollOverType2 ) {
                            this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_RIGHT, ScrollOverType.STABLE, this.context, w, h);
                            this.ScrollOverType2 = ScrollOverType.STABLE;
                        }
                        break;
                    default ://leftArrow stable, rightArrow stable
                        if ( ScrollOverType.NONE != this.ScrollOverType1 ) {
                            this.ArrowDrawer.drawTopLeftArrow(ScrollArrowType.ARROW_LEFT, ScrollOverType.NONE, this.context, w, h);
                            this.ScrollOverType1 = ScrollOverType.NONE;
                        }
                        if ( ScrollOverType.NONE != this.ScrollOverType2 ) {
                            this.ArrowDrawer.drawBottomRightArrow(ScrollArrowType.ARROW_RIGHT, ScrollOverType.NONE, this.context, w, h);
                            this.ScrollOverType2 = ScrollOverType.NONE;
                        }
                        break;
                }
            }
        }
    },

    _setDimension:function ( h, w ) {

        if ( w == this.canvasW && h == this.canvasH )
            return;

        this.ScrollOverType1 = -1;
        this.ScrollOverType2 = -1;

        this.canvasW = w;
        this.canvasH = h;

        if ( !this.IsRetina ) {
            this.canvas.height = h;
            this.canvas.width = w;

            this.context.setTransform( 1, 0, 0, 1, 0, 0 );
        }
        else {
            this.canvas.height = h << 1;
            this.canvas.width = w << 1;

            this.context.setTransform( 2, 0, 0, 2, 0, 0 );
        }
    },
    _setScrollerHW:function () {
        if ( this.isVerticalScroll ) {
            this.scroller.x = 1;//0;
            this.scroller.w = this.canvasW - 1;
            if ( this.settings.showArrows )
                this.ArrowDrawer.InitSize( this.settings.arrowSizeW, this.settings.arrowSizeH, this.IsRetina );
        }
        else if ( this.isHorizontalScroll ) {
            this.scroller.y = 1;//0;
            this.scroller.h = this.canvasH - 1;
            if ( this.settings.showArrows )
                this.ArrowDrawer.InitSize( this.settings.arrowSizeH, this.settings.arrowSizeW, this.IsRetina );
        }
    },
    _MouseHoverOnScroller:function ( mp ) {
        if ( mp.x >= this.scroller.x && mp.x <= this.scroller.x + this.scroller.w &&
            mp.y >= this.scroller.y && mp.y <= this.scroller.y + this.scroller.h ) {
            return true;
        }
        else {
            return false;
        }
    },
    _MouseHoverOnArrowUp:function ( mp ) {
        if ( this.isVerticalScroll ) {
            if (
                mp.x >= 0 &&
                    mp.x <= this.canvasW &&
                    mp.y >= 0 &&
                    mp.y <= this.settings.arrowDim
                ) {
                return true;
            }
            else return false;
        }
        if ( this.isHorizontalScroll ) {
            if (
                mp.x >= 0 &&
                    mp.x <= this.settings.arrowDim &&
                    mp.y >= 0 &&
                    mp.y <= this.canvasH
                ) {
                return true;
            }
            else return false;
        }
    },
    _MouseHoverOnArrowDown:function ( mp ) {
        if ( this.isVerticalScroll ) {
            if (
                mp.x >= 0 &&
                    mp.x <= this.canvasW &&
                    mp.y >= this.canvasH - this.settings.arrowDim &&
                    mp.y <= this.canvasH
                ) {
                return true;
            }
            else return false;
        }
        if ( this.isHorizontalScroll ) {
            if (
                mp.x >= this.canvasW - this.settings.arrowDim &&
                    mp.x <= this.canvasW &&
                    mp.y >= 0 &&
                    mp.y <= this.canvasH
                ) {
                return true;
            }
            else return false;
        }
    },

    _arrowDownMouseDown:function () {
        var that = this, scrollTimeout, isFirst = true,
            doScroll = function () {
                if ( that.isVerticalScroll )
                    that.scrollByY( that.settings.vscrollStep );
                else if ( that.isHorizontalScroll )
                    that.scrollByX( that.settings.hscrollStep );
                that._drawArrow( ArrowStatus.upLeftArrowNonActive_downRightArrowActive );
                scrollTimeout = setTimeout( doScroll, isFirst ? that.settings.initialDelay : that.settings.arrowRepeatFreq );
                isFirst = false;
            };
        doScroll();
        this.bind( "mouseup.main mouseout", function () {
            scrollTimeout && clearTimeout( scrollTimeout );
            scrollTimeout = null;
        } );
    },
    _arrowUpMouseDown:function () {
        var that = this, scrollTimeout, isFirst = true,
            doScroll = function () {
                if ( that.isVerticalScroll )
                    that.scrollByY( -that.settings.vscrollStep );
                else if ( that.isHorizontalScroll )
                    that.scrollByX( -that.settings.hscrollStep );
                that._drawArrow( ArrowStatus.upLeftArrowActive_downRightArrowNonActive );
                scrollTimeout = setTimeout( doScroll, isFirst ? that.settings.initialDelay : that.settings.arrowRepeatFreq );
                isFirst = false;
            };
        doScroll();
        this.bind( "mouseup.main mouseout", function () {
            scrollTimeout && clearTimeout( scrollTimeout );
            scrollTimeout = null;
        } )
    },

    getCurScrolledX:function () {
        return this.scrollHCurrentX;
    },
    getCurScrolledY:function () {
        return this.scrollVCurrentY;
    },
    getMaxScrolledY:function () {
        return this.maxScrollY;
    },
    getMaxScrolledX:function () {
        return this.maxScrollX;
    },
    getIsLockedMouse:function () {
        return (this.that.mouseDownArrow || this.that.mouseDown);
    },
    /************************************************************************/
    /*events*/
    evt_mousemove:function ( e ) {

        var arrowStat = ArrowStatus.arrowHover;
        var evt = e || window.event;

        if ( evt.preventDefault )
            evt.preventDefault();
        else
            evt.returnValue = false;

        var mousePos = this.that.getMousePosition( evt );
        this.that.EndMousePosition.x = mousePos.x;
        this.that.EndMousePosition.y = mousePos.y;
        var downHover = this.that._MouseHoverOnArrowDown( mousePos ),
            upHover = this.that._MouseHoverOnArrowUp( mousePos ),
            scrollerHover = this.that._MouseHoverOnScroller( mousePos );

        if ( scrollerHover ) {
            this.that.scrollerStatus = ScrollOverType.OVER;
            arrowStat = ArrowStatus.arrowHover;
        }
        else if ( this.that.settings.showArrows && (downHover || upHover) ) {
            this.that.scrollerStatus = ScrollOverType.OVER;
            if ( !this.that.mouseDownArrow ) {
                if ( upHover ) {
                    arrowStat = ArrowStatus.upLeftArrowHover_downRightArrowNonActive;
                }
                else if ( downHover ) {
                    arrowStat = ArrowStatus.upLeftArrowNonActive_downRightArrowHover
                }
            }
        }
        else {
            if ( this.that.mouseover ) {
                arrowStat = ArrowStatus.arrowHover;
            }
            this.that.scrollerStatus = ScrollOverType.OVER;
        }
        if ( this.that.mouseDown && this.that.scrollerMouseDown ) {
            this.that.moveble = true;
        }
        else {
            this.that.moveble = false;
        }

        if ( this.that.isVerticalScroll ) {
            if ( this.that.moveble && this.that.scrollerMouseDown ) {
                var isTop = false, isBottom = false;
                this.that.scrollerStatus = ScrollOverType.ACTIVE;
                var _dlt = this.that.EndMousePosition.y - this.that.StartMousePosition.y;
                if ( this.that.EndMousePosition.y == this.that.StartMousePosition.y ) {
                    return;
                }
                else if ( this.that.EndMousePosition.y < this.that.arrowPosition ) {
                    this.that.EndMousePosition.y = this.that.arrowPosition;
                    _dlt = 0;
                    this.that.scroller.y = this.that.arrowPosition;
                }
                else if ( this.that.EndMousePosition.y > this.that.canvasH - this.that.arrowPosition ) {
                    this.that.EndMousePosition.y = this.that.canvasH - this.that.arrowPosition;
                    _dlt = 0;
                    this.that.scroller.y = this.that.canvasH - this.that.arrowPosition - this.that.scroller.h;
                }
                else {
                    if ( (_dlt > 0 && this.that.scroller.y + _dlt + this.that.scroller.h <= this.that.canvasH - this.that.arrowPosition ) ||
                        (_dlt < 0 && this.that.scroller.y + _dlt >= this.that.arrowPosition) ) {
                        this.that.scroller.y += _dlt;
                    }
                }

                var destY = (this.that.scroller.y - this.that.arrowPosition) * this.that.scrollCoeff;
                //var result = editor.WordControl.CorrectSpeedVerticalScroll(destY);
                var result = this.that._correctScrollV( this.that, destY );
                if ( result != null && result.isChange === true ) {
                    destY = result.Pos;
                }

                this.that._scrollV( this.that, evt, destY, isTop, isBottom );
                this.that.moveble = false;
                this.that.StartMousePosition.x = this.that.EndMousePosition.x;
                this.that.StartMousePosition.y = this.that.EndMousePosition.y;
            }
        }
        else if ( this.that.isHorizontalScroll ) {
            if ( this.that.moveble && this.that.scrollerMouseDown ) {

                var isTop = false, isBottom = false;
                this.that.scrollerStatus = ScrollOverType.ACTIVE;
                var _dlt = this.that.EndMousePosition.x - this.that.StartMousePosition.x;
                if ( this.that.EndMousePosition.x == this.that.StartMousePosition.x )
                    return;
                else if ( this.that.EndMousePosition.x < this.that.arrowPosition ) {
                    this.that.EndMousePosition.x = this.that.arrowPosition;
                    _dlt = 0;
                    this.that.scroller.x = this.that.arrowPosition;
                }
                else if ( this.that.EndMousePosition.x > this.that.canvasW - this.that.arrowPosition ) {
                    this.that.EndMousePosition.x = this.that.canvasW - this.that.arrowPosition;
                    _dlt = 0;
                    this.that.scroller.x = this.that.canvasW - this.that.arrowPosition - this.that.scroller.w;
                }
                else {
                    if ( (_dlt > 0 && this.that.scroller.x + _dlt + this.that.scroller.w <= this.that.canvasW - this.that.arrowPosition ) ||
                        (_dlt < 0 && this.that.scroller.x + _dlt >= this.that.arrowPosition) )
                        this.that.scroller.x += _dlt;
                }
                var destX = (this.that.scroller.x - this.that.arrowPosition) * this.that.scrollCoeff

                this.that._scrollH( this.that, evt, destX, isTop, isBottom );
                this.that.moveble = false;

                this.that.StartMousePosition.x = this.that.EndMousePosition.x;
                this.that.StartMousePosition.y = this.that.EndMousePosition.y;
            }
        }

        if ( !this.that.mouseDownArrow ) {
            this.that._drawArrow( arrowStat );
        }
        if ( this.that.lastScrollerStatus != this.that.scrollerStatus ) {
            this.that._draw();
        }

    },
    evt_mouseout:function ( e ) {

        var evt = e || window.event;

        if ( this.that.settings.showArrows ) {
            this.that.mouseDownArrow = false;
            this.that.handleEvents( "onmouseout", evt );
        }

        if ( !this.that.moveble ) {
            this.that.scrollerStatus = ScrollOverType.NONE;
            this.that._drawArrow();
        }

        if ( this.that.lastScrollerStatus != this.that.scrollerStatus ) {
            this.that._draw();
        }

    },
    evt_mouseover:function ( e ) {

        this.that.mouseover = true;

    },
    evt_mouseup:function ( e ) {
        var evt = e || window.event;

        if ( evt.preventDefault )
            evt.preventDefault();
        else
            evt.returnValue = false;

        var mousePos = this.that.getMousePosition( evt );
        this.that.scrollTimeout && clearTimeout( this.that.scrollTimeout );
        this.that.scrollTimeout = null;
        if ( !this.that.scrollerMouseDown ) {
            if ( this.that.settings.showArrows && this.that._MouseHoverOnArrowDown( mousePos ) ) {
                this.that.handleEvents( "onmouseup", evt );
                this.that._drawArrow( ArrowStatus.upLeftArrowNonActive_downRightArrowHover );
            }
            else if ( this.that.settings.showArrows && this.that._MouseHoverOnArrowUp( mousePos ) ) {
                this.that.handleEvents( "onmouseup", evt );
                this.that._drawArrow( ArrowStatus.upLeftArrowHover_downRightArrowNonActive );
            }
            this.that.mouseDownArrow = false;
        }
        else {
            this.that.mouseDown = false;
            this.that.mouseUp = true;
            this.that.scrollerMouseDown = false;
            this.that.mouseDownArrow = false;
            if ( this.that._MouseHoverOnScroller( mousePos ) ) {
                this.that.scrollerStatus = ScrollOverType.OVER;
            }
            else {
                this.that.scrollerStatus = ScrollOverType.NONE;
            }
            this.that._drawArrow();
            this.that._draw();
        }

        //for unlock global mouse event
        if ( this.that.onLockMouse && this.that.offLockMouse ) {
            this.that.offLockMouse( evt );
        }
        this.that.handleEvents( "onmouseup", evt );
    },
    evt_mousedown:function ( e ) {
        var evt = e || window.event;

        // если сделать превент дефолт - перестанет приходить mousemove от window
        /*
         if (evt.preventDefault)
         evt.preventDefault();
         else
         evt.returnValue = false;
         */

        var mousePos = this.that.getMousePosition( evt ),
            downHover = this.that._MouseHoverOnArrowDown( mousePos ),
            upHover = this.that._MouseHoverOnArrowUp( mousePos );

        if ( this.that.settings.showArrows && downHover ) {
            this.that.mouseDownArrow = true;
            this.that._arrowDownMouseDown();
        }
        else if ( this.that.settings.showArrows && upHover ) {
            this.that.mouseDownArrow = true;
            this.that._arrowUpMouseDown();
        }
        else {
            this.that.mouseDown = true;
            this.that.mouseUp = false;

            if ( this.that._MouseHoverOnScroller( mousePos ) ) {
                this.that.scrollerMouseUp = false;
                this.that.scrollerMouseDown = true;

                if ( this.that.onLockMouse ) {
                    this.that.onLockMouse( evt );
                }
                this.that.StartMousePosition.x = mousePos.x;
                this.that.StartMousePosition.y = mousePos.y;
                this.that.scrollerStatus = ScrollOverType.ACTIVE;
                this.that._draw();
            }
            else {
                if ( this.that.isVerticalScroll ) {
                    var _tmp = this,
                        direction = mousePos.y - this.that.scroller.y - this.that.scroller.h / 2,
                        step = this.that.paneHeight * this.that.settings.scrollPagePercent,
//                        verticalDragPosition = this.that.scroller.y,
                        isFirst = true,
                        doScroll = function () {
                            _tmp.that.lock = true;
                            if ( direction > 0 ) {
                                if ( _tmp.that.scroller.y + _tmp.that.scroller.h / 2 + step < mousePos.y ) {
                                    _tmp.that.scrollByY( step * _tmp.that.scrollCoeff );
                                }
                                else {
                                    var _step = Math.abs( _tmp.that.scroller.y + _tmp.that.scroller.h / 2 - mousePos.y );
                                    _tmp.that.scrollByY( _step * _tmp.that.scrollCoeff );
                                    cancelClick();
                                    return;
                                }
                            }
                            else if ( direction < 0 ) {
                                if ( _tmp.that.scroller.y + _tmp.that.scroller.h / 2 - step > mousePos.y ) {
                                    _tmp.that.scrollByY( -step * _tmp.that.scrollCoeff );
                                }
                                else {
                                    var _step = Math.abs( _tmp.that.scroller.y + _tmp.that.scroller.h / 2 - mousePos.y );
                                    _tmp.that.scrollByY( -_step * _tmp.that.scrollCoeff );
                                    cancelClick();
                                    return;
                                }
                            }
                            _tmp.that.scrollTimeout = setTimeout( doScroll, isFirst ? _tmp.that.settings.initialDelay : _tmp.that.settings.trackClickRepeatFreq );
                            isFirst = false;
                            _tmp.that._drawArrow( ArrowStatus.arrowHover );
                        },
                        cancelClick = function () {
                            _tmp.that.scrollTimeout && clearTimeout( _tmp.that.scrollTimeout );
                            _tmp.that.scrollTimeout = null;
                            _tmp.that.unbind( "mouseup.main", cancelClick );
                            _tmp.that.lock = false;
                        };

                    if ( this.that.onLockMouse ) {
                        this.that.onLockMouse( evt );
                    }

                    doScroll();
                    this.that.bind( "mouseup.main", cancelClick );
                }
                if ( this.that.isHorizontalScroll ) {
                    var _tmp = this,
                        direction = mousePos.x - this.that.scroller.x - this.that.scroller.w / 2,
                        step = this.that.paneWidth * this.that.settings.scrollPagePercent,
//                        horizontalDragPosition = this.that.scroller.x,
                        isFirst = true,
                        doScroll = function () {
                            _tmp.that.lock = true;
                            if ( direction > 0 ) {
                                if ( _tmp.that.scroller.x + _tmp.that.scroller.w / 2 + step < mousePos.x ) {
                                    _tmp.that.scrollByX( step * _tmp.that.scrollCoeff );
                                }
                                else {
                                    var _step = Math.abs( _tmp.that.scroller.x + _tmp.that.scroller.w / 2 - mousePos.x );
                                    _tmp.that.scrollByX( _step * _tmp.that.scrollCoeff );
                                    cancelClick();
                                    return;
                                }
                            }
                            else if ( direction < 0 ) {
                                if ( _tmp.that.scroller.x + _tmp.that.scroller.w / 2 - step > mousePos.x ) {
                                    _tmp.that.scrollByX( -step * _tmp.that.scrollCoeff );
                                }
                                else {
                                    var _step = Math.abs( _tmp.that.scroller.x + _tmp.that.scroller.w / 2 - mousePos.x );
                                    _tmp.that.scrollByX( -_step * _tmp.that.scrollCoeff );
                                    cancelClick();
                                    return;
                                }
                            }
                            _tmp.that.scrollTimeout = setTimeout( doScroll, isFirst ? _tmp.that.settings.initialDelay : _tmp.that.settings.trackClickRepeatFreq );
                            isFirst = false;
                            _tmp.that._drawArrow( ArrowStatus.arrowHover );
                        },
                        cancelClick = function () {
                            _tmp.that.scrollTimeout && clearTimeout( _tmp.that.scrollTimeout );
                            _tmp.that.scrollTimeout = null;
                            _tmp.that.unbind( "mouseup.main", cancelClick );
                            _tmp.that.lock = false;
                        };

                    if ( this.that.onLockMouse ) {
                        this.that.onLockMouse( evt );
                    }

                    doScroll();
                    this.that.bind( "mouseup.main", cancelClick );
                }
            }
        }
    },
    evt_mousewheel:function ( e ) {
        var evt = e || window.event;
        /* if ( evt.preventDefault )
         evt.preventDefault();
         else
         evt.returnValue = false;*/

        var delta = 1;
        if ( this.that.isHorizontalScroll ) return;
        var mp = {}, isTop = false, isBottom = false;
        if ( undefined != evt.wheelDelta )
            delta = (evt.wheelDelta > 0) ? -this.that.settings.vscrollStep : this.that.settings.vscrollStep;
        else
            delta = (evt.detail > 0) ? this.that.settings.vscrollStep : -this.that.settings.vscrollStep;
        delta *= this.that.settings.wheelScrollLines;
        this.that.scroller.y += delta;
        if ( this.that.scroller.y < 0 ) {
            this.that.scroller.y = 0;
            isTop = true, isBottom = false;
        }
        else if ( this.that.scroller.y + this.that.scroller.h > this.that.canvasH ) {
            this.that.scroller.y = this.that.canvasH - this.that.arrowPosition - this.that.scroller.h;
            isTop = false, isBottom = true;
        }
        this.that.scrollByY( delta )
    },
    evt_click:function ( e ) {
        var evt = e || windows.event;
        var mousePos = this.that.getMousePosition( evt );
        if ( this.that.isHorizontalScroll ) {
            if ( mousePos.x > this.arrowPosition && mousePos.x < this.that.canvasW - this.that.arrowPosition ) {
                if ( this.that.scroller.x > mousePos.x ) {
                    this.that.scrollByX( -this.that.settings.vscrollStep );
                }
                if ( this.that.scroller.x < mousePos.x && this.that.scroller.x + this.that.scroller.w > mousePos.x ) {
                    return false;
                }
                if ( this.that.scroller.x + this.that.scroller.w < mousePos.x ) {
                    this.that.scrollByX( this.that.settings.hscrollStep );
                }
            }
        }
        if ( this.that.isVerticalScroll ) {
            if ( mousePos.y > this.that.arrowPosition && mousePos.y < this.that.canvasH - this.that.arrowPosition ) {
                if ( this.that.scroller.y > mousePos.y ) {
                    this.that.scrollByY( -this.that.settings.vscrollStep );
                }
                if ( this.that.scroller.y < mousePos.y && this.that.scroller.y + this.that.scroller.h > mousePos.y ) {
                    return false;
                }
                if ( this.that.scroller.y + this.that.scroller.h < mousePos.y ) {
                    this.that.scrollByY( this.that.settings.hscrollStep );
                }
            }
        }
    },

    /************************************************************************/
    /*for events*/
    bind:function ( typesStr, handler ) {
        var types = typesStr.split( " " );
        /*
         * loop through types and attach event listeners to
         * each one.  eg. "click mouseover.namespace mouseout"
         * will create three event bindings
         */
        for ( var n = 0; n < types.length; n++ ) {
            var type = types[n];
            var event = (type.indexOf( 'touch' ) == -1) ? 'on' + type : type;
            var parts = event.split( "." );
            var baseEvent = parts[0];
            var name = parts.length > 1 ? parts[1] : "";

            if ( !this.eventListeners[baseEvent] ) {
                this.eventListeners[baseEvent] = [];
            }

            this.eventListeners[baseEvent].push( {
                name:name,
                handler:handler
            } );
        }
    },
    unbind:function ( typesStr ) {
        var types = typesStr.split( " " );

        for ( var n = 0; n < types.length; n++ ) {
            var type = types[n];
            var event = (type.indexOf( 'touch' ) == -1) ? 'on' + type : type;
            var parts = event.split( "." );
            var baseEvent = parts[0];

            if ( this.eventListeners[baseEvent] && parts.length > 1 ) {
                var name = parts[1];

                for ( var i = 0; i < this.eventListeners[baseEvent].length; i++ ) {
                    if ( this.eventListeners[baseEvent][i].name == name ) {
                        this.eventListeners[baseEvent].splice( i, 1 );
                        if ( this.eventListeners[baseEvent].length === 0 ) {
                            this.eventListeners[baseEvent] = undefined;
                        }
                        break;
                    }
                }
            }
            else {
                this.eventListeners[baseEvent] = undefined;
            }
        }
    },
    handleEvents:function ( eventType, evt, p ) {
        var that = this;
        // generic events handler
        function handle( obj ) {
            var el = obj.eventListeners;
            if ( el[eventType] ) {
                var events = el[eventType];
                for ( var i = 0; i < events.length; i++ ) {
                    events[i].handler.apply( obj, [evt] );
                }
            }
        }

        /*
         * simulate bubbling by handling shape events
         * first, followed by group events, followed
         * by layer events
         */
        handle( that );
    }
};

    //---------------------------------------------------------export---------------------------------------------------
    window['AscCommon'] = window['AscCommon'] || {};
    window["AscCommon"].ScrollObject = ScrollObject;
})(window);
