var Slideshow = Class.create();
Slideshow.prototype = {
	initialize: function( options) {
    this.photos = new Array();
    this.current = 0;
    this.options = Object.extend({
			canvas_id : 'slide_canvas',
			elem : 'thumbs',
			previmg : 'previmg',
			nextimg : 'nextimg',
			foot: 'slide_foot',
			arrowClassOver : 'arrow_class_over',
			currentThumbClass : 'current_photo',
			duration: .1,
			withThumbs: false,
			counter: 'counter',
			slideshow_class : 'slideshow_canvas',
			str_foot_function: false,
			autoLoad: false,
			buttons: true,
			loop: false,
			interval: 2
		}, options || {});

		this.createElems();
    this.getThumbs();
    this.change( this, 0);
    this.setButtons(this, 0);
    this.is_start = false;
	},
	
	createElems: function () {
	  this.createCanvas();
	  if( this.options.withThumbs == false)
      $(this.options.elem).hide();
	},
	
	setCounter: function () {
	  if( $(this.options.counter)) {
      $(this.options.counter).innerHTML = (this.current + 1) ;
      $(this.options.counter).innerHTML += " / ";
      $(this.options.counter).innerHTML += this.total + 1;
    }
	},
	
	createCanvas: function () {
	  this.canvas = document.createElement('div');
	  this.canvas.className = this.options.slideshow_class;
	  $(this.options.canvas_id).insert( { top: this.canvas });
	  this.createImage();
	},
	
	createImage: function() {
	  this.image = document.createElement('img');
	   $(this.canvas).insert( { top: this.image });
	},
	
	getThumbs: function() {
	  var els = $$('#' + this.options.elem + ' a');
	  var first = false;
    for( var i=0; i < els.length; i++) {
      if( els[i].rel) {
        this.photos [i] = els[i];
        Event.observe( els[i], 'click', this.change.bindAsEventListener( this, i), false);
      }
    };
    this.total = els.length - 1;
	},
	
	loadImage: function(e, current) {
	  this.image.src = this.photos [current].rel;
	  this.image.alt = this.photos [current].title;
	},
	
	change: function (e, current) {
	  if( current == this.current && this.is_start)
	    return false;
	  this.is_start = true;
	  if (this.photos [current]) {
      $(this.image).fade({duration: this.options.duration});
      setTimeout(this.loadImage.bindAsEventListener( this, current), this.options.duration * 1000)
      Event.observe( this.image, 'load', this.loada.bindAsEventListener( this), false);
      this.current = current;
      this.verifyButtons();
      
      if( this.options.autoLoad) {
        if( this.options.loop && this.current == this.total)
          this.current = -1;
        if( this.pe)
          this.pe.stop();
        this.pe = new PeriodicalExecuter( this.change.bindAsEventListener( this, this.current + 1), this.options.interval);
      }
	  }
	},
	
	verifyButtons: function() {
	  if(!$(this.options.previmg) || !$(this.options.nextimg))
	    return;
	  if( this.current == 0)
	    $(this.options.previmg).hide();
	  else
	    $(this.options.previmg).show();
	  
	  if( this.current < this.total)
	    $(this.options.nextimg).show();
    else
      $(this.options.nextimg).hide();
	},
	
	setCurrentThumbClass: function () {
	  for (var i=0; i < this.photos.length; i++) {
	   if( this.current == i)
	    $(this.photos[i]).addClassName( this.options.currentThumbClass);
	   else
	    $(this.photos[i]).removeClassName( this.options.currentThumbClass);
	  };
	},
	
	loada: function () {
	  $(this.image).appear({duration: this.options.duration});
	  this.setCurrentThumbClass();
    $(this.options.canvas_id).style.width = $(this.image).getWidth() + 'px';
    $(this.options.canvas_id).style.height = $(this.image).getHeight() + 'px';
    this.setCounter();
    this.setFoot();
	},
	
	setFoot: function () {
	  if( $(this.options.foot)) {
	    if( this.options.str_foot_function)
	      str_foot = this.options.str_foot_function( this.image.alt)
	    else
	      str_foot = this.image.alt;
	    $(this.options.foot).innerHTML = str_foot;
	  }
	},
	
	setButtons: function (e, current) {
	  if( !this.options.buttons) return;
    Event.observe( this.options.previmg, 'click', this.arrows.bindAsEventListener( this, -1), false);
    Event.observe( this.options.nextimg, 'click', this.arrows.bindAsEventListener( this, 1), false);
    Event.observe( this.image, 'mouseover', this.setClassOver.bindAsEventListener( this), false);
    Event.observe( this.options.nextimg, 'mouseover', this.setClassOver.bindAsEventListener( this), false);
    Event.observe( this.options.previmg, 'mouseover', this.setClassOver.bindAsEventListener( this), false);
    Event.observe( this.image, 'mouseout', this.setClassOut.bindAsEventListener( this), false);
	},
	
	setClassOver: function () {
	  $(this.options.previmg).addClassName( this.options.arrowClassOver);
	  $(this.options.nextimg).addClassName( this.options.arrowClassOver);
	},
	
	setClassOut: function (e, div) {
	  $(this.options.previmg).removeClassName( this.options.arrowClassOver);
	  $(this.options.nextimg).removeClassName( this.options.arrowClassOver);
	},
	
	arrows: function (e, value) {
	  this.change( this, this.current + (value));
	}
};