// 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) {
	// 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 = 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)
}