Javascript, local copying of a variable's value... struggling to achieve it
<p>I have what i thought was a simple javascript / jquery function (fade out of one div, fade into another... loop until it reaches a maximum and then start back from the begining. The problem i have though is that to fadein the next div i need to increment the global counter. Doing this increments double increments it because i'm assuming the local variable i've created maintains the same reference to the global variable. </p>

<p>The code sample below should explain a little easier. Can anyone spot what i'm doing wrong?</p>

<pre><code>var current_index = 1;

$(document).ready(function() {
    $(function() {
        setInterval("selectNextStep()", 3000);
    });
});

function selectNextStep() {
    $("#step_"+current_index).fadeOut('slow', function() {
        var next = current_index;
        next = next + 1;
        $("#step_"+next).fadeIn('slow', function() {
            if (current_index == 4) current_index = 1;
            else current_index ++;
        });
    });
}
</code></pre>
