Autoloading images AND their corresponding larger pictures and textbox comments.

Hi guys!
I hope this one is a challenge to you and hope you can help out.

I have a html file called "goody.html" that has the following layout....

================================================================ goody.html

 ---------------------------------------------------------------------------- div id=panorama
   img1    img2     img3    img4   im5     im6    img7    img8  --> etc
 ----------------------------------------------------------------------------

div id =showImage                       div id = image_details
-------------------------            ---------------------------------------------------------------

    larger imgX displayed
    here, corresponding                   text box area......
    to what img is clicked                  comments correspond to what imgX is
    on in div id=panorama                 clicked on in div id = panorama

-------------------------            ---------------------------------------------------------------

=========================================================================
So, basically, whatever image is clicked on in the div id = panorama section, a larger image
of that same image clicked on, will be seen in div id = show_image, along with the comments
for that particular image ---> into div id = image_details textbox.

======================================================== PROBLEM WITH ABOVE....
The layout of the above is exactly what I want, however, it is done manually in the html file.

======================================================== PART SOLUTION
Then came along a guru from this site, and developed a solution to thread in automatically the image
names into a php file, which autopopulates the div id = panorama section, with all images found in
a folder called /cats.
This is great.....because now I simply dump all images into that /cats directly, load the php page,
and the images are displayed in the div id = panorama section.

======================================================== WHAT NOW NEEDS TO BE DONE.
I now have 2 solutions for the same project, but they are split, and I somehow need to merge these
solutions together.
# SOLUTION 1 (OF 2) -----> PHP File (Auto-loading of images into div id=panorama)
I mean, I have a php file that can load images automatically into the div id = panorama section, BUT,
it doesnt have the javascript functions (that the html file does) to onclick an image in the panorama section,
and auto display the image in the div id=show_image, along with its corresponding comments in the
div id=image_details section.
# SOLUTION 2 (OF 2) -----> HTML File (MANUAL Total solution to all requirements --> but not feasible)

So, to sum up, what I need is:
1) Load images from a /cats directory automatically into the div id=panorama section.
2) Upon clicking an image in the div id=panorama section, a larger image of that image clicked on in div id = panorama is displayed in the div id=show_image section, AND its corresponding comments are displayed in the textbox div id=image_details.
The functions in the html file successfully load the image selected in the div id = panorama section, into the show_image div section, and they also successfully load its corresponding textbox comments.
I need a way to automate this so that when the images are automatically loaded in to the div id = panorama section by the php file, the javascript functions associate these loaded image filenames with an img src string, since the javascript function that carries out the onclick events is found in the html file (not the php file), and in the format for example:
<img src="test.jpg" title="Test image" name="tesst"  width="82" height="108" title="My picture" onclick="ShowImage(this);return false;"/>
Im not sure if this is heading down the track of creating a mysql table for this project, but if needed, I have one ready.
The ultimate goals through asking all these questions are:
1) Automatic insertion of images from a folder into a div id section called panorama
2) Automatic insertion of a larger image version of a clicked on image in the div id =panorama section, in the div id=show_image section
3) Automatic display of textbox comments associated with the image selected in the div id=panorama section, in the div id = image_details section.
4) Allowed editing and input of text/updating and submission of changes directly in the texbox div id = image_details section ---> so saving of any text/deletions/additions associated specifically with the image selected in the div id = panorama section.

Here is the code for both the html file that does the javascript stuff, and the php file that does the autoload of images. Thanks guys in advance :>)

===================================================================== html file:
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
     
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style>
#panorama {
      width:800px;
      overflow-x:auto;
      overflow-y:hidden;
}
#image_details {
      width:auto;
        position:relative;
        float:left;
        width:69%;
        height:350px;
        margin-left:.5%;
}
#image_details textarea {
        width:100%;
        height:300px;
}
#image_heading {
 
        text-align:center;
      /*border:#666666 solid 1px;*/
      height:20px;
      width:100%;
      position:relative;
}
#show_image {
      width:302px;
      float:left;
      height:300px;
      border: #CCCCCC solid 1px;
      overflow:auto; /* this is the new line added */ /* this is the line that allows the divs to align side by side */
}
</style>

<script language="javascript">
function ShowImage(el)
{
//alert(el.src);
document.getElementById('show_image').innerHTML = '<img src="'+el.src+'" />';
document.getElementById('image_heading').innerHTML = el.title;
//document.getElementById('image_details').innerHTML = '<textarea name="'+el.name+'">This is for '+el.name+'</textarea>';
document.getElementById('image_details').innerHTML = '<textarea name="txt'+el.name+'">This is for '+el.name+'</textarea>';

}

function ShowDetails(el)
{
//alert(el.src);
document.getElementById('image_details').innerHTML = el.name;
}

</script>

</head>

<body>
     
<div id="panorama">
<nobr>
<img src="test.jpg" title="Test image" name="tesst"  width="82" height="108" title="My picture" onclick="ShowImage(this);return false;"/>
<img src="feed_me_british_shorthair.jpg" title= "test"" name="feesdme" width="82" height="108" title="My picture" onclick="ShowImage(this);return false;">        
<img src="sad_eyes_british_shorthair.jpg" title="Sad eyes" name="sad" width="82" height="108" title="My picture" onclick="ShowImage(this);return false;"/>
<img src="test.jpg" title="Untitled" name="untitled"  width="82" height="108" title="My picture" onclick="ShowImage(this);return false;"/>
</nobr>
</div>
<br>
<br>

<div id="image_heading"></div>

<div id="show_image" align="center">

</div>

<div id="image_details"></div>

<br>
</body>
</html>
============================================================================ EOF

============================================================================ php file:
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>      
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style>
#panorama {
      width:800px;
      overflow-x:auto;
      overflow-y:hidden;
}
</style>
</head>
     
<div id="panorama">
<nobr>

<?php

$pathToImages = "/var/www/html/mediawiki/cats/";
$webserverUrl = "http://fire/mediawiki/cats/";

$fileArr = scandir( $pathToImages );

if ( count($fileArr) > 0 ) {
     foreach( $fileArr as $anImage ) {
          $filename = strtolower( $anImage );          
          if ( strpos( $filename, ".jpg" ) !== false )
               echo "<img src='$webserverUrl$anImage' width='82' height='108' />";
     }
}


?>
</nobr>
</div>

</body>
</html>
============================================================================