window.requestAnimFrame = (function (callback) {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

var canvas;

window.onload = function () {
    canvas = document.getElementById("myCanvas");
    
    // init particles
    var particles = [];
    for (var n = 0; n < 10; n++) {
        particles.push({
            x: canvas.width / 2,
            y: canvas.height + 50,
            vx: -3 + (Math.random() * 6),
            vy: 8 + (Math.random() * 7),
            angle: Math.floor(Math.random() * 360),
            rotation: -3 + Math.floor(Math.random() * 6),
            size: Math.floor(40 * (1 + Math.random() * 5)),
            image: Math.floor(Math.random() * 3)
        });
    }

    var imageObj = new Image();
    imageObj.onload = function () {
        animate(particles, imageObj);
    };
    imageObj.src = "/Files/HTML5.png";
}

function drawParticles(particles, imageObj) {
    var context = canvas.getContext("2d");
    if (particles && imageObj) {
        for (var n = 0; n < particles.length; n++) {
            var particle = particles[n];
            drawRotatedImage(context, imageObj, particle.x, particle.y, particle.angle, particle.size);
        }
    }
}

function drawRotatedImage(context, image, x, y, angle, size) {
    // save the current co-ordinate system 
    // before we screw with it
    context.save();

    // move to the middle of where we want to draw our image
    context.translate(x, y);

    // rotate around that point, converting our 
    // angle from degrees to radians 
    context.rotate(angle * Math.PI / 180);

    // draw it up and to the left by half the width
    // and height of the image 
    context.drawImage(image, -(size / 2), -(size / 2), size, size);

    // and restore the co-ords to how they were when we began
    context.restore();
}

function animate(particles, imageObj) {
    context = canvas.getContext("2d");

    updateParticles(particles, imageObj);

    // clear
    context.clearRect(0, 0, canvas.width, canvas.height);

    // draw
    drawParticles(particles, imageObj);

    // request new frame
    requestAnimFrame(
        function () {
            animate(particles, imageObj);
        });
}

function updateParticles(particles, imageObj) {
    for (var n = 0; n < particles.length; n++) {
        var particle = particles[n];

        particle.x += particle.vx;
        particle.y -= particle.vy;
        particle.vy = particle.vy - 0.15;

        particle.angle += particle.rotation;
        if (particle.angle > 360)
            particle.angle = 0;
        else if (particle.angle < 0)
            particle.angle = 360;

        if ((particle.x > canvas.width) || (particle.x < -imageObj.width) || (particle.y > canvas.height + 100)) {
            particle.x = canvas.width / 2;
            particle.y = canvas.height + 50;
            particle.vx = -3 + Math.random() * 6;
            particle.vy = 8 + Math.random() * 7;
            particle.angle = Math.floor(Math.random() * 360);
            particle.rotation = -3 + Math.floor(Math.random() * 6);
            particle.size = Math.floor(40 * (1 + Math.random() * 5));
        }
    }
}