javascript - Raphael animation recursion partially not accessing updated global variable -

i have 2 animations of same circle getting big small. repeats until timer runs out. works. they're defined recursively, bit out of league. problem getting change speed while animating. i've removed irrelevant code, including timer, , simplified interface 3 buttons:

1) starts /stops

2) speeds up

3) slows down

it works changing inner defined function, not outer. can't figure out why. assistance appreciated. please note comment, solves it. understanding of computer science principles not amazing. tried using chrome's inspector view stack, couldn't see anything, , wouldn't know doing anyways.

var in_duration = 3000;    var out_duration = 5000;  var anim_inhale = raphael.animation({     transform: "s " + 2.2 + " " + 2.2 + "  t +"+(-320*2.2)+" "+(-240*2.2),     fill: "#0f0" }, in_duration , "linear", function () {      breath_circle.animate(raphael.animation({         transform: "",         fill: "#00f"     }, out_duration , "linear", function () {          breath_circle.animate(anim_inhale);      }));  }); breath_circle.animate(anim_inhale); 

i've provided working jsfiddle http://jsfiddle.net/nastajus/rgwbl/2/