$(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(".logo");

        
    
            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);
                });
            }
			
			
			$("#footerWrap ul li ul a").not("#footerWrap ul li ul .selected a").hover(function() {
			  $(this).stop().animate({paddingLeft: "20px"}, 300);
			}, function() {
			  $(this).stop().animate({paddingLeft: "0px"}, 200);
			});
			

			
			$(".projectFade").hover(function(){
			$(this).stop().fadeTo(400, 0.3); // This should set the opacity to 100% on hover
			},function(){
			$(this).stop().fadeTo(200, 1.0); // This should set the opacity back to 60% on mouseout
			});


    		$( "a.projectFade").hover(function(){
			$(this).stop().fadeTo(400, 0.3); // This should set the opacity to 100% on hover
			},function(){
			$(this).stop().fadeTo(200, 1.0); // This should set the opacity back to 60% on mouseout
			});
			
			$(".formFade").hover(function(){
			$(this).stop().fadeTo(400, 0.5); // This should set the opacity to 100% on hover
			},function(){
			$(this).stop().fadeTo(200, 1.0); // This should set the opacity back to 60% on mouseout
			});
			
			
			$(".link").hover(function(){
			$(this).stop().fadeTo(400, 0.7); // This should set the opacity to 100% on hover
			},function(){
			$(this).stop().fadeTo(200, 1.0); // This should set the opacity back to 60% on mouseout
			});


    		$( "a.links").hover(function(){
			$(this).stop().fadeTo(400, 0.7); // This should set the opacity to 100% on hover
			},function(){
			$(this).stop().fadeTo(200, 1.0); // This should set the opacity back to 60% on mouseout
			});
        });