function galleryInit(){
  if (document.createElement){
    
    /*<p id="zoom">
    <img src="#" alt="" /><br />
    This is a caption for this image<br />
    <a href="">Prev</a><a href="">Next</a>
    </p>*/
    
    var paragraph = createHTMLElement('p', {'id':'zoom'});
    var caption = document.createTextNode('');
    var br = createHTMLElement('br');
    var img = createHTMLElement('img', {'src':'', 'width':'461', 'height':'308'});
    var prevlink = createHTMLElement('a', {'href':'', 'title':'', 'id':'prev'});
    prevlink.appendChild(document.createTextNode('Prev '));
    var nextlink = prevlink.cloneNode(false);
    nextlink.setAttribute('id', 'next');
    nextlink.appendChild(document.createTextNode(' Next'));
    
    paragraph.appendChild(img);
    paragraph.appendChild(br);
    paragraph.appendChild(caption);
    paragraph.appendChild(br.cloneNode(false));
    paragraph.appendChild(prevlink);
    paragraph.appendChild(nextlink);
    
    var container = document.getElementById('content');
    container.insertBefore(paragraph, node_after(node_after(first_child(container))));
       
    var currentlink = null;
    var thumblinks = new Array();
     
    // find all the links
    var galleries = getElementsByClassName(container, 'ul', 'gallery');
    
    var noOfGalleries=galleries.length;
    
    for (var i=0; i<noOfGalleries; i++)
      thumblinks = thumblinks.concat(nodeListToArray(galleries[i].getElementsByTagName('a')));
           
    var noOfThumbs=thumblinks.length;
    
    var doimageswap = function(selected){
      
      var currTitle = selected.getAttribute('title');
      var currHref = selected.getAttribute('href');
      
      img.onload = function(){caption.nodeValue = currTitle;}
      
      caption.nodeValue = 'Loading...';
      img.setAttribute('src', currHref);
      
      var intPosition;
      
      // if event is triggered by prev or next links
      if (selected == prevlink || selected == nextlink)
      {
        // determine current image based on href as opposed to obj ref
        for (var i=0; i<noOfThumbs; i++){
          if (thumblinks[i].getAttribute('href') == currHref)
            intPosition = i;
        }
      }
      else
      {
        // determine current image based on the link that triggered the event
        intPosition = arraySearch(selected, thumblinks);
      }
       
      // selected link styles
      if (currentlink != null) currentlink.className = '';
          
      thumblinks[intPosition].className = 'selected';
      currentlink = thumblinks[intPosition];

 
      // set next link
      if (intPosition < noOfThumbs-1)
      {
        nextlink.style.display = 'inline';
        nextlink.setAttribute('href', thumblinks[intPosition+1].getAttribute('href'));
        nextlink.setAttribute('title', thumblinks[intPosition+1].getAttribute('title'));
      }
      else
      {
        nextlink.style.display = 'none';
      }
      
      // set prev link
      if (intPosition == 0)
      {
        prevlink.style.display = 'none';
      }
      else
      {
        prevlink.style.display = 'inline';
        prevlink.setAttribute('href', thumblinks[intPosition-1].getAttribute('href'));
        prevlink.setAttribute('title', thumblinks[intPosition-1].getAttribute('title'));
      }
    }
    
    var imageswap = function(event){
      doimageswap(this);

      if (event.preventDefault)
        event.preventDefault();
      else
        event.returnValue = false;
    }

    // attach handler to all the thumbnail links
    for (var i=0; i < noOfThumbs; i++)
      addEvent(thumblinks[i], 'click', imageswap);
    
    // attach handler to the previous and next links
    addEvent(prevlink, 'click', imageswap);
    addEvent(nextlink, 'click', imageswap);
    
    // set-up first image
    doimageswap(thumblinks[0]);
  }
}

addEvent(window, 'load', galleryInit);