var IMAGE_CURSOR_OFFSET_X = 30;
var IMAGE_CURSOR_OFFSET_Y = -430;

function getPosition(e) {
    e = e || window.event;
    var cursor = {
        x:0,
        y:0
    };
    if (e.pageX || e.pageY) {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    }
    else {
        var de = document.documentElement;
        var b = document.body;
        cursor.x = e.clientX +
        (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
        cursor.y = e.clientY +
        (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
    }
    return cursor;
}

function updateImagePosition(event) {
    var imgElement = document.getElementById("jsFloatingImage");
    if (imgElement != null) {
        var position = getPosition(event);
        imgElement.style.left = (position.x + IMAGE_CURSOR_OFFSET_X) + "px";
        imgElement.style.top = (position.y + IMAGE_CURSOR_OFFSET_Y) + "px";
    }
}

function floatImage(event, imageURL) {
    clearFloatingImage();
    var imgElement = document.createElement("img");
    imgElement.setAttribute("src", imageURL);
    imgElement.setAttribute("id", "jsFloatingImage");
    document.getElementsByTagName("body")[0].appendChild(imgElement);
    var position = getPosition(event);
    imgElement.style.left = (position.x + IMAGE_CURSOR_OFFSET_X) + "px";
    imgElement.style.top = (position.y + IMAGE_CURSOR_OFFSET_Y) + "px";
    
}

function clearFloatingImage() {
    var imgElement = document.getElementById("jsFloatingImage");
    if (imgElement != null) {
        imgElement.parentNode.removeChild(imgElement);
    }
}