Trying to make a page of thumbnails open a slideshow to specified images. I'm very new to all this fancy javascript code, but I understand HTML pretty well. Any help would be greatly appreciated!

Here's a link to the thumbnail gallery http://www.mattfaria.com/new_site/culinary.html

Here's where I'm at with the code for the slideshow page. I've tried for days to figure out how to make this work to no resolve.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Swis721_Hv_BT_400.font.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Use the following variable to specify
// the number of images
var NumberOfImages = 20

var img = new Array(NumberOfImages)

// Use the following variables to specify the image names:
img[0] = "images/culinary/large/food01.jpg"
img[1] = "images/culinary/large/food02.jpg"
img[2] = "images/culinary/large/food03.jpg"
img[3] = "images/culinary/large/food04.jpg"
img[4] = "images/culinary/large/food05.jpg"
img[5] = "images/culinary/large/food06.jpg"
img[6] = "images/culinary/large/food07.jpg"
img[7] = "images/culinary/large/food08.jpg"
img[8] = "images/culinary/large/food09.jpg"
img[9] = "images/culinary/large/food10.jpg"
img[10] = "images/culinary/large/food11.jpg"
img[11] = "images/culinary/large/food12.jpg"
img[12] = "images/culinary/large/food13.jpg"
img[13] = "images/culinary/large/food14.jpg"
img[14] = "images/culinary/large/food15.jpg"
img[15] = "images/culinary/large/food16.jpg"
img[16] = "images/culinary/large/food17.jpg"
img[17] = "images/culinary/large/food18.jpg"
img[18] = "images/culinary/large/food19.jpg"
img[19] = "images/culinary/large/food20.jpg"



var imgNumber = 0

function NextImage()
{
imgNumber++
if (imgNumber == NumberOfImages)
imgNumber = 0
document.images["VCRImage"].src = img[imgNumber]
}

function PreviousImage()
{
imgNumber--
if (imgNumber < 0)
imgNumber = NumberOfImages - 1
document.images["VCRImage"].src = img[imgNumber]
}

//-->
</SCRIPT>
<!--[if lt IE 7]>
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">
ie_png.fix('.png');
</script>
<![endif]-->
</head>

<body id="page3">
<div class="main">
<div class="container"> <div class="pRelative">
<a href="index.html"><img alt="" src="images/logo2.png" class="logo1" /></a>
<a href="javascript:PreviousImage()"><img alt="" src="images/arrow1.png" class="arrow1 png" /></a>
<a href="javascript:NextImage()"><img alt="" src="images/arrow2.png" class="arrow2 png" /></a>
<img src="images/culinary/large/food01.jpg" NAME="VCRImage"/><br />


</div> </div>
<div class="indent-1"><div id="footer" class="png">
<div class="indent-footer">&copy; 2013 Matt Faria Photography | <a href="index-7.html">Privacy Policy</a></div>
</div></div>
</div>

<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>