/** function to transform a list into a horizontal rollover menu */
jQuery.fn.menu_h_h = function( settings )
{
	settings = jQuery.extend
	(	
		{
			mouseoutTimeout	: 500,
			effect			: 'fade' //fade,slide,show
		},
		settings
	);
	
	/** add a class to indicate a horizontal, horizontal menu */
	$(this).addClass( 'menu_h_h' );
	
	/** fetch all level 1 items */
	var level1Items = $( ' > li', $(this) );
	
	/** loop through each of them */
	$( level1Items ).each( function(){
		
		/** if this level 1 item has sub items */
		if( $( ' > ul > li ', $( this ) ).length > 0 )
		{
			/** hide the sub items */
			$( ' > ul', $(this) ).hide();
			
			/** check if one of the sub items is the current page */
			var currentChild = $( ' > ul:has("li.current_page") ', $(this) );
			currentChild = currentChild.length > 0;
			
			/** if so, show this sub menu */
			if( currentChild )
			{
				/** add some styling to the top level to set it as current */
				$(this).addClass('current_page');
				$(this).addClass('current_page_with_submenu');
				
				/** show the sub menu */
				$( ' > ul:has("li.current_page") ', $(this) ).show();
			}
			/** if this top level item is selected and it has sub items, show the sub items */
			else if( $(this).hasClass( 'current_page' ) )
			{
				$(this).addClass('current_page_with_submenu');
				$( ' > ul', $(this) ).show();
			}
		}
	});
	
	$( level1Items ).hover(
		/** mouse over */
		function()
		{
			/** add the 'over' class to this li */
			$(this).addClass( 'over' );
			
			/** push all other level 1 items back a layer */
			$(level1Items).css({ 'z-index': 999 });
			
			/** bring me forward a layer */
			$(this).css({ 'z-index': 1000 });
			
			/** clear any hiding timeout */
			if($(this).data( 'timeout' )) clearTimeout($(this).data( 'timeout' ));
			
			/** if effect is slide, slide the menu item down */
			if ( settings.effect == 'slide' ) $( ' > ul:hidden', $(this) ).slideDown( 'fast' );
			
			/** if the effect is 'show', just show it */
			else if (settings.effect == 'show' ) $(' > ul:hidden', $(this)).show();
			
			/** otherwise the effect is 'fade', so fade it in */
			else $(' > ul:hidden', $(this)).fadeIn('slow');
		},
		function()
		/** mouse out */
		{
			var button = $(this);
			var timeout = setTimeout( function()
			{
				/** remove the 'over' class from this li */
				$(button).removeClass( 'over' );
				
				/** if there's an existing timeout, clear it */
				if( $(button).data('timeout') ) clearTimeout( $(button).data('timeout') );
				
				/** build a string for hiding the sub items */
				var doit = (settings.effect == 'show') ? "hide();" : (settings.effect == 'slide') ? "slideUp('fast');" : "fadeOut('fast');";
				
				/** hide the sub items after a set timeout interval.  this enhances usablity */
				$(button).data( 'timeout', setTimeout("$('>ul:visible', $('#"+$(button).attr('id')+"'))." + doit, settings.timeout) );
				
			}, settings.mouseoutTimeout );
			
			$(this).data( 'timeout', timeout );
		}
	);
}