var Engagement = Class.create({
	options: {
		container: 'slider_content',
		nav: 'home_nav',
		resetWait: 30,
		default_pane: 'welcome_info',
		effect_opts: {
			duration: 0.5,
			fps: 100
		}
	},
	timer: null,
	
	initialize: function(){
		this.container = $(this.options.container);
		this.nav = $(this.options.nav);
		this.assignObservers();
		this.prepareList();
	},
	
	assignObservers: function(){
		this.nav.select('a').each(function(a){
			a.observe('click', this.handleClick.bindAsEventListener(this));
		}.bind(this));
		this.container.select("*[rel='slider']").each(function(a){
			a.observe('click', this.handleClick.bindAsEventListener(this));
		}.bind(this));
	},
	
	prepareList: function(){
		this.list = this.container.select('ul').first();
		this.panels = this.list.select('li');
		this.panelWidth = this.container.getWidth();
		this.panelCount = this.panels.length;
		var width = this.panelWidth*this.panelCount;
		this.list.setStyle({width: width+"px"});
	},
	
	handleClick: function(e){
		el = e.findElement('a');
		e.stop();
		var id = el.getAttribute('href', 2).sub("#", "");
		this.show(id);
		var mainNav = this.nav.select("a[href='"+el.getAttribute('href')+"']").first();
		this.activateNav(mainNav);
	},
	
	reset: function(){
		this.clearTimer();
		this.nav.select('.active').invoke('removeClassName', 'active');
		this.slideTo(this.options.default_pane);
	},
	
	slideTo: function(which){
		new Effect.Morph(this.list, Object.extend(Object.clone(this.options.effect_opts), {style: "left: "+this.getOffsetCSS(which)}));
		var navEl = $(which.sub("_info", ""));
	},
	
	show: function(which){
		this.clearTimer();
		this.slideTo(which);		
		this.resetTimer();
	},
	
	getOffsetCSS: function(which){
		var elLeft = $(which).positionedOffset().left;
		var css = "-"+elLeft+"px";
		return css;
	},
	
	resetTimer: function(){
		if(this.timer)
			window.clearTimeout(this.timer);
		this.timer = this.reset.bind(this).delay(this.options.resetWait);
	},
	
	clearTimer: function(){
		if(this.timer)
			window.clearTimeout(this.timer);
		this.timer = null;
	},
	
	activateNav: function(el){
		if(this.activeNav)
			this.activeNav.removeClassName('active');
		
		if(el){
			this.activeNav = el;
			el.addClassName('active');
		}else{
			this.activeNav = null;
		}
	}
});

document.observe('dom:loaded', function(){
	home_eng = new Engagement();
});