var scrollArea; //define this in the global scope

document.observe("dom:loaded", function() {

	var maxHeightBeforeScroll = 350;
	
	if($('mainContent').getHeight() > maxHeightBeforeScroll) {
		
		$('mainContent').ancestors()[0].insert({bottom: '<div id="mainFooter"><div class="relativeFill"><div id="pageNavigation"><div id="pagination"></div></div></div></div>'});

		$('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'));
		
		scrollArea = new ScrollArea('mainContent',
			{	"blockSize": blockSize,
				"blocksPreservedPerPage": 1,
				"width": 598,
				"height": 340
			});

		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');
}

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