function VerticalGallery(top,left,slideSize,numVisible,color,hlColor,spacerImg){
  this.left=left;
  this.top=top;
  this.slideSize=slideSize;
  this.images=null;
  this.spacerImg=spacerImg;
  this.color=color;
  this.hlColor=hlColor;
  this.offset=0;
  this.selectedIndex=null;
  this.MOVE_STEPS=6;
  this.MOVE_DISTANCE=(this.slideSize+2)/this.MOVE_STEPS;
  this.z=0;
  this.spin=-1;
  this.si=this.offset;
  this.zCounter=0;
  this.totalZ=0;
  this.step;
  this.renderLength=numVisible;
  this.thumbImgs=new Array();
  this.thumbDivs=new Array();
  this.moving=false;
  this.container=null;
  this.parentObj=null;
  this.lrgImages=new Array();
  this.cmdQ=new Array();
}
VerticalGallery.prototype.queue=function(cmd){
  if(this.cmdQ.length<3){
    this.cmdQ.unshift(cmd);
    if(!this.moving)
      this.stop();
  }
}
// parentObj - Is a reference to the parent of this object. If specified this object
//             will try to call two functions if available:
//             loadImage(image), preload(images,startIndex,length)
VerticalGallery.prototype.setParentObj=function(parentObj){
  this.parentObj=parentObj;
}
VerticalGallery.prototype.setContainer=function(container){
  this.container=container;
}
VerticalGallery.prototype.setImages=function(images){
  this.images=images;
  if(images == null)
    return;
  this.images.selectedIndex=this.selectedIndex;
  if(this.parentObj!=null && this.parentObj.preload != null)  
    this.parentObj.preload(this.images,this.images.length+this.offset,this.renderLength)
}
VerticalGallery.prototype.setOffset=function(offset){
  this.offset=offset;
}
VerticalGallery.prototype.setDefaultSelected=function(index){
  this.selectedIndex=index;
}
VerticalGallery.prototype.rotate=function(step){
  if(!this.moving && this.images!=null)
    this.doRotate(step);
}
VerticalGallery.prototype.build=function(){
  if(this.container == null) return;
  var divObj,divBg,obj=this;
  var table,td,tr,tbody;
  this.container.css('top',this.top);

  for(var i=0;i<this.renderLength;i++){
    this.lrgImages[i]=new Image(); 
    this.thumbImgs[i]=new Image();
    divObj=document.createElement('div');
    divBg=document.createElement('div');                                
    this.thumbDivs[i]=$(document.createElement('div'));
    table=$(document.createElement('table'));
    tbody=$(document.createElement('tbody'));
    tr=$(document.createElement('tr'));
    td=$(document.createElement('td'));
    this.container.append(this.thumbDivs[i]);
    this.thumbDivs[i].append(divBg).append(divObj);
    $(divObj).append(table);
    table.append(tbody);
    tbody.append(tr);
    tr.append(td);
    td.append(this.thumbImgs[i]);
    table.attr({
      height:this.slideSize-2,
      width:this.slideSize-2,
      border:'0',
      cellpadding:'2',
      cellspacing:'0'
    });
    td.attr({
      height:'100%',
      width:'100%',
      align:'center',
      valign:'middle'
    });
    
    this.thumbImgs[i].src=this.spacerImg;
    this.thumbImgs[i].index=i;
    this.thumbImgs[i].imgID=null;
    $(this.thumbImgs[i]).click(function(e){
      if(e!=null)e.stopPropagation();
      if(obj.parentObj!=null&&obj.parentObj.loadImage != null)
        obj.parentObj.loadImage(this.src,this.imgID);
      if(obj.images!=null){
        var tmp=obj.si+this.index;
        if(tmp>=obj.images.length)
          tmp-=obj.images.length;
        obj.images.selectedIndex=tmp;
        obj.drawSlides(obj.top,obj.si,false);
      }
    });
    this.thumbDivs[i].css({
      'position':'absolute',
      'height':this.slideSize+'px',
      'width':this.slideSize+'px',
      'left':this.left+'px'
    });
    $(divBg).css({
      'position':'absolute',
      'height':this.slideSize-2+'px',
      'width':this.slideSize-2+'px',
      'top':1+'px',
      'left':1+'px',
      'opacity':0.7,
      'background-color':this.color
    });
    divObj.selected=false;
    $(divObj).css({
      'position':'absolute',
      'height':this.slideSize-2+'px',
      'width':this.slideSize-2+'px',
      'top':1+'px',
      'left':1+'px',
      'border':'thin solid #000'
    });
    $(divObj).hover(function(event){event.stopPropagation();$(this).prev('div').stop(true, true).animate({backgroundColor:obj.hlColor,opacity:1},200);},
      function(event){event.stopPropagation();$(this).prev('div').stop(true, true).animate({opacity:0.7},300);if(!this.selected)$(this).prev('div').stop(true, true).animate({backgroundColor:obj.color,opacity:0.7},300);});
    td.click(function(event){event.stopPropagation();$(this).children('img:first').trigger('click')});
  }
}
VerticalGallery.prototype.drawSlides=function(y,i,noDraw){
  var tmpDiv;
  for(var ri=0;ri<this.renderLength;ri++){
    tmpDiv=this.thumbDivs[ri].children('div:first');
    if(this.images != null){
      if(i>=this.images.length)
        i=0;
      else if(i<0)
        i+=this.images.length;
      this.thumbImgs[ri].src=this.images[i].src;
      this.thumbImgs[ri].imgID=i;
      this.thumbImgs[ri].height=this.images[i].height;
      this.thumbImgs[ri].width=this.images[i].width;
      tmpDiv=this.thumbDivs[ri].children('div:eq(1)');
      if(this.images.selectedIndex != null && i==this.images.selectedIndex){
        tmpDiv.prev('div').css('background-color',this.hlColor);
        tmpDiv.attr('selected',true);
      }else{
        tmpDiv.prev('div').css('background-color',this.color);
        tmpDiv.attr('selected',false);
      }
    }else{
      tmpDiv.css('background-color',this.color);
      this.thumbImgs[ri].src=this.spacerImg;
      this.thumbImgs[ri].imgID=null;
    }
    if(noDraw==null){ 
      this.thumbDivs[ri].css({'top':y+'px'});
      y+=this.slideSize+2;
    }
    i++;
  }
}
VerticalGallery.prototype.init=function(draw){
  this.stop();
  this.si=this.offset;
  if(this.selectedIndex != null)
    this.si+=this.selectedIndex;
  if(draw==true)
    this.drawSlides(this.top,this.si);
}
VerticalGallery.prototype.stop=function(){
  this.moving=false;
  this.totalZ=0;
  this.zCounter=0;
  this.z=this.top;
  if(this.cmdQ.length>0){
    this.doRotate(this.cmdQ.pop());
  }
}
VerticalGallery.prototype.doRotate=function(step){
  var dir=Math.abs(step)/step;
  if(step!=0){
    this.step=step;
    this.spin=dir;
    var obj=this;
    this.moving = true;
    this.container.animate({top:this.spin*(this.slideSize+2)},{duration:200,
     easing:'linear',complete:function(){
      obj.si-=obj.spin;
      if(obj.spin<0 && obj.si>=obj.images.length)
          obj.si=0
      else if(obj.si<0)
          obj.si+=obj.images.length;
      obj.totalZ++;
      $(this).css('top',obj.top); 
      obj.drawSlides(obj.top,obj.si,true);
      if(obj.totalZ>=Math.abs(obj.step)){
        obj.stop();
        return;
      }
      obj.doRotate(obj.step);
    }});
    if(this.parentObj!=null&&this.parentObj.preload!=null)  
      this.parentObj.preload(this.images,this.si-step,this.renderLength);
  }else
    return;
}