1. sets up a variable, degrees, and sets it to zero
2. sets up a Raphael canvas in the div element below here (the div has an id =canvas_container)
3. creates an object with a given identifier, tetris, and uses the "path" method to draw out a a tetris shape
4. creates an object with a given identifier, degreeslabel, and uses paper's "text" method to draw out a message about the value of degrees
5. uses the tetris object's "attr" method to syle it with gradient stroke colour, stroke-width, stroke-linejoin (set to "round"), and a rotation of zero degrees for its starting orientation
6. assigns an onmouseover event handler to the shape to make the cursor change into a hand
7. assigns an onclick event handler to the shape. This uses the shape's animate metod to rotate it 90 degrees over 2000 milliseconds and with an "animation easing" of "bounce" to end up with the bouncyness. The handler increments the degrees variable by 90, removes the degreeslabel variable, and redraws the degreeslabel variable with new text reflecting the new value of degrees.

Click the shape to experience interactivity