/*
* Image preview script 
* powered by jQuery (http://www.jquery.com)
* 
* written by Alen Grakalic (http://cssglobe.com)
* 
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/

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

    xOffset = 10;
    yOffset = 30;

    // 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) {
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/>" + this.t : "";        
        $("body").append("<div id='preview'><img src='Images/ProductImages/Products/" + this.rel + "' /><p style='text-align:center; display:block; margin-top:-5px; padding:0; color:#fff;'>" + c + "</p></div>");

        var _top;
        var _left;
        if (((e.pageY + $("#preview").innerHeight())) > ($(window).height() - 25)) {
            _top = (e.pageY - $("#preview").innerHeight()) + xOffset;
            if (_top <= -5) {
                _top = -5;
            }
        }
        else {
            _top = (e.pageY + xOffset);
        }

        if ((e.pageX + $("#preview").innerWidth()) > ($(window).width() - 25)) {
            _left = (e.pageX - $("#preview").innerWidth()) + xOffset;
        }
        else {
            _left = (e.pageX + xOffset);
        }

        $("#preview")
			.css("top", _top + "px")
			.css("left", _left + "px")
			.fadeIn("slow");
    },
	function() {
	    this.title = this.t;
	    $("#preview").remove();
	});

    $("a.preview").mousemove(function(e) {
        var _top;
        var _left;
        if ((e.pageY + $("#preview").innerHeight()) > ($(window).height() - 25)) {
            _top = (e.pageY - $("#preview").innerHeight()) + xOffset;
            if (_top <= -5) {
                _top = -5;
            }
        }
        else {
            _top = (e.pageY + xOffset);
        }

        if ((e.pageX + $("#preview").innerWidth()) > ($(window).width() - 25)) {
            _left = (e.pageX - $("#preview").innerWidth()) + xOffset;
        }
        else {
            _left = (e.pageX + xOffset);
        }

        $("#preview")
			.css("top", _top + "px")
			.css("left", _left + "px");
    });
};


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