var selected;

function onMenuItemSelected(event) {
	if (animator.timer != null) {
		return;
	}

	if (!event) {
		var event = window.event;
	}
	var eventTarget = window.event ? event.srcElement : event.target;

	var delta = eventTarget.offsetTop - selected.offsetTop;
	selected = eventTarget;
	new Effect.Move($('selector'), { x: 0, y: delta, mode: 'relative', duration: 0.25 });

	var idFragment = eventTarget.id.split('-')[0] + '-pane';
	var target = $(idFragment);
	
	var scroller = $('content');
	delta = getLeftLocation(target) - getLeftLocation(scroller);
	startScrolling(scroller, scroller.scrollLeft, delta);
}

function initScrolling() {
	var menuItems = $('menu').immediateDescendants();
	menuItems.each(function(menuItem) {
		menuItem.onclick = onMenuItemSelected;
	});
	selected = menuItems[0];
}

// install our scrolling handler in the menu
window.onload = initScrolling;
		
var animator = {
	frames: 0,
	framesCount: 0,
	begin: 0,
	delta: 0,
	element: null,
	timer: null
};
		
function easeInAndOut(t, b, c, d) {
	return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
}

function getLeftLocation(element) {
	var x = 0;

	do {
		x += element.offsetLeft;
	} while (element = element.offsetParent)

	return x
}

function startScrolling(scroller, start, end) {
	if (animator.timer != null) {
		clearInterval(animator.timer);
		animator.timer = null;
	}
	
	animator.frames = 0;
	animator.framesCount = 20;
	
	animator.begin = start;
	animator.delta = end - start;
	
	animator.element = scroller;
	animator.timer = setInterval("performScrolling();", 15);
}

function performScrolling() {
	if (animator.frames > animator.framesCount) {
		clearInterval(animator.timer);
		animator.timer = null;
	} else {
		move = easeInAndOut(animator.frames, animator.begin, animator.delta, animator.framesCount);
		animator.element.scrollLeft = move;
		animator.frames++;
	}
}