Gallery = {

  currenIndex: -1,
  images: null,
  currentImage: null,

 initialize: function(elementId, img){
    if($('GalleryWindow')){ 
      this.setCurrent(img);
      return; 
    }
 
    var tmp = [];
    var nodes = $A($(elementId).getElementsByTagName('img'));
    nodes.each(function(node){
        var i = tmp.push({thumb:node.src, caption:node.alt, imgsrc:node.parentNode.href});
        if(node == img){ this.currentIndex = i; }
      });
    this.images = tmp;
    
    ///create container
    var div = document.createElement('div');
    div.id = 'GalleryWindow';
    div.innerHTML =['<div id="GalleryWindowBg"></div>',
      '<div id="GalleryWindowReal">',
      '<span class="square1" id="sprev" ><img alt="" id="GalleryPrev" src="" title="" /></span>',
      '<span class="square2" id="snext"><img alt="" id="GalleryNext" src="" title="" /></span> ', 
      '<div class="square" id="scurrent"> <img alt="" id="GalleryCurrent" src="" title="" /></div> ',
      '<h3 id="ImageCaption" style="text-align:center;"></h3>',
      '<div style="text-align:center; padding:10px;"><input type="button" value="Close" class="button" onclick="Gallery.dispose.bind(Gallery)();" return false;" /></div>',
      '</div>'].join('');
    div.className = 'gallerywidnow';
    document.body.appendChild(div);

    $('GalleryWindowBg').setStyle({ zIndex:'1', opacity:'0.9', backgroundColor:'#999', height:'1000px', width:'1000px', position:'absolute', top:'0px', left:'0px'});
    $('GalleryWindowReal').setStyle({ position:'relative', zIndex:'1'});
    
    Event.observe('GalleryNext', 'click', this.next.bindAsEventListener(this));
    Event.observe('GalleryPrev', 'click', this.previous.bindAsEventListener(this));
    this.setCurrent(img);
  },
  
  dispose: function(){
    $('GalleryWindow').remove();
    this.currentImage = null;
    this.images = null;
    this.currenIndex = -1;
  },
  
  next: function(){
    if(!this.isLast()){
       this.currenIndex++;
       this.refresh();
     }
  },
  
  previous: function(){
   if(!this.isFirst()){
     this.currenIndex--;
     this.refresh();
   }
  },
  
  isLast: function(){
    return (this.currenIndex == this.images.length -1);
  },
  
  isFirst: function(){
    return (this.currenIndex == 0);
  },
  
  refresh: function(){
   var img = this.images[this.currenIndex];
   $('GalleryCurrent').src = img.imgsrc;
   $('ImageCaption').update(img.caption);
   $('snext').show();
   $('sprev').show();
   (this.isLast()) ? $('snext').hide() : $('GalleryNext').src = this.images[this.currenIndex + 1].thumb;
   (this.isFirst())? $('sprev').hide() : $('GalleryPrev').src = this.images[this.currenIndex - 1].thumb;
  },
  
  setCurrent: function(imgNode){
    for(i = 0 ; i < this.images.length; i++){
      if (imgNode.src == this.images[i].thumb){
        this.currenIndex = i;
        this.currentImage = imgNode;
        break;
      }
    }
    this.refresh();
  }
     
}


function ShowGallery(imgNode){

    try{
      Gallery.initialize('ImageGallery', imgNode);
    }catch(ex){
      alert(ex);
    }
}