How does javascript evaluate arguments?
<p>I write a simple javascript function to display a progressbar with the help of JQuery ProgressBar(<a href="http://t.wits.sg/misc/jQueryProgressBar/demo.php#" rel="nofollow">http://t.wits.sg/misc/jQueryProgressBar/demo.php#</a>)</p>

<p>The progressBar function can be set to display different background images with different values. I want to display values in [0, MAX*0.3] as red, (MAX*0.3, MAX*0.7] as orange, and (MAX*0.7, MAX] as green. So I write a helper function as follows:</p>

<pre><code>function setBar(bar, cur, total) {
    var v1 = parseInt(total * 0.3);
    var v2 = parseInt(total * 0.7);

    // if I run alert(v1) and alert(v2) here, the values are all right.

    bar.progressBar(cur, {
        max: total,
        textFormat: 'fraction',
        boxImage: '/img/pbar/progressbar.gif',
        barImage: {
            0:  '/img/pbar/progressbg_red.gif',
            v1: '/img/pbar/progressbg_orange.gif',
            v2: '/img/pbar/progressbg_green.gif'
        }
    });
}
</code></pre>

<p>The argument <em>cur</em> is the current value while <em>total</em> is the MAX value of the progress bar. The function doesn't seem to work, but when I replace "v1:" and "v2:" with actual values like 50 and 120, the function works well. And I have also checked the value of <em>v1</em> and v2 before calling bar.progressBar, they are all right.</p>

<p>So the problem seems that I cannot pass a variable instead of a constant to the function bar.progressBar, I think it maybe have relations with javascript argument evaluation order, is there any fix to this problem?</p>
