I have a problem with an image preview that comes up when you hover over a thumbnail. I can change the distance between the preview and the cursor, but if a thumbnail is close to the side of the window, the preview cant fit and you only see part of it.. hope that makes sense...

is there a way to make it so that if the preview doesnt fit, it will show up on the other side of the cursor?....

Here is the script...

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("<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("slow");
    },
    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();
});

EDIT: see what i am getting,

http://img202.imageshack.us/img202/4991/browserpreviewf.jpg

my image at the right corner of the page so when i hover the img my preview goes even further right that is besides the page scrollbar half the preview is available.... How to get the preview to the left of the cursor..