Gallery = function(imgPlaceId,thumbsPlaceId)
{
   this.imgPlace = document.getElementById(imgPlaceId);
   this.thumbsPlace = document.getElementById(thumbsPlaceId);
   this.setup();
   this.isLoading = 0;
};

Gallery.prototype = {
   setup: function()
   {
      var links = this.thumbsPlace.getElementsByTagName('a');
      var self = this;
      for (var i = 0; i < links.length; i++)
      {
       var img = links[i].getElementsByTagName('img')[0];
       if(img)
       {
         links[i].title = img.title;
         links[i].onclick= function() { self.loadImg(this.href, this.title,this.id); return false; }
       }
       
       
      } 
   },
   loadImg: function(src, title,id)
   {
      var self = this;
      if(this.isLoading == 0){
        this.showLoader();
      }
      this.newImg = new Image();
      var commentObject = document.getElementById('comid_'+id);
      this.comment = commentObject.innerHTML;
      var width=parseInt(commentObject.className);
      if (width>350) width=350;
      this.newImg.src = src;
      this.newImg.alt = title;
      this.newImg.style.width = width+'px';
      this.newImg.style.height = 'auto';
      this.newImg.className = 'loaded';
      
      if(this.newImg.complete == true)
      {
         this.showNewImage();
      }
      else
      {
         this.newImg.onload = function() { self.showNewImage() };
      }
      return false;
   },
   
   showLoader: function() {
      this.isLoading = 1;
      this.imgPlace.appendChild(document.createElement('ins'));
   },
   showNewImage: function()
   {
      this.isLoading = 0;
      this.imgPlace.innerHTML = '';
      this.imgPlace.appendChild(this.newImg);
      var commentDiv = document.createElement('div');
      commentDiv.className = 'comment';
      commentDiv.innerHTML = this.comment;
      this.imgPlace.appendChild(commentDiv);
   }
};