display larger image on hover and stay inside viewport

[Mike Kypriotis]

So i found this script which does exactly what i want http://cssglobe.com/lab/tooltip/02/ (downloaded from its homepage at http://cssglobe.com/easiest-tooltip-...-using-jquery/) only problem is that the bigger image is not entirely shown in browser (aka viewport as i found here) if image too big or thumbnail near browser edges. After some search I modified it but still at hover it sometimes show outside viewport and then after mousemove the larger img get reposition correctly, original js

this.imagePreview = function(){ 
        xOffset = 10;
        yOffset = 30;
        $("a.preview").hover(function(e){
        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");                        
    },
    function(){
        this.title = this.t;    
        $("#preview").remove();
    }); 
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });         
};
 
// starting the script on page load
$(document).ready(function(){
    imagePreview();
});
 

and I changed the hover and mousemove to make this version

this.imagePreview = function(){ 
        xOffset = 10;
        yOffset = 20;
        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result
    $(".preview").hover(function(kmouse){
        this.t = this.title;
        this.title = "";
        src=this.src;   
        if($(this).data("imgmode")=='1') 
        {
            src=src.replace("/thumbs",""); 
        }
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='preview'><img src='"+ src +"' alt='Image preview' />"+ c +"</p>");                              
 
    },
    function(){
        this.title = this.t;    
        $("#preview").remove();
    }); 
    $(".preview"). mousemove(function(kmouse){ 
    var border_top = $(window).scrollTop(); 
    var border_right = $(window).width(); 
    var left_pos; var top_pos; var offset = 15; 
    if(border_right - (offset *2) >= $("#preview").width() + kmouse.pageX){ left_pos = kmouse.pageX+offset; } else{ left_pos = border_right-$("#preview").width()-offset; } if(border_top + (offset *2)>= kmouse.pageY - $("#preview").height()){ top_pos = border_top +offset; } else{ top_pos = kmouse.pageY-$("#preview").height()-offset; } $("#preview").css({left:left_pos, top:top_pos}).fadeIn("fast");
    }); 
 
};
$(document).ready(function(){
    imagePreview();
});
 

as you can see did some other minor changes like adjusting it for all elements with class preview not only a and also added a custom HTML5 tag data-imgmode which though plays no role in this problem just to meet my site demands.
Any ideas?