var scrollArea; //define this in the global scope

document.observe("dom:loaded", function() {
	
	$('mainContent').setStyle({
		"font-size": "11px",
		"line-height": parseFloat(11 * 1.45)+"px"
	}); //1.45em
	
	// set block size to line height
	blockSize = parseFloat($('mainContent').getStyle('lineHeight')); //why +7?
	
	scrollArea = new ScrollArea('mainContent',
		{ "blockSize": blockSize,
			"blocksPreservedPerPage": 1,
			"width": 586,
			"height": 288
		});

	listPages();

});

function listPages() {
	$('pagination').update('');
	for(var i=0; i<scrollArea.totalPages; i++) {
		//assumes the existence of a div with id="pagination"
		$('pagination').insert('<a href="javascript:setPage('+i+');">'+(i+1)+'<\/a> ');
	}
	$('pagination').down('a').addClassName('selected');
//	$('pagination').insert('<a href="javascript:scrollArea.gotoNextPage();"><img src="'+HttpRelativeFragmentsRoot+'wbc_js_classes/images/arrows/med_blue_arrow.gif" alt="&gt;" width="8" height="8" border="0" /></a>');
}

function setPage(page) {
	scrollArea.setPage(page);
	$('pagination').select('a.selected').each(function(s) {
		s.removeClassName('selected');
	});
	$('pagination').select('a')[page].addClassName('selected');
}