var activeLayer = null;
document.onmousemove = followmouse;

function SetContainerWidth(mediaID) {
    var thecontainer = document.getElementById("imagecontainer" + mediaID);
    var theimage = document.getElementById("thumbImage" + mediaID);
    if (theimage.width > 0) {
        thecontainer.style.width = theimage.width + 8 + "px";
    }
    theimage.style.borderColor = "#b6b6b6";
}

function showImage(e) {
    if (typeof e != "undefined") {
        e.currentTarget.style.display = "inline";
        var loading = document.getElementById(e.currentTarget.id + "Loading");
        loading.style.display = "none";

    }
    else if (typeof window.event != "undefined") {
        event.srcElement.style.display = "inline";
        var loading = document.getElementById(event.srcElement.id + "Loading");
        loading.style.display = "none";
    }
    followmouse(e);
}

function showHover(id, src, e) {
    var image = document.getElementById("hoverImage" + id);
    activeLayer = document.getElementById("hoverLayer" + id);
    activeLayer.style.display = "block";
    image.onload = showImage;
    image.src = src;

}

function hideHover(id) {
    if (activeLayer != null) {
        activeLayer.style.display = "none";
        activeLayer = null;
    }
}

function truebody() {
    return (!window.opera && document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
}

function followmouse(e) {
    if (activeLayer === null) return;

    var xcoord = 0;
    var ycoord = 0;

    var docwidth = document.all ? truebody().scrollLeft + truebody().clientWidth : pageXOffset + window.innerWidth - 15;
    var docheight = document.all ? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight);

    var ScrollTop = window.pageYOffset ? window.pageYOffset : truebody().scrollTop;
    var ScrollLeft = window.pageXOffset ? window.pageXOffset : truebody().scrollLeft;

    var centering = (docwidth - 1073) / 2;
    if (centering < 0) centering = 0;

    if (typeof e != "undefined") {
        //Mozilla
        //pageX is absolute from left of the document = event.ClientX + truebody().scrollLeft

        //Firefox bug fix
        if (e.pageX == 0 && e.pageY == 0) {
            return;
        }

        xcoord = e.pageX - centering - 10;
        var overflowX = e.pageX + activeLayer.offsetWidth - (docwidth - 40);

        if (overflowX > 0) {
            xcoord = xcoord - activeLayer.offsetWidth - 50;
        }

        //pageY is absolute from top of the document
        ycoord = e.pageY - 60;
        var overflowY = e.pageY - ScrollTop + activeLayer.offsetHeight - (docheight - 40);
        if (overflowY > 0) {
            ycoord = ycoord - overflowY;
        }

    }
    else if (typeof window.event != "undefined") {
        //IE
        //event.clientX is from the left of the window view = e.pageX - truebody().scrollLeft
        xcoord = event.clientX + truebody().scrollLeft - centering; //-0 IE
        var overflowX = event.clientX + truebody().scrollLeft + activeLayer.offsetWidth - (docwidth - 40);
        if (overflowX > 0) {
            xcoord = xcoord - activeLayer.offsetWidth - 50;
        }
        //event.clientY is from the top of the window view = e.pageY - truebody().scrollTop
        ycoord = event.clientY + truebody().scrollTop - 70;
        var overflowY = event.clientY + activeLayer.offsetHeight - (docheight - 40);
        if (overflowY > 0) {
            ycoord = ycoord - overflowY;
        }
    }

    if (ycoord < 0) { ycoord = ycoord * -1; }
    activeLayer.style.left = xcoord + "px";
    activeLayer.style.top = ycoord + "px";
}