move js plugins to root dir, begin writing tests, and change modal plugin to be more boss like

10 files changed, 68 insertions, 712 deletions

diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 475329398..db59c79f9 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -3,7 +3,7 @@ $(document).ready(function(){
   // Dropdown example for topbar nav
   // ===============================
 
-  $(".topbar").dropdown() // catch any dropdowns on the page
+  $('body').dropdown() // catch any dropdowns on the page
 
 
   // table sort example
diff --git a/docs/assets/js/bootstrap-alerts.js b/docs/assets/js/bootstrap-alerts.js
deleted file mode 100644
index e27ac6482..000000000
--- a/docs/assets/js/bootstrap-alerts.js
+++ /dev/null
@@ -1,72 +0,0 @@
-(function( $ ){
-
-  /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
-   * ======================================================= */
-
-   var transitionEnd
-
-   $(function () {
-
-     $.support.transition = (function () {
-       var thisBody = document.body || document.documentElement
-         , thisStyle = thisBody.style
-         , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
-       return support
-     })()
-
-     // set CSS transition event type
-     if ( $.support.transition ) {
-       transitionEnd = "TransitionEnd"
-       if ( $.browser.webkit ) {
-       	transitionEnd = "webkitTransitionEnd"
-       } else if ( $.browser.mozilla ) {
-       	transitionEnd = "transitionend"
-       } else if ( $.browser.opera ) {
-       	transitionEnd = "oTransitionEnd"
-       }
-     }
-
-   })
-
- /* ALERT CLASS DEFINITION
-  * ====================== */
-
-  var Alert = function ( content ) {
-    var that = this
-    this.$element = $(content)
-    this.$element.delegate('.close', 'click', function (e) {
-      e.preventDefault()
-      that.close()
-    })
-  }
-
-  Alert.prototype = {
-
-    close: function () {
-      var that = this
-
-      this.$element.removeClass('in')
-
-      function removeElement () {
-        that.$element.remove()
-        that.$element = null
-      }
-
-      $.support.transition && this.$element.hasClass('fade') ?
-        this.$element.bind(transitionEnd, removeElement) :
-        removeElement()
-    }
-
-  }
-
-
- /* ALERT PLUGIN DEFINITION
-  * ======================= */
-
-  $.fn.alert = function ( options ) {
-    return this.each(function () {
-      new Alert(this)
-    })
-  }
-
-})( jQuery || ender )
\ No newline at end of file
diff --git a/docs/assets/js/bootstrap-dropdown.js b/docs/assets/js/bootstrap-dropdown.js
deleted file mode 100644
index fe73e7994..000000000
--- a/docs/assets/js/bootstrap-dropdown.js
+++ /dev/null
@@ -1,26 +0,0 @@
-(function( $ ){
-
- /* DROPDOWN PLUGIN DEFINITION
-  * ========================== */
-
-  var selector = 'a.menu, .dropdown-toggle'
-
-  function clearMenus() {
-    $(selector).parent('li').removeClass('open')
-  }
-
-  $(function () {
-    $('body').bind("click", clearMenus)
-  })
-
-  $.fn.dropdown = function ( options ) {
-    return this.each(function () {
-      $(this).delegate(selector, 'click', function (e) {
-        clearMenus()
-        $(this).parent('li').toggleClass('open')
-        return false
-      })
-    })
-  }
-
-})( jQuery || ender )
\ No newline at end of file
diff --git a/docs/assets/js/bootstrap-modal.js b/docs/assets/js/bootstrap-modal.js
deleted file mode 100644
index 4bc395e1c..000000000
--- a/docs/assets/js/bootstrap-modal.js
+++ /dev/null
@@ -1,157 +0,0 @@
-(function( $ ){
-
- /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
-  * ======================================================= */
-
-  var transitionEnd
-
-  $(function () {
-
-    $.support.transition = (function () {
-      var thisBody = document.body || document.documentElement
-        , thisStyle = thisBody.style
-        , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
-      return support
-    })()
-
-    // set CSS transition event type
-    if ( $.support.transition ) {
-      transitionEnd = "TransitionEnd"
-      if ( $.browser.webkit ) {
-      	transitionEnd = "webkitTransitionEnd"
-      } else if ( $.browser.mozilla ) {
-      	transitionEnd = "transitionend"
-      } else if ( $.browser.opera ) {
-      	transitionEnd = "oTransitionEnd"
-      }
-    }
-
-  })
-
-
- /* MODAL PUBLIC CLASS DEFINITION
-  * ============================= */
-
-  var Modal = function ( options ) {
-    this.settings = $.extend({}, $.fn.modal.defaults)
-
-    if ( typeof options == 'string' ) {
-      this.settings.content = options
-    } else if ( options ) {
-      $.extend( this.settings, options )
-    }
-
-    return this
-  }
-
-  Modal.prototype = {
-
-    toggle: function () {
-      return this[!this.isOpen ? 'open' : 'close']()
-    }
-
-  , open: function () {
-      var that = this
-      this.isOpen = true
-
-      this.$element = $(this.settings.content)
-
-      _.escape.call(this)
-      _.backdrop.call(this)
-
-      this.$element
-        .delegate('.close', 'click', function (e) { e.preventDefault(); that.close() })
-        .appendTo(document.body)
-        .show()
-
-      setTimeout(function () {
-        that.$element.addClass('in')
-        that.$backdrop && that.$backdrop.addClass('in')
-      }, 1)
-
-      return this
-    }
-
-  , close: function () {
-      var that = this
-
-      this.isOpen = false
-
-      _.escape.call(this)
-      _.backdrop.call(this)
-
-      this.$element.removeClass('in')
-
-      function removeElement () {
-        that.$element.remove()
-        that.$element = null
-      }
-
-      $.support.transition && this.$element.hasClass('fade') ?
-        this.$element.bind(transitionEnd, removeElement) :
-        removeElement()
-
-      return this
-    }
-
-  }
-
-
- /* MODAL PRIVATE METHODS
-  * ===================== */
-
-  var _ = {
-
-    backdrop: function () {
-      var that = this
-        , animate = this.$element.hasClass('fade') ? 'fade' : ''
-      if ( this.isOpen && this.settings.backdrop ) {
-        this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
-          .click(function () { that.close() })
-          .appendTo(document.body)
-      } else if ( !this.isOpen && this.$backdrop ) {
-        this.$backdrop.removeClass('in')
-
-        function removeElement() {
-          that.$backdrop.remove()
-          that.$backdrop = null
-        }
-
-        $.support.transition && this.$element.hasClass('fade')?
-          this.$backdrop.bind(transitionEnd, removeElement) :
-          removeElement()
-      }
-    }
-
-  , escape: function () {
-      var that = this
-      if ( this.isOpen && this.settings.closeOnEscape ) {
-        $('body').bind('keyup.modal.escape', function ( e ) {
-          if ( e.which == 27 ) {
-            that.close()
-          }
-        })
-      } else if ( !this.isOpen ) {
-        $('body').unbind('keyup.modal.escape')
-      }
-    }
-
-  }
-
-
- /* MODAL PLUGIN DEFINITION
-  * ======================= */
-
-  $.fn.modal = function ( options ) {
-    options = options || {}
-    options.content = this
-    return new Modal(options)
-  }
-
-  $.fn.modal.defaults = {
-    backdrop: false
-  , closeOnEscape: false
-  , content: false
-  }
-
-})( jQuery || ender )
\ No newline at end of file
diff --git a/docs/assets/js/bootstrap-popover.js b/docs/assets/js/bootstrap-popover.js
deleted file mode 100644
index 53284806f..000000000
--- a/docs/assets/js/bootstrap-popover.js
+++ /dev/null
@@ -1,67 +0,0 @@
- /* EXTENDS BOOTSTRAP-TWIPSY.js
-    =========================== */
-
-(function( $ ) {
-
- /* POPOVER PUBLIC CLASS DEFINITION
-  * ============================== */
-
-  var Popover = function ( element, options ) {
-    this.$element = $(element)
-    this.options = options
-    this.enabled = true
-  }
-
-  Popover.prototype = $.extend({}, $.fn.twipsy.Twipsy.prototype, {
-
-    setContent: function () {
-      var $tip = this.tip()
-      $tip.find('.title')[this.options.html ? 'html' : 'text'](this.getTitle())
-      $tip.find('.content p')[this.options.html ? 'html' : 'text'](this.getContent())
-      $tip[0].className = 'popover'
-    }
-
-  , fixTitle: function () {}
-
-  , getTitle: function () {
-      var title
-      if (typeof this.options.title == 'string') {
-        title = this.$element.attr('data-title') || this.options.title
-      } else if (typeof this.options.title == 'function') {
-        title = this.options.title.call(this.$element[0])
-      }
-      return title
-    }
-
-  , getContent: function () {content
-      var content
-      if (typeof this.options.content == 'string') {
-        content = this.$element.attr('data-content') || this.options.content
-      } else if (typeof this.options.content == 'function') {
-        content = this.options.content.call(this.$element[0])
-      }
-      return content
-    }
-
-  , tip: function() {
-      if (!this.$tip) {
-        this.$tip = $('<div class="popover" />')
-          .html('<div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div>')
-      }
-      return this.$tip
-    }
-
-  })
-
-
- /* POPOVER PLUGIN DEFINITION
-  * ======================= */
-
-  $.fn.popover = function (options) {
-    if (typeof options == 'object') options = $.extend({}, $.fn.popover.defaults, options)
-    $.fn.twipsy.initWith.call(this, options, Popover)
-  }
-
-  $.fn.popover.defaults = $.extend({}, $.fn.twipsy.defaults, { content: '', placement: 'right'})
-
-})( jQuery || ender )
\ No newline at end of file
diff --git a/docs/assets/js/bootstrap-scrollspy.js b/docs/assets/js/bootstrap-scrollspy.js
deleted file mode 100644
index e69de29bb..000000000
--- a/docs/assets/js/bootstrap-scrollspy.js
+++ /dev/null
diff --git a/docs/assets/js/bootstrap-tabs.js b/docs/assets/js/bootstrap-tabs.js
deleted file mode 100644
index 029ccc65c..000000000
--- a/docs/assets/js/bootstrap-tabs.js
+++ /dev/null
@@ -1,38 +0,0 @@
-(function( $ ){
-
-  function activate ( element, container ) {
-    container.find('.active').removeClass('active')
-    element.addClass('active')
-  }
-
-  function tab( e ) {
-    var $this = $(this)
-      , href = $this.attr('href')
-      , $ul = $(e.liveFired)
-      , $controlled
-
-    if (/^#\w+/.test(href)) {
-      e.preventDefault()
-
-      if ($this.hasClass('active')) {
-        return
-      }
-
-      $href = $(href)
-
-      activate($this.parent('li'), $ul)
-      activate($href, $href.parent())
-    }
-  }
-
-
- /* TABS/PILLS PLUGIN DEFINITION
-  * ============================ */
-
-  $.fn.tabs = $.fn.pills = function () {
-    return this.each(function () {
-      $(this).delegate('.tabs > li > a, .pills > li > a, .dropdown-menu > li > a', 'click', tab)
-    })
-  }
-
-})( jQuery || ender )
\ No newline at end of file
diff --git a/docs/assets/js/bootstrap-twipsy.js b/docs/assets/js/bootstrap-twipsy.js
deleted file mode 100644
index 3d117a445..000000000
--- a/docs/assets/js/bootstrap-twipsy.js
+++ /dev/null
@@ -1,288 +0,0 @@
-/* Adapted from the original jQuery.tipsy by Jason Frame */
-
-(function( $ ) {
-
- /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
-  * ======================================================= */
-
-  var transitionEnd
-
-  $(function () {
-
-    $.support.transition = (function () {
-      var thisBody = document.body || document.documentElement
-        , thisStyle = thisBody.style
-        , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
-      return support
-    })()
-
-    // set CSS transition event type
-    if ( $.support.transition ) {
-      transitionEnd = "TransitionEnd"
-      if ( $.browser.webkit ) {
-      	transitionEnd = "webkitTransitionEnd"
-      } else if ( $.browser.mozilla ) {
-      	transitionEnd = "transitionend"
-      } else if ( $.browser.opera ) {
-      	transitionEnd = "oTransitionEnd"
-      }
-    }
-
-  })
-
-
- /* TWIPSY PUBLIC CLASS DEFINITION
-  * ============================== */
-
-  var Twipsy = function ( element, options ) {
-    this.$element = $(element)
-    this.options = options
-    this.enabled = true
-    this.fixTitle()
-  }
-
-  Twipsy.prototype = {
-
-    show: function() {
-      var pos
-        , actualWidth
-        , actualHeight
-        , placement
-        , $tip
-        , tp
-
-      if (this.getTitle() && this.enabled) {
-        $tip = this.tip()
-        this.setContent()
-
-        if (this.options.animate) {
-          $tip.addClass('fade')
-        }
-
-        $tip
-          .remove()
-          .css({ top: 0, left: 0, display: 'block' })
-          .prependTo(document.body)
-
-        pos = $.extend({}, this.$element.offset(), {
-          width: this.$element[0].offsetWidth
-        , height: this.$element[0].offsetHeight
-        })
-
-        actualWidth = $tip[0].offsetWidth
-        actualHeight = $tip[0].offsetHeight
-        placement = _.maybeCall(this.options.placement, this.$element[0])
-
-        switch (placement) {
-          case 'below':
-            tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}
-            break
-          case 'above':
-            tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}
-            break
-          case 'left':
-            tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset}
-            break
-          case 'right':
-            tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset}
-            break
-        }
-
-        $tip
-          .css(tp)
-          .addClass(placement)
-          .addClass('in')
-      }
-    }
-
-  , setContent: function () {
-      var $tip = this.tip()
-      $tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](this.getTitle())
-      $tip[0].className = 'twipsy'
-    }
-
-  , hide: function() {
-      var that = this
-        , $tip = this.tip()
-
-      $tip.removeClass('in')
-
-      function removeElement () {
-        $tip.remove()
-      }
-
-      $.support.transition && this.$tip.hasClass('fade') ?
-        $tip.bind(transitionEnd, removeElement) :
-        removeElement()
-    }
-
-  , fixTitle: function() {
-      var $e = this.$element
-      if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
-        $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title')
-      }
-    }
-
-  , getTitle: function() {
-      var title
-        , $e = this.$element
-        , o = this.options
-
-        this.fixTitle()
-
-        if (typeof o.title == 'string') {
-          title = $e.attr(o.title == 'title' ? 'data-original-title' : o.title)
-        } else if (typeof o.title == 'function') {
-          title = o.title.call($e[0])
-        }
-
-        title = ('' + title).replace(/(^\s*|\s*$)/, "")
-
-        return title || o.fallback
-    }
-
-  , tip: function() {
-      if (!this.$tip) {
-        this.$tip = $('<div class="twipsy" />').html('<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>')
-      }
-      return this.$tip
-    }
-
-  , validate: function() {
-      if (!this.$element[0].parentNode) {
-        this.hide()
-        this.$element = null
-        this.options = null
-      }
-    }
-
-  , enable: function() {
-      this.enabled = true
-    }
-
-  , disable: function() {
-      this.enabled = false
-    }
-
-  , toggleEnabled: function() {
-      this.enabled = !this.enabled
-    }
-
-  }
-
-
- /* TWIPSY PRIVATE METHODS
-  * ====================== */
-
-   var _ = {
-
-     maybeCall: function ( thing, ctx ) {
-       return (typeof thing == 'function') ? (thing.call(ctx)) : thing
-     }
-
-   }
-
-
- /* TWIPSY PLUGIN DEFINITION
-  * ======================== */
-
-  $.fn.twipsy = function (options) {
-    $.fn.twipsy.initWith.call(this, options, Twipsy)
-  }
-
-  $.fn.twipsy.initWith = function (options, Constructor) {
-
-    var twipsy
-      , binder
-      , eventIn
-      , eventOut
-
-    if (options === true) {
-      return this.data('twipsy')
-    } else if (typeof options == 'string') {
-      twipsy = this.data('twipsy')
-      if (twipsy) {
-        twipsy[options]()
-      }
-      return this
-    }
-
-    options = $.extend({}, $.fn.twipsy.defaults, options)
-
-    function get(ele) {
-      var twipsy = $.data(ele, 'twipsy')
-
-      if (!twipsy) {
-        twipsy = new Constructor(ele, $.fn.twipsy.elementOptions(ele, options))
-        $.data(ele, 'twipsy', twipsy)
-      }
-
-      return twipsy
-    }
-
-    function enter() {
-      var twipsy = get(this)
-      twipsy.hoverState = 'in'
-
-      if (options.delayIn == 0) {
-        twipsy.show()
-      } else {
-        twipsy.fixTitle()
-        setTimeout(function() {
-          if (twipsy.hoverState == 'in') {
-            twipsy.show()
-          }
-        }, options.delayIn)
-      }
-    }
-
-    function leave() {
-      var twipsy = get(this)
-      twipsy.hoverState = 'out'
-      if (options.delayOut == 0) {
-        twipsy.hide()
-      } else {
-        setTimeout(function() {
-          if (twipsy.hoverState == 'out') {
-            twipsy.hide()
-          }
-        }, options.delayOut)
-      }
-    }
-
-    if (!options.live) {
-      this.each(function() {
-        get(this)
-      })
-    }
-
-    if (options.trigger != 'manual') {
-      binder   = options.live ? 'live' : 'bind'
-      eventIn  = options.trigger == 'hover' ? 'mouseenter' : 'focus'
-      eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur'
-      this[binder](eventIn, enter)[binder](eventOut, leave)
-    }
-
-    return this
-  }
-
-  $.fn.twipsy.Twipsy = Twipsy
-
-  $.fn.twipsy.defaults = {
-    animate: true
-  , delayIn: 0
-  , delayOut: 0
-  , fallback: ''
-  , placement: 'above'
-  , html: false
-  , live: false
-  , offset: 0
-  , title: 'title'
-  , trigger: 'hover'
-  }
-
-  $.fn.twipsy.elementOptions = function(ele, options) {
-    return $.metadata ? $.extend({}, options, $(ele).metadata()) : options
-  }
-
-})( jQuery || ender )
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 558f3fcf2..4a3f1a8c4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -82,7 +82,7 @@
             <h6>Hotlink the CSS</h6>
             <p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
             <form>
-              <textarea class="copy-code" rows="1">&lt;link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css"></textarea>
+              <textarea class="copy-code" rows="1">&lt;link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.3.0.min.css"></textarea>
             </form>
           </div>
           <div class="span5">
diff --git a/docs/javascript.html b/docs/javascript.html
index 932bfc27e..7d1c6d6ca 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -16,12 +16,12 @@
     <script src="assets/js/google-code-prettify/prettify.js"></script>
     <script>$(function () { prettyPrint() })</script>
     <script src="assets/js/application-scrollspy.js"></script>
-    <script src="assets/js/bootstrap-modal.js"></script>
-    <script src="assets/js/bootstrap-alerts.js"></script>
-    <script src="assets/js/bootstrap-twipsy.js"></script>
-    <script src="assets/js/bootstrap-popover.js"></script>
-    <script src="assets/js/bootstrap-dropdown.js"></script>
-    <script src="assets/js/bootstrap-tabs.js"></script>
+    <script src="../js/bootstrap-modal.js"></script>
+    <script src="../js/bootstrap-alerts.js"></script>
+    <script src="../js/bootstrap-twipsy.js"></script>
+    <script src="../js/bootstrap-popover.js"></script>
+    <script src="../js/bootstrap-dropdown.js"></script>
+    <script src="../js/bootstrap-tabs.js"></script>
 
     <!-- Le styles -->
     <link href="../bootstrap-1.3.0.css" rel="stylesheet">
@@ -45,11 +45,11 @@
           <h3><a href="#">Bootstrap JS</a></h3>
           <ul>
             <li><a href="#modal">Modals</a></li>
-            <li><a href="#alerts">Alerts</a></li>
             <li><a href="#dropdown">Dropdown</a></li>
             <li><a href="#tabs">Tabs</a></li>
             <li><a href="#twipsy">Twipsy</a></li>
             <li><a href="#popover">Popover</a></li>
+            <li><a href="#alerts">Alerts</a></li>
           </ul>
         </div>
       </div>
@@ -67,7 +67,7 @@
       <div class="row">
         <div class="span4 columns">
           <p>Our Modal plugin is a <strong>super</strong> slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.</p>
-          <a href="assets/js/bootstrap-modal.js" target="_blank" class="btn primary">Download</a>
+          <a href="../js/bootstrap-modal.js" target="_blank" class="btn primary">Download</a>
         </div>
         <div class="span12 columns">
           <h2>Using bootstrap-modal</h2>
@@ -76,24 +76,25 @@
           <ul>
             <li><strong>backdrop</strong> (<code>boolean</code>) - if true, it will include a modal-backdrop element.</li>
             <li><strong>closeOnEscape</strong> (<code>boolean</code>) - if true, it will close the modal when escape key is pressed.</li>
-            <li><strong>content</strong> (<code>string</code>) - alternative way of supplying modal class with HTML content.</li>
           </ul>
           <h3>Methods</h3>
           <h4>$().modal</h4>
-          <p>Returns an instance of the modal class. Accepts an optional options <code>object</code>. If you want your modal to fade in and out, just add a <code>.fade</code> class to your <code>.modal</code> element (refer to the demo to see this in action).</p>
+          <p>Activates your content as a modal. Accepts an optional options <code>object</code>. If you want your modal to fade in and out, just add a <code>.fade</code> class to your <code>.modal</code> element (refer to the demo to see this in action).</p>
 <pre class="prettyprint linenums">
 $('#modal-content').modal({
   closeOnEscape: true
 })</pre>
-          <h4>.toggle</h4>
-          <p>Returns an instance of the modal class. Toggle the modal open state.</p>
-          <pre class="prettyprint linenums">$('#modal-content').modal().toggle()</pre>
-          <h4>.open</h4>
-          <p>Returns an instance of the modal class. Opens the modal.</p>
-          <pre class="prettyprint linenums">$('#modal-content').modal().open()</pre>
-          <h4>.close</h4>
-          <p>Returns an instance of the modal class. Closes the modal.</p>
-          <pre class="prettyprint linenums">$('#modal-content').modal().close()</pre>
+          <h3>Events</h3>
+          <p>Trigger events to make things happen!</p>
+          <h4>modal:toggle</h4>
+          <p> Toggle the modal open state.</p>
+          <pre class="prettyprint linenums">$('#modal-content').trigger('modal:toggle')</pre>
+          <h4>modal:open</h4>
+          <p>Opens the modal.</p>
+          <pre class="prettyprint linenums">$('#modal-content').trigger('modal:open')</pre>
+          <h4>modal:close</h4>
+          <p>Closes the modal.</p>
+          <pre class="prettyprint linenums">$('#modal-content').trigger('modal:close')</pre>
           <h3>Demo</h3>
 
           <!-- sample modal content -->
@@ -115,13 +116,14 @@ $('#modal-content').modal({
 
           <script>
             $(function () {
+
               var domModal = $("#modal-from-dom").modal({
                 backdrop: true
               , closeOnEscape: true
               })
 
               $('#modal-from-element').click(function () {
-                domModal.toggle()
+                domModal.trigger('modal:toggle')
               })
 
             })
@@ -131,44 +133,6 @@ $('#modal-content').modal({
       </div>
     </section>
 
-    <!-- Alerts
-    ================================================== -->
-
-    <section id="alerts">
-      <div class="page-header">
-        <h1>Alerts <small>bootstrap-alerts.js</small></h1>
-      </div>
-      <div class="row">
-        <div class="span4 columns">
-          <p>The alert plugin is a super tiny class for adding close functionality to alerts.</p>
-          <a href="assets/js/bootstrap-alerts.js" target="_blank" class="btn primary">Download</a>
-        </div>
-        <div class="span12 columns">
-          <h2>Using bootstrap-alert</h2>
-          <pre class="prettyprint linenums">$(".alert-message").alert()</pre>
-          <h3>Methods</h3>
-          <h4>$().alert</h4>
-          <p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
-          <h3>Demo</h3>
-          <div class="alert-message warning fade in">
-            <a class="close" href="#">&times;</a>
-            <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
-          </div>
-          <div class="alert-message block-message error fade in">
-            <a class="close" href="#">&times;</a>
-            <p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
-            <div class="alert-actions">
-              <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
-            </div>
-          </div>
-          <script>
-            $(function () {
-              $(".alert-message").alert()
-            })
-          </script>
-        </div>
-      </div>
-    </section>
 
     <!-- Dropdown
     ================================================== -->
@@ -180,7 +144,7 @@ $('#modal-content').modal({
       <div class="row">
         <div class="span4 columns">
           <p>This plugin is for adding dropdowns to the bootstrap nav.</p>
-          <a href="assets/js/bootstrap-dropdown.js" target="_blank" class="btn primary">Download</a>
+          <a href="../js/bootstrap-dropdown.js" target="_blank" class="btn primary">Download</a>
         </div>
         <div class="span12 columns">
           <h2>Using boostrap-dropdown.js</h2>
@@ -246,7 +210,7 @@ $('#modal-content').modal({
       <div class="row">
         <div class="span4 columns">
           <p>This plugin adds quick, dynamic tab and pill functionality.</p>
-          <a href="assets/js/bootstrap-tabs.js" target="_blank" class="btn primary">Download</a>
+          <a href="../js/bootstrap-tabs.js" target="_blank" class="btn primary">Download</a>
         </div>
         <div class="span12 columns">
           <h2>Using boostrap-tabs.js</h2>
@@ -311,7 +275,7 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita
       <div class="row">
         <div class="span4 columns">
           <p>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage!</p>
-          <a href="assets/js/bootstrap-twipsy.js" target="_blank" class="btn primary">Download</a>
+          <a href="../js/bootstrap-twipsy.js" target="_blank" class="btn primary">Download</a>
         </div>
         <div class="span12 columns">
           <h2>Using bootstrap-twipsy.js</h2>
@@ -358,7 +322,7 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita
       <div class="row">
         <div class="span4 columns">
           <p>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</p>
-          <a href="assets/js/bootstrap-popover.js" target="_blank" class="btn primary">Download</a>
+          <a href="../js/bootstrap-popover.js" target="_blank" class="btn primary">Download</a>
         </div>
         <div class="span12 columns">
           <h2>Using boostrap-popover.js</h2>
@@ -393,6 +357,46 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita
       </div>
     </section>
 
+
+    <!-- Alerts
+    ================================================== -->
+
+    <section id="alerts">
+      <div class="page-header">
+        <h1>Alerts <small>bootstrap-alerts.js</small></h1>
+      </div>
+      <div class="row">
+        <div class="span4 columns">
+          <p>The alert plugin is a super tiny class for adding close functionality to alerts.</p>
+          <a href="../js/bootstrap-alerts.js" target="_blank" class="btn primary">Download</a>
+        </div>
+        <div class="span12 columns">
+          <h2>Using bootstrap-alert</h2>
+          <pre class="prettyprint linenums">$(".alert-message").alert()</pre>
+          <h3>Methods</h3>
+          <h4>$().alert</h4>
+          <p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
+          <h3>Demo</h3>
+          <div class="alert-message warning fade in">
+            <a class="close" href="#">&times;</a>
+            <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
+          </div>
+          <div class="alert-message block-message error fade in">
+            <a class="close" href="#">&times;</a>
+            <p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
+            <div class="alert-actions">
+              <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+            </div>
+          </div>
+          <script>
+            $(function () {
+              $(".alert-message").alert()
+            })
+          </script>
+        </div>
+      </div>
+    </section>
+
     </div>
   </body>
 </html>
\ No newline at end of file