// JavaScript Document

function Init(e) {
	var count = 0;
	var zindex = 0;
	var offset = 137;
	var menus = $('menus').getElementsByClassName('menu');
	
	// Configure each button and menu
	for (i = 0; i < menus.length; i++) {
		var menu = menus[i];
		
		// Set the left position and zindex of the button
		var button = Element.getElementsByClassName(menu, 'button')[0];
		button.style.zIndex = zindex++;
		button.style.left = (offset * count++) + 'px';
		
		// Set the zindex of the drop
		var drop = Element.getElementsByClassName(menu, 'drop')[0];
		drop.style.zIndex = zindex++;
		drop.style.display = 'none';
		drop.pos = i;
	}
	
	//$('menus').style.display = '';
	$('menus').show();
}

var visibleDrop = null;

function Mouse(e) {
	var menus = $('menus').getElementsByClassName('menu');
	var newVisibleDrop = null;
	
	for (i = 0; i < menus.length; i++) {
		var menu = menus[i];
		
		var button = Element.getElementsByClassName(menu, 'button')[0];
		var drop = Element.getElementsByClassName(menu, 'drop')[0];
		
		var x = Event.pointerX(e)
		var y = Event.pointerY(e);
		var over1 = Position.within(button, x, y);
		var over2 = Position.within(drop, x, y);
		
		if (over1 == true || over2 == true)
			newVisibleDrop = drop;
		
		var xy = Position.positionedOffset(button);
		drop.style.left = xy[0] + 'px';
		drop.style.top = (xy[1] + 18) + 'px';
	}
	
	var dur = 0.33;
	var opa = 0.85;
	if (visibleDrop != newVisibleDrop) {
		if (visibleDrop != null) {
			Effect.Queues.get('menu'+visibleDrop.pos).each(function(e) {e.cancel();});
			Effect.Fade(visibleDrop, {duration: dur, queue: {position:'end', scope: 'menuFade'}});
		}
		if (newVisibleDrop != null) {
			Effect.Queues.get('menu'+newVisibleDrop.pos).each(function(e) {e.cancel();});
			Effect.Appear(newVisibleDrop, {to: opa, duration: dur, queue: {position:'end', scope: 'menu'+newVisibleDrop.pos}});
		}
		visibleDrop = newVisibleDrop;
	}
}

Event.observe(window, 'load', Init);
Event.observe(document, 'mousemove', Mouse);