//
// This file contains all the JavaScript code necessary to 
// populate and maintain the active element:
//
//  gallery
//

// function: galleryPopulator
// 'data' node is expected in the following format:
//
// <data>
//   <gallery>
//     <image>
//       <url>url</url>
//       <title>text</title>
//     </image>
//       ...
//   </gallery>
// <data>
//
// Output is to be generated of the form (repeated once per image):
//
// <div id="gallery-image"><img src="./content/img1.jpg" /><p>title</p></div>


function galleryPopulator( activeElement, data )
{	// (i) Update active element
	clearText( activeElement );

    var imageNodes = data.getElementsByTagName("image");
    var singleImageHTML;
    var galleryHTML = "";
    
    for (i=0; i< imageNodes.length; i++)
    {
      var urlNodes = imageNodes[i].getElementsByTagName("url");
      var titleNodes = imageNodes[i].getElementsByTagName("title");
      
      // frig: at the moment, I know the title text contains the name of a file. Remove the last 4 characters
      // (e.g. ".jpg") and use the remaining text.
      var title = titleNodes[0].firstChild.nodeValue;
      title = title.substr(0,title.length-4);
      
      singleImageHTML = "<div id=\"gallery-image\">" +                              "<a href=\"../" +                                                urlNodes[0].firstChild.nodeValue + 
                        "\"><img src=\"./architecture/phpthumb/phpThumb.php?w=100&src=../" + 
                        urlNodes[0].firstChild.nodeValue + 
                        "\" alt=\"" + // for IE to display hint text (see http://drupal.org/node/35821)
                        title + 
                        "\" title=\"" + // for Firefox to display hint text
                        title + 
                        "\" /></a><p>" +
                        title + 
                        "</p></div>";
      galleryHTML += singleImageHTML;
    }
    
    activeElement.innerHTML = galleryHTML;
}