this.imagePreview = function()
{
    /* CONFIG */

    xOffset = -30;
    yOffset = 0;

    // these 2 variable determine popup's distance from the cursor
    // you might want to adjust to get the right result

    /* END CONFIG */
    $("a.preview").hover(function(e)
    {
        if (!this.href)
        {
            return;
        }

        var coords = getMouseXY(e);
        var imageWidth = parseSize(this.id).x;
        var imageHeight = parseSize(this.id).y;
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/>" + this.t : "";
        var top = (coords.y - yOffset) - (imageHeight / 2);
        var left = ((coords.x + xOffset) - imageWidth);

        $("body").append("<p id='preview'><img src='" + this.href + "' alt='Image preview' />" + c + "</p>");

        $("#preview")
			.css("top", top < 0 ? 0 : top + "px")
			.css("left", left < 0 ? 0 : left + "px")
			.fadeIn("fast");
    },
	function()
	{
	    this.title = this.t;
	    $("#preview").remove();
	});

    $("a.preview").mousemove(function(e)
    {
        if (!this.href)
        {
            return;
        }

        var coords = getMouseXY(e);
        var imageWidth = parseSize(this.id).x;
        var imageHeight = parseSize(this.id).y;
        var top = (coords.y - yOffset) - (imageHeight / 2);
        var left = ((coords.x + xOffset) - imageWidth);

        $("#preview")
			.css("top", top < 0 ? 0 : top + "px")
			.css("left", left < 0 ? 0 : left + "px")
    });
};

function getMouseXY(e)
{
    e = e || window.event;
    var x;
    var y;

    if (e.pageX)
    {
        x = e.pageX;
        y = e.pageY;
    }
    else if (e.clientX)
    {
        x = e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
        y = e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    }
    else if (e.screenX)
    {
        x = e.screenX;
        y = e.screenY;
    }

    if (x < 0) { x = 0 };
    if (y < 0) { y = 0 };

    return { x: x, y: y };
}

function parseSize(text)
{
    var x = text.split(":")[0];
    var y = text.split(":")[1];
    return { x: x, y: y };
}


// starting the script on page load
$(document).ready(function()
{
    imagePreview();
});