$(document).ready(function(e)
{
    var canvas=document.getElementById("canvas");
    var tag = document.getElementById("tag");

    var sprite_info = {"s":"dance_atlas.png", 'w':85, 'h':120, 'f':[[0, 0], [85, 0], [170, 0], [255, 0], [340, 0], [0, 120], [85, 120], [170, 120], [255, 120], [340, 120], [0, 240], [85, 240], [170, 240], [255, 240]], "fd":[]};

    var sprites=[];

    var SPEED = 60;

    var image_data = null;
    var image_ele = new Image();
    var data = null;
    var timestamp;
    var fps = 60;

    var canvas_width = canvas.width;
    var canvas_height = canvas.height;
    var canvas_context = canvas.getContext('2d');

    image_ele.src = sprite_info.s;
    image_ele.onload = function()
    {
        var i = 0;
        //getImageData();
        while(i<1)
        {
            createParticles();
            i++
        }
        start();
    }

    function drawloop()
    {
        updateParticles();
        drawParticles();
    }

    /*function putloop()
    {
        updateParticles();
        putParticles();
    }*/

    /*function getImageData()
    {
        canvas_context.drawImage(image_ele, 0, 0, image_ele.width, image_ele.height);
        for(var index = sprite_info.f.length - 1; index > -1; index--)
        {
            var cf = sprite_info.f[index];
            sprite_info.fd[index] = canvas_context.getImageData(cf[0], cf[1], sprite_info.w, sprite_info.h);
        }
    }*/

    function createParticles()
    {
        var sp = Math.floor(Math.random() * SPEED);
        sprites.push(
        {
            x: Math.floor(Math.random() * (canvas_width - sprite_info.w)),
            y: Math.floor(Math.random() * (canvas_height - sprite_info.h)),
            s: sp,
            cs: 0,
            i:0
        });
    }

    canvas.addEventListener('click',createParticles, false);
    canvas.addEventListener('touchstart',createParticles, false);

    function updateParticles()
    {
        for(var index = sprites.length - 1; index > -1 ;index--)
        {
            var sprite = sprites[index];
            if(sprite.cs == 0)
            {
                sprite.cs = sprite.s;
                if(sprite.i == sprite_info.f.length - 1)
                    sprite.i = 0;
                else
                    sprite.i++;
            }
            else
            {
                sprite.cs--;
            }
        }
    }

    function drawParticles()
    {
        canvas_context.clearRect(0,0,canvas.width,canvas.height);
        for(var index = sprites.length - 1; index > -1 ;index--)
        {
            var sprite = sprites[index];
            var frame_i = sprite_info.f[sprite.i];
            canvas_context.drawImage(image_ele, frame_i[0], frame_i[1], sprite_info.w, sprite_info.h, sprite.x,sprite.y, sprite_info.w, sprite_info.h);
        }
    }

    function putParticles()
    {
        canvas_context.clearRect(0,0,canvas.width,canvas.height);
        for(var index = sprites.length - 1; index > -1 ;index--)
        {
            var sprite = sprites[index];
            var frame_i_d = sprite_info.fd[sprite.i];
            canvas_context.putImageData(frame_i_d, sprite.x,sprite.y);
        }
    }

    var requestAnimationFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function(func){setTimeout(func, 0);},
    startTime = window.mozAnimationStartTime || Date.now(), fra = 0;

    function updateProgress(){
        drawloop();
        var drawStart = (timestamp || Date.now());
        fra++;
        if(drawStart - startTime > 1000)
        {
            tag.innerText = "fps:" + fra;
            startTime = drawStart;
            fra = 0;
        }
        if (true){
            requestAnimationFrame(updateProgress);
        }
    }

    function start()
    {
        requestAnimationFrame(updateProgress);
    }







   /* var pnl = document.getElementById("app");
    var SPEED = 10;
    var spy = null;
    var fps = 60;

    var r_time = Math.floor((1000 / fps) * 14);


    function createParticles()
    {
        var new_dancer = document.createElement("div");
        var inner = document.createElement("div");
        new_dancer.appendChild(inner);
        pnl.appendChild(new_dancer);
        new_dancer.style["left"] = Math.floor(Math.random() * (/(\d+)px/.exec(pnl.style["width"])[1] * 1 - sprite_info.w)) + 'px';
        new_dancer.style["top"] = Math.floor(Math.random() * (/(\d+)px/.exec(pnl.style["height"])[1] * 1 - sprite_info.w)) + 'px';
        //var sp = Math.floor(Math.random() * SPEED);
        inner.style['-webkit-animation-duration'] = r_time + 'ms';
        sprites.push(new_dancer);
        spy = new_dancer;
    }

    var drawStart, startTime = Date.now(), fra = 0, timestamp;

    function updateProgress(){
        debugger;
        var drawStart = (timestamp || Date.now());
        fra += 14;
        if(drawStart - startTime > 1000)
        {
            debugger;
            tag.innerText = "fps:" + fra;
            startTime = drawStart;
            fra = 0;
        }
    }



    function start()
    {
        var i = 0;
        while(i<100)
        {
            createParticles();
            i++
        }
        spy.addEventListener("webkitAnimationIteration", updateProgress, false);
    }



    start();*/



});