function attachNavEvents(parent, myClass) {
	$(parent + " ." + myClass).mouseover(function() {
		$(this).append('<div class="nav-' + myClass + '"></div>');
		$("div.nav-" + myClass).css({display:"none"}).fadeIn(200);
	}).mouseout(function() {
		$("div.nav-" + myClass).fadeOut(200, function() {
			$(this).remove();
		});
	}).mousedown(function() {
		$("div.nav-" + myClass).attr("class", "nav-" + myClass + "-click");
	}).mouseup(function() {
		$("div.nav-" + myClass + "-click").attr("class", "nav-" + myClass);
	});
}

$(document).ready(function() {
	$('ul.sharenav').addClass('disable-hover-background');
	$('ul.sharenav li').each(function() {
		e = $(this);
		e.append('<span style="display:none;"></span>');
		
		e.mouseover(function() {
			$(this).children('span').fadeIn(200);
		});
		
		e.mouseout(function() {
			$(this).children('span').fadeOut(200);
		});
	});
	
	// remove link background images since we're re-doing the hover interaction below 
	// (doing it this way retains the CSS default hover states for non-javascript-enabled browsers)
	// we also want to only remove the image on non-selected nav items, so this is a bit more complicated
	$(".nav li").each(function() {
		var current = "nav current-" + ($(this).attr("class"));
		var parentClass = $(".nav").attr("class");
		if (parentClass != current) {
			$(this).children("a").css('background', 'none');
		}
	});	


	// create events for each nav item
	attachNavEvents(".nav", "movies");
	attachNavEvents(".nav", "dvdppv");
	attachNavEvents(".nav", "music");
	attachNavEvents(".nav", "videogames");
	attachNavEvents(".nav", "concerts");
	attachNavEvents(".nav", "restaurants");
});