/*

	-- -- -- -- -- -- --
	css sprites 2
	nav behaviour

	http://www.alistapart.com/articles/sprites2
	-- -- -- -- -- -- --
	
*/

function generateSprites(parent, setActive, hoverSpeed, style) {


	// start a loop that cycles through each of the li elements inside the parent element
	$(parent).children("li").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 parentClass = $(this).attr("class");
		
		var myId = ($(this).attr("id"))
		var current = "current";

		// turn on nav events for element this loop identifies
		attachNavEvents(parent, myId, setActive, hoverSpeed, style);
	
		// let's hide the CSS-defined background image, but only if this isn't the currently-selected item
		if (parentClass != current) {
			$(this).children("a").css({backgroundImage:"none"});
		}

	});
}


function attachNavEvents(parent, myId, setActive, hoverSpeed, style) {

		$("#" + myId).mouseover(function() {
			// create pseudo-link
			$(this).append('<div class="nav-' + myId + '"></div>');
			// either slide or fade, depending on the style value
			if (style == "slide") {
				// slide down the pseudo-link
				$("div.nav-" + myId).css({display:"none"}).slideDown(hoverSpeed);
			} else {
				// fade in the pseudo-link
				$("div.nav-" + myId).css({display:"none"}).fadeIn(hoverSpeed);
			}
		}).mouseout(function() {
			// either slide or fade, depending on the style value
			if (style == "slide") {
				// slide up & destroy pseudo-link
				$("div.nav-" + myId).slideUp(hoverSpeed, function() {
					$(this).remove();
				});
			} else {
				// fade out & destroy pseudo-link
				$("div.nav-" + myId).fadeOut(hoverSpeed, function() {
					$(this).remove();
				});
			}
		});
		
		$("#" + myId + " a").focus(function() {
			// create pseudo-link
			$(this).parent().append('<div class="nav-' + myId + '"></div>');
			// either slide or fade, depending on the style value
			if (style == "slide") {
				// slide down the pseudo-link
				$("div.nav-" + myId).css({display:"none"}).slideDown(hoverSpeed);
			} else {
				// fade in the pseudo-link
				$("div.nav-" + myId).css({display:"none"}).fadeIn(hoverSpeed);
			}
		}).blur(function() {
			// either slide or fade, depending on the style value
			if (style == "slide") {
				// slide up & destroy pseudo-link
				$("div.nav-" + myId).slideUp(hoverSpeed, function() {
					$(this).remove();
				});
			} else {
				// fade out & destroy pseudo-link
				$("div.nav-" + myId).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) {
			$(this).mousedown(function() {
				$("div.nav-" + myId).attr("class", "nav-" + myId + "-click");
			}).mouseup(function() {
				$("div.nav-" + myId + "-click").attr("class", "nav-" + myId);
			});
		}

	
}