/* Dropdown.js
 * Phil Norman (www.propter.co.uk)
 * 28/7/09
 */

//menu[] holds all <a> menu links, dropdown[] holds all <ul> dropdowns
var menu=new Array(), dropdown=new Array();
//The menu item currently selected
var menu_selected=null;
//The current timeout
var timeout=null;

//Populates menu[] and dropdown[] and adds event handlers.
function menu_init() {
	for (var i=0; i<11; i++) {
		//Read into menu[] menu_item_0 to menu_item_10
		menu[i]=document.getElementById("menu_item_" + i);
		//Add <ul> element
		dropdown[i]=document.createElement("ul");
		//<ul class="dropdown">
		dropdown[i].setAttribute("class","dropdown");
		//parent of <a>Area of law</a>
		menu[i].parentNode.appendChild(dropdown[i]);
		//Check that there is in fact some title text
		if (menu[i].getAttribute("title") != "") {
			//Get subcategories
			var subcategory=menu[i].getAttribute("title").split(", ");
			//<ul id="4">
			dropdown[i].setAttribute("id",subcategory.length);
			
			for (var j in subcategory) {
				//Add <li> element
				var subcat=document.createElement("li");
				//Add <a> element
				var sublink=document.createElement("a");
				//Cast text to lowercase
				var href=subcategory[j].toLowerCase();
				//Replace spaces, tabs etc with underscore
				href=href.replace(/\s/g,"_");
				//Remove non-alphanumeric chars
				href=href.replace(/\W/g,"");
				//<a href="href">
				sublink.setAttribute("href",menu[i].getAttribute("href")+"?"+href);
				//<a href="href" title="title">
				sublink.setAttribute("title",subcategory[j]);
				//<a>subcategory</a>
				var content=document.createTextNode(subcategory[j]);
				sublink.appendChild(content);
				//<li><a>subcategory</a></li>
				subcat.appendChild(sublink);
				dropdown[i].appendChild(subcat);
			}
			
			//title tooltip gets in the way of the dropdown
			menu[i].setAttribute("title","");
			
			//When the mousemoves, the timer is renewed
			menu[i].onmousemove=menu_mouseover;
			//When the mouseout, retract the dropdown and cancel any timer
			menu[i].onmouseout=menu_mouseout;
			//Otherwise if you click a link and then go back() the dropdown is still shown in some browsers
			menu[i].onmousedown=menu_mouseout;
			//When the mousemoves, the timer is removed, stopping the dropdown retracting
			dropdown[i].onmousemove=dropdown_mouseover;
			//When the mouseout, retract the dropdown
			dropdown[i].onmouseout=dropdown_mouseout;
			
			//In some browsers dropdowns can persist, this hides them all
			dropdown[i].style.display="none";
		} else {
			//No subcategories, set title to the link text
			menu[i].setAttribute("title",menu[i].textContent);
		}
	}
	
}

//Removes any timed task, preventing dropdown retraction
function dropdown_mouseover(event) {
	clearTimeout(timeout);
}

//Hides the dropdown
function dropdown_mouseout(event) {
	clearTimeout(timeout);
	timeout=setTimeout("hide_dropdown(" + menu_selected + ")",50);
}

//Creates a timed task to show a dropdown after a certain period of time.
function menu_mouseover(event) {
	//Get the current selection
	var cur=menu_selected;
	
	//Get the id of the selected <a> - Internet Explorer needs an alternative method.  
	menu_selected=((event) ? event.target : window.event.srcElement).getAttribute("id");
	//Remove 'menu_item_' from the id
	menu_selected=menu_selected.substring(10,menu_selected.length);
	//Check to make sure we're not opening an already open dropdown
	if (cur != menu_selected) {
		//If there is currently a dropdown open, hide it
		if (cur != null) setTimeout("hide_dropdown(" + cur + ")",10);
		//Renew the timer
		clearTimeout(timeout);
		timeout=setTimeout("show_dropdown(" + menu_selected + ")",200);
	}
}

//Cancels any timed task and hides any open dropdown.
function menu_mouseout(event) {
	//Clear any timed event, prevents dropdowns showing afterwards
	clearTimeout(timeout);
	//Hide the current dropdown (if any)
	timeout=setTimeout("hide_dropdown(" + menu_selected + ")",50);
}

//Initiates the 'growing' effect for a dropdown.
function show_dropdown(id) {
	dropdown[id].style.height="0px";
	dropdown[id].style.display="block";
	grow_dropdown(id);
}

//Hides the specified dropdown.
function hide_dropdown(id) {
	//Looks better if it disappears rather than shrinking
	if (dropdown[id]) dropdown[id].style.display="none";
	//Clear current selection
	menu_selected=null;
}

//'Grows' the specified dropdown
function grow_dropdown(id) {
	//Get the current <div> height
	var height=dropdown[id].style.height;
	//Remove the "px" from the end
	height=parseInt(height.substring(0,height.length-2));
	if (height < (dropdown[id].id*13)) {
		//Increase by 5
		dropdown[id].style.height=(height+5)+"px";
		//Do it again
		setTimeout("grow_dropdown(" + id + ")",10);
	}
}