I've been working on photo gallery that can be seen here:

http://soralinks.atspace.com/gallery/gallery.html

I would like the title to change according to the picture selected.
This works when you click on the thumbnail images.

However, it current does not work with the drop-down menu, "back" and "next" buttons, or the automatic slide-show.

Any help would be greatly appreciated.

The current script can be found here:

HTML Code:
<html>
<head>
<title>Gallery</title>
<script language ="JavaScript">
<!--

 var photos = new Array(5);
 var p_no = 0;

     for ( i= 0; i <= 4; i++){
        no = i+1;
        photos[i] = "img"+( i+1) +"_L.jpg";
     }


  function change_photos( op, title ){
   var headTitle = document.getElementById("mainTitle");
   headTitle.value = title;
   
   switch ( op ){
     case -1:
       p_no--;
       break;
     case 5:
       p_no ++;
       break;
     default:
     p_no =op;
   }

   if ( p_no== 5){
       p_no =0;
   } else if ( p_no == -1){
      p_no = 4;
   }

   document.images[0].src= photos[p_no];  
    }




function change_select(selectlist){
(selectlist.value)
}

function auto(){
 p_no=++p_no%photos.length;
 change_photos(p_no, 'title' );
 to=setTimeout(function(){ auto(); },3000);
}

function pause(){
 clearTimeout(to);
}


function change_select(selectlist){
 (selectlist.value)
}

function w_open(){
currentlrgimgTitle=document.getElementById("mainTitle").value;
currentlrgimg=photos[p_no];

jshtml="<html><head><title>"+currentlrgimgTitle+"</title></head><body><h1>"+currentlrgimgTitle+"</h1><img src='"+currentlrgimg+"'></body></html>";

new_win=window.open("","","height=500,width=500 menubar=yes");
new_win.document.write(jshtml);
new_win.focus();
new_win.document.close();
}


//-->
</script>


</head>

<body>
<center>
<form name = "form_1" >
 <input type = "text" id="mainTitle" name ="title" value ="LAX"><br>
<img src = "img1_L.jpg">

<br>

<input type= "button" value= "Back" onClick = "change_photos(-1)">&nbsp;
<input type= "button" value= "Next" onClick="change_photos(5)" ><br>
<select name="phot_select" size="1" onChange =" change_photos(this.value, title)">
   <option value="0" selected >LAX</option>
   <option value="1" >Universal Studios</option>
   <option value="2" >Parade</option>
   <option value="3">Bridge</option>

   <option value="4" >Beach</option>
</select>
<br>
<input type="button" value="View in new window" onClick="w_open()" ><br>
<input type="button" value="Start Slideshow" onmouseup="auto();" >&nbsp;<input type="button" value="Stop Slideshow" onmouseup="pause();" ><br>
</form>
</center>
<hr>


<center><table>
<tr>
<td><img src ="img1_S.jpg" title="LAX" onClick = "change_photos('0',title)"></td>
<td><img src ="img2_S.jpg" title="Universal Studios" onClick = "change_photos('1',title)"></td>
<td><img src ="img3_S.jpg" title="Parade" onClick = "change_photos('2',title)"></td>

<td><img src ="img4_S.jpg" title="Bridge" onClick = "change_photos('3',title)"></td>
<td><img src ="img5_S.jpg" title="Beach"  onClick = "change_photos('4',title)"></td></tr>

<tr>

<form name = "form_2">
<td> <input type = "text" name ="titel1" value="LAX"        onChange = "change_photos('0')"></td>
<td><input type = "text" name ="titel2" value="Universal Studios" onChange = "change_photos('1')"></td>
<td> <input type = "text" name ="titel3" value="Parade"    onChange = "change_photos('2')" ></td>
<td> <input type = "text" name ="titel4" value="Golden Gate Bridge"          onChange = "change_photos('3')"></td>
<td> <input type = "text" name ="titel5" value="Beach"      onChange = "change_photos('4')"></td>
</form>
</table>

</center>
<br>
<hr>
<br>
</body>
</html>