var container;

// The easing duration (in milliseconds).
var TIME = 1000;
var container;


// on dom ready, scroll to #box0 and initialize all onclick events for buttons
$(function(){
	container = $('#wrapper');
	
	var box0 = $('#box0');
	var coords = getCoords(box0);

	container.scrollTo(coords, TIME, {axis: 'xy', easing: 'easeOutQuad', queue: 'true'});
	
	setupOnClick();
});

// associates a scrollTo onclick event for every button
// This relies on a valid internal href (for example: <a href="#box0" ...)
function setupOnClick() {
	container.find('[id^=button] a').click(function() {
		var link = $(this);
		var box = $(link.attr('href'));
		var coords = getCoords(box);
		/*
		alert(
			'Time: '+TIME+"\n"+
			'coords.left: '+coords.left+"\n"+
			'coords.top: '+coords.top+"\n"
		);
		*/
		container.stop().scrollTo(coords, TIME, {axis: 'xy', easing: 'easeOutQuad', queue: 'true'});
		return false;
	});
}

// calculates coordinates required to center box within div
function getCoords(obj) {
	var obj = $(obj);
	
	var widthDiff = container.width() - obj.width();
	var heightDiff = container.height() - obj.height();
	
	var top = parseInt(obj.css('top')) - (heightDiff / 2);
	var left = parseInt(obj.css('left')) - (widthDiff / 2);
	
	return {top: top, left: left}
}