$(document).ready(function(){
  // Get the ID of the body
  var parentID = $("body").attr("id");
  // Loop through the nav list items
  $("#about li, #etc li, #sub_wag li, #sub_wagsep li, #sub_clients li, #sub_company li").each(function() {
    // compare IDs of the body and list-items
    var myID = $(this).attr("id");
    // only perform the change on hover if the IDs don't match (so the active link doesn't change on hover)
    if (myID != "n-" + parentID) {
      // for mouse actions
      $(this).children("a").hover(function() {
        // add a class to the list item so that additional styling can be applied to the <em> and the text
        $(this).addClass('over');
	    // add in the span that will be faded in and out
		$(this).append("<span><\/span>");
        $(this).find("span").fadeIn(500);
      }, function() {
      $(this).removeClass('over');
		// fade out the span then remove it completely to prevent the animations from continuing to run if you move over different items quickly
        $(this).find("span").fadeOut(500, function() {
          $(this).remove();
		});
      });
      // for keyboard actions
      $(this).children("a").focus(function() {
	  //check whether the link is already being hovered over before applying the class and extra span
	  //required for Firefox which makes the link unclickable if there's two spans layered on top of the anchor
	    if ($(this).attr('class')!='over') {
		  $(this).addClass('over');
		  $(this).append("<span><\/span>");
		  $(this).find("span").fadeIn(50);
		}
      });
      $(this).children("a").blur(function() {
		$(this).removeClass('over');
        $(this).find("span").fadeOut(2000, function() {
	    $(this).remove();
       });
     });
    }
  });
});