document.observe("dom:loaded", function() {
	setupDropDowns();
})

// Drops
// by: Jay Contonio
// http://grayvsgrey.net/

/* ==============================================================

	Place your dropdown divs inside of the element your navigation list item's parent
	
	example:
	
		<div id="navigation">
			<ul>
				<li><a href="#">Nav item</a></li>
			</ul>
			<!-- Dropdown menus -->
			<div id="menu1" class="dropdown" style="display:none">
				<ul>
					<li><a href="#" onmouseover="toggleMenu(this,'menu1')" onmouseout="collapseMenu('menu1');">Here's a submenu</a></li>
				</ul>
			</div>
			<!-- Dropdown menus -->
		</div>

   ============================================================== */



// current_menu holds the current dropdown menu
var current_menu;
// timer is our timeout variable for the dropdown menu
var timer;



/* Setup dropdowns */
/* ============================================================== */
function setupDropDowns() {
	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,2000)
		})
	}
}



/* Dropdown functionality */
/* ============================================================== */
function toggleMenu(navItem,element,offset) {
	// 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;
	var yPos = navItem.parentNode.offsetTop;

	yPos = yPos - 132;
	xPos = xPos + 150;
	
	works in IE
	*/
		
	xPos = 140;
	yPos = (offset * 19) - 157;
	
	$(element).setStyle({
		'left': xPos + 'px'
	});
	
	$(element).setStyle({
		'top': yPos + 'px'
	});
	
	//yPos = yPos - 132;
	//xPos = xPos + 150;


	$(element).show();
	// set this menu as the current_menu
	current_menu = $(element);
}



function collapseMenu(element,length) {
	if(!length) length = 2000;
	divToHide = $(element);
	// Fix this, if scriptaculous is loaded, fade, if not, hide
	// timer = setTimeout("divToHide.fade({duation:0.5})", length)
	timer = setTimeout("divToHide.hide()", length)
}