var SimpleSlideShowDemo = new Class({
	Implements: [Options, Events],
	options: {
		slides: [],
		startIndex: 0,
		wrap: true
		//onShow: $empty
	},
	initialize: function(options){
		this.setOptions(options)
		this.addSlides(this.options.slides);
		if(this.slides.length) this.showSlide(this.options.startIndex);
	},
	slides: [],
	addSlides: function(slides){
		$$(slides).each(function(slide){
			this.slides.include($(slide));
			slide.addEvent('click', this.cycleForward.bind(this));
		}, this);
	},
	addSlide: function(slide){
		this.addSlides($splat($(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){
		if (this.fading) return;
		var now = this.now;		
		var currentSlide = this.slides[now];
		var slide = this.slides[iToShow];
		var fadeIn = function (s){
			this.fading = true;
			s.set('styles', {
				display:'block',
				visibility: 'visible',
				opacity: 0
			});
			s.get('tween').start('opacity', 1).chain(function(){
				this.fading = false;
				this.fireEvent('onShow', [slide, iToShow]);
			}.bind(this));
		}.bind(this);
		if(slide) {
			if($chk(now) && now != iToShow){
				this.fading = true;
				currentSlide.get('tween').start('opacity', 0).chain(function(){
					currentSlide.setStyle('display', 'none');
					fadeIn(slide);
				}.bind(this));
			} else fadeIn(slide);
			this.now = iToShow;
		}
	}
});


var SimpleImageSlideShowDemo = new Class({
	Extends: SimpleSlideShowDemo,
	options: {
		imgUrls: [],
		imgBtns: [],
		container: false,
		prevBtn: false,
		nextBtn: false
	},
	initialize: function(options){
		this.parent(options);
		this.container = $(this.options.container);
		this.prevBtn = $(this.options.prevBtn);
		this.nextBtn = $(this.options.nextBtn);
		if(!this.container) return;
		this.options.imgUrls.each(this.addImg.bind(this));
		this.maxNavButton=0
		this.options.imgBtns.each(this.addNavBtn.bind(this));
		this.showSlide(this.options.startIndex);
		if (this.prevBtn) { this.addPrevBtn(this.prevBtn); }
		if (this.nextBtn) { this.addNextBtn(this.nextBtn); }
	},
	addImg: function(url){
		var img = new Element('img', {
				src: url,
				styles: {
					display: 'none'
				}
			}).inject($(this.options.container))
		this.addSlide(img);
	},
	addNavBtn: function(btn){
		btn.addEvent('click', this.showSlide.bind(this, this.maxNavButton));
		this.maxNavButton += 1;
	},
	addNextBtn: function(btn){
		btn.addEvent('click', this.cycleForward.bind(this));
	},
	addPrevBtn: function(btn){
		btn.addEvent('click', this.cycleBack.bind(this));

	}
});