Image changes with multiple arrays (javascript)

Hiya

what I'm trying to do is as follows:

click one of 4 links, each link corresponds to an array with image name in. This should then start a slideshow type thing until another link is clicked which then reverts to the corresponding array and so on...

I've got it so it semi works, but the javascript timeout thingy isn't working very well.

Basically, if you click on the next link it waits until it gets to the end of the loop before it swaps. I need it to change straight away, I've tried using clearTimeout but it didn't work.

//JAVASCRIPT CODE
<script language="javascript">
<!--//
var imggap = 2000; //number of seconds * 1000

var list0 = new Array(new Array('a1img1','img1.gif'),new Array('a1img2','img2.gif'),new Array('a1img3','img3.gif'),new Array('a1img4','img4.gif'),new Array('a1img5','img5.gif'),new Array('a1img6','img6.gif'));
var list1 = new Array(new Array('a2img1','img1.gif'),new Array('a2img2','img2.gif'),new Array('a2img3','img3.gif'),new Array('a2img4','img4.gif'),new Array('a2img5','img5.gif'),new Array('a2img6','img6.gif'));
var list2 = new Array(new Array('a3img1','img1.gif'),new Array('a3img2','img2.gif'),new Array('a3img3','img3.gif'),new Array('a3img4','img4.gif'),new Array('a3img5','img5.gif'),new Array('a3img6','img6.gif'));
var list3 = new Array(new Array('a4img1','img1.gif'),new Array('a4img2','img2.gif'),new Array('a4img3','img3.gif'),new Array('a4img4','img4.gif'),new Array('a4img5','img5.gif'),new Array('a4img6','img6.gif'));
var list4 = new Array(new Array('a5img1','img1.gif'),new Array('a5img2','img2.gif'),new Array('a5img3','img3.gif'));


function chgcard(listname)
{
//document.arrays.arrayname.value = listname;
var usearray;
var i=0;

if(listname == "list0")
{
usearray = list0;
}
else if(listname == "list1")
{
usearray = list1;
}
else if(listname == "list2")
{
usearray = list2;
}
else if(listname == "list3")
{
usearray = list3;
}
else if(listname == "list4")
{
usearray = list4;
}

var chklength = (usearray.length-1);
for (i=0;i<usearray.length;i++)
{
var thistimeout = setTimeout("chgpic('"+usearray[i][1]+"','"+usearray[i][0]+"','"+i+"','"+listname+"')",imggap);
imggap = imggap+2000;
}
}

function chgpic(imgname,imgalt,imgnum,listname)
{
document.chgimg.src = imgname;
document.chgimg.alt = imgalt;

document.arrays.counter.value = imgnum;
if(imgnum == listname.length)
{
chgcard(listname);
}
}

//-->
</script>
//END JAVASCRIPT CODE

//HTML
<form name="arrays">
<input type="text" name="arrayname" value="list0">
<input type="text" name="counter" value="0">
<input type="text" name="test" value="">
</form>
LINKS:
<br><a href="javascript:chgcard('list1');">Use Array 1</a>
<br><a href="javascript:chgcard('list2');">Use Array 2</a>
<br><a href="javascript:chgcard('list3');">Use Array 3</a>
<br><a href="javascript:chgcard('list4');">Use Array 4</a>
//END HTML