/* each image in the show should be assigned an ID. all but the first images should 
   be hidden when the page is loading... */
   
var strCSS = '/*<![CDATA[*/ ' + 
             '#im2,#im3 {visibility:hidden;height:0;width:0;}' +
             '/*]]>*/'; 
if (document.getElementById && document.createElementNS) {
  var elem=document.createElementNS("http://www.w3.org/1999/xhtml","style");
  elem.setAttribute("type", "text/css");
  var text = document.createTextNode(strCSS);
  elem.appendChild(text);
  document.getElementsByTagName("head")[0].appendChild(elem);
} else {
  strCSS = '<style type="text/css">' + strCSS + '</style>';
  document.write(strCSS);
}

// global variable stores the total number of images in the product container
var gTotal;
// global variable stores the index of the current image displayed on the page
var gIndex;

function initImageControl()
{
  // exit if the DOM is not supported
  // [or use alternative DOM]
  if (document.getElementById("pimgs"))
  {
    var elemC = document.getElementById("pimgs");
    // collect all the images in the product container into an array
    var arrImgs = elemC.getElementsByTagName("img");
    gTotal = arrImgs.length;
    if (gTotal > 1)
    {
      // redefine the presentation of all but the first image
      for (var i = 1; i < gTotal; i++)
      {
          var objProp = arrImgs[i].style;    
          objProp.display = "none";    
          objProp.visibility = "visible";
          objProp.height = "auto";
          objProp.width = "auto";                    
      }
      // initialise the global variable that stores index of current image
      // the index of the first image is 0
      gIndex = 0;  
      // create a navigation bar, append it to the product container ...
      var elemNav = document.createElement("div");
      elemNav.id = "navlinks";
      //elemC.appendChild(elemNav);      
      elemC.parentNode.insertBefore(elemNav, elemC.nextSibling);      
      
      // ... and add the next and previous links
      addLink("next");
      addLink("previous");
    }
  }
}

function addLink(str)
{
  /**
    * creates a control element (as an anchor), sets its attributes, 
    * assigns behaviours and appends it to the navigation element.
    */
  var elem = document.createElement("a");
  var text = document.createTextNode(str);
  elem.appendChild(text);
  elem.setAttribute("href", "#");
  elem.setAttribute("title", "View the " + str + " photo");
  // add behaviour to the link
  elem.onclick = switchImage;
  elem.onkeypress = elem.onclick;  
  elem.id = str.substring(0,4) + "link";
  document.getElementById("navlinks").appendChild(elem);     
  // on intialisation the first image is displayed, so it is 
  // inappropriate to display the previous control link
  if ("previous" == str) {elem.style.display = "none"};  
}

function switchImage(evt)
{
  /**
    * simply redefines the presentation of the current image and 
    * the image to be displayed. these are determined by the value 
    * of the global variable gIndex.
   */
 evt = (evt) ? evt : (window.event) ? event : null;
 if (evt)
  {
    var charCode = (evt.charCode) ? evt.charCode :
                   ((evt.keyCode) ? evt.keyCode : null);
    if (evt.type == "click" || charCode == 13)
    {  
      // the routine will only run if the event trigger was a left 
      // mouse click or the return key pressed.
      var elem = (evt.target) ? evt.target :
                 ((evt.srcElement) ? evt.srcElement : null);
      if (elem)
      {        
        // switches the currently displayed image by hiding the image indexed by gIndex,
        // incrementing/decrementing gIndex and making the newly indexed image visible
        var arrImgs = document.getElementById("pimgs").getElementsByTagName("img");
        var objProp = ("nextlink" == elem.id) 
                    ? arrImgs[gIndex++].style
                    : arrImgs[gIndex--].style;
        objProp.display = "none";  
        arrImgs[gIndex].style.display = "inline";
		document.getElementById("pimg_caption").innerHTML = arrImgs[gIndex].alt; 
        refreshLinks();
        return false;
      }
    }
  }
}

function refreshLinks()
{
  /**
    * defines the display property of the next and previous links based on
    * the index of the current image (in the global variable gIndex).
    */
  document.getElementById("nextlink").style.display =
    (gIndex == (gTotal - 1)) ? "none" : "block";
  document.getElementById("prevlink").style.display = 
    (gIndex == 0) ? "none" : "block";
}

window.onload = initImageControl;