hi guys

i am trying to implement jquery image hover popup but facing a problem when the popup is closer to browser edge it goes beyond its edge i want it to change its direction when it finds that space is not enough to show that popup, i have see this effect in many plugins where popups, tooltips and drop down menus change their direction if they are close to browser window edge

can any one guide me in right direction here is the screen shot for reference http://img512.imageshack.us/img512/4990/browseredge.png

here is the jquery hover code

function imagePreview(){ 
 /* 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 : "";
  var newName = this.name;
  //console.log(this.name);
  newName=newName.replace("/l/","/o/");
  //console.log(newName);
  $("body").append("<p id='preview'><img src='"+ this.name +"' alt='Image preview' style='margin-bottom:5px;'>"+ c +"</p>");
  $("#preview img").error(function () {
   $("#preview img").attr("src" ,newName).css({'width': '400px', 'height': 'auto'});
  });

  $("#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");
 });   
};

any help will be appriciated

Thanks

Salman