Помогите с Raphael. JS (считать цвет для каждого элемента)

Живой пример:

http://jsfiddle.net/ufaclub/asje4eu7/

[JS]

<script type="text/javascript">

jQuery(document).ready(function(){

var R = Raphael("mapPaper", 780, 463);

var attr = {

stroke: "#74675C",

"stroke-width": 1,

fill: "#FC0",

"fill-opacity": 0.2

},

i = 1,

area = {};

var oAreas = $(".mapArea");

$.each(oAreas, function(){

area = R.path($(this).attr("data-path")).attr(attr);
i++;
});



for (var j=1; j<i; j++) {
(function (o, j) {
o[0].style.cursor = "pointer";
o[0].onmouseover = function () {
var color = "#FCE588";
o.animate({fill:color}, 250);
};
o[0].onmouseout = function () {
var color = "#FC0";
o.animate({fill: color}, 250);
};
o[0].onclick = function () {
var color = "#F00";
o.animate({fill: color}, 250);
};
})(area[j], j);
}

});

</script>




[/JS]

<div class="map" id="mapPaper">

	<div class="mapArea" data-path="M371,460,371,256,232,255,232,332,154,333,154,398,110,399,110,460z"></div>

	<div class="mapArea" data-path="M3,398,153,398,153,332,231,332,231,213,153,213,153,78,3,78z"></div>

	<div class="mapArea" data-path="M263,8,370,8,370,212,154,212,154,48,263,48z"></div>

	<div class="mapArea" data-path="M371,8,480,8,480,48,582,48,582,212,371,212z"></div>

	<div class="mapArea" data-path="M773,80,774,399,670,399,670,460,560,460,559,288,488,288,488,213,582,212,583,79z"></div>

</div>

<div class="mapArea" data-path="M371,460,371,256,232,255,232,332,154,333,154,398,110,399,110,460z"></div>

<div class="mapArea" status-path='stroke: "#74675C", "stroke-width": 1, fill: "#FC0", "fill-opacity": 0.2' data-path="M371,460,371,256,232,255,232,332,154,333,154,398,110,399,110,460z"></div>





<div class="mapArea" status-path='stroke: "#423234", "stroke-width": 3, fill: "#FFF", "fill-opacity": 0.3' data-path="M435,450,371,256,342,255,3232,322,154,23,154,398,150,399,110,460z"></div>



...............................



и так далее.