var selected;
var menuEffect;
var scrollEffect;

Effect.Scroll = Class.create();
Object.extend(Object.extend(Effect.Scroll.prototype, Effect.Base.prototype), {
  initialize: function(element) {
    this.element = $(element);
    if(!this.element) throw(Effect._elementDoesNotExistError);
    var options = Object.extend({
      x:    0,
      y:    0,
      mode: 'relative'
    }, arguments[1] || {});
    this.start(options);
  },
  setup: function() {
    this.originalLeft = this.element.scrollLeft || 0;
    this.originalTop  = this.element.scrollTop  || 0;
    if(this.options.mode == 'absolute') {
      this.options.x = this.options.x - this.originalLeft;
      this.options.y = this.options.y - this.originalTop;
    }
  },
  update: function(position) {
    this.element.scrollLeft = Math.round(this.options.x  * position + this.originalLeft);
    this.element.scrollTop = Math.round(this.options.y  * position + this.originalTop);
  }
});

function onMenuItemSelected(event) {
	if ((menuEffect && menuEffect.state == 'running') ||
		(scrollEffect && scrollEffect.state == 'running')) {
		return;
	}

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

	var menuDelta = eventTarget.offsetTop - selected.offsetTop;
	selected = eventTarget;
	if (!menuEffect) {
		menuEffect = new Effect.Move('selector');
	}

	var idFragment = eventTarget.id.split('-')[0] + '-pane';
	var target = $(idFragment);
	
	var scroller = $('content');
	var scrollDelta = getLeftLocation(target) - getLeftLocation(scroller) - scroller.scrollLeft;
	if (!scrollEffect) {
		scrollEffect = new Effect.Scroll('content');
	}
	
	menuEffect.start({ x: 0, y: menuDelta, mode: 'relative', duration: 0.25 });
	scrollEffect.start({ x: scrollDelta, y: 0, duration: 0.25 });
}

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

function getLeftLocation(element) {
	var x = 0;

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

	return x
}

function init() {
	initScrolling();
	prettyPrint();
}

// install our scrolling handler in the menu
window.onload = init;