$(function() {

    var topNavOffsetHoriz = 10;
    var topNavOffsetVert = 0;
    //Top navigation roll over handlers.
    $("#navigation_1 li").hover(
		function() {
		    if ($("img", this).length > 0) {
		        if ($("img", this).attr("src").indexOf(".")) {


		            var nameArray = $("img", this).attr("src").split(".");
		            $("img", this).attr("src", nameArray[0] + "_hover" + "." + nameArray[1]);

		            if ($("ul", this).parent().length > 0) {
		                //Get the offset and position the menu based on the element we're hovering on. 		            
		                var offset = $(this).offset();

		                //If it's the last element the menu is aligned to the right edge of the image minus 1 pixel.
		                if ($("ul", this).hasClass("last")) {
		                    $("ul", this).css("left", (offset.left + $("img", this).width()) - $("ul", this).width() - topNavOffsetHoriz);
		                }
		                else {
		                    $("ul", this).css("left", offset.left + topNavOffsetHoriz);
		                }
		                $("ul", this).css("top", offset.top + $("img", this).height() + topNavOffsetVert);
		                $("ul", this).bgiframe();
		                $("ul", this).show();
		            }

		        }
		    }
		}
		,
		function() {
		    if ($("img", this).length > 0) {
		        $("img", this).attr("src", $("img", this).attr("src").replace("_hover", ""));

		        if ($("ul", this).parent().length > 0) {
		            $("ul", this).hide();
		        }
		    }
		}
	);

    //Left navigation roll over handler

    var leftNavPaddingAndBorders = 10; //Padding + bordes in pixels.
    var dummyOffsetHoriz = 2;
    $("#navigation_2_nav li.normal").hover(
		function() {
		    if ($("ul", this).parent().length > 0) {

		        var offset = $(this).offset();

		        //Left navigation IE fix
		        $(this).bgiframe({ top: offset.top, left: 1 });

		        //Position the dummy div according to where the list item is on the page, and set it to the list items height.
		        $("div", this).css("height", $("ul", this).parent().height() + leftNavPaddingAndBorders);
		        $("div", this).css("left", offset.left + $(this).width() - dummyOffsetHoriz);
		        $("div", this).css("top", offset.top);

		        $("a", this).addClass("hover");
		        $("ul", this).parent().addClass("hover");

		        $("ul", this).css("top", offset.top + $("div", this).height() + 1);
		        $("ul", this).css("left", ((offset.left + $(this).width() - dummyOffsetHoriz) + $("div", this).width()) - $("ul", this).width());

		        //Left navigation IE fix
		        $("ul", this).bgiframe();
		        $("div", this).bgiframe();
		        $("div", this).show();
		        $("ul", this).show();

		    }
		}
		,
		function() {

		    if ($("ul", this).parent().length > 0) {
		        $("a", this).removeClass("hover");
		        $("ul", this).hide();
		        $("div", this).hide();
		        $("ul", this).parent().removeClass("hover");
		    }

		}
	);
});