$(document).ready(function(){
	
		// 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
		$(".proc-nav").children("li").each(function() {
    	$(this).children("a").css({backgroundImage:"none"});
			});


		// create events for each nav item
		attachNavEvents(".proc-nav", "wisdom");
		attachNavEvents(".proc-nav", "implants");
		attachNavEvents(".proc-nav", "grafting");
		attachNavEvents(".proc-nav", "anesthesia");
		attachNavEvents(".proc-nav", "impacted");
		attachNavEvents(".proc-nav", "pathology");
		attachNavEvents(".proc-nav", "jaw");
		attachNavEvents(".proc-nav", "facial");
		attachNavEvents(".proc-nav", "snoring");
		attachNavEvents(".proc-nav", "trauma");
	

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



	});