$(document).ready(function() {

    // the commented code lines here were left in in the event that we would like to add
    // the directional arrows back into the display for the menus
    // 
    //slides the element with class "menuBody" when class "menuHead" is clicked
    $("#DropDownPane p.menuHead").click(function() {
        if ($(this).next("div.menuBody").is(':visible')) {
            //$(this).css({ backgroundImage: "url(../Images/leftArrow.png)" });
        }
        else {
            //$(this).css({ backgroundImage: "url(../Images/downArrow.png)" });
        }
        $(this).next("div.menuBody").toggle();
        //$(this).css({ backgroundImage: "url(../Images/downArrow.png)" }).next("div.menuBody").slideDown(300).siblings("div.menuBody").slideUp("slow");
        $(this).next("div.menuBody").siblings("div.menuBody").slideUp("slow");
        //$(this).siblings().css({ backgroundImage: "url(../Images/leftArrow.png)" });
    });
    //slides the element with class "menuBody" on mouseover
    $("#SlidingPane p.menuHead").mouseover(function () {
        // this displays images in menu
        //$(this).css({ backgroundImage: "url(../Images/downArrow2.png)" }).next("div.menuBody").slideDown(10).siblings("div.menuBody").slideUp(10);
        //$(this).siblings().css({ backgroundImage: "url(../Images/leftArrow.png)" });

        // do not display images in menu
        $(this).css({ backgroundImage: "" }).next("div.menuBody").slideDown(10).siblings("div.menuBody").slideUp(10);
    });
});