jquery_class.js

(function($){
  jQuery.fn.mouseyDialog = function() {
    // Classic Class Structure (note: no var, it's exposed for TDD)
    MouseyDialog = function(anchor) {
      this.anchor = $(anchor);
      this.dialog = $(this.anchor.attr('href'));
      this.button = $('<a href="#" class="mouseyDialog_close">close</a>');
    };
    
    MouseyDialog.prototype = {
      openDialog: function(x, y) {
        this.dialog.css({top:y, left:x}).fadeIn(250, function() {
          $(this).addClass('visible');
        });
      },
      closeDialog: function() {
        this.dialog.fadeOut(250, function() {
          $(this).removeClass('visible');
        });
      },
      setup: function() {
        this.button
          .appendTo(this.dialog);
          
        this.dialog
          .hide()
          .css({position:'absolute'})
          .addClass('mouseyDialog')
          .appendTo('body'); 
      },
      bindEvents: function() {
        var that = this;
        // Custom event
        this.anchor.bind('toggleDialog', function(event, x, y) {
          if(that.dialog.hasClass('visible')) {
            that.closeDialog();
          } else {
            that.openDialog(x, y);
          }
        });

        // Events
        this.anchor.click(function(mouse) {
          var x = mouse.pageX+10;
          var y = mouse.pageY+10;

          $(this).trigger('toggleDialog', [x, y]);
          return false;
        });
        this.button.click(function() {
          that.anchor.trigger('toggleDialog');
          return false; 
        });

        // Prevents the dialog from being closed when clicking inside it
        this.dialog.click(function(event) {
          event.stopPropagation();
        });
        // Closes the dialog when clicking outside of it
        $(document).click(function(event) {
          if(event.target != this) {
            if(that.dialog.hasClass('visible')) {
              that.closeDialog();
              event.preventDefault();
            }
          } 
        });
      }
    };

    // jQuery Distribution
    return this.each(function() {
      var mouseyDialog = new MouseyDialog(this);
      mouseyDialog.setup();
      mouseyDialog.bindEvents();
    });
  };
})(jQuery);