JQuery - getting mixed up with variable scope in parameter functions
<p><a href="http://jsfiddle.net/c7JFH/" rel="nofollow">JSFiddle - SSCCE</a></p>

<pre><code>function restoreTitle() {
    for (var i = 0; i &lt; 4; i++) {
        clicks[i] = false;
        letter = $('#title-wrapper p[index="' + i + '"]');
        letter.css('cursor', "pointer");
    }
    animateTitle();
}

function animateTitle() {
    for (var i = 0; i &lt; 4; i++) {
        letter = $('#title-wrapper p[index="' + i + '"]');
        direction = i &lt; 2 ? 1 : -1;
        letter.css('right', 50 * direction + "%");
        doAnimateLetter(i, letter, direction);
    }
}

function doAnimateLetter(i, letter, direction) {
   loop(function(){
        var current = letter.css('right').replace("%", "");
        var incoming = parseInt(current) - (5 * direction);

        letter.css('right', incoming + "%");
        var completed = incoming == 0;
        if(completed) letter.fadeTo(animation_speed, 1);
        return !completed;
    });       
}

function loop(run) {
    if (run.apply()) requestAnimationFrame(function () {
        loop(run);
    });
}
</code></pre>

<p>What I would like to achieve is for the two left letters to fly in from the left and for the two right ones to fly in from the right. I can't find where I'm going wrong.</p>
