// simpleParticles.js
//
// Build a 100 x 100 pixel random particle generator
//
// This is the animation code for the canvas element in www.chipmoore.com/index.php
//
// April, 2010, Chip Moore

//include( "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" );

// TODO: How to import file into this file.
// Requires: "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";

var ctx, canvasHeight, canvasWidth;
var ParticleArray = [];
//var nParticles = 20;
var nParticles = 15;
var nParticleRadius = 15;

$(function() {
    SetupCanvas();

    if ( ctx != null )
    {
        //$("#AddParticle").click(AddParticle);
        //$("#AddParticles").click(AddParticles);
        AddParticles();
        setInterval( Draw, 50 );
    }
    });

function SetupCanvas()
{
    var thisCanvas = document.getElementById( 'canvasObject' );

    if ( thisCanvas && thisCanvas.getContext )
    {
        // NOTE: The default width and height of a convas object is
        // 300 x 150. This value has to be a number, not a string like
        // "200px". Set it in code or in the tag, not in styles.
        canvasHeight = $( thisCanvas ).height();
        canvasWidth =  $( thisCanvas ).width();

        ctx = thisCanvas.getContext( '2d' );
        ctx.globalCompositeOperation = "lighter";
    }
}

function Draw()
{
    ctx.clearRect( 0, 0, ( canvasWidth ), ( canvasHeight ) );

        $( ParticleArray ).each( function() {
        this.Draw();
    });
}

function AddParticles()
{
    for ( var index = 0; index < nParticles; index++ )
    {
	ParticleArray.push( new Particle (Math.rand( 0, canvasWidth ), Math.rand( 0, canvasHeight) ) );
    }
}

function AddParticle()
{
    ParticleArray.push( new Particle( Math.rand( 0, canvasWidth ), Math.rand( 0, canvasHeight ) ) );
}

function Particle(xCoord, yCoord)
{
    var particleRadius = nParticleRadius;
    var direction = Math.rand( 0, 359 );
    //var speed = Math.rand( 1 ,5 );
    var speed = Math.rand( 1 ,3 );
    var startColor = "rgb( " + Math.rand( 0, 255 ) + "," + Math.rand( 0, 255 ) + "," + Math.rand( 0, 255 ) + " )";
    var endColor = "rgba( " + Math.rand( 0, 255 ) + "," + Math.rand( 0, 255 ) + "," + Math.rand( 0, 255 ) + ",0 )";

    var x = xCoord;
    var y = yCoord;

    this.Draw = function()
    {
        // Move the particle.
        x += Math.sin( direction ) * speed;
        y += Math.cos( direction ) * speed;

        // If the particle position is outside the canvas, move it to the opposite side.
        if ( x > canvasWidth )
            x = 0;
        else if ( x < 0 )
            x = canvasWidth;
        if ( y >= canvasHeight )
            y = 0;
        else if ( y < 0 )
            y = canvasHeight;

        // Draw the particle.
        DrawGradient(x, y);

        // Add extra gradients temporarily so it appears the particle
        // is wrapping around the screen.
        if ( x > ( canvasWidth ) - particleRadius )
            DrawGradient( x - ( canvasWidth ), y );
        else if ( x < particleRadius )
            DrawGradient( ( canvasWidth ) + x, y );

        if ( y > ( canvasHeight ) - particleRadius )
            DrawGradient( x, y - ( canvasHeight ) );
        else if ( y < particleRadius )
            DrawGradient( x, y + ( canvasHeight ) );
    };

    function DrawGradient( a, b )
    {
        //var p = ctx.createRadialGradient( a, b, 0, a, b, particleRadius );
        var p = ctx.createRadialGradient( a, b, 0, a, b, particleRadius );

        p.addColorStop( 0, startColor );
        //p.addColorStop( 1, endColor );
        p.addColorStop( 1, endColor );

        ctx.fillStyle = p;
        ctx.fillRect( a - particleRadius, b - particleRadius, particleRadius * 2, particleRadius * 2 );
        //ctx.fillRect( a, b, a + particleRadius, b + particleRadius );
    }
} // end function Particle

Math.rand = function( l, u )
{
    return Math.floor((Math.random() * (u-l+1))+l);
}