var g_bounce_objects = [];

function On_load()
{
    var canvas = document.getElementById( 'test' );
   
    for( var i = 0; i < 10; ++i ) {
	g_bounce_objects[i] = new Bounce_object( canvas.width, canvas.height );
    }

    setInterval(
	function() {
	    Animate();
	},
	33
    );
}    

var Bounce_object = Class.create({
    m_x	    : 0,
    m_y	    : 0,
    m_dx    : 0,
    m_dy    : 0,
    m_container_width : 0,
    m_container_height : 0,
    m_width : 0,
    m_height : 0,
    
    initialize : function( container_width, container_height ) {
	this.m_x = Math.random() * container_width; 
	this.m_y = Math.random() * container_height; 
	this.m_dx = Math.random() * 5 - 2.5;
	this.m_dy = Math.random() * 5 - 2.5;
	this.m_container_width = container_width;
	this.m_container_height = container_height;
	this.m_width = Math.random() * 5 + 10;
	this.m_height = Math.random() * 5 + 10;
    },

    Move : function() 
    {
	this.m_x += this.m_dx;
	this.m_y += this.m_dy;
	
	if( this.m_x >= this.m_container_width - this.m_width ) {
	    this.m_x = this.m_container_width - this.m_width;
	    this.m_dx = -this.m_dx;
	    this.m_dx *= 0.98;
	}
	if( this.m_x < 0 ) {
	    this.m_x = 0;
	    this.m_dx = -this.m_dx;
	    this.m_dx *= 0.98;
	}
	if( this.m_y >= this.m_container_height - this.m_height ) {
	    this.m_y = this.m_container_height - this.m_height;
	    this.m_dy = -this.m_dy;
	    this.m_dy *= 0.98;
	}
	if( this.m_y < 0 ) {
	    this.m_y = 0;
	    this.m_dy = -this.m_dy;
	    this.m_dy *= 0.98;
	}

	this.m_dy += 0.2;
    },

    Draw : function( context )
    {
	context.fillStyle = "rgb(200,0,0)";
	context.fillRect( this.m_x, this.m_y, this.m_width, this.m_height );
    }
});

function Animate()
{
    var canvas = document.getElementById( 'test' );
    var context = canvas.getContext( '2d' );
    context.clearRect( 0, 0, canvas.width, canvas.height );

    context.strokeRect( 0, 0, canvas.width, canvas.height );

    for( var i = 0; i < g_bounce_objects.length; ++i ) {
	g_bounce_objects[i].Move();
	g_bounce_objects[i].Draw( context );
    }
}