/*
Link menus by chris camamcho

Super simple drop-down menus (not a whole lot of options here - but not bad for about 50 lines of javascript)

These menu drops down when you click on the menu "button".
They hide when you mouse-out of the menu.
Otherwise they stick around - like when you click on them. This is why they are a list of links, when you click the link you'll be taken to a new page anyway, so no need to hide the menu.

Requires the prototype library

Basic CSS:

.menu_button {
	overflow: hidden;
	height: 15px;
	cursor: pointer;
	background-image: url(images/arrow_down.png);
	background-position: right center;
	background-repeat: no-repeat;
}
.menu {
	display: none;
	padding: 0 3px 3px 3px;
	z-index: 20;
	position: absolute;
}

(You'll also need that arrow_down.png or a suitable replacement)

Here is the basic mark-up you need

<div class="linkmenu">
	<div class="menu_button">Button Name</div>
	<div class="menu">
		<a href="some_url_1"><div class="menu_item">Item Name 1</div></a>
		<a href="some_url_2"><div class="menu_item">Item Name 2</div></a>
		...
	</div>
</div>

*/

window.onload = function() {
	initLinkMenus();
}
function initLinkMenus() {
	var linkmenus = $$('.linkmenu');	//Get all lenkmenus
	for (var i = 0; i < linkmenus.length; i++) {
		var linkmenu = $(linkmenus[i]);
		var menu_button = linkmenu.getElementsBySelector('.menu_button')[0];	//the linkmenu's menu button
		var menu = linkmenu.getElementsBySelector('.menu')[0];					//the menu
		menu.timer = null;														//startwith a null timer
		menu_button.observe('mouseover', menu_button_over);						//set event handlers
		menu.observe('mouseout', menu_out);
		menu.observe('mouseover', menu_over);
		menu.style.display = 'block';
		menu.hide();
	}
}

//handle mouse overs on the menu_buttons
function menu_button_over(event) {
	var menu_button = Event.element(event);
	if (menu_button.hasClassName('menu_button')) {		//make sure we're talking about the menu_button
		menu_button = menu_button;
	} else {
		menu_button = menu_button.up('.menu_button');
	}
	var menu = menu_button.parentNode.getElementsBySelector('.menu')[0];	//the menu div
	
	var menus = $$('.menu');//document.getElementsBySelector('.menu');	//all menu divs
	for (var i = 0; i < menus.length; i++) {
		var m = menus[i];
		if (m == menu) {
			m.show();
			menu.style.display = 'block';
		} else {
			m.hide();
		}
	}
}
//handle mouseovers on the menu(_items)
function menu_over(event) {
	var element = Event.element(event);
	//Find the menu div - this is the element with the timer and the element we want to hide and show
	if (element.hasClassName('menu')) {			
		var menu = element;
	} else {
		var menu = element.up('.menu');
	}
	//clear the timer os that it doesn't get hidden
	if (menu.timer != null) {
		clearTimeout(menu.timer);
		menu.timer = null;
	}
}
//handle mouseouts on the menu(_items)
function menu_out(event) {
	var element = Event.element(event);
	//Find the menu div - this is the element with the timer and the element we want to hide and show
	if (element.hasClassName('menu')) {
		var menu = element;
	} else {
		var menu = element.up('.menu');
	}
	//clear the current timer and set a new one what will hid the menu
	clearTimeout(menu.timer);
	menu.timer = null;
	menu.timer = setTimeout(function() {menu.hide();}, 100);
}