/*
 * Image preview script
 * powered by $ (http://www.$.com)
 *
 * written by Alen Grakalic (http://cssglobe.com)
 * edited by Jan Chodura (http://www.creactive.cz)
 *
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-$
 *
 */

this.imagePreview = function(){

        /* CONFIG */

                xOffset = 10;
                yOffset = 30;

                xWin = $(window).width();
                yWin = $(window).height();

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

        /* END CONFIG */
        $("a.previewImage").hover(function(e){
                this.t = this.title;
                this.title = "";
                var c = (this.t != "") ? "<br/>" + this.t : "";
                $("body").append("<p id='previewImage'><img src='"+ this.rel +"' alt='Image preview' />"+ c +"</p>");

                e = (e?e:event);
                pageX = (e.pageX?e.pageX:e.clientX);
                pageY = (e.pageY?e.pageY:e.clientY);

                pageY += (e.pageY?0:$(window).scrollTop());

                yImg = $("#previewImage").height();
                xImg = $("#previewImage").width();

                xTol = $(window).scrollLeft();
                yTol = $(window).scrollTop();

                cssTop = pageY - yOffset;
                cssLeft = pageX + yOffset;

                if (cssTop + yImg > yWin + yTol) {
                         overflow = (pageY + yImg - yOffset) - (yWin + yTol);
                         cssTop = pageY - yOffset - overflow - yOffset;
                }

                $("#previewImage")
                        .css("top", cssTop + "px")
                        .css("left", cssLeft + "px")
                        .fadeIn("fast");
    },
        function(){
                this.title = this.t;
                $("#previewImage").remove();
    }).mousemove(function(e){

                yImg = $("#previewImage").height();
                xImg = $("#previewImage").width();

                e = (e?e:event);
                pageX = (e.pageX?e.pageX:e.clientX);
                pageY = (e.pageY?e.pageY:e.clientY);

                pageY += (e.pageY?0:$(window).scrollTop());

                xTol = $(window).scrollLeft();
                yTol = $(window).scrollTop();

                cssTop = pageY - xOffset;
                cssLeft = pageX + yOffset;

                if (cssTop + yImg > yWin + yTol) {
                         overflow = (pageY + yImg - yOffset) - (yWin + yTol);
                         cssTop = pageY - yOffset - overflow - yOffset;
                }

                $("#previewImage")
                        .css("top", cssTop + "px")
                        .css("left", cssLeft + "px");
        });

        $("div.previewImage").bind("mouseenter",function(e){
                this.t = this.title;
                this.title = "";
                $("div.previewImage a").each(function(){
                        this.aTitle = this.title;
                        this.title = '';
                });
                var c = (this.t != "") ? "<br/>" + this.t : "";
                $("body").append("<p id='previewImage'><img src='"+ this.lang +"' alt='Image preview' />"+ c +"</p>");

                e = (e?e:event);
                pageX = (e.pageX?e.pageX:e.clientX);
                pageY = (e.pageY?e.pageY:e.clientY);

                pageY += (e.pageY?0:$(window).scrollTop());

                yImg = $("#previewImage").height();
                xImg = $("#previewImage").width();

                xTol = $(window).scrollLeft();
                yTol = $(window).scrollTop();

                cssTop = pageY - yOffset;
                cssLeft = pageX + yOffset;

                if (cssTop + yImg > yWin + yTol) {
                         overflow = (pageY + yImg - yOffset) - (yWin + yTol);
                         cssTop = pageY - yOffset - overflow - yOffset;
                }

                $("#previewImage")
                        .css("top", cssTop + "px")
                        .css("left", cssLeft + "px")
                        .fadeIn("fast");
        }).bind("mouseleave",function(){
                this.title = this.t;
                $("div.previewImage a").each(function(){
                        this.title = this.aTitle;
                });
                $("#previewImage").remove();
        }).mousemove(function(e){

                yImg = $("#previewImage").height();
                xImg = $("#previewImage").width();

                e = (e?e:event);
                pageX = (e.pageX?e.pageX:e.clientX);
                pageY = (e.pageY?e.pageY:e.clientY);

                pageY += (e.pageY?0:$(window).scrollTop());

                xTol = $(window).scrollLeft();
                yTol = $(window).scrollTop();

                cssTop = pageY - xOffset;
                cssLeft = pageX + yOffset;

                if (cssTop + yImg > yWin + yTol) {
                         overflow = (pageY + yImg - yOffset) - (yWin + yTol);
                         cssTop = pageY - yOffset - overflow - yOffset;
                }

                $("#previewImage")
                        .css("top", cssTop + "0px")
                        .css("left", cssLeft + "0px");
        });
};

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