title: stop js image pop up from going off screen
body: <p>Using the code below, how can I stop it from going off the screen? If you have an image on the far right of the browser window, the code expands the image to the right, so now the expanded image will be off the screen. I would like it to load to the left if it wants to load off the screen (to the right). I hope that makes sense. I would like to 'contain' the popup inside the browser window -- more specifically it needs to be contained to #page_container (which wraps the entire page)</p>
  
  <p>I'm not sure where the original code came from, but im trying to modify it.</p>
  
  <p>any help is appreciated.    </p>
  
  <pre><code>this.screenshotPreview = function(){    
  
      xOffset = 10;
      yOffset = -10;
  
  $("a.screenshot").hover(function(e){
      this.t = this.title;
      this.title = "";    
      var c = (this.t != "") ? "&lt;br/&gt;" + this.t : "";
      $("body").append("&lt;p id='screenshot'&gt;&lt;img src='"+ this.rel +"' alt='preview'/&gt;"+ c +"&lt;/p&gt;");                                 
      $("#screenshot")
          .css("top",(e.pageY - xOffset) + "px")
          .css("left",(e.pageX + yOffset) + "px")
          .fadeIn("fast");                        
  },
  function(){
      this.title = this.t;    
      $("#screenshot").remove();
  }); 
  $("a.screenshot").mousemove(function(e){
      $("#screenshot")
          .css("top",(e.pageY - xOffset) + "px")
          .css("left",(e.pageX + yOffset) + "px");
  });         
  };
  </code></pre>
  
  <p>here is the fiddle</p>
  
  <p><a href="http://jsfiddle.net/63HA4/" rel="nofollow">http://jsfiddle.net/63HA4/</a></p>