var Gallery = Class.create({
	initialize:function(id,options){
		this.options = Object.extend({
			thumbClass: '.thumb li',
			idLeftArrow: 'leftArrow',
			idRightArrow: 'rightArrow',
			visibles: 6
		}, arguments[1] || { });
    this.container = $(id);
    this.left = $(this.options.idLeftArrow);
    this.right = $(this.options.idRightArrow);
    this.tot = $$(this.options.thumbClass).size();
    this.left.observe('click', function(){this.scrollRight() }.bind(this));
    this.right.observe('click', function(){this.scrollLeft()  }.bind(this));
    this.current = 0;
    this.updateScroller();
    $$(this.options.thumbClass + ' a').each(function(a){
      a.observe('click', function(e){this.loadPhoto(a)}.bind(this))
    }.bind(this));
  },
	scrollLeft: function(e){
    if((this.tot  + this.current - this.options.visibles) > 0)
    {
      this.current--;
      this.updateScroller();
    }
      
	},
	scrollRight: function(e){
	  if(this.current<0)
	  {
	    this.current++;
      this.updateScroller();      
	  }
	},
	updateScroller: function()
	{
	  this.container.morph('left:'+((this.current*294))+'px'); 
	},
	loadPhoto: function(a){
	  this.currentlink = a;
	  rel = a.rel;
    newimage = new Image();
    newimage.onload = function()
    {
      $('photo').appendChild(newimage);   
      $('photo').appear();
    }
    if ($$('#photo > img').first()) {
      new Effect.Fade('photo', {
        afterFinish: function(){
          var img = $$('#photo > img').first();
          if(img)
            $(img).remove();
          newimage.src = rel;
        }.bind(this)
    });
  }else{
      newimage.src = rel;
    }
	}
});