var BasicSlideShow = Class.create();
BasicSlideShow.prototype = {
	initialize : function(initial, container, contents, prev, next, delay){
		this.initial = initial;
		this.container = container;
		this.contents = contents;
		this.delay = delay;
		this.showOnly(this.contents[this.initial]);
		this.current = initial;
		this.start();
		this.show = null, this.hide = null;

		prev.observe('click', this.back.bind(this));
		next.observe('click', this.forward.bind(this));
		
	},
	back: function(ev){
		ev.stop(); 
		if (this.show || this.hide) return;
		this.pause(); 
		if (this.current ==0 )
			this.goTo(this.contents.length-1);
		else
			this.goTo(this.current-1);
	},
	forward: function(ev){
		ev.stop(); 
		if (this.show || this.hide) return;
		this.pause();
		this.next();
	}, 
	start : function(){
		if (this.timer) return;
		this.timer = setTimeout(this.next.bind(this), this.delay * 1000); //new PeriodicalExecuter(this.next.bind(this), this.delay);
	},
	showOnly : function(el){
		this.contents.each(Element.hide);
		el.show();
	},
	pause : function(){
		if (this.timer){
			clearTimeout(this.timer);
			this.timer = false;
		}
	},
	next : function(){
		this.timer = false;
		if (this.current == this.contents.length-1)
			this.goTo(0);
		else
			this.goTo(this.current+1);
		//this.start();
	},
	goTo : function(idx, dur){
		if (idx == this.current) return;
		this.hide = new Effect.Fade(this.contents[this.current], {duration : dur || 1, afterFinish:function(){this.hide=null;}.bind(this)});
		this.current = idx;
		this.show = new Effect.Appear(this.contents[this.current],{duration: dur || 1, afterFinish:function(){this.show=null;}.bind(this)});
		this.start();
	},
	getCurrent : function(){
		return this.current;
	}
};

document.observe('dom:loaded', function() {
	if ($('main-image'))
		new BasicSlideShow(0, $('#main-image'), $$('#main-image .slide'), $('prev-image'), $('next-image'), 4);
});