Why does my sliding content keep going after one time?

This is my blog, and if you sit for a couple seconds and watch the "Audio" tile, it moves. Another tile appears that says "cat". "Cat" will 开发者_StackOverflowslide 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?

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?

<script type="text/javascript">
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<=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 && swap==false){
            $('#item-'+q).css('left',x);
            if(q<i){q=q+1}else;
            swap = true;
            u=setTimeout("portfolioRotate()",4000);
        }
    });
}
</script>

You probably don't want to keep setting swap to false each time portfolioRotate is called. This makes the if statement always true.