// Set Up
var Scroller = function(containerId, pageClass, buttonId, sideways) {
	// Set up the array of pages, and the index counter, and the 'scroll' effect
	this.cur      = 0;
	this.pages    = $ES('div.'+pageClass, containerId);
	this.fxscroll = new Fx.Scroll(containerId, {
		wait: false,
		duration: 550,
		transition: Fx.Transitions.Quad.easeInOut
	});

	// If it's a sideways scroller, set up the positioning of the pages.
	if(sideways) {
		var width = $(containerId).getStyle('width').toInt();
		var height = $(containerId).getStyle('height');
		var margin = 30;
		for(i=0;i<this.pages.length;i++) {
			this.pages[i].setStyles({'overflow':'hidden',
			                         'position':'absolute',
			                         'height':height,
			                         'width':width+'px',
			                         'margin-right':margin+'px',
			                         'top':'0px',
			                         'left':i*(width+margin)+'px'
			                        });
		}
	} else {
		// Ensure overflow is always hidden for the pageClass
		for(i=0;i<this.pages.length;i++) {
			this.pages[i].setStyle('overflow', 'hidden');
		}
	}

	// Set the onclick event for the button to use
	$(buttonId).addEvent('click', this.scrollTo.pass(null, this));

	// Hide the scrollbars and display the button
	$(buttonId).setStyle('display','inline');
	// container must have position:relative for the positioning of sidways pages to work
	$(containerId).setStyles({'overflow':'hidden','position':'relative'});
}

Scroller.prototype.scrollTo = function (e) {
	// e should catch the click event
	new Event(e).stop(); // prevent the click event from going through to the next element.
	this.cur = (this.cur + 1) % this.pages.length;
	this.fxscroll.toElement(this.pages[this.cur]);
};