Element.extend({
	visible:function(){
		return this.getStyle('display') == 'block'
	},
	highlight:function(){
		var current_color = this.getStyle('backgroundColor')
		if(current_color == 'transparent')var trans = '#FFFFFF'
    var highlight_fx = $(this).effect('backgroundColor')
    
    highlight_fx.start(trans || current_color,'#ffff99').chain(function(){
    	highlight_fx.start('#ffff99',trans || current_color)
    }).chain(function(){
    	this.setStyle('backgroundColor',current_color)
    }.bind(this))
    return this
	},
	fade_and_remove:function(){
		return new Fx.Style(this,'opacity',{onComplete:this.remove.bind(this)}).start(1,0)
	},
	child:function(id){return $(this.id+'_'+id)},
	setEvent:function(type,fn){
		this.removeEvents(type)
		this.addEvent(type,fn)
	},
	show:function(){ this.style.display = '' },
	hide:function(){ this.style.display = 'none' },
	serialize: function(key) {
		key = key || this.id
		return this.getChildren().map(function(el, i) { return key+'[]=' + el.id.split('_')[1] }).join('&')
	}
})

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 = 68;                        
    if(!$defined($(options.imgs))) return;        
    imgs = $(options.imgs);
    this.list = imgs.getFirst();
    this.list.setStyle('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.Style(this.displayedImage,'opacity',{ 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);
    }.bind(this) })       
    fx.start(1,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.Style(this.list,'left',{duration:300, wait:false, transition: Fx.Transitions.Cubic.easeOut});     
    fx.start(-((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.leftBound==0)     
    {
      if (this.leftButton.getStyle('opacity')==1)
        fx.start(1,0); 
    }
    else 
    {
      if (this.leftButton.getStyle('opacity')==0)
        fx.start(0,1);
    }
  },
  SetRightButtonMode: function()
  {
    var fx = new Fx.Style(this.rightButton,'opacity',{duration:300, wait:false});
    if (this.rightBound==this.numImages-1) 
    {
      if (this.rightButton.getStyle('opacity')==1)
        fx.start(1,0);
    }
    else 
    {
      if (this.rightButton.getStyle('opacity')==0)      
        fx.start(0,1);
    }
  },
  SetLeftCursor: function()
  {
    if (this.currentImageIndex==0) this.leftHalf.addClass('disabled');
    else this.leftHalf.removeClass('disabled');
  },
  SetRightCursor: function()
  {
    if (this.currentImageIndex==this.numImages-1) this.rightHalf.addClass('disabled');
    else this.rightHalf.removeClass('disabled');
  }
})