$(document).ready(function() {

    var browserWidth = document.documentElement.clientWidth;
    var browserHeight = document.documentElement.clientHeight;
    var screenSideSpace = (browserWidth - $("#mainWrapper").width()) / 2;
    var imageWrapper;

    $(".ImageRolloverText").mouseenter(function() {

        var rolloverTextActualPositionX = $(this).offset().left;
        var rolloverTextActualPositionY = $(this).offset().top;
        var iebody = (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body

        //var dsocleft = document.all ? iebody.scrollLeft : pageXOffset
        var dsoctop = document.all ? iebody.scrollTop : pageYOffset
     
        rolloverTextActualPositionY = rolloverTextActualPositionY - dsoctop;


        var rolloverTextHeight = $(this).height();
        var rolloverTextApplicationPositionX = rolloverTextActualPositionX - screenSideSpace;
        var rolloverTextWidth = $(this).width();
        var rolloverImageWidth = $(this).parents(".RollOver").find(".ImageWrapper").width();
        var rolloverImageHeight = $(this).parents(".RollOver").find(".ImageWrapper").height() + 35;
        var totalRolloverWidth = rolloverTextApplicationPositionX + rolloverTextWidth + rolloverImageWidth;
        var totalRollOverHeight = (rolloverTextActualPositionY + rolloverTextHeight + rolloverImageHeight);
        var bottomSpace = browserHeight - rolloverTextActualPositionY;

        imageWrapper = $(this).parents(".RollOver").find(".ImageWrapper");


        if ((totalRollOverHeight > browserHeight) && (totalRolloverWidth > $("#mainWrapper").width())) {
            imageWrapper.css({ "opacity": "0", "display": "block",
                "left": (rolloverTextActualPositionX - rolloverImageWidth - 18) + "px",
                "top": ($(this).offset().top - rolloverImageHeight) + "px"
            }).stop().animate({ "opacity": "1" });
        }

        else
            if (bottomSpace < rolloverImageHeight) {
            imageWrapper.css({ "opacity": "0", "display": "block",
                "left": (rolloverTextActualPositionX - rolloverImageWidth - 18) + "px",
                "top": ($(this).offset().top - rolloverImageHeight) + "px"
            }).stop().animate({ "opacity": "1" });
        }
        else if (totalRolloverWidth > $("#mainWrapper").width()) {
            imageWrapper.css({ "opacity": "0", "display": "block",
                "left": (rolloverTextActualPositionX - rolloverImageWidth - 18) + "px",
                "top": ($(this).offset().top + rolloverTextHeight + 15) + "px"
            }).stop().animate({ "opacity": "1" });

        }
        else {
            imageWrapper.css({ "opacity": "0", "display": "block",
                "left": (rolloverTextActualPositionX + rolloverTextWidth) + "px",
                "top": ($(this).offset().top + rolloverTextHeight + 15) + "px"
            }).stop().animate({ "opacity": "1" });
        }
    });
    $(".ImageRolloverText").mouseleave(function() {
        imageWrapper.stop().animate({ opacity: 1.0 }, 100, function() {

            if (!imageWrapper.hasClass("Active")) {
                imageWrapper.fadeOut();
            }
        });
    });

    $(".ImageWrapper").hover(function() {
        $(this).addClass("Active");
    }, function() {
        $(this).removeClass("Active").fadeOut();
    });

});