/// <reference path="~/scripts/jquery.js" />
(function ($) {
    this.imagePreview = function (scope, y) {
        /* CONFIG */

        xPreviewOffset = 20;
        yPreviewOffset = y || -200;

        if (scope == null) scope = 'body';

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

        /* END CONFIG */
        $(".preview", $(scope)).hover(function (e) {
            var p = $(this).attr("rel");
            this.t = this.title;

            this.title = "";
            var c = (this.t != "") ? this.t : "";
            //$("body").append("<p id='preview'><img src='"+ this.rel +"' />"+ c +"</p>");
            $("body").append("<p id='preview'><span id='previewholder' class='loading'>&nbsp;</span>" + c + "</p>");
            $("#preview")
			    .css("top", (e.pageY - xPreviewOffset) + "px")
			    .css("left", (e.pageX + yPreviewOffset) + "px")
			    .fadeIn("fast");

            var img = new Image();

            $(img)
            .load(function () {
                $(this).hide();

                $('#preview #previewholder')
                    .empty()
                    .append(this).removeClass('loading');

                $(this).fadeIn();
            })
            .error(function () {
                $('#preview #previewholder')
                .empty().addClass('nopicture');
            })
            .attr('src', p);
        },
	function () {
	    this.title = this.t;
	    $("#preview").remove();
	});
        $(".preview").mousemove(function (e) {
            $("#preview")
			.css("top", (e.pageY - xPreviewOffset) + "px")
			.css("left", (e.pageX + yPreviewOffset) + "px");
        });
    };

})(jQuery);

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

})(jQuery);