var scroll;
var active_page = 1;
var pages;
var inner_content;
var content_height;

window.addEvent('domready', function() {
	scroll = new Fx.Scroll($('layout_content'));
	inner_content = $('inner_content');
	content_height = $('layout_content').getStyle('height').toInt();
	var inner_content_height = inner_content.getStyle('height').toInt();
	//alert(content_height);
	pages = Math.ceil(inner_content_height / content_height);
	
	inner_content.setStyles({
		'height': (pages * content_height)+'px',
	});
	createPagebrowser();
}
)

function scrollTo(page) {
	active_page = page;
	scroll.start(0, (page - 1) * content_height);
	createPagebrowser();
}

function scrollDown() {
	if (active_page == pages) {
		scroll.toTop();
		active_page = 1;
	}
	else {
		scroll.start(0, (++active_page - 1) * content_height);
	}
	createPagebrowser();
}

function scrollUp() {
	if (active_page == 1) {
		scroll.toBottom();
		active_page = pages;
	}
	else {
		scroll.start(0, (--active_page - 1) * content_height);
	}
	createPagebrowser();
}

function createPagebrowser() {
	var content = '';
	
	if (pages > 1) {
		content = '<a href="javascript:scrollUp();"><</a>';
		
		for (i = 1; i <= pages; i++) {
			if (i == active_page) 
				content += '<span class="pagebrowser_current">' + i + '</span>';
			else 
				content += '<a href="javascript:scrollTo(' + i + ');">' + i + '</a>';
		}
		
		content += '<a href="javascript:scrollDown();">></a>';
	}
	
	$('scroller').set('html', content);
}