Change thumbs on mouse hover

Change thumbs on mouse hover

Have problem with this script, cant make it to continue rotate thumbs
after last image
var cdn_url = 'http://cdn.domain.com/';
var timers = new Array;
var images = new Array;
function changeThumb( id, cdn_url )
{
document.getElementById(id).src = cdn_url;
}
$(document).ready(function() {
$("img[id*='tmb_']").mouseover(function(){
var image_id = $(this).attr("id");
var id_split = image_id.split('_');
var one = id_split[1];
var two = id_split[2];
thumbs = 10;
for ( var i=0; i<=thumbs; i++ ) {
var image_url = cdn_url + one + '/' + two + '/' + i + '.jpg';
images[i] = new Image();
images[i].src = image_url;
}
for ( var i=0; i<=thumbs; i++ ) {
timers[i] = setTimeout("changeThumb('" + image_id + "','" +
cdn_url + one + '/' + two + '/' + i + '.jpg' + "')", i*200);
}
}).mouseout(function(){
var image_id = $(this).attr("id");
var id_split = image_id.split('_');
var one = id_split[1];
var two = id_split[2];
var init = id_split[3];
thumbs = 10;
for ( var i=0; i<=thumbs; i++ ) {
if ( typeof timers[i] == "number" ) {
clearTimeout(timers[i]);
}
}
$(this).attr('src', cdn_url + one + '/' + two + '/' + init + '.jpg');
});
});
html
<img id="tmb_0613_2913374229_4" class="img"
src="http://cdn.domain.com/thumbs/0613/2913374229/4.jpg" />
Thumbs is rotating on hover but after last (10.jpg) wont start again from
0.jpg