Using Raphael javascript for hovering with arrays -

using raphael, i'm trying shape appear when hover on invisible area near shape. following code not work - going wrong? each shape has 2 raphael paths associated it: 1 visible shape, , other invisible area.

<script type="text/javascript" charset="utf-8">  $("document").ready(function() {         var rm  = raphael("canvas", 1000, 500);          var attr = {     // visible shapes             fill: "#bbb",      "fill-opacity": 1,             stroke: "#222",    "stroke-width": 0.3,         };         var attr2 = {    // invisible hovering areas             fill: "green",     "fill-opacity": 0.0,             stroke: "red",     "stroke-width": 0,         };         var things = {};          /* square */    things.square     = [ rm.path("m 154.21525,71.431259 74.32805,0 0,70.496711 -74.32805,0 0,-70.496711 z").attr(attr),                                               rm.path("m 271.25132,77.933263 58.07304,0 0,56.409037 -58.07304,0 0,-56.409037 z").attr(attr2)   ];         /* triangle */  things.triangle   = [ rm.path("m 154.02932,222.44063 36.78089,-58.23641 34.48208,58.2364 -71.26297,1e-5").attr(attr),                                               rm.path("m 271.25132,165.71032 58.07304,0 0,56.40903 -58.07304,0 0,-56.40903 z").attr(attr2)   ];         (var shape in things) {             shape[0].color = raphael.getcolor();  shape[1].onmouseover = function () {  shape[0].animate({fill:shape[0].color, stroke:"#ccc"}, 500);  document.getelementbyid(shape)[0].style.display = "block";  shape[0].tofront();   r.safari(); }; shape[1].onmouseout = function () {  shape[0].animate({fill:"#bbb", stroke:"#222"}, 500);  document.getelementbyid(shape)[0].style.display = "none";  shape[0].tofront();   r.safari(); };         } // end every member of things     }); // end document ready function </script> 

the example on raphael website uses more complicated javascript: http://raphaeljs.com/australia.html

i didn't use code because don't understand function syntax use:

(function (a, b) {     ---- })(c, d); 

but still don't see what's wrong version! help!

for (var shape in things) { ... 

this not behave foreach, instead behaves more perls:

foreach $shape (keys $things) { ... 

so code should be:

for (var shape in things) {     things[shape][0].color = raphael.getcolor();     ... 

---

additional answer

as function syntax, it's rather simple , common in modern js code should familiarize it. let's construct function step step.

we know:

function foo (x,y) {}; 

declares function, in javascript functions can anonymous:

function (x,y) {}; 

is function no name. now, in declaration, rather useless if in expression yields reference function. how make expression? put = sign left of it:

var foo = function (x,y) {} 

is function expression assigning function variable foo.

apart being right of = sign, there other places code considered expressions. 1 of them when code happens inside braces. comes math really:

var x = * (b + c); 

everything right hand side of = sign expression (b+c) special because sub-expression evaluated first. it's () syntax makes b+c expression in own right. similarly:

(function (x,y) {}) 

forces looks function declaration become function expression. rule comes math expression earlier.

as mentioned earlier, function expression evaluates function reference. , 1 of things can function reference use call function:

var foo = function (x,y) {}; foo(); 

here, () after foo means different: used make function call. since can make function call using function reference , since function expression evaluates function reference can call function without assigning variable:

(function (x,y) {})();  // think of foo() foo=(function(x,y){})