var current;
var hover;
var currentPos = -1000;
var currentWidth = 100;

function setupNavigation() {
	current = $$('#navigation ul li.current').first();
	
	if (current != undefined) {
		current.setStyle('background: none;');
		current.down().setStyle('background: none;');
		hover = current;
		
		var offset = current.cumulativeOffset();
		offset = offset.relativeTo(current.up(2).cumulativeOffset());
		
		currentPos = offset[0];
		currentWidth = current.getWidth()-12;
	}
	else {
		current = false;
	}
	
	var background = new Element('div', {'id': 'navBackground', 'style': 'background: url(templates/sleep/img/bg_current_left_trans.png) no-repeat top left; position: absolute; left: '+currentPos+'px; z-index: 9; width: '+currentWidth+'px; height: 35px;'});
	var span = new Element('span', {'style': 'display: block; background: url(templates/sleep/img/bg_current_right_trans.png) no-repeat top right; margin-left: 12px; width: 100%; height: 100%;'});
	background.insert(span);

	$$('#navigation ul').first().insert(background);
	
	$$('#navigation ul li').each(function(element) {
		element.observe('mouseenter', navEnter);
	});
}

function navEnter(ev) {
	hover = ev.findElement('li');
	var offset = hover.cumulativeOffset();
	offset = offset.relativeTo(hover.up(2).cumulativeOffset());
	
	Effect.Queues.get('navigationMove').invoke('cancel');
	
	var effects = new Array();
	effects[0] = new Effect.Move($('navBackground'), { sync: true, x: offset[0], mode: 'absolute' });
	effects[1] = new Effect.Morph($('navBackground'), { sync: true, style: 'width:'+(hover.getWidth()-12)+'px;' });
	effects[2] = new Effect.Morph(hover.down(), { sync: true, style: 'color:#063e6a;' });
	if (current && current != hover) {
		effects[3] = new Effect.Morph(current.down(), { sync: true, style: 'color:#ffffff;' });
	}
	
	var i = effects.length;
	$$('#navigation ul li').each(function(element) {
		if (!element.hasClassName('current') && element != hover) {
			effects[i] = new Effect.Morph(element.down(), { sync: true, style: 'color:#ffffff;' });
			i++;
		}
	});
	
	new Effect.Parallel(effects, {
		duration: 0.5,
		queue: { position: 'front', scope: 'navigationMove' }
	});
	
	hover.up().observe('click', navSelect);
	hover.up().observe('mouseleave', navExit);
}

function navSelect(ev) {
	ev.findElement('ul').stopObserving();
}

function navExit(ev) {
	Effect.Queues.get('navigationMove').invoke('cancel');
	
	var effects = new Array();
	effects[0] = new Effect.Move($('navBackground'), { sync: true, x: currentPos, mode: 'absolute' });
	effects[1] = new Effect.Morph($('navBackground'), { sync: true, style: 'width:'+currentWidth+'px;' });
	if (current) {
		effects[2] = new Effect.Morph(current.down(), { sync: true, style: 'color:#063e6a;' });
	}
	
	var i = effects.length;
	$$('#navigation ul li').each(function(element) {
		if (!element.hasClassName('current')) {
			effects[i] = new Effect.Morph(element.down(), { sync: true, style: 'color:#ffffff;' });
			i++;
		}
	});
	
	new Effect.Parallel(effects, {
		duration: 0.5,
		queue: { position: 'front', scope: 'navigationMove' }
	});
	
	ev.findElement('ul').stopObserving('mouseout');
}