var menuRules = {
	'div.menu' : function(menu){
		Event.observe(menu, 'mouseover', expandMenuItems, false);
		Event.observe(menu, 'mouseout', collapseMenuItems, false);
	},
	'div.menu-items' : function(menuItems){
		Event.observe(menuItems, 'mouseout', collapseMenuItems, false);
	},
	'#search-link' : function(searchLink){
		Event.observe(searchLink, 'click', toggleSearchBox, false);
	}
};

Behaviour.register(menuRules);

function expandMenuItems(event) {
	menu = getMenu(Event.element(event));
	if (menu != null) {
	  menuItems = getMenuItems(menu);
	  if(!Element.visible(menuItems)) {
		  menuPosition = Position.cumulativeOffset(menu);
		  menuItems.style.top = menuPosition[1] + Element.getHeight(menu) - 2 + "px";
		  menuItems.style.left = menuPosition[0] + "px";
		  new Effect.Appear(menuItems, {duration: 0.2});
	  }
	} 
}

function collapseMenuItems(event) {
	eventSource = Event.element(event);
	menu = getMenu(Event.element(event));
	menuLabel = getMenuLabel(menu);
	menuItems = getMenuItems(menu);
	if (menuItems != null) {
	  if (!Position.within(menuLabel, Event.pointerX(event), Event.pointerY(event)) && 
			!Position.within(menuItems, Event.pointerX(event), Event.pointerY(event)) ) {
				  new Effect.Fade	(menuItems, {duration: 0.2});
		} 
	} 
}

function toggleSearchBox(event) {
	searchBox = $('search-box');
	searchLink = $('search-link');	
	if (searchBox.visible()) {
		new Effect.BlindUp(searchBox, {duration: 0.3});		
	} else {
		new Effect.BlindDown(searchBox, {duration: 0.3});
		searchLinkPosition = Position.cumulativeOffset(searchLink);
		searchBoxDimensions = Element.getDimensions(searchBox);
		searchLinkDimensions = Element.getDimensions(searchLink);
		searchBox.style.top = searchLinkPosition[1] + searchLinkDimensions.height - 2 + "px";
		newLeft = searchLinkPosition[0] + searchLinkDimensions.width - searchBoxDimensions.width + "px";
		searchBox.style.left = newLeft;
	}
}

function getMenu(element) {
	if (element == null) return null;
	if (element.className == 'menu') {
		return element;
	} else if (element.className == 'menu-label' || element.className == 'menu-items' || element.className == 'menu-link' || element.className == 'menu-item') {
		return getMenu(element.parentNode);
	} 
	return null;
}

function getMenuItems(menu) {
	return document.getElementsByClassName('menu-items', menu)[0];
}

function getMenuLabel(menu) {
	return document.getElementsByClassName('menu-label', menu)[0]
}