Jquery scope question
<p>My first foray into writing jQuery functions.</p>

<p>I have this function, but I'm not sure why the overlay var has to be outside the scope of the click function.  I tried it within but it doesn't work right. Can I refactor this to make it better?</p>

<pre><code>(function($) {
  $.fn.popOver = function() {

    // Variable for overlay
    var overlay = $("&lt;div id='overlay'&gt;&lt;/div&gt;");

    // Listen for clicks
    return this.click(function(e) {

      // Prevent the anchor link from loading
      e.preventDefault();

      // Variable for popover
      var popover = $(this).next();

      // Append the overlay to the document body
      $('body').append(overlay.click(function() {
        overlayHide();
      }))

      //Set the css and fade in our overlay
      overlay.show();
      popover.fadeIn(150);

      // Listen for clicks on elements
      popover.find('a').click(function() {
        overlayHide();
      })

      // Hide Overlay function
      function overlayHide() {
        overlay.remove();
        popover.fadeOut(150);
      }

    })
  }
}) (jQuery);
</code></pre>
