Bootstrapify the webui

public/scripts/3rdparty/bootstrap-alerts.js

@@ -0,0 +1,113 @@
+/* ==========================================================
+ * bootstrap-alerts.js v1.4.0
+ * http://twitter.github.com/bootstrap/javascript.html#alerts
+ * ==========================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+
+!function( $ ){
+
+  "use strict"
+
+  /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
+   * ======================================================= */
+
+   var transitionEnd
+
+   $(document).ready(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, options ) {
+    this.settings = $.extend({}, $.fn.alert.defaults, options)
+    this.$element = $(content)
+      .delegate(this.settings.selector, 'click', this.close)
+  }
+
+  Alert.prototype = {
+
+    close: function (e) {
+      var $element = $(this).parent('.alert-message')
+
+      e && e.preventDefault()
+      $element.removeClass('in')
+
+      function removeElement () {
+        $element.remove()
+      }
+
+      $.support.transition && $element.hasClass('fade') ?
+        $element.bind(transitionEnd, removeElement) :
+        removeElement()
+    }
+
+  }
+
+
+ /* ALERT PLUGIN DEFINITION
+  * ======================= */
+
+  $.fn.alert = function ( options ) {
+
+    if ( options === true ) {
+      return this.data('alert')
+    }
+
+    return this.each(function () {
+      var $this = $(this)
+
+      if ( typeof options == 'string' ) {
+        return $this.data('alert')[options]()
+      }
+
+      $(this).data('alert', new Alert( this, options ))
+
+    })
+  }
+
+  $.fn.alert.defaults = {
+    selector: '.close'
+  }
+
+  $(document).ready(function () {
+    new Alert($('body'), {
+      selector: '.alert-message[data-alert] .close'
+    })
+  })
+
+}( window.jQuery || window.ender );

public/scripts/3rdparty/bootstrap-dropdown.js

@@ -0,0 +1,55 @@
+/* ============================================================
+ * bootstrap-dropdown.js v1.4.0
+ * http://twitter.github.com/bootstrap/javascript.html#dropdown
+ * ============================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============================================================ */
+
+
+!function( $ ){
+
+  "use strict"
+
+  /* DROPDOWN PLUGIN DEFINITION
+   * ========================== */
+
+  $.fn.dropdown = function ( selector ) {
+    return this.each(function () {
+      $(this).delegate(selector || d, 'click', function (e) {
+        var li = $(this).parent('li')
+          , isActive = li.hasClass('open')
+
+        clearMenus()
+        !isActive && li.toggleClass('open')
+        return false
+      })
+    })
+  }
+
+  /* APPLY TO STANDARD DROPDOWN ELEMENTS
+   * =================================== */
+
+  var d = 'a.menu, .dropdown-toggle'
+
+  function clearMenus() {
+    $(d).parent('li').removeClass('open')
+  }
+
+  $(function () {
+    $('html').bind("click", clearMenus)
+    $('body').dropdown( '[data-dropdown] a.menu, [data-dropdown] .dropdown-toggle' )
+  })
+
+}( window.jQuery || window.ender );

public/scripts/3rdparty/bootstrap-modal.js

@@ -0,0 +1,260 @@
+/* =========================================================
+ * bootstrap-modal.js v1.4.0
+ * http://twitter.github.com/bootstrap/javascript.html#modal
+ * =========================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================= */
+
+
+!function( $ ){
+
+  "use strict"
+
+ /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
+  * ======================================================= */
+
+  var transitionEnd
+
+  $(document).ready(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 ( content, options ) {
+    this.settings = $.extend({}, $.fn.modal.defaults, options)
+    this.$element = $(content)
+      .delegate('.close', 'click.modal', $.proxy(this.hide, this))
+
+    if ( this.settings.show ) {
+      this.show()
+    }
+
+    return this
+  }
+
+  Modal.prototype = {
+
+      toggle: function () {
+        return this[!this.isShown ? 'show' : 'hide']()
+      }
+
+    , show: function () {
+        var that = this
+        this.isShown = true
+        this.$element.trigger('show')
+
+        escape.call(this)
+        backdrop.call(this, function () {
+          var transition = $.support.transition && that.$element.hasClass('fade')
+
+          that.$element
+            .appendTo(document.body)
+            .show()
+
+          if (transition) {
+            that.$element[0].offsetWidth // force reflow
+          }
+
+          that.$element.addClass('in')
+
+          transition ?
+            that.$element.one(transitionEnd, function () { that.$element.trigger('shown') }) :
+            that.$element.trigger('shown')
+
+        })
+
+        return this
+      }
+
+    , hide: function (e) {
+        e && e.preventDefault()
+
+        if ( !this.isShown ) {
+          return this
+        }
+
+        var that = this
+        this.isShown = false
+
+        escape.call(this)
+
+        this.$element
+          .trigger('hide')
+          .removeClass('in')
+
+        $.support.transition && this.$element.hasClass('fade') ?
+          hideWithTransition.call(this) :
+          hideModal.call(this)
+
+        return this
+      }
+
+  }
+
+
+ /* MODAL PRIVATE METHODS
+  * ===================== */
+
+  function hideWithTransition() {
+    // firefox drops transitionEnd events :{o
+    var that = this
+      , timeout = setTimeout(function () {
+          that.$element.unbind(transitionEnd)
+          hideModal.call(that)
+        }, 500)
+
+    this.$element.one(transitionEnd, function () {
+      clearTimeout(timeout)
+      hideModal.call(that)
+    })
+  }
+
+  function hideModal (that) {
+    this.$element
+      .hide()
+      .trigger('hidden')
+
+    backdrop.call(this)
+  }
+
+  function backdrop ( callback ) {
+    var that = this
+      , animate = this.$element.hasClass('fade') ? 'fade' : ''
+    if ( this.isShown && this.settings.backdrop ) {
+      var doAnimate = $.support.transition && animate
+
+      this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
+        .appendTo(document.body)
+
+      if ( this.settings.backdrop != 'static' ) {
+        this.$backdrop.click($.proxy(this.hide, this))
+      }
+
+      if ( doAnimate ) {
+        this.$backdrop[0].offsetWidth // force reflow
+      }
+
+      this.$backdrop.addClass('in')
+
+      doAnimate ?
+        this.$backdrop.one(transitionEnd, callback) :
+        callback()
+
+    } else if ( !this.isShown && this.$backdrop ) {
+      this.$backdrop.removeClass('in')
+
+      $.support.transition && this.$element.hasClass('fade')?
+        this.$backdrop.one(transitionEnd, $.proxy(removeBackdrop, this)) :
+        removeBackdrop.call(this)
+
+    } else if ( callback ) {
+       callback()
+    }
+  }
+
+  function removeBackdrop() {
+    this.$backdrop.remove()
+    this.$backdrop = null
+  }
+
+  function escape() {
+    var that = this
+    if ( this.isShown && this.settings.keyboard ) {
+      $(document).bind('keyup.modal', function ( e ) {
+        if ( e.which == 27 ) {
+          that.hide()
+        }
+      })
+    } else if ( !this.isShown ) {
+      $(document).unbind('keyup.modal')
+    }
+  }
+
+
+ /* MODAL PLUGIN DEFINITION
+  * ======================= */
+
+  $.fn.modal = function ( options ) {
+    var modal = this.data('modal')
+
+    if (!modal) {
+
+      if (typeof options == 'string') {
+        options = {
+          show: /show|toggle/.test(options)
+        }
+      }
+
+      return this.each(function () {
+        $(this).data('modal', new Modal(this, options))
+      })
+    }
+
+    if ( options === true ) {
+      return modal
+    }
+
+    if ( typeof options == 'string' ) {
+      modal[options]()
+    } else if ( modal ) {
+      modal.toggle()
+    }
+
+    return this
+  }
+
+  $.fn.modal.Modal = Modal
+
+  $.fn.modal.defaults = {
+    backdrop: false
+  , keyboard: false
+  , show: false
+  }
+
+
+ /* MODAL DATA- IMPLEMENTATION
+  * ========================== */
+
+  $(document).ready(function () {
+    $('body').delegate('[data-controls-modal]', 'click', function (e) {
+      e.preventDefault()
+      var $this = $(this).data('show', true)
+      $('#' + $this.attr('data-controls-modal')).modal( $this.data() )
+    })
+  })
+
+}( window.jQuery || window.ender );

public/scripts/3rdparty/bootstrap-popover.js

@@ -0,0 +1,90 @@
+/* ===========================================================
+ * bootstrap-popover.js v1.4.0
+ * http://twitter.github.com/bootstrap/javascript.html#popover
+ * ===========================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================================================== */
+
+
+!function( $ ) {
+
+ "use strict"
+
+  var Popover = function ( element, options ) {
+    this.$element = $(element)
+    this.options = options
+    this.enabled = true
+    this.fixTitle()
+  }
+
+  /* NOTE: POPOVER EXTENDS BOOTSTRAP-TWIPSY.js
+     ========================================= */
+
+  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'
+    }
+
+  , hasContent: function () {
+      return this.getTitle() || this.getContent()
+    }
+
+  , getContent: function () {
+      var content
+       , $e = this.$element
+       , o = this.options
+
+      if (typeof this.options.content == 'string') {
+        content = $e.attr(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(this.options.template)
+      }
+      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, 'popover')
+    return this
+  }
+
+  $.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, {
+    placement: 'right'
+  , content: 'data-content'
+  , template: '<div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div>'
+  })
+
+  $.fn.twipsy.rejectAttrOptions.push( 'content' )
+
+}( window.jQuery || window.ender );

public/scripts/3rdparty/bootstrap-tabs.js

@@ -0,0 +1,80 @@
+/* ========================================================
+ * bootstrap-tabs.js v1.4.0
+ * http://twitter.github.com/bootstrap/javascript.html#tabs
+ * ========================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ======================================================== */
+
+
+!function( $ ){
+
+  "use strict"
+
+  function activate ( element, container ) {
+    container
+      .find('> .active')
+      .removeClass('active')
+      .find('> .dropdown-menu > .active')
+      .removeClass('active')
+
+    element.addClass('active')
+
+    if ( element.parent('.dropdown-menu') ) {
+      element.closest('li.dropdown').addClass('active')
+    }
+  }
+
+  function tab( e ) {
+    var $this = $(this)
+      , $ul = $this.closest('ul:not(.dropdown-menu)')
+      , href = $this.attr('href')
+      , previous
+      , $href
+
+    if ( /^#\w+/.test(href) ) {
+      e.preventDefault()
+
+      if ( $this.parent('li').hasClass('active') ) {
+        return
+      }
+
+      previous = $ul.find('.active a').last()[0]
+      $href = $(href)
+
+      activate($this.parent('li'), $ul)
+      activate($href, $href.parent())
+
+      $this.trigger({
+        type: 'change'
+      , relatedTarget: previous
+      })
+    }
+  }
+
+
+ /* TABS/PILLS PLUGIN DEFINITION
+  * ============================ */
+
+  $.fn.tabs = $.fn.pills = function ( selector ) {
+    return this.each(function () {
+      $(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab)
+    })
+  }
+
+  $(document).ready(function () {
+    $('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a')
+  })
+
+}( window.jQuery || window.ender );

public/scripts/3rdparty/bootstrap-twipsy.js

@@ -0,0 +1,321 @@
+/* ==========================================================
+ * bootstrap-twipsy.js v1.4.0
+ * http://twitter.github.com/bootstrap/javascript.html#twipsy
+ * Adapted from the original jQuery.tipsy by Jason Frame
+ * ==========================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+
+!function( $ ) {
+
+  "use strict"
+
+ /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
+  * ======================================================= */
+
+  var transitionEnd
+
+  $(document).ready(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.hasContent() && 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, [ $tip[0], 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')
+      }
+    }
+
+  , hasContent: function () {
+      return this.getTitle()
+    }
+
+  , 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() {
+      return this.$tip = this.$tip || $('<div class="twipsy" />').html(this.options.template)
+    }
+
+  , 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
+    }
+
+  , toggle: function () {
+      this[this.tip().hasClass('in') ? 'hide' : 'show']()
+    }
+
+  }
+
+
+ /* TWIPSY PRIVATE METHODS
+  * ====================== */
+
+   function maybeCall ( thing, ctx, args ) {
+     return typeof thing == 'function' ? thing.apply(ctx, args) : thing
+   }
+
+ /* TWIPSY PLUGIN DEFINITION
+  * ======================== */
+
+  $.fn.twipsy = function (options) {
+    $.fn.twipsy.initWith.call(this, options, Twipsy, 'twipsy')
+    return this
+  }
+
+  $.fn.twipsy.initWith = function (options, Constructor, name) {
+    var twipsy
+      , binder
+      , eventIn
+      , eventOut
+
+    if (options === true) {
+      return this.data(name)
+    } else if (typeof options == 'string') {
+      twipsy = this.data(name)
+      if (twipsy) {
+        twipsy[options]()
+      }
+      return this
+    }
+
+    options = $.extend({}, $.fn[name].defaults, options)
+
+    function get(ele) {
+      var twipsy = $.data(ele, name)
+
+      if (!twipsy) {
+        twipsy = new Constructor(ele, $.fn.twipsy.elementOptions(ele, options))
+        $.data(ele, name, 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'
+  , template: '<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>'
+  }
+
+  $.fn.twipsy.rejectAttrOptions = [ 'title' ]
+
+  $.fn.twipsy.elementOptions = function(ele, options) {
+    var data = $(ele).data()
+      , rejects = $.fn.twipsy.rejectAttrOptions
+      , i = rejects.length
+
+    while (i--) {
+      delete data[rejects[i]]
+    }
+
+    return $.extend({}, options, data)
+  }
+
+}( window.jQuery || window.ender );

public/scripts/3rdparty/jquery.chained.js

@@ -0,0 +1,73 @@
+/*
+ * Chained - jQuery non AJAX(J) chained selects plugin
+ *
+ * Copyright (c) 2010-2011 Mika Tuupola
+ *
+ * Licensed under the MIT license:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *
+ */
+
+(function($) {
+
+    $.fn.chained = function(parent_selector, options) { 
+        
+        return this.each(function() {
+            
+            /* Save this to self because this changes when scope changes. */            
+            var self   = this;
+            var backup = $(self).clone();
+                        
+            /* Handles maximum two parents now. */
+            $(parent_selector).each(function() {
+                                                
+                $(this).bind("change", function() {
+                    $(self).html(backup.html());
+
+                    /* If multiple parents build classname like foo\bar. */
+                    var selected = "";
+                    $(parent_selector).each(function() {
+                        selected += "\\" + $(":selected", this).val();
+                    });
+                    selected = selected.substr(1);
+
+                    /* Also check for first parent without subclassing. */
+                    /* TODO: This should be dynamic and check for each parent */
+                    /*       without subclassing. */
+                    var first = $(parent_selector).first();
+                    var selected_first = $(":selected", first).val();
+                
+                    $("option", self).each(function() {
+                        /* Remove unneeded items but save the default value. */
+                        if (!$(this).hasClass(selected) && 
+                            !$(this).hasClass(selected_first) && $(this).val() !== "") {
+                                $(this).remove();
+                        }                        
+                    });
+                
+                    /* If we have only the default value disable select. */
+                    if (1 == $("option", self).size() && $(self).val() === "") {
+                        $(self).attr("disabled", "disabled");
+                    } else {
+                        $(self).removeAttr("disabled");
+                    }
+                    $(self).trigger("change");
+                });
+                
+                /* Force IE to see something selected on first page load, */
+                /* unless something is already selected */
+                if ( !$("option:selected", this).length ) {
+                    $("option", this).first().attr("selected", "selected");
+                }
+        
+                /* Force updating the children. */
+                $(this).trigger("change");             
+
+            });
+        });
+    };
+    
+    /* Alias for those who like to use more English like syntax. */
+    $.fn.chainedTo = $.fn.chained;
+    
+})(jQuery);

public/scripts/main.js

@@ -145,7 +145,22 @@ var rc = {
     page: {
         
         init: function() {
-        
+            $('.progressBar').each(
+                function() {
+                    $(this).progressBar({
+                        steps: 100,
+                        width: 120,
+                        height: 12,
+                        boxImage: base_uri + 'images/jquery.progressbar/progressbar.gif',
+                        barImage: {
+                            0:  base_uri + 'images/jquery.progressbar/progressbg_red.gif',
+                            25: base_uri + 'images/jquery.progressbar/progressbg_orange.gif',
+                            50: base_uri + 'images/jquery.progressbar/progressbg_yellow.gif',
+                            75: base_uri + 'images/jquery.progressbar/progressbg_green.gif',
+                        }
+                    });
+                }
+            );
         },
         
         update: function(d) {

public/styles/normal.css

@@ -1,105 +1,44 @@
-body {
+/**
+ * StatusBoard normal stylesheet
+ *
+ */
+@import url('http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css'); 
+@CHARSET "UTF-8";
+
+@media all {
+    body {
         margin: 0em;
+        margin-top: 60px;
+        padding-top: 40px;
         padding: 0em;
-    background: #a7a09a;
         font-family: verdana, helvetica, sans-serif;
-}
+/*        background: #F7F7F7;*/
+    }
     
-a {
+    a {
         color: gray;
-}
+    }
     
-label {
+    label {
         margin-left: 1em;
         margin-right: 1em;
-}
+    }
     
-#container {
+    footer {
-    width: 75%;
-    min-width: 75em;
-    margin: auto;
-}
-
-#banner {
-    margin: 0em;
-    padding: 0em;
-    background: #eeeeee;
-}
-
-#banner h1 {
-    padding: 0.5em;
-}
-
-#navigation {
-    background: #eeeeee;
-    margin-top: 0em;
-    margin-bottom: 1em;
-    padding: 0.2em;
-}
-
-#navigation ul {
-   margin: 0em;
-   padding: 0em 5em;;
-   list-style: none;
-}
-
-#navigation li {
-    margin: 1em;
-    padding: 0em;
-    display: inline;
-}
-
-#page-container {
-    margin: 0em;
-    padding: 0em;
-}
-
-#sidebar {
-    float: left;
-    width: 20em;
-    margin-bottom: 1em;
-
-    background: #eeeeee;
-}
-
-#page {
-    margin-left: 21em;
-    margin-bottom: 1em;
-    padding: 0.5em;
-
-    background: #eeeeee;
-}
-
-#footer {
-    clear: both;
         padding: 2em;
         font-size: smaller;
         font-style: italic;
-
-    background: #eeeeee;
         color: #333333;
+        text-align: center;
+    }
     
-}
+    /* Centred dialog taken from http://stackoverflow.com/questions/1205457/how-to-design-a-css-for-a-centered-floating-confirm-dialog */
-
+    #centrepoint {
-#errors {
-    background: peachpuff;
-    color: darkred;
-    margin: 1em;
-}
-
-#messages {
-    background: lightcyan;
-    color: darkblue;
-    margin: 1em;
-}
-
-/* Centred dialog taken from http://stackoverflow.com/questions/1205457/how-to-design-a-css-for-a-centered-floating-confirm-dialog */
-#centrepoint {
         top: 50%;
         left: 50%;
         position: absolute;
-}
+    }
-#dialog {
+    #dialog {
         position: relative;
         width: 600px;
         margin-left: -300px;
@@ -109,18 +48,18 @@ label {
         display: none;
         background: #eeeeee;
         border: 2px solid #a7a09a;
-}
+    }
-#dialogheader {
+    #dialogheader {
         height: 2em;
         width: 100%; 
         margin: 0.3em;
-}
+    }
-#dialogheadertitle {
+    #dialogheadertitle {
         color: black;
         font-weight: bold;
         float: left;
-}
+    }
-#dialogheaderclose {
+    #dialogheaderclose {
         width: 1.2em;
         height: 1.2em;
         background-color: crimson;
@@ -133,58 +72,47 @@ label {
         display: table-cell;
         font-weight: bold;
         cursor: pointer;
-}
+    }
-#dialogcontent {
+    #dialogcontent {
         padding: 0.5em;
-}
+    }
-.dialogfooterbuttonset {
+    .dialogfooterbuttonset {
         display: none;
         text-align: right;
-}
+    }
     
-table#settings {
+    .default {
-        
-}
-
-table#settings td {
-    padding: 1.0em;
-    border: 1px solid;
-    border-collapse: collapse;    
-}
-
-table#settings input[type=text] {
-    width: 40em;    
-}
-table#settings input.hash_key {
-	width: 10em;
-}
-table#settings input.hash_value {
-	width: 25em;
-}
-.settings_addfieldcontainer {
-    text-align: right;    
-}
-
-.default {
         background: beige;
         color: darkgray;
         font-style: italic;
-}
+    }
     
-.icon {
+    .icon {
         height: 16px;
         width: 16px;
-}
+    }
     
-form#setup-rips input[type="text"] {
+    form#setup-rips input[type="text"] {
     	width: 30em;
-}
+    }
     
-#quantizer-slider {
+    #quantizer-slider {
     	width: 20em;	
-}
+    }
     
-select.rip-streams {
+    select.rip-streams {
         width: 20em;
+    }
 }
 
+@media print {
+    
+    .no-print {
+        display: none;
+    }
+    
+    body {
+        margin: 0;
+    }
+    
+}

source/lib/RippingCluster/Main.class.php

@@ -42,6 +42,7 @@ class RippingCluster_Main extends SihnonFramework_Main {
                  
                 $this->smarty->assign('base_uri', $this->base_uri);
                 $this->smarty->assign('base_url', static::absoluteUrl(''));
+                $this->smarty->assign('title', 'Ripping Cluster WebUI');
                                 
             } break;
 

source/webui/templates/home.tpl

@@ -6,24 +6,6 @@
         {foreach from=$running_jobs item=job}
             <li><a href="{$base_uri}jobs/details/id/{$job->id()}" title="View job details">{$job->name()}</a> <span class="progressBar" id="job_progress_{$job->id()}">{$job->currentStatus()->ripProgress()}%</span> ({RippingCluster_Main::formatDuration($job->calculateETA(), 1)} remaining)</li>
         {/foreach}
-        <script type="text/javascript">
-            $('.progressBar').each(
-                function() {
-                    $(this).progressBar({
-                        steps: 100,
-                        width: 120,
-                        height: 12,
-                        boxImage: '{$base_uri}images/jquery.progressbar/progressbar.gif',
-                        barImage: {
-                            0:  '{$base_uri}images/jquery.progressbar/progressbg_red.gif',
-                            25: '{$base_uri}images/jquery.progressbar/progressbg_orange.gif',
-                            50: '{$base_uri}images/jquery.progressbar/progressbg_yellow.gif',
-                            75: '{$base_uri}images/jquery.progressbar/progressbg_green.gif',
-                        }
-                    });
-                }
-            );
-        </script>
 {else}
     <em>There are no currently running jobs.</em>
 {/if}

source/webui/templates/index.tpl

@@ -1,9 +1,35 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
     <head>
-        <title>Ripping Cluster WebUI</title>
+        <title>{$title}</title>
-        <script lang="javascript">
+
-        </script>
+        <!-- JQuery //-->
+        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
+        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+        <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" rel="Stylesheet" />
+        <!-- JQuery Plugins //-->
+        <script type="text/javascript" src="{$base_uri}scripts/3rdparty/jquery.chained.js"></script>
+        <script type="text/javascript" src="{$base_uri}scripts/3rdparty/jquery.jec-1.3.2.js"></script>
+        <script type="text/javascript" src="{$base_uri}scripts/3rdparty/jquery.asmselect.js"></script>
+        <link type="text/css" href="{$base_uri}styles/3rdparty/jquery.asmselect.css" rel="Stylesheet" />    
+        <script type="text/javascript" src="{$base_uri}scripts/3rdparty/jquery.progressbar.min.js"></script>
+        
+        <!-- Less //-->
+        <script type="text/javascript" src="{$base_uri}scripts/3rdparty/less-1.1.5.min.js"></script>
+        
+        <!-- Bootstrap //-->
+        <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
+        <script type="text/javascript" src="{$base_uri}scripts/3rdparty/bootstrap-alerts.js"></script>
+        <script type="text/javascript" src="{$base_uri}scripts/3rdparty/bootstrap-twipsy.js"></script>
+        <script type="text/javascript" src="{$base_uri}scripts/3rdparty/bootstrap-popover.js"></script>
+        <script type="text/javascript" src="{$base_uri}scripts/3rdparty/bootstrap-dropdown.js"></script>
+        <script type="text/javascript" src="{$base_uri}scripts/3rdparty/bootstrap-tabs.js"></script>
+        <script type="text/javascript" src="{$base_uri}scripts/3rdparty/bootstrap-modal.js"></script>
+        
+        <!-- Local //-->
+        <script type="text/javascript" src="{$base_uri}scripts/main.js"></script>
+        
+        <link rel="stylesheet/less" href="{$base_uri}less/bootstrap.less" media="all" />
         <link rel="stylesheet" type="text/css" href="{$base_uri}styles/normal.css" />
 
         <script type="text/javascript">
@@ -11,52 +37,65 @@
             var base_url = "{$base_url|escape:'quote'}";
         </script>
         
-        <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" rel="Stylesheet" />
-        <link type="text/css" href="{$base_uri}styles/3rdparty/jquery.asmselect.css" rel="Stylesheet" />	
-		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
-		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
-        <script type="text/javascript" src="{$base_uri}scripts/3rdparty/jquery.jec-1.3.2.js"></script>
-        <script type="text/javascript" src="{$base_uri}scripts/3rdparty/jquery.asmselect.js"></script>
-        <script type="text/javascript" src="{$base_uri}scripts/3rdparty/jquery.progressbar.min.js"></script>
-		<script type="text/javascript" src="{$base_uri}scripts/main.js"></script>
     </head>
     <body>
+        <div class="topbar no-print">
+            <div class="topbar-inner">
+                <div class="container-fluid">
+                    {$page->include_template('navigation')}
+                </div><!-- /tobar-inner -->
+            </div><!-- /container-fliud -->
+        </div><!-- /topbar -->
 
-        <div id="container">
+        <div class="container">
-
+            <div class="row">
-            <div id="banner">
+                <div class="span16">
-                <h1>Ripping Cluster WebUI</h1>
+                    <h1>RippingCluster WebUI</h1>
+                </div>
             </div>
         
-            <div id="navigation">
+            <div class="row">
-                {include file="navigation.tpl"}
+                {if ! $messages}
-            </div>
+                    {$session = RippingCluster_Main::instance()->session()}
-
+                    {$messages = $session->get('messages')}
-            <div id="page-container">
+                    {$session->delete('messages')}
-            
+                {/if}
-                <div id="sidebar">
-                    {include file="sidebar.tpl"}
-                </div>
-
-                <div id="page">
-
                 {if $messages}
                     <div id="messages">
                         {foreach from=$messages item=message}
-                                {$message}
+                            {if is_array($message)}
-                            {/foreach}
+                                {$severity=$message['severity']}
+                                <div class="alert-message {$severity}">
+                                    {$message['content']|escape:html}
+                                </div>
+                            {else}
+                                <div class="alert-message info">
+                                    {$message|escape:html}
                                 </div>
                             {/if}
+                        {/foreach}
+                    </div><!-- /messages -->
+                {/if}
 
+                <div id="page_content">
                     {$page_content}
-
+                </div>
             </div>
     
-            </div>
+            <footer class="no-print">
-
+                <p>
-            <div id="footer">
                     Powered by RippingCluster WebUI {$version}. Written by Ben Roberts.
-            </div>
+                </p>
+                <p>
+                    This work by <a xmlns:cc="http://creativecommons.org/ns#" href="http://benroberts.net" property="cc:attributionName" rel="cc:attributionURL">Ben Roberts</a>
+                    is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
+                    <br />
+                    
+                    <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">
+                        <img alt="Creative Commons Licence" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" />
+                    </a>
+                </p>
+            </footer>
 
         </div>
         

source/webui/templates/navigation.tpl

@@ -1,5 +1,31 @@
-<ul>
+<a class="brand" href="{$base_uri}home/">RippingCluster</a>
-    <li><a href="{$base_uri}home/" title="Home">Home</a></li>
+
-    <li><a href="{$base_uri}jobs/" title="Jobs">Jobs</a></li>
+<ul class="nav">
-    <li><a href="{$base_uri}logs/" title="Logs">Logs</a></li>
+    <li {if $requested_page == "home"}class="active"{/if}>
+        <a href="{$base_uri}home/" title="Home">Home</a>
+    </li>
+    
+    <li {if $requested_page == "jobs"}class="active"{/if}>
+        <a href="{$base_uri}jobs/" title="Jobs">Jobs</a>
+    </li>
+    
+    <li {if $requested_page == "logs"}class="active"{/if}>
+        <a href="{$base_uri}logs/" title="Logs">Logs</a>
+    </li>
+    
+    <li class="dropdown {if $requested_page == "sources"}active{/if}" data-dropdown="dropdown">
+        <a href="#" class="dropdown-toggle" title="Sources">Sources</a>
+        <ul class="dropdown-menu">
+            <li><a href="{$base_uri}sources/list/" title="All Sources">All</a></li>
+        </ul>
+    </li>
+    
+    <li class="dropdown" data-dropdown="dropdown">
+        <a href="#" class="dropdown-toggle" title="Admin">Admin</a>
+        <ul class="dropdown-menu">
+            <li><a href="{$base_uri}admin/settings/" title="Settings">Settings</a></li>
+        </ul>
+    </li>
+    
 </ul>
+