document.observe("dom:loaded", function() {
	// When the search field gets selected, remove background image
	$('search_field').observe('click', removeBackground);
	dropdown_menus = $$('div.dropdown');
	for(i=0;i<dropdown_menus.length;i++) {
		dropdown_menus[i].observe('mouseover', function(event){
			clearTimeout(timer);
		})
		dropdown_menus[i].observe('mouseout', function(event) {
			collapseMenu(this,900)
			// 500
		})
	}
})

// nav_items is an array for the main nav
var nav_items;
// current_menu holds the current dropdown menu
var current_menu;
// timer is our timeout variable for the dropdown menu
var timer;


function loadNavigation() {
	// Give the nav items on the homepage their cool behavior
	nav_items = $$('#nav li a');
	nav_items[0].pos = 0; // 30
	nav_items[1].pos = 0;
	nav_items[2].pos = 0; // -33
	enableButtons();
}

function disableButtons() {
	nav_items.each(function(node) {
		node.stopObserving('mouseover');
	})
}
function enableButtons() {
	nav_items.each(function(node) {
		node.observe('mouseover',function() {
			disableButtons();
			setTextColor(this);
			setPosition(this,this.pos);
		})
	})
}

function setTextColor(element) {
	nav_items.each(function(node) {
		node.setStyle('color:#b9ddf3');
	})
	element.setStyle('color:#1e8fff');
}

function setPosition(element,yPos) {
	// This will move element to a certain position, after animation completes, enables the buttons
	new Effect.Move ('nav', { duration: 0.6, y: yPos, mode: 'absolute', afterFinish: enableButtons });
	enableButtons();
}

function removeBackground() {
	this.setStyle({
		background: 'none'
	})
	this.stopObserving('click', removeBackground)
}
function highlight() {
	this.setStyle({
		background: '#e6f3f6'
	});
}



/* Dropdown menus */
/* ============================================================== */
function toggleMenu(navItem,element) {
	// Clear out any timer
	clearTimeout(timer);
	// If there is a menu already visible, hide it
	if(current_menu) current_menu.hide();
	
	var xPos = navItem.parentNode.offsetLeft;

	$(element).setStyle({
		'left': xPos + 'px'
	});
	$(element).show();
	// set this menu as the current_menu
	current_menu = $(element);
}
function collapseMenu(element,length) {
	if(!length) length = 2400;
	divToHide = $(element);
	timer = setTimeout("divToHide.fade({duration:0.3})", length)
}