var galleries = {
	changeMainImage : function(id, image) {
		$('first_image_caption').innerHTML = $('image_caption_' + id).innerHTML
		$('first_image_img').src = image
	}
}
var SproutSlideShow = Class.create();

SproutSlideShow.prototype = {
 initialize: function(container,options) {
	  this.container = container
		this.parent    = this.container+'_holder'
		this.pe        = null
		if (!options || !options.height) {
			alert('You need to set a height for the slideshow!');
			return
		}
		this.options   = {
		  seconds  : 5,
			fadeDuration : 1,
			height : 0
		}
		Object.extend(this.options, options || {});
		this.createParent();
	},
	
	start: function() { 
    this.pe = new PeriodicalExecuter(this.cycle.bind(this), this.duration())  
  }, 
	
	stop : function() {
		this.pe.stop()
	},
	
	cycle: function() { 
    new Effect.Fade(this.container, {  
      duration: this.options.fadeDuration, 
      fps: 50, 
      afterFinish: this.finish.bind(this)
		})
  },
	
	finish : function() {
		var imgs = this.elements();
	  for(var i = 0;i<imgs.length;i++) {
					if (Element.visible(imgs[i])) {
						Element.hide(imgs[i])
						Element.show(imgs[(i+1)%imgs.length])
						break
					}
				}
    new Effect.Appear(this.container, {
       duration: this.options.fadeDuration,
       fps: 50
    })
	},
	
	elements : function() {
	  return $(this.container).immediateDescendants();
	},
	
	duration : function() {
		return this.options.fadeDuration * 2 + this.options.seconds;
	},
	
	//Create parent DIV to control height, when hiding/showing elements
	createParent : function() {
	  new Insertion.Before(this.container,'<div id="'+this.parent+'" style="height:'+this.options.height+'px"></div>');
		var html = $(this.container).innerHTML
		Element.remove(this.container);
		$(this.parent).update('<div id="'+this.container+'">'+html+'</div>');
	}
	
}