/************ slideshows *************/
var SlideShow = Class.create();
SlideShow.prototype = {
	initialize : function(initial, contents, buttons, delay){
		this.initial = initial;
		this.contents = contents;
		this.buttons = buttons;
		this.delay = delay;
		this.showOnly(this.contents[this.initial]);
		this.current = initial;
		this.buttons[this.current].addClassName('active');
		this.start();
		this.show = null, this.hide = null;
		this.buttons.each(function(el, i){
			el.observe('click', (function(ev){
				ev.stop();
				this.pause();
				this.goTo(i, .5);
			}).bind(this));
		}.bind(this));
		
		this.buttons[0].up().observe('mouseleave', function(ev){
			this.start();
		}.bind(this));
	},
	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;
		}
		this.hide ? this.hide.cancel() : 0; 
		this.show ? this.show.cancel() : 0;
	},
	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 || 2});
		this.buttons[this.current].removeClassName('active');
		this.current = idx;
		this.show = new Effect.Appear(this.contents[this.current],{duration: dur || 2});
		this.buttons[this.current].addClassName('active');
	},
	getCurrent : function(){
		return this.current;
	}
	
};
document.observe('dom:loaded', function() {
	if ($('home_hero'))
		var show = new SlideShow(0, $$('#home_hero > .hero_image'), $$('#home_hero ul li'), 6);
});