$(function() {
    // preload the menu hover images
    if (document.images != null)
    {
        $("#menu ul li a img").each(function() {
            var src = new String($(this).attr('src'));
            src = src.substr(0, src.length - 4) + "_sel" + src.substr(src.length - 4, 4);
            var img = new Image();
            img.src = src.toString();
        });
    }
    
    // mark the image with the .menu-selected class as selected by adding "_sel" to the image file name
    var sel = $("#menu ul li.menu-selected");
    var img = sel.find("a img");
    var src = new String(img.attr('src'));
    src = src.substr(0, src.length - 4) + "_sel" + src.substr(src.length - 4, 4);
    img.attr("src", src);
    
    // change the menu images on hover by adding/removing "_sel" from the image
    //  file name to change between normal/selected images
    $("#menu ul li").not(".menu-selected").hover(
        function() {
            var img = $(this).find("a img");
            var src = new String(img.attr('src'));
            src = src.substr(0, src.length - 4) + "_sel" + src.substr(src.length - 4, 4);
            img.attr("src", src);
        }, 
        function() {
            var img = $(this).find("a img");
            var src = new String(img.attr('src'));
            src = src.replace("_sel", "");
            img.attr("src", src);
        }
    );
});