Making a clickable object with Raphael JS
===

I have created a 3d looking circle and want it to be clickable and display its data.  I can't seem to get it to work though.  Can someone please help me figure this out???  The code where I try to do this is near the bottom....

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Raphaël · Ball</title>
        <link rel="stylesheet" href="demo.css" type="text/css" media="screen">
        <link rel="stylesheet" href="demo-print.css" type="text/css" media="print">
        <script src="raphael.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            Raphael.fn.ball = function (x, y, r, hue) {
                hue = hue || 0;
                return this.set(
    				//this part is the drop shadow
                    this.ellipse(x, y + r - r / 5, r, r / 2).attr({fill: "rhsb(" + hue + ", 1, .25)-hsb(" + hue + ", 1, .25)", stroke: "none", opacity: 0}),
    				//this part is the top part of the circle
                    this.ellipse(x, y, r, r).attr({fill: "r(.5,.9)hsb(" + hue + ", 1, .75)-hsb(" + hue + ", .5, .25)", stroke: "none"}),
    				//this is the inner glow part from the top
                    this.ellipse(x, y, r - r / 5, r - r / 20).attr({stroke: "none", fill: "r(.5,.1)#ccc-#ccc", opacity: 0})
                );
            };
            window.onload = function () {
                var R = Raphael("holder"), x = 300, y = 100, r = 100;
    			//I cant tell what numbers are passed into here?????
                R.ball(x, y, r, Math.random()).data("i", i).click(function () {
                alert(this.data("i"));
             });
            };
        </script>
        </head>
        <body>
            <div id="holder"></div>
        </body>
    </html>