problem z prostą animacją Opcje

[melior]

Jest o to taki sobie banalny skrypcik. Skrypt uaktywnia się, gdy najeżdżam na div'a myszką. Wąski pasek w postaci tła przejeżdża od lewej do prawej strony i ostatecznie pojawia się zawartość divów "cdiv" i "cdivm".
Wszystko teoretycznie działa, w praktyce jednak nie zawsze i chaotycznie.

Po pierwsze pasek ładuje się raz szybciej raz wolniej, nie wiem czemu.
Po drugie, czasami animacja wykonuje się dwa razy, czasami zapętla się bez końca.

Może ktoś kuknąć na to jednym okiem i powiedzieć gdzie popełniam błąd? Będę wdzięczny

Kod

<div onmouseover="start(<? echo $row['id'];?>)" onmouseout="stop(<? echo $row['id'];?>)" style="height:100px width:816px">

Kod

<div id="thediv<? echo $row['id'];?>" style="background-image:url(pasek<? echo $row['cat']; ?>dol.PNG);background-repeat:no-repeat;background-position:-816px 0px; height:1px; width:816px;">
</div>

Kod

var pos = 0;
var stop_anim = 0;
var x=-816;
var y=0;
var divio = 0;

function changePosition(posx)
{
var posy = 0;
pos = pos + posx;
if (stop_anim == 1) return 1;
if (pos == 816) {
    pos = 0;
    stop_anim = 1;    
    document.getElementById('cdiv'+divio).style.display = 'block';
    document.getElementById('cdivm'+divio).style.display = 'block';
    return 1;
}
document.getElementById('thediv'+divio).style.backgroundPosition=x+pos+"px "+y+"px";
setTimeout('changePosition(5)', 3);
}

function stop()
{
stop_anim = 1;
document.getElementById('thediv'+divio).style.backgroundPosition=x+"px "+y+"px";
document.getElementById('cdiv'+divio).style.display = 'none';
document.getElementById('cdivm'+divio).style.display = 'none';
}

function start(id)
{
stop_anim = 0;
divio = id;
pos = 0;
changePosition(1);    
}