$(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
            $(".nav").children("li").each(function() {
                var current = "nav current-" + ($(this).attr("class"));
                var parentClass = $(".nav").attr("class");
                if (parentClass != current) {
                    $(this).children("a").css({backgroundImage:"none"});
                }
            });	
    
    
            // create events for each nav item
            attachNavEvents(".nav", "p1");
			attachNavEvents(".nav", "p2");
			attachNavEvents(".nav", "p3");
			attachNavEvents(".nav", "p4");
			attachNavEvents(".nav", "p5");
			attachNavEvents(".nav", "p6");
			attachNavEvents(".nav", "p7");
			attachNavEvents(".nav", "p8");
        
    
            function attachNavEvents(parent, myClass) {
                $(parent + " ." + myClass).mouseover(function() {
                    $(this).append('<div class="nav-' + myClass + '"></div>');
                    $("div.nav-" + myClass).css({display:"none"}).fadeIn(400);
                }).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);
                });
            }
	
	
	
	$('#navigation .nav li').hover(  
           
        //Mouseover, fadeIn the hidden hover class    
         function() {  
               
            $('.show', this).stop(true, true).fadeIn(300);
			  
           
         },   
       
        //Mouseout, fadeOut the hover class  
         function() {  
               
            $('.show', this).stop(true, true).fadeOut(300);			
			 
           
         });  
	 


	
			
        });