var Roller = ( function ( ) {
        var canvas = null,
            ctx = null,
            arc = 0,
            cWidth = 0,
            cHeight	= 0,
            centerPos = null,
            currentAngle = 0,
            progressSpeed = .001,
            rolledItems = [ ],
            rollAnimation = null,
            animationInfo = null,
            arrowLoaded = false,
            arrowImg = new Image( ),
            defaultWeapon = new Image( );

        var Config = {
            itemsNumOrg: 4,
            itemsNum: 4,
            defaultWeaponImage: 'https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot621FAR17P7NdTRH-t26q4SZlvD7PYTQgXtu5cB1g_zMyoD0mlOx5UM5ZWClcYCUdgU3Z1rQ_FK-xezngZO46MzOziQ1vSMmtCmIyxfkgx5SLrs4SgJFJKs/96fx96f',
            defaultWeaponObject: null,
            imageWidth: 96
        };

        function Roller( ) {
            canvas = document.getElementById( 'roller' );
            ctx = canvas.getContext( '2d' );

            arc = ( 360 / Config.itemsNum ) * Math.PI / 180;
            currentAngle = -arc * 2;

            cWidth = canvas.width;
            cHeight = canvas.height;
            centerPos = { x: cWidth / 2, y: cHeight / 2 + 15 };

            arrowImg.src = 'static/images/roller_arrow.png';
            arrowImg.onload = drawArrow;

            defaultWeapon.src = Config.defaultWeaponImage;
            defaultWeapon.onload = saveDefaultWeapon;

            rollAnimation = requestAnimationFrame( drawRoller );
        }

        var updateNum = function (num) {
            Config.itemsNum = num;
            arc = ( 360 / Config.itemsNum ) * Math.PI / 180;
            currentAngle = -arc * 2
        };

        var drawRoller = function( ) {
            ctx.clearRect( 0, 0, cWidth, cHeight );

            ctx.beginPath( );
            ctx.arc( centerPos.x, centerPos.y, cWidth / 2 - 5, 0, 2 * Math.PI, false );
            ctx.arc( centerPos.x, centerPos.y, cWidth / 2, 2 * Math.PI, 0, true );
            ctx.fillStyle = '#09090b';
            ctx.fill( );
            ctx.closePath( );

            if( animationInfo !== null ) {
                var now = Date.now( ),
                    p = ( now - animationInfo.start ) / animationInfo.duration,
                    c = moveAnim( p );

                if( now - animationInfo.start < animationInfo.duration )
                    currentAngle = animationInfo.dest * c;
                else {
                    if( typeof animationInfo.callback === 'function' ) {
                        animationInfo.callback( );

                        animationInfo.callback = null;
                    }
                }
            } else {
                currentAngle += progressSpeed;
            }

            for( var i = 0; i < Config.itemsNum; i++ ) {
                var angle = currentAngle - i * arc,
                    weapon = rolledItems[ i ];

                drawImage( weapon, angle, i );
            }

            if( arrowLoaded )
                drawArrow( );

            rollAnimation = requestAnimationFrame( drawRoller );
        };

        var drawArrow = function( ) {
            ctx.drawImage( arrowImg, centerPos.x - arrowImg.width / 2, 0 );

            arrowLoaded = true;
        };

        var saveDefaultWeapon = function( ) {
            Config.defaultWeaponObject = this;
        };

        var moveAnim = function( n ) {
            return --n * n * n + 1;
        };

        var drawImage = function( weapon, angle, i ) {
            var th1 = angle,
                th2 = angle + arc,
                th3 = ( th1 + th2 ) / 2,
                position = applyAngle( centerPos, th3, ( cWidth - Config.imageWidth ) / 2 - 30 );

            var position2 = applyAngle( centerPos, th3, 40 );

            ctx.fillStyle = !( i % 2 ) ? 'rgba(9, 9, 11, .3)' : 'rgba(255, 255, 255, .05)';

            ctx.beginPath( );
            ctx.arc( centerPos.x, centerPos.y, cWidth / 2 - 5, angle, angle + arc, false );
            ctx.arc( centerPos.x, centerPos.y, 0, angle + arc, angle, true );
            ctx.fill( );
            ctx.closePath( );

            ctx.fillStyle = '#fff';

            if( weapon ) {
                var text_width = (ctx.measureText(weapon['percent']).width / 2);

                ctx.font = "300 12px Montserrat";
                ctx.fillText(weapon['price'], position.x, position.y + 28 );

                ctx.font = "500 20px Montserrat";
                ctx.fillText(weapon['percent'], position2.x - text_width, position2.y );

                if( weapon.imageObject )
                    ctx.drawImage( weapon.imageObject, position.x - Config.imageWidth / 2, position.y - Config.imageWidth / 2 );
                else {
                    var img = new Image( );

                    img.src = weapon.image;
                    img.onload = function( ) { weapon.imageObject = this; };
                }
            } else {
                if( Config.defaultWeaponObject )
                   ctx.drawImage( Config.defaultWeaponObject, position.x - Config.imageWidth / 2, position.y - Config.imageWidth / 2 );
            }
        };

        var applyAngle = function( point, angle, distance ) {
            return {
                x: point.x + ( Math.cos( angle ) * distance ),
                y: point.y + ( Math.sin( angle ) * distance )
            };
        };

        Roller.prototype.updateItems = function( data ) {
            rolledItems = data;
            updateNum(rolledItems.length);
        };

        Roller.prototype.startRoll = function( index, callback ) {
            if( index > Config.itemsNum - 1 )
                return;

            var destAngle = 0;

            destAngle += index * arc;  //index * ilosc_katu_na_element
            destAngle += 6 * Math.PI;  //ile razy ma sie obracac (polowa)
            destAngle -= (1 + Math.random()) * ((Math.PI / Config.itemsNum) * 2);  //losowanie przesiniecia dla pojedynczego elementu

            animationInfo = {
                duration: 10000,
                start: new Date( ),
                dest: destAngle,
                callback: callback
            };
        };

        Roller.prototype.restartRoll = function ( ) {
            animationInfo = null;
            rolledItems = [ ];
            updateNum(Config.itemsNumOrg);
        };

        return Roller;
    } )( );