$(document).ready(function(){
    // Get the ID of the body
    var parentID = $("body").attr("id");
    // Loop through the nav list items
    $("#nav 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><img src='../images/"+myID+".png' width='150' height='116' /></span>");
                $(this).find("span").fadeIn(400);
				
            }, 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(400, function() {
                    $(this).remove();
                });
		});
            // for keyboard actions
            $(this).children("a").focus(function() {
            	if ($(this).attr('class')!='over') {
                $(this).addClass('over');
                $(this).append("<span></span>");
                $(this).find("span").fadeIn(400);
              }
            });
            $(this).children("a").blur(function() {
                $(this).removeClass('over');
                $(this).find("span").fadeOut(400, function() {
                    $(this).remove();
                });
            });
        }
    });
});