/*
This is jQuery code based on the sprites2 discussion at 
	http://www.alistapart.com/articles/sprites2
with the following changes:
1. In the stock version, the master element was hardwired as "nav".  I generalized it so that
   it can be named anything and still work.
2. I added a new function to allow the fade in of the -selected item on load.  This necessitated
   a 6th function item to generateSprites to verify that this behaviour is desired.
*/

// generateSprites arguments: 
// 1st - parent class (the main class on the parent ul), with preceding period
// 2nd - selected prefix (eg. for a selected class of "selected-about", use "selected-" as the value)
// 3rd - :active state toggle, set to true if you've defined :active states (and the jQuery equivalent) in your CSS
// 4th - animation speed, in milliseconds (eg. 300 = 0.3 seconds)
// 5th - animation style, as a string. Set to "slide" or "fade" (defaults to "fade")
// MD 6th: true or false, to indicate whether the fade-in on load is desired
function generateSprites(parent, selectedPrefix, setActive, hoverSpeed, style, fadeOnLoad) {
	// throw the parent object's class into a variable
	var parentClass = $(parent).attr("class");

	// start a loop that cycles through each of the li elements inside the parent element
	$(parent).children("span").each(function() {
		// create a few variables that we'll need during this function:
		// myClass = the class of the object we're currently inspecting
		// current = what the selected class should look like for the parent of the object we're currently inspecting
		var myClass = ($(this).attr("class"))
		var current = parent.substring(1) + " current-" + ($(this).attr("class"));

		if (fadeOnLoad) {
			// hide the CSS-defined background image
			$(this).children("a").css({backgroundImage:"none"});

			if (parentClass != current) {
				// If this is not the active element, turn on normal nav events for 
				//  elements this loop identifies
				attachNavEvents(parent, myClass, setActive, hoverSpeed, style);
			} else {
				// Otherwise, this is the active element, and we want to fade it in, so
				//  turn on fade-in nav events for element this loop identifies
				attachNavEventsToActiveItem(parent, myClass, setActive, hoverSpeed, style);
			}
		} else {
			// turn on nav events for element this loop identifies
			attachNavEvents(parent, myClass, setActive, hoverSpeed, style);
		
			// and hide the CSS-defined background image if this isn't the currently-selected item
			if (parentClass != current) {
				$(this).children("a").css({backgroundImage:"none"});
			}
		}

	});
}

function attachNavEventsToActiveItem(parent, myClass, setActive, hoverSpeed, style) {
	var parentNoDot = parent.substr(1);
	var current = parent + " ." + myClass;
	// create the DIV to do the slide in
	$(current).append('<div class="' + parentNoDot + '-' + myClass + '-onload"></div>');
	if (style == "slide") {
		$("div" + parent + "-" + myClass + "-onload").css({display:"none"}).slideDown(hoverSpeed*3);
	} else {
		$("div" + parent + "-" + myClass + "-onload").css({display:"none"}).fadeIn(hoverSpeed*3);
	}
}

function attachNavEvents(parent, myClass, setActive, hoverSpeed, style) {
	var parentNoDot = parent.substr(1);
	$(parent + " ." + myClass).mouseover(function() {
		// create pseudo-link
		$(this).append('<div class="' + parentNoDot + '-' + myClass + '"></div>');
		// either slide or fade, depending on the style value
		if (style == "slide") {
			// slide down the pseudo-link
			$("div" + parent + "-" + myClass).css({display:"none"}).slideDown(hoverSpeed);
			//$("div.mainMenu-" + myClass).css({display:"none"}).slideDown(hoverSpeed);
		} else {
			// fade in the pseudo-link
			$("div" + parent + "-" + myClass).css({display:"none"}).fadeIn(hoverSpeed);
//			$("div.mainMenu-" + myClass).css({display:"none"}).fadeIn(hoverSpeed);
		}
	}).mouseout(function() {
		// fix for sticky active state
		$("div" + parent + "-" + myClass + "-click").attr("class", parentNoDot + '-' + myClass);
//		$("div.mainMenu-" + myClass + "-click").attr("class", "mainMenu-" + myClass);
		// either slide or fade, depending on the style value
		if (style == "slide") {
			// slide up & destroy pseudo-link
			$("div" + parent + "-" + myClass).slideUp(hoverSpeed*2, function() {
//			$("div.mainMenu-" + myClass).slideUp(hoverSpeed, function() {
				$(this).remove();
			});
		} else {
			// fade out & destroy pseudo-link
			$("div" + parent + "-" + myClass).fadeOut(hoverSpeed*2, function() {
//			$("div.mainMenu-" + myClass).fadeOut(hoverSpeed, function() {
				$(this).remove();
			});
		}
	});


	// we only want to check the mousedown/up events if the CSS exists for :active states
	// if so, let's apply our selective filtering to undo the events above
	if (setActive) {
		$(parent + " ." + myClass).mousedown(function() {
			$("div" + parent + "-" + myClass).attr("class", parentNoDot + "-" + myClass + "-click");
//			$("div.mainMenu-" + myClass).attr("class", "mainMenu-" + myClass + "-click");
		}).mouseup(function() {
			$("div" + parent + "-" + myClass + "-click").attr("class", parentNoDot + "-" + myClass);
//			$("div.mainMenu-" + myClass + "-click").attr("class", "mainMenu-" + myClass);
		});
	}
}