Updated README, renamed some files.

README.md

@@ -1,8 +1,83 @@
-View docs & demo [here.](http://dl.dropbox.com/u/780754/jquery-modal/example.html)
+# Installation
 
-ToDo
-====
+Include [jQuery](http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js) and `jquery.modal.min.js` scripts:
 
-* Doesn't actually work in IE just yet.  Would be a nice touch to get that working.
-* Should be able to bind events to specific modals: `$('#window').modal().bind('modal:open' function() { ... });`
-* 
+    <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
+    <script src="jquery.modal.min.js" type="text/javascript" charset="utf-8"></script>
+
+Include the `jquery.modal.css` stylesheet:
+
+    <link rel="stylesheet" href="jquery.modal.css" type="text/css" media="screen" />
+
+
+# Opening modals
+
+## Method 1: Manually
+
+Basic usage is to embed your modal's HTML (with the 'modal' class) directly into the document.
+
+    <form id="login-form" class="modal">
+      ...
+    </form>
+
+and then invoke `modal()` on the element.
+
+    $('#login-form').modal();
+
+
+## Method 2: Automatically attaching to links
+
+An even simpler way is to add `rel="modal:open"` to links.  When the link is clicked, the DOM element with an ID corresponding to the link's `href` attribute will be opened in a modal.
+
+    <a href="#login-form" rel="modal:open">Login</a>
+
+## AJAX
+
+I know somebody is going to ask, so here's an example of how you could load content with AJAX:
+
+    $.get('/#-form', function(html) {
+      $(html).modal();
+    });
+
+# Closing modals
+
+Because there can be only one modal active at a single time, there's no need to select which modal to close:
+
+    $.fn.modal.close();
+
+_TODO: this should be changed so that when called on a specific element, the element is returned (normal jQuery fashion)._
+
+Similar to how links can be automatically bound to open modals, they can be bound to close modals using `rel="modal:close"`:
+
+    <a href="#login-form" rel="modal:open">Login</a>
+
+# Resizing
+
+There's really no need to modals, since the default styles don't specify a fixed height; modals will expand vertically (like a normal HTML element) to fit their contents.
+
+However, when this occurs, you will probably want to at least re-center the modal in the viewport:
+
+    $.fn.modal.resize()
+
+# Events
+
+The following events are triggered on the modal element at various points in the open/close cycle.  Hopefully the names are self-explanatory.
+
+    $.fn.modal.BEFORE_BLOCK = 'modal:before-block';
+    $.fn.modal.BLOCK = 'modal:block';
+    $.fn.modal.BEFORE_OPEN = 'modal:before-open';
+    $.fn.modal.OPEN = 'modal:open';
+    $.fn.modal.BEFORE_CLOSE = 'modal:before-close';
+    $.fn.modal.CLOSE = 'modal:close';
+
+The first and only argument passed to these event handlers is the `modal` object, which has three properties:
+
+    modal.elm;        // Original jQuery object upon which modal() was invoked.
+    modal.options;    // Options passed to the modal.
+    modal.blocker;    // The overlay element.
+
+So, you could do something like this:
+
+    $('#purchase-form').bind('modal:before-close', function(modal) {
+      clear_shopping_cart();
+    });

example.html

@@ -4,7 +4,7 @@
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 
   <script src="jquery.modal.js" type="text/javascript" charset="utf-8"></script>
-  <link rel="stylesheet" href="modal.css" type="text/css" media="screen" />
+  <link rel="stylesheet" href="jquery.modal.css" type="text/css" media="screen" />
 
   <script src="highlight/highlight.pack.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8"> hljs.initHighlightingOnLoad(); </script>

jquery.modal.js

@@ -70,13 +70,18 @@
   $.fn.modal.CLOSE = 'modal:close';
 
   $.fn.modal.close = function(event) {
-    if(event) event.preventDefault();
-    if(!current_modal) return;
+    if(event) {
+      event.preventDefault();
+    }
+    if(!current_modal) {
+      return;
+    }
 
-    $(document).trigger($.fn.modal.BEFORE_CLOSE, [current_modal]);
+    current_modal.elm.trigger($.fn.modal.BEFORE_CLOSE, [current_modal]);
     current_modal.blocker.remove();
     current_modal.elm.hide();
-    $(document).trigger($.fn.modal.CLOSE, [null]);
+    current_modal.elm.trigger($.fn.modal.CLOSE, [current_modal]);
+    current_modal = null;
   };
 
   $.fn.modal.resize = function() {