Why does my sliding content keep going after one time?
<p><a href="http://roseannebarr.tumblr.com" rel="nofollow">This is my blog</a>, and if you sit for a couple seconds and watch the "Audio" tile, it moves. Another tile appears that says "cat". "Cat" will slide to the left and "Audio" will reappear, and then "Audio" will slide back to the left. However, after this, Audio never reappears, and instead keeps going. I unhid the music player so you can watch as it just keeps going. What is wrong with my javascript to have this happen?</p>

<p>Also, how would I change the javascript so Audio will slide left, Cat comes in from the right, but cat will slide BACK right and Audio will slide in from the left?</p>

<pre><code>&lt;script type="text/javascript"&gt;
var swap = false;
var w = 125;
var h = 115;    
var i = 0;
var x = 0;
var q = 1;
var t;

window.onload=function(){
    i = initPortfolio();
    setTimeout("portfolioRotate()",2000);
}

function initPortfolio(){

    $('.portfolio-item').each(function(index){i = i+1;});
    for(var n=1;n&lt;=i;n=n+1){
        lpos = w * n - w;
        $('#item-'+n).css('left',lpos);
    }

    $('.offs').css('display','block');
    x =  i * w - w;
    return i;
}

function portfolioRotate(){
    swap = false;
    $('.portfolio-item').delay(4000).animate({left:'-='+w},500,function(){
        nn = this.id.split("-")[1];
        if(q==nn &amp;&amp; swap==false){
            $('#item-'+q).css('left',x);
            if(q&lt;i){q=q+1}else;
            swap = true;
            u=setTimeout("portfolioRotate()",4000);
        }
    });
}
&lt;/script&gt;
</code></pre>
