jQuery.fn.bouncingElement = function (options)
{
	//The default options:
	// 	speedX: horizontal speed
	//	speedY: vertical speed
	//	xpos: horizontal position
	//	ypos: vertical position
	//	fps: function interval in ms
	
	options = jQuery.extend({
		element: this, 
		speedX: 2,
		speedY: 1,
		xpos: 10,
		ypos: 30,
		fps: 30
	}, options);

	// pass the options to the interval
	$.setBouncingTimer(options);
}

jQuery.setBouncingTimer = function (options)
{
	var o = options;
	var millisecs = Math.floor( 1000/ options.fps );
	
	window.setInterval(function ()
	{
		$.animateElement(options);
	}, millisecs);
};

// The actual bouncing code
jQuery.animateElement = function (options)
{
	var o = options;
	var ball = o.element;
	var canvas = ball.parent();

	// change the position
	o.xpos += o.speedX;
	o.ypos += o.speedY;
	ball.css("left", o.xpos);
	ball.css("top", o.ypos);

	// reverse the speed if the element hits the boundary
	if (o.xpos < 0 || o.xpos > (canvas.width() - ball.width()))
	{
		o.speedX *= -1;
	}

	if (o.ypos < 0 || o.ypos > (canvas.height() - ball.height()))
	{
		o.speedY *= -1;
	}

};