RaphaelJS Styling On Steroids

Read about it on my blog: http://terryyoung.blogspot.com/2011/08/raphaeljs-styling-on-steroids.html

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div id="RJS_STYLES_1"></div>

CSS

#RJS_STYLES_1 {

-moz-border-radius:         10px;
-webkit-border-radius:      10px;
border-radius:              10px;
border:                     solid 1px #3f3;
width:                      640px;
height:                     200px;

}

JavaScript

/**
 * @blog       
 * http://terryyoung.blogspot.com/2011/08/raphaeljs-styling-on-steroids.html
 */


///////////////////////////////////////////////////////////////////////////////
// Scroll to the bottom to see the simple demo code.
//
// These below are a bunch of my extensions to Raphael enabling the simple demo code


/**
 * This is a custom function for Raphael elements, and is designed
 * to be used with properties added and defined in Raphael.styles
 *
 * @author      Terry Young <terryyounghk [at] gmail.com>
 * @license     WTFPL Version 2 ( http://en.wikipedia.org/wiki/WTFPL )
 */
Raphael.el.style = function (state, style, aniOptions)
{
    if (!this.class)
    {
        this.class = style ? style : 'default';
        this.aniOptions = aniOptions ? aniOptions : null;

        // start assigning some basic behaviors
        this.mouseover(function () { this.style('hover'); });
        this.mouseout(function () { this.style('base'); });
        this.mousedown(function () { this.style('mousedown'); });
        this.mouseup(function () { this.style('hover'); });
    }

    style = this.class ? this.class : style;
    state = state ? state : 'base';
    aniOptions = this.aniOptions ? this.aniOptions : null;

    // The structure of Raphael.styles is " type --> style --> state "
    if (aniOptions)
    {
        this.animate(Raphael.styles[this.type][style][state], 
                     aniOptions.duration, aniOptions.easing, aniOptions.callback);
    }
    else
    {
        this.attr(Raphael.styles[this.type][style][state]);
    }

return this; // chaining, e.g. shape.attr({ stroke: '#fff'}).style('dragging').toFront();
};


/**
 * Same API as Raphael.el.style for Raphael Sets
 *
 * @author      Terry Young <terryyounghk [at] gmail.com>
 * @license     WTFPL Version 2 ( http://en.wikipedia.org/wiki/WTFPL )
 */
Raphael.st.style = function (state, style, animated)
{
    for (var i = 0, j = this.items.length; i < j; i++)
    {
        var item =...