var HotelGallery = new Class({
  initialize: function(options)
  {
    this.numImages = 0;    
    this.currentImageIndex = 0;
    this.leftBound = 0;
    this.rightBound = 3;    
    this.galleryImages = [];
    this.displayedImage = $(options.firstImage);
    this.leftButton = $(options.leftButton);
    this.rightButton = $(options.rightButton);
    this.leftHalf = $(options.leftHalf);
    this.rightHalf = $(options.rightHalf);     
    this.domain_name = options.domain_name;
    this.thumbWidth = 66;                        
    if(!$defined($(options.imgs))) return;        
    imgs = $(options.imgs);
    this.list = imgs.getFirst();
    this.list.set('styles',{'left':0}); 
    images = this.list;    
    images.getChildren().each(function(image){
      this.AddImage(image);
    }.bind(this))
    this.CheckButtonMode();
    this.galleryImages.each(function(thumb,index){
      thumb.addEvent('click',function(){ 
        this.ClickThumb(thumb,index);
      }.bind(this))      
    }.bind(this))
    
    // -------- LEFT AND RIGHT BUTTONS ------------    
    this.leftButton.addEvent('click',function(e){       
      e = new Event(e);
      e.preventDefault();
      this.MoveList(-1);            
    }.bind(this))
    this.rightButton.addEvent('click',function(e){ 
      e = new Event(e);
      e.preventDefault();
      this.MoveList(1);      
    }.bind(this))
    
    //------ LEFT AND RIGHT HALFS ---------    
    this.leftHalf.addEvent('click',function(){ 
      if (this.currentImageIndex>0)
        this.ClickThumb(this.galleryImages[this.currentImageIndex-1],this.currentImageIndex-1);            
    }.bind(this))
    this.rightHalf.addEvent('click',function(){
      if (this.currentImageIndex<this.numImages-1)
        this.ClickThumb(this.galleryImages[this.currentImageIndex+1],this.currentImageIndex+1);      
    }.bind(this))        
    
  },
  AddImage: function(image){
    this.galleryImages.include(image);    
    this.numImages++;    
  },
  ClickThumb: function(thumb,index){                          
    if (this.galleryImages[this.currentImageIndex].getFirst()!=thumb.getFirst()){
      this.ChangeImage(index);       
      thumb.getFirst().setStyle('border-color','#1BA8FC');
      this.galleryImages[this.currentImageIndex].getFirst().setStyle('border-color','#DFDFDF');
    }
    this.currentImageIndex = index;
    if (index==this.rightBound) this.MoveList(1);
    if (index==this.leftBound) this.MoveList(-1);    
    this.CheckButtonMode();
  },
  ChangeImage: function(index){    
    this.CheckButtonMode();                                           
    image_src = this.galleryImages[index].getFirst().src.match(/\/uploads\/hotel_images\/small\/(.*)/)[1];        
    var fx = new Fx.Tween(this.displayedImage,{ duration:300, wait:false, onComplete:function(){
      this.displayedImage.src = 'http://'+this.domain_name + '/uploads/hotel_images/'+image_src;   
      //var fxshow = new Fx.Style(this.displayedImage,'opacity',{ duration: 500, wait:false })
      //fxshow.start(0,1);
      this.displayedImage.fade('in')
    }.bind(this)})           
    fx.start('opacity',0);
  },
  MoveList: function(direction){    
    if (direction>0){
      if (this.rightBound<this.numImages-1){
        this.leftBound++;
        this.rightBound++;
      }              
    }
    else{
      if (this.leftBound>0){
        this.leftBound--;
        this.rightBound--;
      }
    }    
    this.CheckButtonMode(); 
    var fx = new Fx.Tween(this.list,{duration:300, wait:false, transition: Fx.Transitions.Cubic.easeOut});     
    fx.start('left',-((this.leftBound)*this.thumbWidth));        
  },
  CheckButtonMode: function(){
    this.SetLeftButtonMode(); 
    this.SetRightButtonMode();      
    this.SetLeftCursor();
    this.SetRightCursor();    
  },
  SetLeftButtonMode: function(){
    //var fx = new Fx.Style(this.leftButton,'opacity',{duration:300, wait:false});    
    if (this.numImages<5){
      this.leftButton.set('styles',{'opacity':0});
    }
    else{
      if (this.leftBound==0)     {
        if (this.leftButton.getStyle('opacity')==1)
          this.leftButton.fade('out'); 
      }
      else {
        if (this.leftButton.getStyle('opacity')==0)
          this.leftButton.fade('in')          
      }
    }
  },
  SetRightButtonMode: function(){    
    if (this.numImages<5){
      this.rightButton.setStyle('opacity',0);      
    }
    else{
      if (this.rightBound==this.numImages-1){
        if (this.rightButton.getStyle('opacity')==1)
          this.rightButton.fade('out')          
      }
      else{
        if (this.rightButton.getStyle('opacity')==0)      
          this.rightButton.fade('in')
      }
    }
  },
  SetLeftCursor: function(){    
    if (this.currentImageIndex==0) this.leftHalf.addClass('disabled');
    else this.leftHalf.removeClass('disabled');
  },
  SetRightCursor: function(){
    if (this.numImages<2){
      this.rightHalf.addClass('disabled');
    }
    else{
      if (this.currentImageIndex==this.numImages-1) this.rightHalf.addClass('disabled');
      else this.rightHalf.removeClass('disabled');
    }
  }
})