/**
 * SP Menu
 * jQuery Plugin
 * 
 * This plugin allows you (the developer) to easily implement a dropdown menu.  It does
 * nothing more than handle the showing and hiding of the various drop-down menus - the
 * styling of said menus is left completely up to you.
 * 
 * The HTML should resemble something like:
 * <ul id="ul1" class="level1">
 *    <li class="level1">
 *       <a href="" class="level1">Menu A</a>
 *       <ul class="level2">
 *       	<li class="level2"><a href="" class="level2">A.1</a></li>
 *       	<li class="level2"><a href="" class="level2">A.2</a></li>
 *       	<li class="level2"><a href="" class="level2">A.3</a></li>
 *       </ul>
 *    </li>
 *    <li class="level1">
 *       <a href="" class="level2">Menu B</a>
 *       <ul>
 *       	<li class="level2"><a href="" class="level2">B.1</a></li>
 *       	<li class="level2"><a href="" class="level2">B.2</a></li>
 *       </ul>
 *    </li>
 * </ul>
 * 
 * At the very least, the CSS should resemble:
 * #ul1, #ul1 ul { list-style:none; }
 * #ul1 ul { position:absolute; left:10px; top:30px; }
 * #ul1 li { position:relative; }
 * #ul1 li.hover { z-index:1000; background-color:red; }
 * 
 * The above CSS assumes the main menu is vertical, and will position each submenu
 * 100px from the left and 10px from the top of its parent <li>
 * 
 * -----
 * Options
 * -----
 * settings = {dropDownMenuTimeout:300}; // settings are optional
 * $('#ul1').spMenu(options);
 * 
 * --------
 * Options
 * --------
 * hoverTimeout		Milliseconds to wait when the mouse moves off the menu
 * 						before closing the menu
 * 						Default 300
 * hoverClass		The class to assign to <li>'s that are being hovered over
 * 						Default 'hover'
 */
jQuery.fn.spMenu = function(options) {
	// Define default settings
	options = jQuery.extend({
		hoverTimeout: 300,
		hoverClass: 'hover'
	}, options);
	
	return this.each(function() {
		jQuery.spMenuSetupUL(jQuery(this), options);
		//jQuery.spMenuSetup(jQuery(this), settings, 0);
	});
};

jQuery.spMenuSetupUL = function($ul, options) {
	// initialize timerId
	$ul.data('spmenu.timerid', 0);
	// save options
	$ul.data('spmenu.options', options);
	// setup <li>'s
	$ul.find('> li').each(function() {
		var $li = jQuery(this);
		// Listen to mouse over/out
		$li.hover(
			function() {
			jQuery.spMenuShowLI(jQuery(this));
			}
			,
			function() {
				jQuery.spMenuHideLI(jQuery(this));
			}
			)
		// If this <li> has a submenu, set it up
		$li.find('> ul:first').spMenu(options);
	});
}

jQuery.spMenuShowLI = function($li) {
	var $ul = $li.parent();
	var hoverClass = $ul.data('spmenu.options').hoverClass;
	// cancel menu timeout for parent <ul>
	clearTimeout($ul.data('spmenu.timerid'));
	// hide any open submenus in parent <ul>
	jQuery.spMenuHideLIFinal($ul.find('> li.'+hoverClass));
	// add hover class to this <li>
	$li.addClass(hoverClass).css('z-index', 1000);
	// If this <li> has a submenu, open it
	$li.find('> ul').show();
}

jQuery.spMenuHideLI = function($li) {
	var $ul = $li.parent();
	$ul.data('spmenu.timerid', setTimeout(function() { jQuery.spMenuHideLIFinal($li); }, $ul.data('spmenu.options').hoverTimeout));
}

jQuery.spMenuHideLIFinal = function($li) {
	if ($li.length < 1) return;
	
	var $ul = $li.parent();
	var hoverClass = $ul.data('spmenu.options').hoverClass;
	// Remove "hover" class from self and any submenus
	$li.find('li.'+hoverClass).andSelf().removeClass(hoverClass).css('z-index', '');
	// Hide any submenus
	$li.find('ul').hide();
}