/*
 * Content Slider Javascript Module
 * Nicholas Ortenzio
 * 7/23/2009
 *
 * Requires : Prototype and Scriptaculous
 * 
 * Usage : contentSlider.initialize(
 *		base  // HTMLElement or Element ID of Content Slider Container,
 *		prev  // HTMLElement or Element ID of Content Slider Previous Nav Element
 *		next  // HTMLElement or Element ID of Content Slider Next Nav Element
 *		ring  // BOOLEAN which determines the scrolling behavior
 * 		elms  // [HTMLElements] to become the Slider Panels
 * );
 *
 * Notes : Remember to specifiy the width of the base element in CSS
 *
 *
 */

var contentSlider = {
	panels : [],

	initialize : function(base, prev, next, ring, elms) {
		this.base = $(base).setStyle({overflow:'hidden', position:'relative', margin:'0', padding:'0'});
		this.container = Builder.node('div').setStyle({position:'relative', margin:'0', padding:'0', left:'0', width:'99999px'});
		this.base.appendChild(this.container);
		this.viewportWidth = $(this.base).getWidth();
		this.createPanels(elms);
		this.createNavElements(next, prev);
		this.current = 0;
		this.ring = ring;
	},

	createPanels : function(elms) {
		for (var x=0;x<elms.length;++x) {
			var panel = Builder.node('div', elms[x]).setStyle({position:'relative', margin:'0', padding:'0', cssFloat:'left'});
			this.panels.push(panel);
			$(this.container).appendChild(panel);
		}
		$(this.container).appendChild(Builder.node('div', {style:'clear:both; float:left;'}));
		this.panels[0].addClassName('current');
	},

	createNavElements : function(next, prev) {
		$(next).observe('click', function(event){contentSlider.changeCurrentPanel(1);});
		$(prev).observe('click', function(event){contentSlider.changeCurrentPanel(0);});
	},

	changeCurrentPanel : function(dir) {
		$(this.panels[this.current]).removeClassName('current');
		var next = (dir) ? ((this.current < this.panels.length-1) ? ++this.current : 0) : ((this.current > 0) ? --this.current : this.panels.length-1);
		this.current = (this.ring) ? next : this.current;
		$(this.panels[this.current]).addClassName('current');
		new Effect.Morph($(this.container),{style:'left:-'+this.current*this.viewportWidth+'px;',duration:0.8});
		new Effect.Morph($(this.base),{style:'height:'+$(this.panels[this.current]).getHeight()+'px;',duration:0.4});
	}
}