window.addEvent('domready', function(){
	if(!getElement('trigger1'))
	{
		return false;
	}
	else
	{
		// attach the mouse events which will toggle the display of the sub menu when required
			var trigger1 = getElement('trigger1');
			trigger1.firstChild.onmouseover = function(){ submenu1.display(); };
			trigger1.firstChild.onmouseout = function(){ submenu1.hide(); };
		
		// first check if the sub menu element exists, if not then return the function
			if(getElement('oSubmenu1') == null || getElement('oSubmenu1') == 'undefined')
			{
				return false;
			}
			else
			{
				// attach the mouse events that will prevent the sub menu from being hidden until required
					getElement('oSubmenu1').onmouseover = function(){ submenu1.prevent(); };
					getElement('oSubmenu1').onmouseout = function(){ submenu1.remove(); };
					oStyle1 = getStyle('oSubmenu1', 'display');
			}
	}
	
	if(!getElement('trigger2'))
	{
		return false;
	}
	else
	{
		// attach the mouse events which will toggle the display of the sub menu when required
			var trigger2 = getElement('trigger2');
			trigger2.firstChild.onmouseover = function(){ submenu2.display(); };
			trigger2.firstChild.onmouseout = function(){ submenu2.hide(); };
		
		// first check if the sub menu element exists, if not then return the function
			if(getElement('oSubmenu2') == null || getElement('oSubmenu2') == 'undefined')
			{
				return false;
			}
			else
			{
				// attach the mouse events that will prevent the sub menu from being hidden until required
					getElement('oSubmenu2').onmouseover = function(){ submenu2.prevent(); };
					getElement('oSubmenu2').onmouseout = function(){ submenu2.remove(); };
					oStyle2 = getStyle('oSubmenu2', 'display');
			}
	}
	
	if(!getElement('trigger3'))
	{
		return false;
	}
	else
	{
		// attach the mouse events which will toggle the display of the sub menu when required
			var trigger3 = getElement('trigger3');
			trigger3.firstChild.onmouseover = function(){ submenu3.display(); };
			trigger3.firstChild.onmouseout = function(){ submenu3.hide(); };
		
		// first check if the sub menu element exists, if not then return the function
			if(getElement('oSubmenu3') == null || getElement('oSubmenu3') == 'undefined')
			{
				return false;
			}
			else
			{
				// attach the mouse events that will prevent the sub menu from being hidden until required
					getElement('oSubmenu3').onmouseover = function(){ submenu3.prevent(); };
					getElement('oSubmenu3').onmouseout = function(){ submenu3.remove(); };
					oStyle3 = getStyle('oSubmenu3', 'display');
			}
	}
});

function getStyle(el, styleProp)
{
	var x = document.getElementById(el);
	if(x.currentStyle) // Microsoft Internet Explorer
	{
		var y = x.currentStyle[styleProp];
	}
	else if(window.getComputedStyle) // Mozilla and Opera
	{
		var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
	}
	return y;
}

var submenu1 = {
	display: function()
	{
		// if the sub menu element doesn't exist then return the function
			if(getElement('oSubmenu1') == null || getElement('oSubmenu1') == 'undefined')
			{
				return false;
			}
			else
			{
				// if the sub menu exists then check if it is hidden or not					
					if(oStyle1 == 'none') // if it's hidden
					{
						getElement('oSubmenu1').style.display = 'block'; // then show it
					}
					else // otherwise it is already set to display
					{
						clearTimeout(subTimeout1);
					}
			}
	},
	
	hide: function()
	{
		// if the sub menu element doesn't exist then return the function
			if(getElement('oSubmenu1') == null || getElement('oSubmenu1') == 'undefined')
			{
				return false;
			}
			else
			{
				// if the sub menu exists then check if it is hidden or not
					if(getElement('oSubmenu1').style.display == 'block') // if its visible
					{
						// the moment the mouse rolls off the trigger the 'onmouseout' event is called
						// so we need to create a timeout to prevent the sub menu from being hidden immediately.
						// this gives the user the ability to quickly move their mouse over the sub menu (which then clears the timeout so the sub menu isn't hidden)
							subTimeout1 = setTimeout("getElement('oSubmenu1').style.display = 'none'", 200);
					}
			}
	},
	
	prevent: function()
	{
		clearTimeout(subTimeout1);
	},
	
	remove: function()
	{
		// this prevents the sub menu from being hidden immediately.
			subTimeout1 = setTimeout("getElement('oSubmenu1').style.display = 'none'", 200);
	}
}

var submenu2 = {
	display: function()
	{
		// if the sub menu element doesn't exist then return the function
			if(getElement('oSubmenu2') == null || getElement('oSubmenu2') == 'undefined')
			{
				return false;
			}
			else
			{
				// if the sub menu exists then check if it is hidden or not					
					if(oStyle2 == 'none') // if it's hidden
					{
						getElement('oSubmenu2').style.display = 'block'; // then show it
					}
					else // otherwise it is already set to display
					{
						clearTimeout(subTimeout2);
					}
			}
	},
	
	hide: function()
	{
		// if the sub menu element doesn't exist then return the function
			if(getElement('oSubmenu2') == null || getElement('oSubmenu2') == 'undefined')
			{
				return false;
			}
			else
			{
				// if the sub menu exists then check if it is hidden or not
					if(getElement('oSubmenu2').style.display == 'block') // if its visible
					{
						// the moment the mouse rolls off the trigger the 'onmouseout' event is called
						// so we need to create a timeout to prevent the sub menu from being hidden immediately.
						// this gives the user the ability to quickly move their mouse over the sub menu (which then clears the timeout so the sub menu isn't hidden)
							subTimeout2 = setTimeout("getElement('oSubmenu2').style.display = 'none'", 200);
					}
			}
	},
	
	prevent: function()
	{
		clearTimeout(subTimeout2);
	},
	
	remove: function()
	{
		// this prevents the sub menu from being hidden immediately.
			subTimeout2 = setTimeout("getElement('oSubmenu2').style.display = 'none'", 200);
	}
}

var submenu3 = {
	display: function()
	{
		// if the sub menu element doesn't exist then return the function
			if(getElement('oSubmenu3') == null || getElement('oSubmenu3') == 'undefined')
			{
				return false;
			}
			else
			{
				// if the sub menu exists then check if it is hidden or not					
					if(oStyle3 == 'none') // if it's hidden
					{
						getElement('oSubmenu3').style.display = 'block'; // then show it
					}
					else // otherwise it is already set to display
					{
						clearTimeout(subTimeout3);
					}
			}
	},
	
	hide: function()
	{
		// if the sub menu element doesn't exist then return the function
			if(getElement('oSubmenu3') == null || getElement('oSubmenu3') == 'undefined')
			{
				return false;
			}
			else
			{
				// if the sub menu exists then check if it is hidden or not
					if(getElement('oSubmenu3').style.display == 'block') // if its visible
					{
						// the moment the mouse rolls off the trigger the 'onmouseout' event is called
						// so we need to create a timeout to prevent the sub menu from being hidden immediately.
						// this gives the user the ability to quickly move their mouse over the sub menu (which then clears the timeout so the sub menu isn't hidden)
							subTimeout3 = setTimeout("getElement('oSubmenu3').style.display = 'none'", 200);
					}
			}
	},
	
	prevent: function()
	{
		clearTimeout(subTimeout3);
	},
	
	remove: function()
	{
		// this prevents the sub menu from being hidden immediately.
			subTimeout3 = setTimeout("getElement('oSubmenu3').style.display = 'none'", 200);
	}
}