Hi im a beginner to java script and was just wondering if someone could have a look to see where im going wrong.

Basically what i am trying to do is make it so a image changes when i select a different radio button, for example when i click green the shirt will go from the default color and change to green.

Here is my script
-------------------

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="../Documents/College/Web Design Assignment/MovieProps/images/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<script type = text "text/javascript">

function displayClothesPics(box){

var ClothesPics = new Array(3)
ClothesPics[1]="../Documents/College/Web Design Assignment/MovieProps/images/cat1prod1thumb.jpg"
ClothesPics[2]="../Documents/College/Web Design Assignment/MovieProps/images/editedredcat1prod1thumb.jpg";
ClothesPics[3]="../Documents/College/Web Design Assignment/MovieProps/images/editedbrowncat1prod1thumb.jpg";
document.getElementById('MainImage').src = ClothesPics[parseInt(box.value)];
}
</script>

<table>
<tr>
<td>

<form name="ColourSelections">

<h2>Colour Selection</h2>
<input type="radio" name="Colour" value="1" onclick="UpdateImage(this.form);">Blue

<input type="radio" name="Colour" value="2" onclick="UpdateImage(this.form);">Red

<input type="radio" name="Colour" value="3" onclick="UpdateImage(this.form);">Brown


</form>

</tr>
<td>
<img src="../Documents/College/Web Design Assignment/MovieProps/images/editedpurplecat1prod1thumb.jpg" name="MainImage" id="MainImage" />

</td>
</tr></table>




</body>
</html>

Help would be appreciated
thank you