$(function(){
        
        closedImg = "/_layouts/images/gepf/arow.png",
		openedImg = "/_layouts/images/gepf/arow2.png",
		cssInit = {
			"background-image":"url('"+openedImg+"')",
			"background-repeat":"no-repeat",
			"background-position":"100% 50%",
			"cursor": "pointer"
		},
		 cssClosed = {"background-image":"url('"+openedImg+"')",
		 			"background-repeat":"no-repeat",
					"background-position":"100% 50%",
					"cursor": "pointer"},
	     cssOpen = {"background-image":"url('"+closedImg+"')",
	                "background-repeat":"no-repeat",
					"background-position":"100% 50%",
					"cursor": "pointer"};

       
	//For each Quick Launch navigation sub menu: 
	$("table.leftNav2").each(function(){
		//Find any navigation items under the sub menu that have been selected.
		var selectedNavItems = $(this).find("a.leftNavSelected");

		//Find the corresponding navigation header of the current sub menu being processed
		//var menuHeader = $(this).parents("tr:eq(0)").prev("tr").find("table.leftNav:eq(0)");        	
        var menuHeader = $(this).parents("tr:eq(0)").prev("tr").find("table.leftNav:eq(0)");        	
	    
		if ($(menuHeader).hasClass("leftNavSelected") || selectedNavItems.length > 0) 
		{
    	    //if the navigation header for this sub menu is selected or if there are any 
    	    //selected navigational items in this submenu, show the submenu.
        	var styleElm =  $(this).parents("tr:eq(0)").prev("tr").find("table.leftNav:eq(0)");
			styleElm.css(cssClosed);
			$(this).show();
			
		}
		else
		{ 
			//otherwise, hide the submenu
         	var styleElm2 =  $(this).parents("tr:eq(0)").prev("tr").find("table.leftNav:eq(0)");
			styleElm2.css(cssClosed);
			$(this).hide();
		}
	});
	
	

    //When a user clicks a navigation header, the user should be taken directly
    //to the site link. The javascript event handler to hide/display the submenus
    //should not be triggered.
   	$("a.leftNav").click(function(e){
    	e.stopPropagation();
    });

       	
	//When the user hovers over the navigation header, it would be nice
	//to have an indicator that they can click on the header. Usually,
	//browsers use the hand icon to indicate clickable items.
   $("table.leftNav").hover(function(e){
      $(this).css("cursor", "hand");
    }, function(e){
        $(this).css("cursor", "default");
    });

    //Finally, this adds a click event handler for the navigation header table
		
    $("table.leftNav").click(function(e)
    {		 
         	var styleElm = $(this).find("td:last");
         	var styleElm2 = $(this).find("td:last");
            var subMenu = $(this).parents("tr:eq(0)").next("tr").find("table.leftNav2:eq(0)");
	   	    var styleElm1 =  $(this).prev("tr:([id])");

    if (subMenu.is(':visible'))
        {
            /*styleElm.css(cssClosed);*/
			subMenu.hide();
		}
		else
		{
		  	//only if we have a submenu should we hide the other submenus and show the current one.
		     var menu = $("#LeftNavigationAreaCell"),
 		     menuHd = $("table.leftNav1 > tbody > tr[id]", menu);
   			 /*menuHd.find("td:last").css(cssInit);*/
  			$("table.leftNav2").hide();
		    subMenu.show();
		  	/*styleElm.css(cssOpen);*/
		}	
		 
   });
});