var SimpleSlideShowDemo = new Class({
	  options: {
			  slides: [],
			  startIndex: 0,
			  onShow: Class.empty,
			  wrap: true
	  },
	  initialize: function(options){
			  this.setOptions(options)
			  this.slides = [];
			  this.effects = [];
			  this.addSlides(this.options.slides);
			  //if(this.slides.length) this.showSlide(this.options.startIndex);
	  },
	  addSlides: function(slides){
			  $$(slides).each(function(slide){
					  this.slides.include($(slide));
					  this.effects[this.slides.indexOf(slide)] = new Fx.Style(slide, 'opacity');
					  //slide.addEvent('click', this.cycleForward.bind(this));
			  }, this);
	  },
	  addSlide: function(slide){
			  this.addSlides([slide]);
	  },
	  cycleForward: function(){
			  if($chk(this.now) && this.now < this.slides.length-1) this.showSlide(this.now+1);
			  else if (this.now && this.options.wrap) this.showSlide(0);
			  else if(!$defined(this.now)) this.showSlide(this.options.startIndex);
	  },
	  cycleBack: function(){
			  if(this.now > 0) this.showSlide(this.now-1);
			  else if(this.options.wrap) this.showSlide(this.slides.length-1);
	  },
	  showSlide: function(iToShow){
			  var now = this.now;          
			  var currentSlide = this.slides[now];
			  var slide = this.slides[iToShow];
			  function fadeIn(s){
					  s.setStyles({
							  display:'block',
							  visibility: 'visible',
							  opacity: 0
					  });
					  this.effects[this.slides.indexOf(s)].start(1);
					  this.fireEvent('onShow', [slide, iToShow]);
			  };
			  if(slide) {
					  if($chk(now) && now != iToShow){
							  this.effects[now].start(0).chain(function(){
									  this.slides[now].setStyle('display', 'none');
									  fadeIn.apply(this, [slide]);
							  }.bind(this));
					  } else fadeIn.apply(this, [slide]);
					  this.now = iToShow;
			  }
	  }
});
SimpleSlideShowDemo.implement(new Options, new Events);
var SimpleImageSlideShowDemo = SimpleSlideShowDemo.extend({
	  options: {
			  imgUrls: [], //the user can pass in an array of urls
			  container: false //the user must pass in a container id or DOM element
	  },
	  initialize: function(options){
			  this.parent(options); //executes SimpleSlideShowDemo.initialize
			  this.container = $(this.options.container); //stores the container reference
			  if(!this.container) { //if it wasn't found, exit quietly
					  dbug.log('SimpleImageSlideShowDemo error: container is not defined or not found');
					  return;
			  }
			  //iterate through the urls and add images for them
			  this.options.imgUrls.each(this.addImg.bind(this));
			  //show the first slide
			  //this.showSlide(this.options.startIndex);
	  },
	  addImg: function(url){
			  //new image
			  var img = new Element('img', { //could also use Assets.image
							  src: url,
							  styles: {
									display: 'none'
							  },
							  events: {
									  //click: this.cycleForward.bind(this)
							  }
					  }).injectInside($(this.options.container))
			  this.addSlide(img); //add this element to the slides
	  }
});