variable assignment issue in Raphael.js example - raphael

Question

sorry for the lousy copy&paste code. as it is the first time i am using stackoverflow. In raphael.js example below. it is strange that before this line
this.cx = this.cx || 300; once you print out this.cx = "undefined". it is the circle and at very beginging this.cx should be equal to 100px. once I console.log (this); before this.cx = this.cx || 300; cx in element object is equal to 100px rather than "undefined". can anyone help to explain it?
paper.rect(0,0,500,500).attr({fill: "#1a1a1a"})
var targets = paper.set();
targets.push(paper.circle(300, 100, 20),
paper.circle(300, 150, 20),
paper.circle(300, 200, 20),
paper.circle(300, 250, 20),
paper.circle(300, 300, 20),
paper.circle(300, 350, 20),
paper.circle(300, 400, 20),
paper.circle(300, 450, 20));
targets.attr({fill: "#000", stroke: "#fff", "stroke-dasharray": "-", opacity: .2});
var labels = paper.set();
labels.push(paper.text(330, 100, "linear (default)"),
paper.text(330, 150, ">"),
paper.text(330, 200, "<"),
paper.text(330, 250, "<>"),
paper.text(330, 300, "bounce"),
paper.text(330, 350, "elastic"),
paper.text(330, 400, "backIn"),
paper.text(330, 450, "backOut"));
labels.attr({font: "12px Fontin-Sans, Arial", fill: "#fff", "text-anchor": "start"});
var movers = paper.set();
movers.push(paper.circle(100, 100, 20),
paper.circle(100, 150, 20),
paper.circle(100, 200, 20),
paper.circle(100, 250, 20),
paper.circle(100, 300, 20),
paper.circle(100, 350, 20),
paper.circle(100, 400, 20),
paper.circle(100, 450, 20));
movers.attr({fill: "#000", stroke: "#fff", "fill-opacity": 0});
movers[0].click(function () {
this.cx = this.cx || 300;
this.animate({cx: this.cx, "stroke-width": this.cx / 100, fill: this.cx - 100 ? "hsb(0, .75, .75)" : "#000", "fill-opacity": +!!(this.cx - 100)}, 1000);
console.log(movers[0].attr('fill-opacity'));
this.cx = this.cx == 300 ? 100 : 300;
});
movers[1].click(function () {
_this.cx = this.cx || 300_;
this.animate({cx: this.cx, "stroke-width": this.cx / 100, fill: this.cx - 100 ? "hsb(.1, .75, .75)" : "#000", "fill-opacity": +!!(this.cx - 100)}, 1000, ">");
this.cx = this.cx == 300 ? 100 : 300;
});
movers[2].click(function () {
this.cx = this.cx || 300;
this.animate({cx: this.cx, "stroke-width": this.cx / 100, fill: this.cx - 100 ? "hsb(.2, .75, .75)" : "#000", "fill-opacity": +!!(this.cx - 100)}, 1000, "<");
this.cx = this.cx == 300 ? 100 : 300;
});
movers[3].click(function () {
this.cx = this.cx || 300;
this.animate({cx: this.cx, "stroke-width": this.cx / 100, fill: this.cx - 100 ? "hsb(.3, .75, .75)" : "#000", "fill-opacity": +!!(this.cx - 100)}, 1000, "<>");
this.cx = this.cx == 300 ? 100 : 300;
});
movers[4].click(function () {
this.cx = this.cx || 300;
this.animate({cx: this.cx, "stroke-width": this.cx / 100, fill: this.cx - 100 ? "hsb(.4, .75, .75)" : "#000", "fill-opacity": +!!(this.cx - 100)}, 1000, "bounce");
this.cx = this.cx == 300 ? 100 : 300;
});
movers[5].click(function () {
this.cx = this.cx || 300;
this.animate({cx: this.cx, "stroke-width": this.cx / 100, fill: this.cx - 100 ? "hsb(.5, .75, .75)" : "#000", "fill-opacity": +!!(this.cx - 100)}, 1000, "elastic");
this.cx = this.cx == 300 ? 100 : 300;
});
movers[6].click(function () {
this.cx = this.cx || 300;
this.animate({cx: this.cx, "stroke-width": this.cx / 100, fill: this.cx - 100 ? "hsb(.6, .75, .75)" : "#000", "fill-opacity": +!!(this.cx - 100)}, 1000, "backIn");
this.cx = this.cx == 300 ? 100 : 300;
});
movers[7].click(function () {
this.cx = this.cx || 300;
this.animate({cx: this.cx, "stroke-width": this.cx / 100, fill: this.cx - 100 ? "hsb(.7, .75, .75)" : "#000", "fill-opacity": +!!(this.cx - 100)}, 1000, "backOut");
this.cx = this.cx == 300 ? 100 : 300;
});

Answer 1

This probably because 'this' will be a Raphael object, not a simple circle object, so it will have a wrapper around it.
What you probably want, is something more like...
this.attr('cx', this.attr('cx') || 300)
As you want to get and set the attribute, not a direct key on the Raphael object.