/* Scrollable Box
 * By: Sanford Liu (sliu@theniceagency.com)
 * Ver: 1.0 (09/16/2005)
 * Browser matrix: N6+, IE5+, FF1+
 * Description: Takes a div layer and separates it into pages navigated using next/prev page buttons
 */
function ScrollableBox(divID, nextBtnID, prevBtnID, pageHeight) {
	/* 
	 * Constructor
	 * @arg	divID		id of the content div (must be position=absolute, height=auto)
	 * @arg	nextBtnID	id of the next button form element
 	 * @arg	prevBtnID	id of the previous button form element
	 * @arg	pageHeight	height of each page in px (must be equally divisible by the line 
	 * 					height of the content so that pages are split evenly)
	 */
	this.constructor = function() { 
		this.divObj = document.getElementById(divID);
		this.nextBtnObj = document.getElementById(nextBtnID);
		this.prevBtnObj = document.getElementById(prevBtnID);
		this.pageHeight = pageHeight;
		this.pageY = this.strToNum(this.divObj.style.top);
		this.update();
	}
	
	/* 
	 * Update scroll position based on content box
	 */
	this.update = function() {
		this.actualHeight = this.divObj.offsetHeight;
		this.currentPage = 0;
		this.totalPage = Math.ceil(this.actualHeight/this.pageHeight)-1;
		
		this.showCurrent();
		if (this.actualHeight > this.pageHeight) {
			// overflow! enable scroll buttons
			var owner = this;
			this.nextBtnObj.onclick = function() { owner.onClickNext(); }
			this.prevBtnObj.onclick = function() { owner.onClickPrev(); }
		} else {
			// no overflow, disable scroll buttons
			this.disableButton(this.nextBtnObj);
			this.disableButton(this.prevBtnObj);
		}
	}

	/* 
	 * Event handler for going to next page
	 */
	this.onClickNext = function() {
		if (this.currentPage == this.totalPage) return;
		this.currentPage++;
		this.showCurrent();
	}
	
	/* 
	 * Event handler for going to previous page
	 */
	this.onClickPrev = function() {
		if (this.currentPage == 0) return;
		this.currentPage--;
		this.showCurrent();
	}
	
	/* 
	 * Show the current page
	 */
	this.showCurrent = function() {
		var offset = this.currentPage*this.pageHeight;
		this.divObj.style.top = (this.pageY - offset)+"px";
		this.divObj.style.clip = "rect("+offset+"px,auto,"+(this.pageHeight+offset)+"px,auto)";
		
		// enable/disable paging buttons
		if (this.currentPage == this.totalPage) this.disableButton(this.nextBtnObj);
		else this.enableButton(this.nextBtnObj);
		if (this.currentPage == 0) this.disableButton(this.prevBtnObj);
		else this.enableButton(this.prevBtnObj);
	}
	
	/* 
	 * Enable button
	 * @arg	btn	button to enable
	 */
	this.enableButton = function(btn) {
		btn.src=btn.src.replace(/\_off/, "_on");
	}
	
	/* 
	 * Disable button
	 * @arg	btn	button to disable
	 */
	this.disableButton = function(btn) {
		btn.src=btn.src.replace(/\_on/, "_off");
	}
	
	/* 
	 * Convert a string containing numerical value combined with string into just numerical
	 * @arg	str	string to convert
	 * @return	converted string
	 */
	this.strToNum = function(str) {
		return new Number(str.replace(/\D+/, ""));
	}

	this.constructor();
}