How do I apply CSS styles to Raphael.js objects using jQuery?

Does anybody have any experience with the Raphael.js SVG library?

I'm using Raphael.js to create an SVG map (for use on smartphones) but I'm having trouble opening the map objects that Raphael creates up to outside interaction by jQuery and styling by css.

var R = Array();  
    R[1] = new Raphael("level1", 408, 286);  
    R[2] = new Raphael("level2", 408, 286);  
    R[3] = new Raphael("level3", 408, 286);  
    R[4] = new Raphael("level4", 408, 286);  
    R[5] = new Raphael("level5", 408, 286);  

var attr = {  
    fill: "#ccc",  
    stroke: "#000",  
    "stroke-width": 0.5,  
    "stroke-linecap": "square",  
    "stroke-linejoin": "miter"  
};  

// loop through a bunch of objects (not shown for brevity)
    // in the end, I end up with a couple hundred objects drawn by Raphael  

    var o = R[fID].path(coordstring).attr(attr);  

    // creates an #o[ID] id value that jQuery can target 
    o.node.id = "o"+$(this).attr('id'); // id value comes from data source  

    o.click(function(){  
        highlightMapObject(this.node.id.substr(1));                             
    );  

// end loop  

// accessed from the o.click and from outside in jQuery
function highlightMapObject(oid){  
    var $target = $("#o"+oid);  
    $target.addClass('highlight');  
}  

The issue I seem to be running into is that trying to add a class to the Raphael object doesn't work, or if it is working, the CSS attributes of that class (like changed background colors, etc) aren't being applied.

So if my .highlight class is:

.highlight { background-color: #f00; }

That is either not being applied, or isn't overwriting the fill:"ccc" from the original Raphael attrs. My guess is that because the ID being targeted by jQuery is on the Raphael object NODE rather than the object itself, that's probably part of the problem.

I've seen lots of advice to avoid node altogether when dealing