inexplicable math error in javascript
<p>I have a function, used to clone the flash article scroller <a href="http://www.goldcoast.com.au/about-the-gold-coast.html" rel="nofollow">this page</a>. Unfortunately I'm behind a firewall so can't upload my own code, but that should give you an idea. The function:</p>

<pre><code>function select(id) {
  alert(active+"\n"+((active+1)%4));

  var prev  =  active;
  active    = (typeof(id) == "undefined" ? (active+1)%4 : id);

  $("#panel").animate({"top": tops[active]}, 750);
  $("#main"+prev).fadeOut(750);
  $("#main"+active).fadeIn(750);
}
</code></pre>

<p>So if select() is called without an id, it simply progresses to the next item in sequence, otherwise it goes to the selected item. It's run on a timer defined:</p>

<pre><code>timer = setInterval("select()", 5000);
</code></pre>

<p>When an object is mouseovered, this function is run:</p>

<pre><code>$("img.thumb").mouseover(function() {
  clearInterval(timer);
  select($(this).attr("id").substr(-1));
  timer = setInterval("select()", 5000);
});
</code></pre>

<p>The trouble is that, after a mouseover, the select function fails for one cycle, with the next object having no relation to the previous. The chosen object is consistent - it remains the same with each refresh given the same initial conditions, but it's unrelated in any way I can determine.</p>

<p>What is oddest is that the alert I run at the start of select(), which should be a straightforward mathematical operation, fails, claiming that (for the sequence I test - wait for an automatic scroll from 0 - 1, then mouseover 3) (3+1)%4=3.</p>

<p>I've tested this in both firefox and chrome, so it seems to be inherent to javascript.</p>

<p>I can only assume that it's storing two different values for active somehow, but nature of that schism, and how to resolve it, are beyond me.</p>

<p>I've attached the entire file below in case anything else is pertinent. Seems unlikely, but at this point I'm not ruling anything out.</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-type" content="text/html;charset=UTF-8" /&gt;
        &lt;meta http-equiv="imagetoolbar" content="no" /&gt;
        &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;
            //alter these as you please
            var thumbs  = ["images/1t.png", "images/2t.png",
                "images/3t.png", "images/4t.png"];
            var mains       = ["images/1.png", "images/2.png",
                "images/3.png", "images/4.png"];
            var links       = ["http://www.goldcoast.com.au/gold-coast-beaches.html",
                "http://www.goldcoast.com.au/gold-coast-whale-watching.html",
                "http://www.goldcoast.com.au/gold-coast-hinterland-rainforest.html",
                "http://www.goldcoast.com.au/gold-coast-history.html"];

            //don't touch these
            var timer   = null;
            var active  = 0;
            var tops    = [0, 77, 155, 234];

            function select(id) {
                alert(active+"\n"+((active+1)%4));

                var prev    =  active;
                active      = (typeof(id) == "undefined" ? (active+1)%4 : id);

                $("#panel").animate({"top": tops[active]}, 750);
                $("#main"+prev).fadeOut(750);
                $("#main"+active).fadeIn(750);
            }

            $(function() {
                for(var i = 0; i &lt; 4; i++) {
                    $("#thumb"+i).attr("src", thumbs[i]);
                    $("#main"+i).attr("src", mains[i]);
                }

                $("#main"+active).show();

                $("img.thumb").mouseover(function() {
                    clearInterval(timer);
                    select($(this).attr("id").substr(-1));
                    timer = setInterval("select()", 5000);
                });

                timer = setInterval("select()", 5000);
            });
        &lt;/script&gt;
        &lt;style type="text/css"&gt;
            #container  {position:relative;}

            #panel      {position:absolute;left:0px;top:0px;z-index:1;}

            img.thumb   {position:absolute;left:8px;z-index:2;}
            #thumb0     {top:7px;}
            #thumb1     {top:84px;}
            #thumb2     {top:162px;}
            #thumb3     {top:241px;}

            img.main        {position:absolute;left:118px;top:2px;display:none;}
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="container"&gt;
            &lt;img src="images/panel.png" id="panel" /&gt;
            &lt;img id="thumb0" class="thumb" /&gt;
            &lt;img id="thumb1" class="thumb" /&gt;
            &lt;img id="thumb2" class="thumb" /&gt;
            &lt;img id="thumb3" class="thumb" /&gt;
            &lt;img id="main0" class="main" /&gt;
            &lt;img id="main1" class="main" /&gt;
            &lt;img id="main2" class="main" /&gt;
            &lt;img id="main3" class="main" /&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
