Script: Image Thumbnail Viewer II

Problem:
For several reasons I would like to use this script and not adapt another gallery script, essentially all that i want to add is a simple count and load section. I have 4 images, that I want to cycle through so was imagining something like (just logic of what i want, not an attempt at syntax which i have no idea on!) :

If dynloadarea = 0 wait 5000 and set dynloadarea +1
If dynloadarea = 3 wait 5000 and set dynloadarea 0


Current code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script type="text/javascript">
<!--
/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["HPBanner1.jpg", "#1"]
dynimages[1]=["HPBanner2.jpg", "#2"]
dynimages[2]=["HPBanner3.jpg", "#3"]
dynimages[3]=["HPBanner4.jpg", "#4"]


//Preload images ("yes" or "no"):
var preloadimg="no"

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Set image border width
var imgborderwidth=0

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progidXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

///////No need to edit beyond here/////
function findLoaded(){
if(typeof document.getElementById('dynloadarea').getElementsByTagName('img')[0]!=='undefined'){
var theImg = document.getElementById('dynloadarea').getElementsByTagName('img')[0].src
for (var i_tem = 0; i_tem < dynimages.length; i_tem++)
if (theImg.indexOf(dynimages[i_tem][0])>-1)
return i_tem
}
else
return -1
}

function nextImg(){
if (findLoaded()<dynimages.length-1)
modifyimage('dynloadarea', findLoaded()+1)
else
modifyimage('dynloadarea', 0)
}

function previousImg(){
if (findLoaded()>0)
modifyimage('dynloadarea', findLoaded()-1)
else
modifyimage('dynloadarea', dynimages.length-1)
}



if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
//-->
</script>
<style type="text/css">
<!--
.style23 {
font-family: Arial;
font-size: 14px;
}
.style30 {
color: #FF0000;
font-size: 18px;
}
.style32 {font-family: Arial; font-size: 14px; font-weight: bold; }
.style36 {font-size: 12px}
-->
</style>


</head>

<body onLoad="modifyimage('dynloadarea', 0);return false">




<table width="685" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="446" height="46">&nbsp;</td>
<td width="188" rowspan="4" valign="top" ><div id="dynloadarea" style="width:80px;height:184px">



<p>
</td>
<td width="51" valign="middle"><a href="" onMouseOut="modifyimage('dynloadarea', 2), MM_swapImgRestore()" onMouseOver="modifyimage('dynloadarea', 0), MM_swapImage('Image1','','t2.gif',1)"><img src="t2b.gif" name="Image1" width="51" height="32" border="0"></a></td>
</tr>
<tr>
<td height="46"></td>
<td valign="middle"><a href="" onMouseOut="MM_swapImgRestore()" onMouseOver="modifyimage('dynloadarea', 1),MM_swapImage('Image2','','t2.gif',1)"><img src="t2b.gif" name="Image2" width="51" height="32" border="0"></a></td>
</tr>
<tr>
<td height="46"></td>
<td valign="middle"><a href="" onMouseOut="MM_swapImgRestore()" onMouseOver="modifyimage('dynloadarea', 2),MM_swapImage('Image3','','t2.gif',1)"><img src="t2b.gif" name="Image3" width="51" height="32" border="0"></a></td>
</tr>
<tr>
<td height="46"></td>
<td valign="middle"><a href="" onMouseOut="MM_swapImgRestore()" onMouseOver="modifyimage('dynloadarea', 3), MM_swapImage('Image4','','t2.gif',1)"><img src="t2b.gif" name="Image4" width="51" height="32" border="0"></a></td>
</tr>
</table>
</body>
</html>


Help greatly appreciated!!!!