Merge branch 'develop'

.gitignore

@@ -4,5 +4,5 @@
 .settings
 /config.php
 /dbconfig.conf
-/webui/.htaccess
-/webui/tmp/*
+/public/.htaccess
+

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "externals/sihnon-js-lib"]
+	path = externals/sihnon-js-lib
+	url = ../sihnon-js-lib.git

build/ripping-cluster-worker.conf-gentoo

@@ -0,0 +1,5 @@
+# Which user to run the worker daemon as
+USER="media"
+
+# File to store the running daemon's PID in
+PID_FILE="/var/run/ripping-cluster-worker.pid"

build/ripping-cluster-worker.init-gentoo

@@ -2,8 +2,6 @@
 # Copyright 1999-2010 Gentoo Foundation
 # Distributed under the terms of the GNU General Public License v2
 
-PID_FILE="/var/run/ripping-cluster-worker.pid"
-
 depend() {
 	need localmount net
 	use dns logger puppetmaster netmount nfsmount
@@ -13,7 +11,8 @@ start() {
 	ebegin "Starting ripping-cluster-worker"
 	start-stop-daemon --start --quiet \
 		--background --make-pidfile --pidfile ${PID_FILE} \
-		--exec /usr/bin/php /usr/lib/ripping-cluster/worker/ripping-cluster-worker.php
+		--chuid ${USER} --user ${USER} \
+		--exec /usr/bin/php /usr/lib/ripping-cluster/source/worker/ripping-cluster-worker.php
 	eend $? "Failed to start ripping-cluster-worker"
 }
 
@@ -22,8 +21,10 @@ stop() {
 	start-stop-daemon --stop --quiet \
 		--pidfile ${PID_FILE}
 	local ret=$?
-	eend ${ret} "Failed to stop puppet"
-	rm -f ${PID_FILE}
+	
+	eend ${ret} "Failed to stop ripping-cluster-worker"
+	${ret} || rm -f ${PID_FILE}
+	
 	return ${ret}
 }
 

build/schema/mysql.sql

@@ -0,0 +1,208 @@
+-- phpMyAdmin SQL Dump
+-- version 3.3.0
+-- http://www.phpmyadmin.net
+--
+-- Host: localhost:3306
+-- Generation Time: Jan 11, 2012 at 12:27 AM
+-- Server version: 5.1.53
+-- PHP Version: 5.3.6-pl1-gentoo
+
+SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
+
+--
+-- Database: `ripping-cluster`
+--
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `client_log`
+--
+
+DROP TABLE IF EXISTS `client_log`;
+CREATE TABLE IF NOT EXISTS `client_log` (
+  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
+  `job_id` int(10) unsigned DEFAULT NULL,
+  `level` varchar(32) NOT NULL,
+  `category` varchar(32) NOT NULL,
+  `ctime` int(11) NOT NULL,
+  `pid` int(11) NOT NULL,
+  `hostname` varchar(32) NOT NULL,
+  `progname` varchar(64) NOT NULL,
+  `file` text NOT NULL,
+  `line` int(11) NOT NULL,
+  `message` text NOT NULL,
+  PRIMARY KEY (`id`),
+  KEY `job_id` (`job_id`)
+) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `jobs`
+--
+
+DROP TABLE IF EXISTS `jobs`;
+CREATE TABLE IF NOT EXISTS `jobs` (
+  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
+  `name` varchar(255) NOT NULL,
+  `source_plugin` varchar(255) NOT NULL COMMENT 'Partial classname of the plugin used to read the source',
+  `rip_plugin` varchar(255) NOT NULL COMMENT 'Partial classname of the plugin used to perform the rip',
+  `source` text NOT NULL,
+  `destination` text NOT NULL,
+  `title` varchar(64) NOT NULL,
+  `format` varchar(4) NOT NULL,
+  `video_codec` varchar(8) NOT NULL,
+  `video_width` int(11) DEFAULT NULL,
+  `video_height` int(11) DEFAULT NULL,
+  `quantizer` float NOT NULL,
+  `deinterlace` double NOT NULL,
+  `audio_tracks` varchar(64) NOT NULL,
+  `audio_codecs` varchar(64) NOT NULL,
+  `audio_names` varchar(255) NOT NULL,
+  `subtitle_tracks` varchar(64) NOT NULL,
+  PRIMARY KEY (`id`)
+) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `job_status`
+--
+
+DROP TABLE IF EXISTS `job_status`;
+CREATE TABLE IF NOT EXISTS `job_status` (
+  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
+  `job_id` int(10) unsigned NOT NULL,
+  `status` int(10) unsigned NOT NULL,
+  `ctime` int(10) unsigned NOT NULL,
+  `mtime` int(10) unsigned NOT NULL,
+  `rip_progress` double DEFAULT NULL,
+  PRIMARY KEY (`id`),
+  KEY `job_id` (`job_id`)
+) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `job_status_current`
+--
+
+DROP TABLE IF EXISTS `job_status_current`;
+CREATE ALGORITHM=UNDEFINED DEFINER=`root`@`%` SQL SECURITY DEFINER VIEW `handbrake_cluster`.`job_status_current` AS select `js`.`id` AS `id`,`js`.`job_id` AS `job_id`,`js`.`status` AS `status`,`js`.`ctime` AS `ctime`,`js`.`mtime` AS `mtime`,`js`.`rip_progress` AS `rip_progress` from (`handbrake_cluster`.`job_status` `js` join `handbrake_cluster`.`job_status_current_int` `js2`) where ((`js2`.`job_id` = `js`.`job_id`) and (`js`.`id` = `js2`.`latest`));
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `job_status_current_int`
+--
+
+DROP TABLE IF EXISTS `job_status_current_int`;
+CREATE ALGORITHM=UNDEFINED DEFINER=`root`@`%` SQL SECURITY DEFINER VIEW `handbrake_cluster`.`job_status_current_int` AS (select `handbrake_cluster`.`job_status`.`job_id` AS `job_id`,max(`handbrake_cluster`.`job_status`.`id`) AS `latest` from `handbrake_cluster`.`job_status` group by `handbrake_cluster`.`job_status`.`job_id`);
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `settings`
+--
+
+DROP TABLE IF EXISTS `settings`;
+CREATE TABLE IF NOT EXISTS `settings` (
+  `name` varchar(255) NOT NULL,
+  `value` text NOT NULL,
+  `type` enum('bool','int','float','string','array(string)','hash') DEFAULT 'string',
+  PRIMARY KEY (`name`)
+) ENGINE=MyISAM DEFAULT CHARSET=utf8;
+
+--
+-- Dumping data for table `settings`
+--
+
+INSERT INTO `settings` (`name`, `value`, `type`) VALUES
+('debug.display_exceptions', '1', 'bool'),
+('rips.nice', '15', 'int'),
+('cache.base_dir', '/dev/shm/hbc/', 'string'),
+('rips.cache_ttl', '86400', 'int'),
+('rips.job_servers', 'localhost:7003', 'string'),
+('rips.context', 'dev', 'string'),
+('rips.default.output_directory', '', 'string'),
+('rips.handbrake_binary', '/usr/bin/HandBrakeCLI', 'string'),
+('rips.nice_binary', '/usr/bin/nice', 'string'),
+('source.handbrake.dir', '', 'array(string)'),
+('source.mkvinfo.dir', '', 'array(string)'),
+('source.bluray.dir', '', 'array(string)'),
+('logging.plugins', 'Database\nFlatFile\nConsole', 'array(string)'),
+('logging.Console', 'stdout', 'array(string)'),
+('logging.Console.stdout.format', '%ctime% %hostname%:%pid% %progname%:%file%[%line%] %message%', 'string'),
+('logging.Console.stdout.severity', 'debug\ninfo\nwarning\nerror', 'array(string)'),
+('logging.Console.stdout.category', 'client\nworker', 'array(string)'),
+('logging.Database', 'webui\nworker', 'array(string)'),
+('logging.Database.webui.table', 'client_log', 'string'),
+('logging.Database.webui.severity', 'debug\ninfo\nwarning\ndebug', 'array(string)'),
+('logging.Database.webui.category', 'batch\nclient\ndefault', 'array(string)'),
+('logging.Database.worker.table', 'worker_log', 'string'),
+('logging.Database.worker.severity', 'debug\ninfo\nwarning\nerror', 'array(string)'),
+('logging.Database.worker.category', 'worker', 'array(string)'),
+('logging.FlatFile', 'stderr\nvarlog_worker', 'array(string)'),
+('logging.FlatFile.stderr.filename', 'php://stderr', 'string'),
+('logging.FlatFile.stderr.format', '%timestamp% %hostname%:%pid% %progname%:%file%[%line%] %message%', 'string'),
+('logging.FlatFile.stderr.severity', 'warning\nerror', 'array(string)'),
+('logging.FlatFile.stderr.category', 'batch\nclient\ndefault\nworker', 'array(string)'),
+('logging.FlatFile.varlog_worker.filename', '/var/log/ripping-cluster/worker.log', 'string'),
+('logging.FlatFile.varlog_worker.format', '%timestamp% %hostname%:%pid% %progname%:%file%[%line%] %message%', 'string'),
+('logging.FlatFile.varlog_worker.severity', 'debug\ninfo\nwarning\nerror', 'array(string)'),
+('logging.FlatFile.varlog_worker.category', 'worker', 'array(string)'),
+('logging.Syslog', 'local0', 'array(string)'),
+('logging.Syslog.local0.facility', '128', 'int'),
+('logging.Syslog.local0.severity', 'debug\ninfo\nwarning\nerror', 'array(string)'),
+('logging.Syslog.local0.category', 'batch\nclient\ndefault\nworker', 'array(string)'),
+('logging.Syslog.local0.format', '%file%[%line%] %message%', 'string'),
+('templates.tmp_path', '/var/tmp/ripping-cluster', 'string'),
+('rips.temp_dir', '/tmp', 'string'),
+('job.logs.default_display_count', '30', 'int'),
+('job.logs.default_order', 'DESC', 'string'),
+('rips.output_directories.default', '', 'hash'),
+('rips.output_directories.recent', '', 'array(string)'),
+('rips.output_directories.recent_limit', '10', 'int'),
+('auth', 'Config', 'string'),
+('auth.admin.username', 'admin', 'string'),
+('auth.admin_password', '489152af89501a7dc72f6e589123b8c337c01623', 'string');
+
+-- --------------------------------------------------------
+
+--
+-- Table structure for table `worker_log`
+--
+
+DROP TABLE IF EXISTS `worker_log`;
+CREATE TABLE IF NOT EXISTS `worker_log` (
+  `id` bigint(20) NOT NULL AUTO_INCREMENT,
+  `job_id` int(10) unsigned DEFAULT NULL,
+  `level` varchar(32) NOT NULL,
+  `category` varchar(32) NOT NULL,
+  `ctime` int(11) NOT NULL,
+  `pid` int(11) NOT NULL,
+  `hostname` varchar(32) NOT NULL,
+  `progname` varchar(64) NOT NULL,
+  `file` text NOT NULL,
+  `line` int(11) NOT NULL,
+  `message` text NOT NULL,
+  PRIMARY KEY (`id`),
+  KEY `job_id` (`job_id`)
+) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
+
+--
+-- Constraints for dumped tables
+--
+
+--
+-- Constraints for table `client_log`
+--
+ALTER TABLE `client_log`
+  ADD CONSTRAINT `client_log_ibfk_1` FOREIGN KEY (`job_id`) REFERENCES `jobs` (`id`) ON DELETE CASCADE ON UPDATE CASCADE;
+
+--
+-- Constraints for table `job_status`
+--
+ALTER TABLE `job_status`
+  ADD CONSTRAINT `job_status_ibfk_1` FOREIGN KEY (`job_id`) REFERENCES `jobs` (`id`) ON DELETE CASCADE ON UPDATE CASCADE;

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.asmselect.js

@@ -0,0 +1,407 @@
+/*
+ * Alternate Select Multiple (asmSelect) 1.0.4 beta - jQuery Plugin
+ * http://www.ryancramer.com/projects/asmselect/
+ * 
+ * Copyright (c) 2008 by Ryan Cramer - http://www.ryancramer.com
+ * 
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ */
+
+(function($) {
+
+	$.fn.asmSelect = function(customOptions) {
+
+		var options = {
+
+			listType: 'ol',						// Ordered list 'ol', or unordered list 'ul'
+			sortable: false, 					// Should the list be sortable?
+			highlight: false,					// Use the highlight feature? 
+			animate: false,						// Animate the the adding/removing of items in the list?
+			addItemTarget: 'bottom',				// Where to place new selected items in list: top or bottom
+			hideWhenAdded: false,					// Hide the option when added to the list? works only in FF
+			debugMode: false,					// Debug mode keeps original select visible 
+
+			removeLabel: 'remove',					// Text used in the "remove" link
+			highlightAddedLabel: 'Added: ',				// Text that precedes highlight of added item
+			highlightRemovedLabel: 'Removed: ',			// Text that precedes highlight of removed item
+
+			containerClass: 'asmContainer',				// Class for container that wraps this widget
+			selectClass: 'asmSelect',				// Class for the newly created <select>
+			optionDisabledClass: 'asmOptionDisabled',		// Class for items that are already selected / disabled
+			listClass: 'asmList',					// Class for the list ($ol)
+			listSortableClass: 'asmListSortable',			// Another class given to the list when it is sortable
+			listItemClass: 'asmListItem',				// Class for the <li> list items
+			listItemLabelClass: 'asmListItemLabel',			// Class for the label text that appears in list items
+			removeClass: 'asmListItemRemove',			// Class given to the "remove" link
+			highlightClass: 'asmHighlight'				// Class given to the highlight <span>
+
+			};
+
+		$.extend(options, customOptions); 
+
+		return this.each(function(index) {
+
+			var $original = $(this); 				// the original select multiple
+			var $container; 					// a container that is wrapped around our widget
+			var $select; 						// the new select we have created
+			var $ol; 						// the list that we are manipulating
+			var buildingSelect = false; 				// is the new select being constructed right now?
+			var ieClick = false;					// in IE, has a click event occurred? ignore if not
+			var ignoreOriginalChangeEvent = false;			// originalChangeEvent bypassed when this is true
+
+			function init() {
+
+				// initialize the alternate select multiple
+
+				// this loop ensures uniqueness, in case of existing asmSelects placed by ajax (1.0.3)
+				while($("#" + options.containerClass + index).size() > 0) index++; 
+
+				$select = $("<select></select>")
+					.addClass(options.selectClass)
+					.attr('name', options.selectClass + index)
+					.attr('id', options.selectClass + index); 
+
+				$selectRemoved = $("<select></select>"); 
+
+				$ol = $("<" + options.listType + "></" + options.listType + ">")
+					.addClass(options.listClass)
+					.attr('id', options.listClass + index); 
+
+				$container = $("<div></div>")
+					.addClass(options.containerClass) 
+					.attr('id', options.containerClass + index); 
+
+				buildSelect();
+
+				$select.change(selectChangeEvent)
+					.click(selectClickEvent); 
+
+				$original.change(originalChangeEvent)
+					.wrap($container).before($select).before($ol);
+
+				if(options.sortable) makeSortable();
+
+				if($.browser.msie) $ol.css('display', 'inline-block'); 
+			}
+
+			function makeSortable() {
+
+				// make any items in the selected list sortable
+				// requires jQuery UI sortables, draggables, droppables
+
+				$ol.sortable({
+					items: 'li.' + options.listItemClass,
+					handle: '.' + options.listItemLabelClass,
+					axis: 'y',
+					update: function(e, data) {
+
+						var updatedOptionId;
+
+						$(this).children("li").each(function(n) {
+
+							$option = $('#' + $(this).attr('rel')); 
+
+							if($(this).is(".ui-sortable-helper")) {
+								updatedOptionId = $option.attr('id'); 
+								return;
+							}
+
+							$original.append($option); 
+						}); 
+
+						if(updatedOptionId) triggerOriginalChange(updatedOptionId, 'sort'); 
+					}
+
+				}).addClass(options.listSortableClass); 
+			}
+
+			function selectChangeEvent(e) {
+				
+				// an item has been selected on the regular select we created
+				// check to make sure it's not an IE screwup, and add it to the list
+
+				if($.browser.msie && $.browser.version < 7 && !ieClick) return;
+				var id = $(this).children("option:selected").slice(0,1).attr('rel'); 
+				addListItem(id); 	
+				ieClick = false; 
+				triggerOriginalChange(id, 'add'); // for use by user-defined callbacks
+			}
+
+			function selectClickEvent() {
+
+				// IE6 lets you scroll around in a select without it being pulled down
+				// making sure a click preceded the change() event reduces the chance
+				// if unintended items being added. there may be a better solution?
+
+				ieClick = true; 
+			}
+
+			function originalChangeEvent(e) {
+
+				// select or option change event manually triggered
+				// on the original <select multiple>, so rebuild ours
+
+				if(ignoreOriginalChangeEvent) {
+					ignoreOriginalChangeEvent = false; 
+					return; 
+				}
+
+				$select.empty();
+				$ol.empty();
+				buildSelect();
+
+				// opera has an issue where it needs a force redraw, otherwise
+				// the items won't appear until something else forces a redraw
+				if($.browser.opera) $ol.hide().fadeIn("fast");
+			}
+
+			function buildSelect() {
+
+				// build or rebuild the new select that the user
+				// will select items from
+
+				buildingSelect = true; 
+
+				// add a first option to be the home option / default selectLabel
+				$select.prepend("<option>" + $original.attr('title') + "</option>"); 
+
+				$original.children("option").each(function(n) {
+
+					var $t = $(this); 
+					var id; 
+
+					if(!$t.attr('id')) $t.attr('id', 'asm' + index + 'option' + n); 
+					id = $t.attr('id'); 
+
+					if($t.is(":selected")) {
+						addListItem(id); 
+						addSelectOption(id, true); 						
+					} else {
+						addSelectOption(id); 
+					}
+				});
+
+				if(!options.debugMode) $original.hide(); // IE6 requires this on every buildSelect()
+				selectFirstItem();
+				buildingSelect = false; 
+			}
+
+			function addSelectOption(optionId, disabled) {
+
+				// add an <option> to the <select>
+				// used only by buildSelect()
+
+				if(disabled == undefined) var disabled = false; 
+
+				var $O = $('#' + optionId); 
+				var $option = $("<option>" + $O.text() + "</option>")
+					.val($O.val())
+					.attr('rel', optionId);
+
+				if(disabled) disableSelectOption($option); 
+
+				$select.append($option); 
+			}
+
+			function selectFirstItem() {
+
+				// select the firm item from the regular select that we created
+
+				$select.children(":eq(0)").attr("selected", true); 
+			}
+
+			function disableSelectOption($option) {
+
+				// make an option disabled, indicating that it's already been selected
+				// because safari is the only browser that makes disabled items look 'disabled'
+				// we apply a class that reproduces the disabled look in other browsers
+
+				$option.addClass(options.optionDisabledClass)
+					.attr("selected", false)
+					.attr("disabled", true);
+
+				if(options.hideWhenAdded) $option.hide();
+				if($.browser.msie) $select.hide().show(); // this forces IE to update display
+			}
+
+			function enableSelectOption($option) {
+
+				// given an already disabled select option, enable it
+
+				$option.removeClass(options.optionDisabledClass)
+					.attr("disabled", false);
+
+				if(options.hideWhenAdded) $option.show();
+				if($.browser.msie) $select.hide().show(); // this forces IE to update display
+			}
+
+			function addListItem(optionId) {
+
+				// add a new item to the html list
+
+				var $O = $('#' + optionId); 
+
+				if(!$O) return; // this is the first item, selectLabel
+
+				var $removeLink = $("<a></a>")
+					.attr("href", "#")
+					.addClass(options.removeClass)
+					.prepend(options.removeLabel)
+					.click(function() { 
+						dropListItem($(this).parent('li').attr('rel')); 
+						return false; 
+					}); 
+
+				var $itemLabel = $("<span></span>")
+					.addClass(options.listItemLabelClass)
+					.html($O.html()); 
+
+				var $item = $("<li></li>")
+					.attr('rel', optionId)
+					.addClass(options.listItemClass)
+					.append($itemLabel)
+					.append($removeLink)
+					.hide();
+
+				if(!buildingSelect) {
+					if($O.is(":selected")) return; // already have it
+					$O.attr('selected', true); 
+				}
+
+				if(options.addItemTarget == 'top' && !buildingSelect) {
+					$ol.prepend($item); 
+					if(options.sortable) $original.prepend($O); 
+				} else {
+					$ol.append($item); 
+					if(options.sortable) $original.append($O); 
+				}
+
+				addListItemShow($item); 
+
+				disableSelectOption($("[rel=" + optionId + "]", $select));
+
+				if(!buildingSelect) {
+					setHighlight($item, options.highlightAddedLabel); 
+					selectFirstItem();
+					if(options.sortable) $ol.sortable("refresh"); 	
+				}
+
+			}
+
+			function addListItemShow($item) {
+
+				// reveal the currently hidden item with optional animation
+				// used only by addListItem()
+
+				if(options.animate && !buildingSelect) {
+					$item.animate({
+						opacity: "show",
+						height: "show"
+					}, 100, "swing", function() { 
+						$item.animate({
+							height: "+=2px"
+						}, 50, "swing", function() {
+							$item.animate({
+								height: "-=2px"
+							}, 25, "swing"); 
+						}); 
+					}); 
+				} else {
+					$item.show();
+				}
+			}
+
+			function dropListItem(optionId, highlightItem) {
+
+				// remove an item from the html list
+
+				if(highlightItem == undefined) var highlightItem = true; 
+				var $O = $('#' + optionId); 
+
+				$O.attr('selected', false); 
+				$item = $ol.children("li[rel=" + optionId + "]");
+
+				dropListItemHide($item); 
+				enableSelectOption($("[rel=" + optionId + "]", options.removeWhenAdded ? $selectRemoved : $select));
+
+				if(highlightItem) setHighlight($item, options.highlightRemovedLabel); 
+
+				triggerOriginalChange(optionId, 'drop'); 
+				
+			}
+
+			function dropListItemHide($item) {
+
+				// remove the currently visible item with optional animation
+				// used only by dropListItem()
+
+				if(options.animate && !buildingSelect) {
+
+					$prevItem = $item.prev("li");
+
+					$item.animate({
+						opacity: "hide",
+						height: "hide"
+					}, 100, "linear", function() {
+						$prevItem.animate({
+							height: "-=2px"
+						}, 50, "swing", function() {
+							$prevItem.animate({
+								height: "+=2px"
+							}, 100, "swing"); 
+						}); 
+						$item.remove(); 
+					}); 
+					
+				} else {
+					$item.remove(); 
+				}
+			}
+
+			function setHighlight($item, label) {
+
+				// set the contents of the highlight area that appears
+				// directly after the <select> single
+				// fade it in quickly, then fade it out
+
+				if(!options.highlight) return; 
+
+				$select.next("#" + options.highlightClass + index).remove();
+
+				var $highlight = $("<span></span>")
+					.hide()
+					.addClass(options.highlightClass)
+					.attr('id', options.highlightClass + index)
+					.html(label + $item.children("." + options.listItemLabelClass).slice(0,1).text()); 
+					
+				$select.after($highlight); 
+
+				$highlight.fadeIn("fast", function() {
+					setTimeout(function() { $highlight.fadeOut("slow"); }, 50); 
+				}); 
+			}
+
+			function triggerOriginalChange(optionId, type) {
+
+				// trigger a change event on the original select multiple
+				// so that other scripts can pick them up
+
+				ignoreOriginalChangeEvent = true; 
+				$option = $("#" + optionId); 
+
+				$original.trigger('change', [{
+					'option': $option,
+					'value': $option.val(),
+					'id': optionId,
+					'item': $ol.children("[rel=" + optionId + "]"),
+					'type': type
+				}]); 
+			}
+
+			init();
+		});
+	};
+
+})(jQuery); 

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/3rdparty/jquery.jec-1.3.2.js

@@ -0,0 +1,851 @@
+/**
+ * jQuery jEC (jQuery Editable Combobox) 1.3.1
+ * http://code.google.com/p/jquery-jec
+ *
+ * Copyright (c) 2008-2009 Lukasz Rajchel (lukasz@rajchel.pl | http://rajchel.pl)
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ *
+ * Documentation :  http://code.google.com/p/jquery-jec/wiki/Documentation
+ * Changelog     :  http://code.google.com/p/jquery-jec/wiki/Changelog
+ *
+ * Contributors  :  Lukasz Rajchel, Artem Orlov
+ */
+
+/*jslint white: true, onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitwise: true, 
+regexp: true, strict: true, newcap: true, immed: true, maxerr: 50, indent: 4, maxlen: 120*/
+/*global Array, Math, String, clearInterval, document, jQuery, setInterval*/
+/*members ':', Handle, Remove, Set, acceptedKeys, addClass, all, append, appendTo, array, attr, before, bind, 
+blinkingCursor, blinkingCursorInterval, blur, bool, browser, ceil, change, charCode, classes, clearCursor, click, css, 
+cursorState, data, destroy, disable, each, editable, enable, eq, expr, extend, filter, find, floor, fn, focus, 
+focusOnNewOption, fromCharCode, get, getId, handleCursor, ignoredKeys, ignoreOptGroups, inArray, init, initJS, integer, 
+isArray, isPlainObject, jEC, jECTimer, jec, jecKill, jecOff, jecOn, jecPref, jecValue, keyCode, keyDown, keyPress, 
+keyRange, keyUp, keys, length, max, maxLength, min, msie, object, openedState, optionClasses, optionStyles, parent, 
+position, pref, prop, push, random, remove, removeAttr, removeClass, removeData, removeProp, safari, setEditableOption, 
+styles, substring, text, trigger, triggerChangeEvent, unbind, uneditable, useExistingOptions, val, value, 
+valueIsEditable, which*/
+(function ($) {
+    'use strict';
+
+    $.jEC = (function () {
+        var pluginClass = 'jecEditableOption', cursorClass = 'hasCursor', options = {}, values = {}, lastKeyCode, 
+        defaults, Validators, EventHandlers, Combobox, activeCombobox;
+
+        defaults = {
+            position: 0,
+            ignoreOptGroups: false,
+            maxLength: 255,
+            classes: [],
+            styles: {},
+            optionClasses: [],
+            optionStyles: {},
+            triggerChangeEvent: false,
+            focusOnNewOption: false,
+            useExistingOptions: false,
+            blinkingCursor: false,
+            blinkingCursorInterval: 1000,
+            ignoredKeys: [],
+            acceptedKeys: [[32, 126], [191, 382]]
+        };
+
+        Validators = (function () {
+            return {
+                integer: function (value) {
+                    return typeof value === 'number' && Math.ceil(value) === Math.floor(value);
+                },
+
+                keyRange: function (value) {
+                    var min, max;
+                    if (typeof value === 'object' && !$.isArray(value)) {
+                        min = value.min;
+                        max = value.max;
+                    } else if ($.isArray(value) && value.length === 2) {
+                        min = value[0];
+                        max = value[1];
+                    }
+                    return Validators.integer(min) && Validators.integer(max) && min <= max;
+                }
+            };
+        }());
+
+        EventHandlers = (function () {
+            var getKeyCode;
+
+            getKeyCode = function (event) {
+                var charCode = event.charCode;
+                if (charCode !== undefined && charCode !== 0) {
+                    return charCode;
+                } else {
+                    return event.keyCode;
+                }
+            };
+
+            return {
+                // focus event handler
+                // enables blinking cursor
+                focus: function () {
+                    var opt = options[Combobox.getId($(this))];
+                    if (opt.blinkingCursor && $.jECTimer === undefined) {
+                        activeCombobox = $(this);
+                        $.jECTimer = setInterval($.jEC.handleCursor, opt.blinkingCursorInterval);
+                    }
+                },
+
+                // blur event handler
+                // disables blinking cursor
+                blur: function () {
+                    if ($.jECTimer !== undefined) {
+                        clearInterval($.jECTimer);
+                        $.jECTimer = undefined;
+                        activeCombobox = undefined;
+                        Combobox.clearCursor($(this));
+                    }
+                    Combobox.openedState($(this), false);
+                },
+
+                // keydown event handler
+                // handles keys pressed on select (backspace and delete must be handled
+                // in keydown event in order to work in IE)
+                keyDown: function (event) {
+					var keyCode = getKeyCode(event), option, value;
+
+                    lastKeyCode = keyCode;
+
+                    switch (keyCode) {
+                    case 8:  // backspace
+                    case 46: // delete
+                        option = $(this).find('option.' + pluginClass);
+                        if (option.val().length >= 1) {
+                            value = option.text().substring(0, option.text().length - 1);
+                            option.val(value).text(value).prop('selected', true);
+                        }
+                        return (keyCode !== 8);
+                    default:
+                        break;
+                    }
+                },
+
+                // keypress event handler
+                // handles the rest of the keys (keypress event gives more informations
+                // about pressed keys)
+                keyPress: function (event) {
+                    var keyCode = getKeyCode(event), opt = options[Combobox.getId($(this))],
+                        option, value, specialKeys, exit = false, text;
+
+                    Combobox.clearCursor($(this));
+                    if (keyCode !== 9 && keyCode !== 13 && keyCode !== 27) {
+                        // special keys codes
+                        specialKeys = [37, 38, 39, 40, 46];
+                        // handle special keys
+                        $.each(specialKeys, function (i, val) {
+							if (keyCode === val && keyCode === lastKeyCode) {
+                                exit = true;
+                            }
+                        });
+
+                        // don't handle ignored keys
+                        if (!exit && $.inArray(keyCode, opt.ignoredKeys) === -1) {
+                            // remove selection from all options
+                            $(this).find('option:selected').removeProp('selected');
+
+                            if ($.inArray(keyCode, opt.acceptedKeys) !== -1) {
+                                option = $(this).find('option.' + pluginClass);
+                                text = option.text();
+                                
+                                if (text.length < opt.maxLength) {
+                                    value = text + String.fromCharCode(getKeyCode(event));
+                                    option.val(value).text(value);
+                                }
+                                
+                                option.prop('selected', true);
+                            }
+                        }
+
+                        return false;
+                    }
+                },
+                
+                keyUp: function () {
+					var opt = options[Combobox.getId($(this))];
+                    if (opt.triggerChangeEvent) {
+                        $(this).trigger('change');
+                    }
+                },
+
+                // change event handler
+                // handles editable option changing based on a pre-existing values
+                change: function () {
+                    var opt = options[Combobox.getId($(this))];
+                    if (opt.useExistingOptions) {
+                        Combobox.setEditableOption($(this));
+                    }
+                },
+
+                click: function () {
+                    if (!$.browser.safari) {
+                        Combobox.openedState($(this), !Combobox.openedState($(this)));
+                    }
+                }
+            };
+        }());
+
+        // Combobox
+        Combobox = (function () {
+            var Parameters, EditableOption, generateId, setup;
+
+            // validates and set combobox parameters
+            Parameters = (function () {
+                var Set, Remove, Handle;
+
+                Set = (function () {
+                    var parseKeys, Handles;
+                    
+                    parseKeys = function (value) {
+                        var keys = [];
+                        if ($.isArray(value)) {
+                            $.each(value, function (i, val) {
+                                var j, min, max;
+                                if (Validators.keyRange(val)) {
+                                    if ($.isArray(val)) {
+                                        min = val[0];
+                                        max = val[1];
+                                    } else {
+                                        min = val.min;
+                                        max = val.max;
+                                    }
+                                    for (j = min; j <= max; j += 1) {
+                                        keys.push(j);
+                                    }
+                                } else if (typeof val === 'number' && Validators.integer(val)) {
+                                    keys.push(val);
+                                }
+                            });
+                        }
+                        return keys;
+                    };
+                    
+                    Handles = (function () {
+                        return {
+                            integer: function (elem, name, value) {
+                                var id = Combobox.getId(elem), opt = options[id];
+                                if (opt !== undefined && Validators.integer(value)) {
+                                    opt[name] = value;
+                                    return true;
+                                }
+                                return false;
+                            },
+                            bool: function (elem, name, value) {
+                                var id = Combobox.getId(elem), opt = options[id];
+                                if (opt !== undefined && typeof value === 'boolean') {
+                                    opt[name] = value;
+                                    return true;
+                                }
+                                return false;
+                            },
+                            array: function (elem, name, value) {
+                                if (typeof value === 'string') {
+                                    value = [value];
+                                }
+                                var id = Combobox.getId(elem), opt = options[id];
+                                if (opt !== undefined && $.isArray(value)) {
+                                    opt[name] = value;
+                                    return true;
+                                }
+                                return false;
+                            },
+                            object: function (elem, name, value) {
+                                var id = Combobox.getId(elem), opt = options[id];
+                                if (opt !== undefined && value !== null && 
+                                        typeof value === 'object' && !$.isArray(value)) {
+                                    opt[name] = value;
+                                }
+                            },
+                            keys: function (elem, name, value) {
+                                var id = Combobox.getId(elem), opt = options[id];
+                                if (opt !== undefined && $.isArray(value)) {
+                                    opt[name] = parseKeys(value);
+                                }
+                            }
+                        };
+                    }());
+
+                    return {
+                        position: function (elem, value) {
+                            if (Handles.integer(elem, 'position', value)) {
+                                var id = Combobox.getId(elem), opt = options[id], optionsCount;
+                                optionsCount =
+                                    elem.find('option:not(.' + pluginClass + ')').length;
+                                if (value > optionsCount) {
+                                    opt.position = optionsCount;
+                                }
+                            }
+                        },
+                        
+                        ignoreOptGroups: function (elem, value) {
+                            Handles.bool(elem, 'ignoreOptGroups', value);
+                        },
+                        
+                        maxLength: function (elem, value) {
+                            if (Handles.integer(elem, 'maxLength', value)) {
+                                var id = Combobox.getId(elem), opt = options[id];
+                                if (value < 0 || value > 255) {
+                                    opt.maxLength = 255;
+                                }
+                            }
+                        },
+
+                        classes: function (elem, value) {
+                            Handles.array(elem, 'classes', value);
+                        },
+
+                        optionClasses: function (elem, value) {
+                            Handles.array(elem, 'optionClasses', value);
+                        },
+
+                        styles: function (elem, value) {
+                            Handles.object(elem, 'styles', value);
+                        },
+
+                        optionStyles: function (elem, value) {
+                            Handles.object(elem, 'optionStyles', value);
+                        },
+                        
+                        triggerChangeEvent: function (elem, value) {
+                            Handles.bool(elem, 'triggerChangeEvent', value);
+                        },
+
+                        focusOnNewOption: function (elem, value) {
+                            Handles.bool(elem, 'focusOnNewOption', value);
+                        },
+
+                        useExistingOptions: function (elem, value) {
+                            Handles.bool(elem, 'useExistingOptions', value);
+                        },
+
+                        blinkingCursor: function (elem, value) {
+                            Handles.bool(elem, 'blinkingCursor', value);
+                        },
+
+                        blinkingCursorInterval: function (elem, value) {
+                            Handles.integer(elem, 'blinkingCursorInterval', value);
+                        },
+
+                        ignoredKeys: function (elem, value) {
+                            Handles.keys(elem, 'ignoredKeys', value);
+                        },
+
+                        acceptedKeys: function (elem, value) {
+                            Handles.keys(elem, 'acceptedKeys', value);
+                        }
+                    };
+                }());
+
+                Remove = (function () {
+                    var removeClasses, removeStyles;
+
+                    removeClasses = function (elem, classes) {
+                        $.each(classes, function (i, val) {
+							elem.removeClass(val);
+                        });
+                    };
+
+                    removeStyles = function (elem, styles) {
+                        $.each(styles, function (key) {
+                            elem.css(key, '');
+                        });
+                    };
+
+                    return {
+                        classes: function (elem) {
+                            var id = Combobox.getId(elem), opt = options[id];
+                            if (opt !== undefined) {
+                                removeClasses(elem, opt.classes);
+                            }
+                        },
+
+                        optionClasses: function (elem) {
+                            var id = Combobox.getId(elem), opt = options[id];
+                            if (opt !== undefined) {
+                                removeClasses(elem.find('option.' + pluginClass),
+                                    opt.optionClasses);
+                            }
+                        },
+
+                        styles: function (elem) {
+                            var id = Combobox.getId(elem), opt = options[id];
+                            if (opt !== undefined) {
+                                removeStyles(elem, opt.styles);
+                            }
+                        },
+
+                        optionStyles: function (elem) {
+                            var id = Combobox.getId(elem), opt = options[id];
+                            if (opt !== undefined) {
+                                removeStyles(elem.find('option.' + pluginClass),
+                                    opt.optionStyles);
+                            }
+                        },
+
+                        all: function (elem) {
+                            Remove.classes(elem);
+                            Remove.optionClasses(elem);
+                            Remove.styles(elem);
+                            Remove.optionStyles(elem);
+                        }
+                    };
+                }());
+
+                Handle = (function () {
+                    var setClasses, setStyles;
+
+                    setClasses = function (elem, classes) {
+                        $.each(classes, function (i, val) {
+                            elem.addClass(String(val));
+                        });
+                    };
+
+                    setStyles = function (elem, styles) {
+                        $.each(styles, function (key, val) {
+                            elem.css(key, val);
+                        });
+                    };
+
+                    return {
+                        position: function (elem) {
+                            var opt = options[Combobox.getId(elem)], option, uneditableOptions, container;
+                            option = elem.find('option.' + pluginClass);
+
+                            uneditableOptions = elem.find('option:not(.' + pluginClass + ')');
+                            if (opt.position < uneditableOptions.length) {
+                                container = uneditableOptions.eq(opt.position);
+                                
+                                if (!opt.ignoreOptGroups && container.parent('optgroup').length > 0) {
+                                    uneditableOptions.eq(opt.position).parent().before(option);
+                                } else {
+                                    uneditableOptions.eq(opt.position).before(option);
+                                }
+                            } else {
+                                elem.append(option);
+                            }
+                        },
+
+                        classes: function (elem) {
+                            var id = Combobox.getId(elem), opt = options[id];
+                            if (opt !== undefined) {
+                                setClasses(elem, opt.classes);
+                            }
+                        },
+
+                        optionClasses: function (elem) {
+                            var id = Combobox.getId(elem), opt = options[id];
+                            if (opt !== undefined) {
+                                setClasses(elem.find('option.' + pluginClass), opt.optionClasses);
+                            }
+                        },
+
+                        styles: function (elem) {
+                            var id = Combobox.getId(elem), opt = options[id];
+                            if (opt !== undefined) {
+                                setStyles(elem, opt.styles);
+                            }
+                        },
+
+                        optionStyles: function (elem) {
+                            var id = Combobox.getId(elem), opt = options[id];
+                            if (opt !== undefined) {
+                                setStyles(elem.find('option.' + pluginClass), opt.optionStyles);
+                            }
+                        },
+
+                        focusOnNewOption: function (elem) {
+                            var id = Combobox.getId(elem), opt = options[id];
+                            if (opt !== undefined && opt.focusOnNewOption) {
+                                elem.find(':not(option.' + pluginClass + ')').removeProp('selected');
+                                elem.find('option.' + pluginClass).prop('selected', true);
+                            }
+                        },
+
+                        useExistingOptions: function (elem) {
+                            var id = Combobox.getId(elem), opt = options[id];
+                            if (opt !== undefined && opt.useExistingOptions) {
+                                Combobox.setEditableOption(elem);
+                            }
+                        },
+
+                        all: function (elem) {
+                            Handle.position(elem);
+                            Handle.classes(elem);
+                            Handle.optionClasses(elem);
+                            Handle.styles(elem);
+                            Handle.optionStyles(elem);
+                            Handle.focusOnNewOption(elem);
+                            Handle.useExistingOptions(elem);
+                        }
+                    };
+                }());
+
+                return {
+                    Set: Set,
+                    Remove: Remove,
+                    Handle: Handle
+                };
+            }());
+
+            EditableOption = (function () {
+                return {
+                    init: function (elem) {
+                        if (!elem.find('option.' + pluginClass).length) {
+                            var editableOption = $('<option>');
+                            editableOption.addClass(pluginClass);
+                            elem.append(editableOption);
+                        }
+
+                        elem.bind('keydown', EventHandlers.keyDown);
+                        elem.bind('keypress', EventHandlers.keyPress);
+                        elem.bind('keyup', EventHandlers.keyUp);
+                        elem.bind('change', EventHandlers.change);
+                        elem.bind('focus', EventHandlers.focus);
+                        elem.bind('blur', EventHandlers.blur);
+                        elem.bind('click', EventHandlers.click);
+                    },
+
+                    destroy: function (elem) {
+                        elem.find('option.' + pluginClass).remove();
+                        
+                        elem.unbind('keydown', EventHandlers.keyDown);
+                        elem.unbind('keypress', EventHandlers.keyPress);
+                        elem.unbind('keyup', EventHandlers.keyUp);
+                        elem.unbind('change', EventHandlers.change);
+                        elem.unbind('focus', EventHandlers.focus);
+                        elem.unbind('blur', EventHandlers.blur);
+                        elem.unbind('click', EventHandlers.click);
+                    }
+                };
+            }());
+
+            // generates unique identifier
+            generateId = function () {
+                while (true) {
+                    var random = Math.floor(Math.random() * 100000);
+
+                    if (options[random] === undefined) {
+                        return random;
+                    }
+                }
+            };
+
+            // sets combobox
+            setup = function (elem) {
+                EditableOption.init(elem);
+                Parameters.Handle.all(elem);
+            };
+
+            // Combobox public members
+            return {
+                // create editable combobox
+                init: function (settings) {
+                    return $(this).filter(':uneditable').each(function () {
+                    
+                        var id = generateId(), elem = $(this);
+                        
+                        elem.data('jecId', id);
+                        
+                        // override passed default options
+                        options[id] = $.extend(true, {}, defaults);
+
+                        // parse keys
+                        Parameters.Set.ignoredKeys(elem, options[id].ignoredKeys);
+                        Parameters.Set.acceptedKeys(elem, options[id].acceptedKeys);
+
+                        if (typeof settings === 'object' && !$.isArray(settings)) {
+                            $.each(settings, function (key, val) {
+                                if (val !== undefined) {
+                                    switch (key) {
+                                    case 'position':
+                                        Parameters.Set.position(elem, val);
+                                        break;
+                                    case 'ignoreOptGroups':
+                                        Parameters.Set.ignoreOptGroups(elem, val);
+                                        break;
+                                    case 'maxLength':
+                                        Parameters.Set.maxLength(elem, val);
+                                        break;
+                                    case 'classes':
+                                        Parameters.Set.classes(elem, val);
+                                        break;
+                                    case 'optionClasses':
+                                        Parameters.Set.optionClasses(elem, val);
+                                        break;
+                                    case 'styles':
+                                        Parameters.Set.styles(elem, val);
+                                        break;
+                                    case 'optionStyles':
+                                        Parameters.Set.optionStyles(elem, val);
+                                        break;
+                                    case 'triggerChangeEvent':
+                                        Parameters.Set.triggerChangeEvent(elem, val);
+                                        break;
+                                    case 'focusOnNewOption':
+                                        Parameters.Set.focusOnNewOption(elem, val);
+                                        break;
+                                    case 'useExistingOptions':
+                                        Parameters.Set.useExistingOptions(elem, val);
+                                        break;
+                                    case 'blinkingCursor':
+                                        Parameters.Set.blinkingCursor(elem, val);
+                                        break;
+                                    case 'blinkingCursorInterval':
+                                        Parameters.Set.blinkingCursorInterval(elem, val);
+                                        break;
+                                    case 'ignoredKeys':
+                                        Parameters.Set.ignoredKeys(elem, val);
+                                        break;
+                                    case 'acceptedKeys':
+                                        Parameters.Set.acceptedKeys(elem, val);
+                                        break;
+                                    }
+                                }
+                            });
+                        }
+
+                        setup($(this));
+                    });
+                },
+
+                // creates editable combobox without using existing select elements
+                initJS: function (options, settings) {
+                    var select, addOptions;
+
+                    select = $('<select>');
+                    
+                    addOptions = function (elem, options) {
+                        if ($.isArray(options)) {
+                            $.each(options, function (i, val) {
+                                if ($.isPlainObject(val)) {
+                                    $.each(val, function (key, value) {
+                                        if ($.isArray(value)) {
+                                            var og = $('<optgroup>').attr('label', key);
+                                            addOptions(og, value);
+                                            og.appendTo(select);
+                                        } else if (typeof value === 'number' || typeof value === 'string') {
+                                            $('<option>').text(value).attr('value', key)
+                                                .appendTo(elem);
+                                        }
+                                    });
+                                } else if (typeof val === 'string' || typeof val === 'number') {
+                                    $('<option>').text(val).attr('value', val).appendTo(elem);
+                                }
+                            });
+                        }
+                    };
+                    
+                    addOptions(select, options);
+
+                    return select.jec(settings);
+                },
+
+                // destroys editable combobox
+                destroy: function () {
+                    return $(this).filter(':editable').each(function () {
+                        $(this).jecOff();
+                        $.removeData($(this).get(0), 'jecId');
+                        $.removeData($(this).get(0), 'jecCursorState');
+                        $.removeData($(this).get(0), 'jecOpenedState');
+                    });
+                },
+
+                // enable editablecombobox
+                enable: function () {
+                    return $(this).filter(':editable').each(function () {
+                        var id = Combobox.getId($(this)), value = values[id];
+
+                        setup($(this));
+
+                        if (value !== undefined) {
+                            $(this).jecValue(value);
+                        }
+                    });
+                },
+
+                // disable editable combobox
+                disable: function () {
+                    return $(this).filter(':editable').each(function () {
+                        var val = $(this).find('option.' + pluginClass).val();
+                        values[Combobox.getId($(this))] = val;
+                        Parameters.Remove.all($(this));
+                        EditableOption.destroy($(this));
+                    });
+                },
+
+                // gets or sets editable option's value
+                value: function (value, setFocus) {
+                    if ($(this).filter(':editable').length > 0) {
+                        if (value === null || value === undefined) {
+                            // get value
+                            return $(this).find('option.' + pluginClass).val();
+                        } else if (typeof value === 'string' || typeof value === 'number') {
+                            // set value
+                            return $(this).filter(':editable').each(function () {
+                                var option = $(this).find('option.' + pluginClass);
+                                option.val(value).text(value);
+                                if (typeof setFocus !== 'boolean' || setFocus) {
+                                    option.prop('selected', true);
+                                }
+                            });
+                        }
+                    }
+                },
+
+                // gets or sets editable option's preference
+                pref: function (name, value) {
+                    if ($(this).filter(':editable').length > 0) {
+                        if (typeof name === 'string') {
+                            if (value === null || value === undefined) {
+                                // get preference
+                                return options[Combobox.getId($(this))][name];
+                            } else {
+                                // set preference
+                                return $(this).filter(':editable').each(function () {
+                                    switch (name) {
+                                    case 'position':
+                                        Parameters.Set.position($(this), value);
+                                        Parameters.Handle.position($(this));
+                                        break;
+                                    case 'classes':
+                                        Parameters.Remove.classes($(this));
+                                        Parameters.Set.classes($(this), value);
+                                        Parameters.Handle.position($(this));
+                                        break;
+                                    case 'optionClasses':
+                                        Parameters.Remove.optionClasses($(this));
+                                        Parameters.Set.optionClasses($(this), value);
+                                        Parameters.Set.optionClasses($(this));
+                                        break;
+                                    case 'styles':
+                                        Parameters.Remove.styles($(this));
+                                        Parameters.Set.styles($(this), value);
+                                        Parameters.Set.styles($(this));
+                                        break;
+                                    case 'optionStyles':
+                                        Parameters.Remove.optionStyles($(this));
+                                        Parameters.Set.optionStyles($(this), value);
+                                        Parameters.Handle.optionStyles($(this));
+                                        break;
+                                    case 'focusOnNewOption':
+                                        Parameters.Set.focusOnNewOption($(this), value);
+                                        Parameters.Handle.focusOnNewOption($(this));
+                                        break;
+                                    case 'useExistingOptions':
+                                        Parameters.Set.useExistingOptions($(this), value);
+                                        Parameters.Handle.useExistingOptions($(this));
+                                        break;
+                                    case 'blinkingCursor':
+                                        Parameters.Set.blinkingCursor($(this), value);
+                                        break;
+                                    case 'blinkingCursorInterval':
+                                        Parameters.Set.blinkingCursorInterval($(this), value);
+                                        break;
+                                    case 'ignoredKeys':
+                                        Parameters.Set.ignoredKeys($(this), value);
+                                        break;
+                                    case 'acceptedKeys':
+                                        Parameters.Set.acceptedKeys($(this), value);
+                                        break;
+                                    }
+                                });
+                            }
+                        }
+                    }
+                },
+
+                // sets editable option to the value of currently selected option
+                setEditableOption: function (elem) {
+                    var value = elem.find('option:selected').text();
+                    elem.find('option.' + pluginClass).attr('value', elem.val()).text(value).prop('selected', true);
+                },
+
+                // get combobox id
+                getId: function (elem) {
+                    return elem.data('jecId');
+                },
+
+                valueIsEditable: function (elem) {
+                    return elem.find('option.' + pluginClass).get(0) === elem.find('option:selected').get(0);
+                },
+
+                clearCursor: function (elem) {
+                    $(elem).find('option.' + cursorClass).each(function () {
+                        var text = $(this).text();
+                        $(this).removeClass(cursorClass).text(text.substring(0, text.length - 1));
+                    });
+                },
+
+                cursorState: function (elem, state) {
+                    return elem.data('jecCursorState', state);
+                },
+
+                openedState: function (elem, state) {
+                    return elem.data('jecOpenedState', state);
+                },
+
+                //handles editable cursor
+                handleCursor: function () {
+                    if (activeCombobox !== undefined && activeCombobox !== null) {
+                        if ($.browser.msie && Combobox.openedState(activeCombobox)) {
+                            return;
+                        }
+
+                        var state = Combobox.cursorState(activeCombobox), elem;
+                        if (state) {
+                            Combobox.clearCursor(activeCombobox);
+                        } else if (Combobox.valueIsEditable(activeCombobox)) {
+                            elem = activeCombobox.find('option:selected');
+                            elem.addClass(cursorClass).text(elem.text() + '|');
+                        }
+                        Combobox.cursorState(activeCombobox, !state);
+                    }
+                }
+            };
+        }());
+
+        // jEC public members
+        return {
+            init: Combobox.init,
+            enable: Combobox.enable,
+            disable: Combobox.disable,
+            destroy: Combobox.destroy,
+            value: Combobox.value,
+            pref: Combobox.pref,
+            initJS: Combobox.initJS,
+            handleCursor: Combobox.handleCursor
+        };
+    }());
+
+    // register functions
+    $.fn.extend({
+        jec: $.jEC.init,
+        jecOn: $.jEC.enable,
+        jecOff: $.jEC.disable,
+        jecKill: $.jEC.destroy,
+        jecValue: $.jEC.value,
+        jecPref: $.jEC.pref
+    });
+
+    $.extend({
+        jec: $.jEC.initJS
+    });
+
+    // register selectors
+    $.extend($.expr[':'], {
+        editable: function (a) {
+            var data = $(a).data('jecId');
+            return data !== null && data !== undefined;
+        },
+
+        uneditable: function (a) {
+            var data = $(a).data('jecId');
+            return data === null || data === undefined;
+        }
+    });
+
+}(jQuery));

public/scripts/3rdparty/jquery.progressbar.min.js

@@ -0,0 +1,20 @@
+
+(function($){$.extend({progressBar:new function(){this.defaults={steps:20,stepDuration:20,max:100,showText:true,textFormat:'percentage',width:120,height:12,callback:null,boxImage:'images/progressbar.gif',barImage:{0:'images/progressbg_red.gif',30:'images/progressbg_orange.gif',70:'images/progressbg_green.gif'},running_value:0,value:0,image:null};this.construct=function(arg1,arg2){var argvalue=null;var argconfig=null;if(arg1!=null){if(!isNaN(arg1)){argvalue=arg1;if(arg2!=null){argconfig=arg2;}}else{argconfig=arg1;}}
+return this.each(function(child){var pb=this;var config=this.config;if(argvalue!=null&&this.bar!=null&&this.config!=null){this.config.value=parseInt(argvalue)
+if(argconfig!=null)
+pb.config=$.extend(this.config,argconfig);config=pb.config;}else{var $this=$(this);var config=$.extend({},$.progressBar.defaults,argconfig);config.id=$this.attr('id')?$this.attr('id'):Math.ceil(Math.random()*100000);if(argvalue==null)
+argvalue=$this.html().replace("%","")
+config.value=parseInt(argvalue);config.running_value=0;config.image=getBarImage(config);var numeric=['steps','stepDuration','max','width','height','running_value','value'];for(var i=0;i<numeric.length;i++)
+config[numeric[i]]=parseInt(config[numeric[i]]);$this.html("");var bar=document.createElement('img');var text=document.createElement('span');var $bar=$(bar);var $text=$(text);pb.bar=$bar;$bar.attr('id',config.id+"_pbImage");$text.attr('id',config.id+"_pbText");$text.html(getText(config));$bar.attr('title',getText(config));$bar.attr('alt',getText(config));$bar.attr('src',config.boxImage);$bar.attr('width',config.width);$bar.css("width",config.width+"px");$bar.css("height",config.height+"px");$bar.css("background-image","url("+config.image+")");$bar.css("background-position",((config.width*-1))+'px 50%');$bar.css("padding","0");$bar.css("margin","0");$this.append($bar);$this.append($text);}
+function getPercentage(config){return config.running_value*100/config.max;}
+function getBarImage(config){var image=config.barImage;if(typeof(config.barImage)=='object'){for(var i in config.barImage){if(config.running_value>=parseInt(i)){image=config.barImage[i];}else{break;}}}
+return image;}
+function getText(config){if(config.showText){if(config.textFormat=='percentage'){return" "+Math.round(config.running_value)+"%";}else if(config.textFormat=='fraction'){return" "+config.running_value+'/'+config.max;}}}
+config.increment=Math.round((config.value-config.running_value)/config.steps);if(config.increment<0)
+config.increment*=-1;if(config.increment<1)
+config.increment=1;var t=setInterval(function(){var pixels=config.width/100;if(config.running_value>config.value){if(config.running_value-config.increment<config.value){config.running_value=config.value;}else{config.running_value-=config.increment;}}
+else if(config.running_value<config.value){if(config.running_value+config.increment>config.value){config.running_value=config.value;}else{config.running_value+=config.increment;}}
+if(config.running_value==config.value)
+clearInterval(t);var $bar=$("#"+config.id+"_pbImage");var $text=$("#"+config.id+"_pbText");var image=getBarImage(config);if(image!=config.image){$bar.css("background-image","url("+image+")");config.image=image;}
+$bar.css("background-position",(((config.width*-1))+(getPercentage(config)*pixels))+'px 50%');$bar.attr('title',getText(config));$text.html(getText(config));if(config.callback!=null&&typeof(config.callback)=='function')
+config.callback(config);pb.config=config;},config.stepDuration);});};}});$.fn.extend({progressBar:$.progressBar.construct});})(jQuery);

public/scripts/main.js

@@ -0,0 +1,365 @@
+/**
+ * Ripping Cluster Webui
+ * 
+ * Written by Ben Roberts
+ * Homepage: https://benroberts.net/projects/ripping-cluster/
+ * Code:     https://github.com/optiz0r/ripping-cluster-webui/
+ * 
+ * Dependencies:
+ *   - Bootstrap
+ *   - JQuery
+ *   - JQueryUI
+ *   - JQuery Progressbar
+ * 
+ * Released under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License
+ * http://creativecommons.org/licenses/by-nc-sa/3.0/
+ */
+
+/**
+ * Ripping Cluster object
+ * 
+ * Entry point for all ripping cluster webui code
+ */
+var rc = {
+
+    /**
+     * Initialises the webui code
+     */
+    init: function() {
+        rc.page.init();
+        
+        rc.sources.init();
+        rc.settings.init();
+    },
+    
+    /**
+     * Page module
+     * 
+     * Configures hooks for updating pages
+     */
+    page: {
+        
+        /**
+         * Initialises the module
+         */
+        init: function() {
+            
+            // Display pretty progress bars
+            sf.page.addCallback('progress-bars', function(d) {
+                $(d).find('.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',
+                            }
+                        });
+                    }
+                );
+            });
+            
+            // Display highlights on given items when hovered over
+            sf.page.addCallback('hover-highlights', function(d) {
+                $(d).find('.hover-highlight').hover(
+                    function() {
+                        $(this).addClass('highlight');
+                    },
+                    function() {
+                        $(this).removeClass('highlight');
+                    }
+                );
+            });
+            
+            // Display popovers
+            sf.page.addCallback('popovers', function(d) {
+                $(d).find('a[rel=popover]').popover({
+                  offset: 10,
+                  html: true,
+                });
+            });
+            
+            // Configure select-all checkboxes 
+            sf.page.addCallback('select-all-checkboxes', function(d) {
+                $(d).find('input[type=checkbox].select_all').click(function() {
+                    $('input[type=checkbox].'+$(this).attr('id')).attr('checked', $(this).attr('checked') == 'checked');
+                });
+            });
+            
+            // Update the content of the page on first load
+            sf.page.updateEvents($('#page_content'));
+        }
+    
+    },
+    
+    /**
+     * Sources module
+     * 
+     * Contains code for interacting with rip sources
+     */
+    sources: {
+       
+        /**
+         * Initialises the module
+         */
+        init: function() {
+            
+            sf.actions.addAction('delete-source-confirm', function(params) {
+                rc.sources.remove_confirmed(params['plugin'], params['id']);
+            });            
+            
+        },
+        
+        /**
+         * Display a confirmation box for deleting a source
+         * 
+         * @param plugin Name of the plugin providing the source
+         * @param source Encoded filename of the source to be deleted
+         */
+        remove: function(plugin, source) {
+            sf.ajax.get(base_url + "ajax/delete-source/plugin/" + plugin + "/id/" + source);        
+        },
+        
+        /**
+         * Permanently delete a source
+         * 
+         * @param plugin Name of the plugin providing the source
+         * @param source Encoded filename of the source to be deleted
+         */
+        remove_confirmed: function(plugin, source) {
+            sf.ajax.get(base_url + "ajax/delete-source/plugin/" + plugin + "/id/" + source + "/confirm/");
+        },
+        
+    },
+    
+    /**
+     * Settings module
+     * 
+     * Contains code for handling the admin settings page
+     */
+    settings: {
+        
+        /**
+         * Configure actions for handling settings ajax requests.
+         */
+        init: function() {
+            sf.actions.addAction('add-setting', function(params) {
+                sf.ajax.post(base_url + 'ajax/admin/add-setting/name/' + $('#'+params.name).val() + '/type/' + $('#'+params.type).val() + '/');
+            });
+            
+            sf.actions.addAction('add_setting_row', function(params) {
+                $("#settings tbody").append(params.content);
+            });
+            
+            sf.actions.addAction('rename_setting', function(params) {
+                sf.ajax.post(base_url + 'ajax/admin/rename-setting/name/' + params.name + '/new-name/' + $('#'+params.new_name_field).val() + '/confirm/');
+            });
+            
+            sf.actions.addAction('rename_setting_confirm', function(params) {
+                $('#setting_'+params.old_id+'_row').replaceWith($(params.content));
+            });
+            
+            sf.actions.addAction('remove_setting', function(params) {
+                sf.ajax.post(base_url + 'ajax/admin/remove-setting/name/' + params.name + '/');
+                sf.actions.trigger('remove_setting_row', params);
+            });
+            
+            sf.actions.addAction('remove_setting_row', function(params) {
+                $('#setting_' + params.id + '_row').remove();
+            });
+
+            $("#settings_save").click(function() {
+                rc.settings.save();
+            });
+            
+            $("#settings_new").click(function() {
+                rc.settings.new_setting();
+            });
+        },
+        
+        /**
+         * Add a new setting to the settings list
+         * 
+         * Presents a dialog box prompting for the setting details
+         * 
+         */
+        new_setting: function() {
+            sf.ajax.get(base_url + "ajax/admin/new-setting/");
+        },
+        
+        /**
+         * Rename a setting
+         * 
+         * Presents a dialog box prompting for the new setting name
+         * 
+         * @param id DOM ID of the setting to be renamed
+         * @param name Name of the setting to be renamed
+         */
+        rename_setting: function(id, name) {
+            sf.ajax.get(base_url + "ajax/admin/rename-setting/name/" + name + "/");
+        },
+        
+        /**
+         * Removes a setting
+         * 
+         * Presents a dialog to confirm removal
+         * 
+         * @param id DOM ID of the setting to be removed
+         * @param name Name of the setting to be removed
+         */
+        remove_setting: function(id, name) {
+            sf.ui.dialog.prepare({
+                show: true,
+                title: 'Remove this setting?',
+                content: "Do you really want to remove setting '" + name + "'",
+                buttons: {
+                    type: 'okcancel',
+                    actions: {
+                        ok: [
+                            'remove_setting',
+                            'close-dialog'
+                        ],
+                        cancel: 'close-dialog'
+                    },
+                    params: {
+                        id: id,
+                        name: name
+                    }
+                }
+            });
+        },
+        
+        /**
+         * Adds a new field to a string list setting
+         * 
+         * For array(string) setting types, adds UI for a new element in the array
+         * 
+         * @param id DOM ID of the setting to have a new element added
+         */
+        add_stringlist_field: function(id) {
+            var container = $('#container_'+id);
+            var next = $('#settings_'+id+'_next');
+            var next_value = next.val();
+            
+            var line = $('<div>');
+            line.attr('id', 'settings_'+id+'_line'+next.val());
+            line.append($('<input type="text" name="'+id+'[]" class="setting settings_field_string" />'));
+            line.append(' ');
+            var button = $('<button class="btn small settings_field_remove">-</button>');
+            button.click(function() {
+                rc.settings.remove_stringlist_field(id, next_value);
+            });
+            line.append(button);
+            
+            // Add the new item
+            container.append(line);
+            
+            // Increment the next counter
+            next.val(parseInt(next_value)+1);
+        },
+    
+        /**
+         * Removes a field from a string list setting
+         * 
+         * For array(string) setting types, removes the UI for an element in the array
+         * 
+         * @param id DOM ID of the setting to be modified
+         * @param line Number of the line to be removed
+         */
+        remove_stringlist_field: function(id, line) {
+            $("#settings_"+id+"_line"+line).remove();
+        },
+        
+        /**
+         * Add a new Hash setting key
+         * 
+         * For hash setting types, adds UI for a new key
+         * 
+         * @param id DOM ID of the setting to be modified
+         */
+        add_hash_field: function(id) {
+            var container = $('#container_'+id);
+            var next = $('#settings_'+id+'_next');
+            var next_value = next.val();
+            
+            var line = $('<div>');
+            line.attr('id', 'settings_'+id+'_line'+next.val());
+            
+            var hash_key = $('<input type="text" value="" class="small setting hash_key" />');
+            var hash_value = $('<input type="text" id="setting_'+id+'_value'+next_value+'" name="'+id+'[New]" class="xlarge setting hash_value" />');
+            hash_key.change(function() {
+            	$('#setting_'+id+'_value'+next_value).attr('name', id+'['+$(this).val()+']');
+            });
+            
+            line.append(hash_key).append(' ').append(hash_value).append(' ');
+            var button = $('<button class="btn small settings_field_remove">-</button>');
+            button.click(function() {
+                rc.settings.remove_hash_field(id, next_value);
+            });
+            line.append(button);
+            
+            // Add the new item
+            container.append(line);
+            
+            // Increment the next counter
+            next.val(parseInt(next_value)+1);
+        },
+        
+        /**
+         * Removes a hash setting key
+         * 
+         * For hash setting types, removes the UI for a specific key
+         * 
+         * @param id DOM ID of the setting to be modified
+         * @param line Line number of the hash key to be removed
+         */
+        remove_hash_field: function(id, line) {
+        	$("#settings_"+id+"_line"+line).remove();
+        },
+        
+        /**
+         * Saves the current setting values to the database
+         * 
+         */
+        save: function() {
+            
+            var settings = {};
+            
+            var fields = $("input.setting").get();
+            for (var i in fields) {
+                var setting = fields[i];
+                var name = setting.name;
+                var value;
+                
+                switch(setting.type) {
+                    case 'checkbox':
+                        value = $(setting).is(':checked') ? 1 : 0;
+                        break;
+                    default:
+                        value = setting.value;
+                }
+                
+                if (/\[\]$/.test(name)) {
+                    if (! settings[name]) {
+                        settings[name] = [];
+                    }
+                    settings[name].push(value);
+                } else { 
+                    settings[name] = value;
+                }                    
+            }
+              
+            sf.ajax.post(base_url + "ajax/update-settings/", settings);
+            
+        }
+        
+    }
+     
+};
+
+$(document).ready(rc.init);

public/scripts/sihnon-js-lib

@@ -0,0 +1 @@
+../../externals/sihnon-js-lib/public

public/styles/3rdparty/jquery.asmselect.css

@@ -0,0 +1,63 @@
+.asmContainer {
+	/* container that surrounds entire asmSelect widget */
+}
+
+.asmSelect {
+	/* the newly created regular 'select' */
+	display: inline; 
+}
+
+.asmOptionDisabled {
+	/* disabled options in new select */
+	color: #999; 
+}
+
+.asmHighlight {
+	/* the highlight span */
+	padding: 0;
+	margin: 0 0 0 1em;
+}
+
+.asmList {
+	/* html list that contains selected items */
+	margin: 0.25em 0 1em 0; 
+	position: relative;
+	display: block;
+	padding-left: 0; 
+	list-style: none; 
+}
+
+.asmListItem {
+	/* li item from the html list above */
+	position: relative; 
+	margin-left: 0;
+	padding-left: 0;
+	list-style: none;
+	background: #ddd;
+	border: 1px solid #bbb; 
+	width: 100%; 
+	margin: 0 0 -1px 0; 
+	line-height: 1em;
+}
+
+.asmListItem:hover {
+	background-color: #e5e5e5;
+}
+
+.asmListItemLabel {
+	/* this is a span that surrounds the text in the item, except for the remove link */
+	padding: 5px; 
+	display: block;
+}
+
+.asmListSortable .asmListItemLabel {
+	cursor: move; 
+}
+
+.asmListItemRemove {
+	/* the remove link in each list item */
+	position: absolute;
+	right: 0; 
+	top: 0;
+	padding: 5px; 
+}

public/styles/normal.css

@@ -0,0 +1,76 @@
+/**
+ * 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;
+        font-family: verdana, helvetica, sans-serif;
+/*        background: #F7F7F7;*/
+    }
+    
+    a {
+        color: gray;
+    }
+    
+    label {
+        margin-left: 1em;
+        margin-right: 1em;
+    }
+    
+    footer {
+        padding: 2em;
+        font-size: smaller;
+        font-style: italic;
+        color: #333333;
+        text-align: center;
+    }
+    
+    .dialog-footer-buttonset {
+        display: none;
+    }
+    
+    .dialog-footer-buttonset fieldset {
+        padding-top: 0;
+        padding-bottom: 0;
+        margin-bottom: 0;
+    }
+    
+    .default {
+        background: beige;
+        color: darkgray;
+        font-style: italic;
+    }
+    
+    .icon {
+        height: 16px;
+        width: 16px;
+    }
+    
+    #quantizer-slider {
+    	width: 10em;
+    	margin: 0.5em;
+    }
+    
+    .highlight {
+        background: #dceaf4;
+    }
+}
+
+@media print {
+    
+    .no-print {
+        display: none;
+    }
+    
+    body {
+        margin: 0;
+    }
+    
+}

source/lib/RippingCluster/Job.class.php

@@ -184,7 +184,7 @@ class RippingCluster_Job {
         $database->insert(
         	'INSERT INTO jobs 
         	(id,name,source_plugin,rip_plugin,source,destination,title,format,video_codec,video_width,video_height,quantizer,deinterlace,audio_tracks,audio_codecs,audio_names,subtitle_tracks)
-        	VALUES(NULL,:name,:source,:destination,:title,:format,:video_codec,:video_width,:video_height,:quantizer,:deinterlace,:audio_tracks,:audio_codecs,:audio_names,:subtitle_tracks)',
+        	VALUES(NULL,:name,:source_plugin,:rip_plugin,:source,:destination,:title,:format,:video_codec,:video_width,:video_height,:quantizer,:deinterlace,:audio_tracks,:audio_codecs,:audio_names,:subtitle_tracks)',
             array(
                 array('name' => 'name',            'value' => $this->name,                 'type' => PDO::PARAM_STR),
                 array('name' => 'source_plugin',   'value' => $this->source_plugin,        'type' => PDO::PARAM_STR),
@@ -244,7 +244,10 @@ class RippingCluster_Job {
             'subtitle_tracks' => $this->subtitle_tracks,
         );
         
-        return array('HandBrake', array('rip_options' => $rip_options));
+        return array(
+        	'method' => 'HandBrake', 
+        	'rip_options' => $rip_options
+        );
     }
 
     protected function loadStatuses() {
@@ -350,13 +353,22 @@ class RippingCluster_Job {
     public function destinationFilename() {
         return $this->destination_filename;
     }
+    
+    public function destinationFileBasename() {
+        return basename($this->destination_filename);
+    }
 
     public function title() {
         return $this->title;
     }
 
     public static function runAllJobs() {
-        RippingCluster_BackgroundTask::run('/usr/bin/php ' . RippingCluster_Main::makeAbsolutePath('run-jobs.php'));
+        $env = $_ENV;
+        if (isset($_SERVER['RIPPING_CLUSTER_CONFIG'])) {
+            $env['RIPPING_CLUSTER_CONFIG'] = $_SERVER['RIPPING_CLUSTER_CONFIG'];
+        }
+        
+        RippingCluster_BackgroundTask::run('/usr/bin/php ' . RippingCluster_Main::makeAbsolutePath('../source/webui/run-jobs.php'), null, $env);
     }
     
 };

source/lib/RippingCluster/JobStatus.class.php

@@ -61,7 +61,7 @@ class RippingCluster_JobStatus {
         $statuses = array();
 
         $database = RippingCluster_Main::instance()->database();
-        foreach ($database->selectList('SELECT * FROM job_status WHERE job_id=:job_id ORDER BY mtime ASC', array(
+        foreach ($database->selectList('SELECT * FROM job_status WHERE job_id=:job_id ORDER BY id ASC', array(
                 array('name' => 'job_id', 'value' => $job->id(), 'type' => PDO::PARAM_INT),
             )) as $row) {
             $statuses[] = RippingCluster_JobStatus::fromDatabaseRow($row);

source/lib/RippingCluster/Main.class.php

@@ -4,6 +4,9 @@ require 'smarty/Smarty.class.php';
 
 class RippingCluster_Main extends SihnonFramework_Main {
 
+    const TEMPLATE_DIR = '../source/webui/templates/';
+    const CODE_DIR     = '../source/webui/pages/';
+
     protected static $instance;
 
     protected $smarty;
@@ -11,21 +14,25 @@ class RippingCluster_Main extends SihnonFramework_Main {
 
     protected function __construct() {
         parent::__construct();
+    }
 
+    protected function init() {
+        parent::init();
+        
         $request_string = isset($_GET['l']) ? $_GET['l'] : '';
 
-        $this->request  = new RippingCluster_RequestParser($request_string);
-
+        $this->request  = new RippingCluster_RequestParser($request_string, self::TEMPLATE_DIR, self::CODE_DIR);
+        
         switch (HBC_File) {
             case 'ajax':
             case 'index': {
-                $smarty_tmp = '/tmp/ripping-cluster';
+                $smarty_tmp = $this->config->get('templates.tmp_path', '/var/tmp/ripping-cluster');
                 $this->smarty = new Smarty();
-                $this->smarty->template_dir = static::makeAbsolutePath('./source/templates');
-                $this->smarty->compile_dir  = static::makeAbsolutePath($smarty_tmp . '/tmp/templates');
-                $this->smarty->cache_dir    = static::makeAbsolutePath($smarty_tmp . '/tmp/cache');
+                $this->smarty->template_dir = static::makeAbsolutePath(self::TEMPLATE_DIR);
+                                $this->smarty->compile_dir  = static::makeAbsolutePath($smarty_tmp . '/templates');
+                $this->smarty->cache_dir    = static::makeAbsolutePath($smarty_tmp . '/cache');
                 $this->smarty->config_dir   = static::makeAbsolutePath($smarty_tmp . '/config');
-                $this->smarty->plugins_dir[]= static::makeAbsolutePath('./source/smarty/plugins');
+                $this->smarty->plugins_dir[]= static::makeAbsolutePath('../source/webui/smarty/plugins');
                  
                 $this->smarty->registerPlugin('modifier', 'formatDuration', array('RippingCluster_Main', 'formatDuration'));
                 $this->smarty->registerPlugin('modifier', 'formatFilesize', array('RippingCluster_Main', 'formatFilesize'));
@@ -35,7 +42,8 @@ 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/lib/RippingCluster/Source/Plugin/Bluray.class.php

@@ -68,6 +68,8 @@ class RippingCluster_Source_Plugin_Bluray extends RippingCluster_PluginBase impl
                 $source->cache();
             }
         }
+        
+        return $source;
     }
     
     /**

source/webui/pages/ajax/admin/add-setting.php

@@ -30,6 +30,10 @@ try {
             $type = Sihnon_Config::TYPE_STRING_LIST;
             $value = array();
         } break;
+        case 'hash': {
+            $type = Sihnon_Config::TYPE_HASH;
+            $value = array('' => '');
+        } break;
     }
     
     // Add the new (empty) value. This is because no suitable UI has been presented yet.

source/webui/pages/jobs.php

@@ -44,7 +44,7 @@ if ($req->exists('submit')) {
             RippingCluster_Job::runAllJobs();
 
             # Redirect to the job queued page to show the jobs were successfully dispatched
-            RippingCluster_Page::redirect('rips/setup-rip/queued');
+            RippingCluster_Page::redirect('rips/setup/queued');
         } break;
 
         case 'delete': {

source/webui/pages/rips/setup.php

@@ -0,0 +1,56 @@
+<?php
+
+$main   = RippingCluster_Main::instance();
+$req    = $main->request();
+$config = $main->config();
+
+// Grab the name of this source
+$encoded_filename = null;
+if ($req->exists('submit')) {
+    $encoded_filename = RippingCluster_Main::issetelse($_POST['id'], 'RippingCluster_Exception_InvalidParameters');
+    
+    // Update the recently used list
+    $recent_output_directories = $config->get('rips.output_directories.recent');
+    if (( $key = array_search($_POST['rip-options']['output-directory'], $recent_output_directories, true)) >= 0) {
+        // Move the entry to the top of the recently used list if necessary
+        $recent_directory = array_splice($recent_output_directories, $key, 1);
+        if ($key > 0) {
+            array_unshift($recent_output_directories, $recent_directory[0]);
+            $config->set('rips.output_directories.recent', array_slice($recent_output_directories, 0, $config->get('rips.output_directories.recent_limit', 10)));
+        }
+    } else {
+        array_unshift($recent_output_directories, $_POST['rip-options']['output-directory']);
+        $config->set('rips.output_directories.recent', array_slice($recent_output_directories, 0, $config->get('rips.output_directories.recent_limit', 10)));
+    }
+
+    // Create the jobs from the request
+    $jobs = RippingCluster_Job::fromPostRequest($_POST['plugin'], $_POST['id'], $_POST['rip-options'], $_POST['rips']);
+    
+    // Spawn the background client process to run all the jobs
+    RippingCluster_Job::runAllJobs();
+    
+    RippingCluster_Page::redirect('rips/setup/queued');
+    
+} elseif ($req->exists('queued')) {
+    $this->smarty->assign('rips_submitted', true);
+    
+} else {
+    $this->smarty->assign('rips_submitted', false);
+    $encoded_filename = $req->get('id', 'RippingCluster_Exception_InvalidParameters');
+    
+    $plugin = $req->get('plugin', 'RippingCluster_Exception_InvalidParameters');
+    $source = RippingCluster_Source_PluginFactory::loadEncoded($plugin, $encoded_filename);
+    
+    $this->smarty->assign('source', $source);
+    $this->smarty->assign('titles', $source->titles());
+    $this->smarty->assign('longest_title', $source->longestTitle());
+    $this->smarty->assign('default_output_directory', $config->get('rips.default.output_directory'));
+    
+    $default_output_directories = $config->get('rips.output_directories.default');
+    $recent_output_directories  = $config->get('rips.output_directories.recent');
+    $this->smarty->assign('default_output_directories', $default_output_directories);
+    $this->smarty->assign('recent_output_directories', $recent_output_directories);
+    $this->smarty->assign('next_output_directory_index', count($default_output_directories) + count($recent_output_directories) + 1);
+}
+
+?>

source/webui/run-jobs.php

@@ -2,12 +2,10 @@
 
 define('HBC_File', 'run-jobs');
 
-require_once '/etc/ripping-cluster/config.php';
-require_once(SihnonFramework_Lib . 'SihnonFramework/Main.class.php');
+require_once '_inc.php';
+
 require_once 'Net/Gearman/Client.php';
 
-SihnonFramework_Main::registerAutoloadClasses('SihnonFramework', SihnonFramework_Lib,
-												'RippingCluster', RippingCluster_Lib);
 
 try {
     $main = RippingCluster_Main::instance();
@@ -22,14 +20,14 @@ try {
     
     foreach ($jobs as $job) {
         // Enqueue the job using gearman
-        list($method, $rip_options) = $job->queue();
-        $task = new Net_Gearman_Task($method, $rip_options);
+        $args = $job->queue();
+        $task = new Net_Gearman_Task($args['method'], $args);
         $task->attachCallback('gearman_complete', Net_Gearman_Task::TASK_COMPLETE);
         $task->attachCallback('gearman_fail', Net_Gearman_Task::TASK_FAIL);
         $set->addTask($task);
         
         $job->updateStatus(RippingCluster_JobStatus::QUEUED);
-        RippingCluster_ClientLogEntry::info($log, $rip_options['id'], 'Job queued', 'client');
+        RippingCluster_ClientLogEntry::info($log, $args['rip_options']['id'], 'Job queued', 'client');
     }
     
     $job_count = count($jobs);

source/webui/templates/admin/settings.tpl

@@ -17,13 +17,9 @@
     <tfoot>
         <tr>
             <td colspan="2">
-                <input type="button" id="settings_save" name="save" value="Save" />
-                <input type="button" id="settings_new" name="new_setting" value="New Setting" />
+                <button id="settings_save" class="btn primary" name="save">Save</button>
+                <button id="settings_new" class="btn" name="new_setting">New Setting</button>
             </td>
         </tr>
     </tfoot>
 </table>
-
-<script type="text/javascript">
-    rc.settings.init();
-</script>

source/webui/templates/ajax/admin/new-setting.tpl

@@ -1,10 +1,10 @@
 "page_replacements": {
 
-    "dialogheadertitle": {
+    "dialog-header-title": {
         "content": "Add Setting"
     },
     
-    "dialogcontent": {
+    "dialog-body": {
         {include file="fragments/new-setting-dialog.tpl" assign=new_setting_dialog_content}
         "content": {$new_setting_dialog_content|json_encode}
     }

source/webui/templates/ajax/admin/rename-setting.tpl

@@ -14,11 +14,11 @@
     "success": {$success|json_encode}
 {else}
     "page_replacements": {
-        "dialogheadertitle": {
+        "dialog-header-title": {
             "content": "Rename Setting"
         },
         
-        "dialogcontent": {
+        "dialog-body": {
             {include file="fragments/rename-setting-dialog.tpl" assign="content"}
             "content": {$content|json_encode}
         }

source/webui/templates/ajax/delete-source.tpl

@@ -6,11 +6,11 @@
             "content": {$sources_html|json_encode}
         }
     {else}
-        "dialogheadertitle" {
-            "content": "Delete Source"
+        "dialog-header-title": {
+            "content": "Delete this source?"
         },
         
-        "dialogcontent": {
+        "dialog-body": {
             {include file="fragments/delete-source.tpl" assign="delete_source_html"}
             "content": {$delete_source_html|json_encode}
         }

source/webui/templates/ajax/update-settings.tpl

@@ -1,10 +1,10 @@
 "page_replacements": {
 
-    "dialogheadertitle": {
-        "content": "Update Settings"
+    "dialog-header-title": {
+        "content": "Settings updated"
     },
     
-    "dialogcontent": {
+    "dialog-body": {
         {include file="fragments/update-settings-dialog.tpl" assign=dialog_content}
         "content": {$dialog_content|json_encode}
     }

source/webui/templates/fragments/admin-setting-row.tpl

@@ -0,0 +1,14 @@
+<tr id="setting_{$id}_row">
+    <td>
+        <p>
+            <strong>{$name}</strong>
+        </p>
+        <p>
+            <button id="setting_{$id}_rename" class="btn" onclick="rc.settings.rename_setting('{$id}', '{$name}');">Rename</button>
+            <button id="setting_{$id}_remove" class="btn" onclick="rc.settings.remove_setting('{$id}', '{$name}');">Remove</button>
+        </p>
+    </td>
+    <td>
+        {include file="fragments/admin-setting-value.tpl"}
+    </td>
+</tr>

source/webui/templates/fragments/admin-setting-value.tpl

@@ -0,0 +1,45 @@
+{switch $type}
+    {case Sihnon_Config::TYPE_BOOL}
+        <input type="checkbox" id="setting_{$id}" name="{$id}" value="1" {if $value}checked="checked" {/if} class="setting" />
+    {/case}
+    {case Sihnon_Config::TYPE_INT}
+        <input type="text" id="setting_{$id}" name="{$id}" value="{$value}" class="small setting settings_field_numeric" />
+    {/case}
+    {case Sihnon_Config::TYPE_STRING}
+        <input type="text" id="setting_{$id}" name="{$id}" value="{$value}" class="xxlarge setting settings_field_string" />
+    {/case}
+    {case Sihnon_Config::TYPE_STRING_LIST}
+        <div id="container_{$id}">
+            {foreach from=$value item=line name=settings}
+                <div id="settings_{$id}_line{$smarty.foreach.settings.iteration}">
+                    <input type="text" name="{$id}[]" value="{$line}" class="xxlarge setting settings_field_string" />
+                    <button class="btn small settings_field_remove" onclick="rc.settings.remove_stringlist_field('{$id}', '{$smarty.foreach.settings.iteration}')">-</button>
+                </div>
+            {/foreach}
+        </div>
+        <div class="settings_addfieldcontainer">
+            <input type="hidden" id="settings_{$id}_next" value="{$smarty.foreach.settings.iteration+1}" />
+            <button class="btn small settings_field_add" onclick="rc.settings.add_stringlist_field('{$id}')">+</button>
+        </div>
+    {/case}
+    {case Sihnon_Config::TYPE_HASH}
+        <div id="container_{$id}">
+            {if $value}
+                {foreach from=$value item=hash_value key=hash_key name=settings}
+                    <div id="settings_{$id}_line{$smarty.foreach.settings.iteration}">
+                        <input type="text" value="{$hash_key}" class="small setting hash_key" />
+                        <input type="text" name="{$id}[{$hash_key}]" value="{$hash_value}" class="xlarge setting hash_value" />
+                        <button class="btn small settings_field_remove" onclick="rc.settings.remove_hash_field('{$id}', '{$smarty.foreach.settings.iteration}')">-</button>
+                    </div>
+                {/foreach}
+            {/if}
+        </div>
+        <div class="settings_addfieldcontainer">
+            <input type="hidden" id="settings_{$id}_next" value="{$smarty.foreach.settings.iteration+1}" />
+            <button class="btn small settings_field_add" onclick="rc.settings.add_hash_field('{$id}')">+</button>
+        </div>
+        
+    {/case}
+    {default}
+        <em>Unsupported setting type!</em>
+{/switch}

source/webui/templates/fragments/job-filename-popover.tpl

@@ -0,0 +1,9 @@
+<dl>
+    <dt>Destination Filename</dt>
+    <dd>{$job->destinationFilename()|escape:html}</dd>
+    
+    {if $job->isFinished()}
+        <dt>File size</dt>
+        <dd>({$job->outputFilesize()|formatFilesize|escape:html})</dd>
+    {/if}
+</dl>

source/webui/templates/fragments/job-status-popover.tpl

@@ -0,0 +1,15 @@
+<dl>
+    {if $current_status->hasProgressInfo()}        
+        <dt>Started</dt>
+        <dd>{$current_status->ctime()|date_format:"%D %T"}</dd>
+
+        <dt>Progress</dt>
+        <dd>{$current_status->ripProgress()}%</dd>
+
+        <dt>ETA</dt>
+        <dd>{$job->calculateETA()|formatDuration}</dd>
+    {/if}
+
+    <dt>Last update</dt>
+    <dd>{$current_status->mtime()|date_format:"%D %T"}</dd>    
+</dl>

source/webui/templates/fragments/new-setting-dialog.tpl

@@ -0,0 +1,11 @@
+<label for="settings_add_name">Name</label>
+<input type="text" id="settings_add_name" value="" />
+
+<label for="settings_add_type">Type</label>
+<select id="settings_add_type">
+    <option value="int">Integer</option>
+    <option value="bool">Boolean</option>
+    <option value="string">String</option>
+    <option value="string-list">String List</option>
+    <option value="hash">Hash</option>
+</select>

source/webui/templates/fragments/rename-setting-dialog.tpl

@@ -2,5 +2,5 @@
     <p>
         Enter a new name for setting '{$name|escape}' below.
     </p>
-    <input type="text" id="settings_rename_name" value="" />
+    <input type="text" id="settings_rename_name" value="{$name|escape:html}" />
 </div>

source/webui/templates/fragments/source-list.tpl

@@ -7,7 +7,7 @@
 				{assign var='source_filename' value=$source->filename()}
 				{assign var='source_filename_encoded' value=$source->filenameEncoded()}
 				{assign var='source_cached' value=$source->isCached()}
-				<li>
+				<li class="hover-highlight">
 					[ <a href="{$base_uri}sources/details/plugin/{$source_plugin}/id/{$source_filename_encoded}" title="Browse source details">Browse</a> |
 		  			<a href="{$base_uri}rips/setup/plugin/{$source_plugin}/id/{$source_filename_encoded}" title="Rip this source">Rip</a> |
 		  			<a href="javascript:rc.sources.remove('{$source_plugin|escape:'quote'}', '{$source_filename_encoded|escape:'quote'}');" title="Delete this source">Delete</a> ]

source/webui/templates/fragments/update-settings-dialog.tpl

@@ -1,5 +1,5 @@
 <p>
-    Settings have been saved.
+    Your changes have been saved.
 </p>
 
 {if $messages}

source/webui/templates/home.tpl

@@ -4,7 +4,7 @@
 
 {if $running_jobs}
         {foreach from=$running_jobs item=job}
-            <li><a href="{$base_uri}jobs/details/id/{$job->id()}" title="View job details">{$job->name()} ({$job->currentStatus()->ripProgress()}%)</a></li>
+            <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}
 {else}
     <em>There are no currently running jobs.</em>

source/webui/templates/index.tpl

@@ -0,0 +1,131 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+    <head>
+        <title>{$title}</title>
+
+        <!-- JQuery //-->
+        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/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/sihnon-js-lib/sihnon-framework.js"></script>
+        <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">
+            var base_uri = "{$base_uri|escape:'quote'}";
+            var base_url = "{$base_url|escape:'quote'}";
+        </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 class="container">
+            <div class="row">
+                <div class="span16">
+                    <h1>RippingCluster WebUI</h1>
+                </div>
+            </div>
+        
+            <div class="row">
+                {if ! $messages}
+                    {$session = RippingCluster_Main::instance()->session()}
+                    {$messages = $session->get('messages')}
+                    {$session->delete('messages')}
+                {/if}
+                {if $messages}
+                    <div id="messages">
+                        {foreach from=$messages item=message}
+                            {if is_array($message)}
+                                {$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>
+    
+            <footer class="no-print">
+                <p>
+                    Powered by RippingCluster WebUI {$version}. Written by Ben Roberts.
+                </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>
+        
+        <div id="dialog" class="modal hide fade">
+            <div class="modal-header">
+                <a href="#" class="close">&times;</a>
+                <h3 id="dialog-header-title"></h3>
+            </div>
+            <div id="dialog-body" class="modal-body"></div>
+            <div id="dialog-footer" class="modal-footer">
+                <div id="dialog-footer-ok" class="dialog-footer-buttonset">
+                    <fieldset>
+                        <input type="button" class="btn primary" id="dialog-footer-ok-ok" value="Ok" />
+                    </fieldset>
+                </div>
+                <div id="dialog-footer-okcancel" class="dialog-footer-buttonset">
+                    <fieldset>
+                        <input type="button" class="btn primary" id="dialog-footer-okcancel-ok" value="Ok" />
+                        <input type="button" class="btn secondary" id="dialog-footer-okcancel-cancel" value="Cancel" />
+                    </fieldset>
+                </div>
+                <div id="dialog-footer-yesno" class="dialog-footer-buttonset">
+                    <fieldset>
+                        <input type="button" class="btn primary" id="dialog-footer-yesno-yes" value="Yes" />
+                        <input type="button" class="btn secondary" id="dialog-footer-yesno-no" value="No" />
+                    </fieldset>
+                </div>
+            </div>
+        </div>
+
+    </body>
+</html>

source/webui/templates/jobs.tpl

@@ -31,44 +31,41 @@
     <table>
         <thead>
             <tr>
+                <th>
+                    <input id="jobs_select_all" class="select_all" type="checkbox" />
+                    Actions
+                </th>
                 <th>Name</th>
                 <th>Destination</th>
-                <th>Title</th>
                 <th>Status</th>
-                <th>Actions</th>
             </tr>
         </thead>
         <tbody>
             {foreach from=$jobs item=job}
                 {assign var=current_status value=$job->currentStatus()}
                 <tr>
-                    <td><a href="{$base_uri}jobs/details/id/{$job->id()}" title="View job details">{$job->name()}</a></td>
-                    <td>
-                    	{$job->destinationFilename()}
-                    	{if $job->isFinished()}
-                    		({$job->outputFilesize()|formatFilesize})
-                    	{/if}
-                    </td>
-                    <td>{$job->title()}</td>
-                    <td>
-                        {$current_status->statusName()}
-                        {if $current_status->hasProgressInfo()}
-                            <br />
-                            Started: <em>{$current_status->ctime()|date_format:"%D %T"}</em><br />
-                            Progress: {$current_status->ripProgress()}%<br />
-                            Last update: <em>{$current_status->mtime()|date_format:"%D %T"}</em><br />
-                            ETA: <em>{$job->calculateETA()|formatDuration}</em>
-                        {/if}
-                    </td>
                     <td>
                         <fieldset>
-                            <input type="checkbox" name="include[]" value="{$job->id()}" />
+                            <input type="checkbox" class="jobs_select_all" name="include[]" value="{$job->id()}" />
                             <input type="image" class="icon" name="action" id="mark-failed-{$job->id()}" value="mark-failed[{$job->id()}]" src="{$base_uri}images/caution.png" alt="Mark job as failed" />
                             <input type="image" class="icon" name="action" id="redo-{$job->id()}" value="retry[{$job->id()}]" src="{$base_uri}images/redo.png" alt="Repeat job" />
                             <input type="image" class="icon" name="action" id="delete-{$job->id()}" value="delete[{$job->id()}]" src="{$base_uri}images/trash.png" alt="Delete job" />
                             <input type="image" class="icon" name="action" id="fix-broken-timestamps-{$job->id()}" value="fix-broken-timestamps[{$job->id()}]" src="{$base_uri}images/clock.png" alt="Fix broken status timestamps" />
                         </fieldset>
                     </td>
+                    <td><a href="{$base_uri}jobs/details/id/{$job->id()}" title="View job details">{$job->name()}</a></td>
+                    <td>
+                        {include file="fragments/job-filename-popover.tpl" assign=popover_content}
+                    	<a href="#" rel="popover" data-placement="below" data-title="Destination details" data-content="{$popover_content|escape:html}">{$job->destinationFileBasename()|escape:html}</a>
+                    </td>
+                    <td>
+                        {include file="fragments/job-status-popover.tpl" assign=popover_content}
+                        <a href="#" rel="popover" title="{$current_status->statusName()|escape:html}" data-placement="below" data-content="{$popover_content|escape:html}">{$current_status->statusName()}</a>
+                        {if $current_status->hasProgressInfo()}
+                            <br />
+                            <small>{$job->calculateETA()|formatDuration:1} remaining</small>
+                        {/if}
+                    </td>
                 </tr>
             {/foreach}
         </tbody>

source/webui/templates/navigation.tpl

@@ -0,0 +1,31 @@
+<a class="brand" href="{$base_uri}home/">RippingCluster</a>
+
+<ul class="nav">
+    <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>
+

source/webui/templates/rips/setup.tpl

@@ -17,46 +17,73 @@
 
 			<input type="hidden" name="id" value="{$source->filenameEncoded()|escape:"html"}" />
 	
-			<div>
+			<div class="clearfix">
 				<label for="global-output-directory">Output directory</label>
-				<input type="text" id="global-ouput-directory" name="rip-options[output-directory]" value="{$default_output_directory}" />
+                <select id="global-output-directory" name="rip-options[output-directory]" class="xxlarge">
+                    <optgroup label="Custom"></optgroup>
+                    <optgroup label="Defaults">
+                        {foreach from=$default_output_directories item=dir key=name}
+                            <option value="{$dir}">{$name}</option>
+                        {/foreach}    
+                    </optgroup>
+                    <optgroup label="Recently Used">
+                        {foreach from=$recent_output_directories item=dir name=recent}
+                            {if $smarty.foreach.recent.iteration eq 1}
+                                <option value="{$dir}" selected="selected">{$dir}</option>
+                            {else}
+                                <option value="{$dir}">{$dir}</option>
+                            {/if}
+                        {/foreach}                        
+                    </optgroup>
+                </select>
+                <script type="text/javascript">
+                    $('#global-output-directory').jec({
+                        position: 1,
+                        blinkingCursor: true
+                    });
+                </script>
+                
 			</div>
 			
-			<div>
+			<div class="clearfix">
 				<label for="global-format">Output format</label>
-				<select id="global-format" name="rip-options[format]">
+				<select id="global-format" name="rip-options[format]" class="small">
 					<option value="mkv" selected="selected">MKV</option>
 				</select>
 			</div>
 			
-			<div>
+			<div class="clearfix">
 				<label for="global-video-codec">Video codec</label>
-				<select id="global-video-codec" name="rip-options[video-codec]">
+				<select id="global-video-codec" name="rip-options[video-codec]" class="small">
 					<option value="x264" selected="selected">x264</option>
 				</select>
 			</div>
 			
-			<div>
+			<div class="clearfix">
 				<label for="global-video-width">Video width</label>
-				<input type="text" id="global-video-width" name="rip-options[video-width]" value="0" />
-				<em>(Use 0 to leave size unchanged from source.)</em>
-			</div>
-			<div>
-				<label for="global-video-height">Video height</label>
-				<input type="text" id="global-video-width" name="rip-options[video-width]" value="0" />
-				<em>(Use 0 to leave size unchanged from source.)</em>
+				<div class="input">
+    				<input type="text" id="global-video-width" name="rip-options[video-width]" value="0" />
+    				<span class="help-inline">(Use 0 to leave size unchanged from source.)</span>
+				</div>
 			</div>
 			
-			<div>
+			<div class="clearfix">
+				<label for="global-video-height">Video height</label>
+				<div class="input">
+    				<input type="text" id="global-video-height" class="small" name="rip-options[video-height]" value="0" />
+				    <span class="help-inline">(Use 0 to leave size unchanged from source.)</span>
+			    </div>
+			</div>
+			
+			<div class="clearfix">
 				<label for="global-quantizer">Quantizer</label>
-				<input type="text" id="global-quantizer" name="rip-options[quantizer]" value="" readonly="readonly" />
-				<em>(Defaults to 0.61, x264's quantizer value for 20)</em>
-				<div id="quantizer-slider"></div>
+                <div class="input">
+                    <div id="quantizer-slider"></div>
+                    <input type="text" id="global-quantizer" class="small" name="rip-options[quantizer]" value="" readonly="readonly" />
+    				<span class="help-inline">(Defaults to 0.61, x264's quantizer value for 20)</span>
+				</div>
 			</div>
 	
-			<div>
-				<input type="submit" name="submit" value="Queue rips" />
-			</div>
 		</fieldset>
 			
 		<div id="available-titles">
@@ -66,68 +93,38 @@
 		    		<fieldset>
 		    			<legend>Configure title rip options</legend>
 		    			
-		    			<div>
+		    			<div class="clearfix">
 		    				<label for="rip-title-{$title->id()}">Rip this title</label>
 		    				<input type="checkbox" id="rip-title-{$title->id()}" name="rips[{$title->id()}][queue]" value="1" />
 		    			</div>
 
-                        <div>
+                        <div class="clearfix">
                             <label for="rip-name-{$title->id()}">Short Name</label>
                             <input type="text" id="rip-name-{$title->id()}" name="rips[{$title->id()}][name]" value="" />
                         </div>
 
-						<div>		    			
+						<div class="clearfix">		    			
 			    			<label for="rip-audio-{$title->id()}">Audio tracks</label>
-			    			<select id="rip-audio-{$title->id()}" name="rips[{$title->id()}][audio][]" size="5" multiple="multiple" class="rip-streams">
+			    			<select id="rip-audio-{$title->id()}" name="rips[{$title->id()}][audio][]" title="Select audio tracks" size="5" multiple="multiple" class="rip-streams">
 			    				{foreach from=$title->audioTracks() item=audio}
 			    					<option value="{$audio->id()}">{$audio->name()} - {$audio->channels()} ({$audio->language()}) </option>
 			    				{/foreach}
 			    			</select>
 			    			
-			    			<table class="audio-tracks">
-			    				<caption>Selected audio tracks</caption>
-			    				<thead>
-                                    <tr>
-    			    					<th>Track</th>
-    			    					<th>Encoder</th>
-    			    					<th>Name</th>
-                                    </tr>
-			    				</thead>
-			    				<tbody>
-			    					
-			    				</tbody>
-			    			</table>
-		    			</div>
-		    		
-		    			<div>
+		    			<div class="clearfix">
 			    			<label for="rip-subtitle-{$title->id()}">Subtitle tracks</label>
-			    			<select id="rip-subtitle-{$title->id()}" name="rips[{$title->id()}][subtitles][]" size="5" multiple="multiple" class="rip-streams">
+			    			<select id="rip-subtitle-{$title->id()}" name="rips[{$title->id()}][subtitles][]" title="Select subtitle tracks" size="5" multiple="multiple" class="rip-streams">
 			    				{foreach from=$title->subtitleTracks() item=subtitle}
 			    					<option value="{$subtitle->id()}">{$subtitle->language()}</option>
 			    				{/foreach}
 			    			</select>
 
-			    			<table class="subtitle-tracks">
-			    				<caption>Selected subtitle tracks</caption>
-			    				<thead>
-                                    <tr>
-    			    					<th>Track</th>
-    			    					<th>Language</th>
-    			    					<th>Format</th>
-                                    </tr>
-			    				</thead>
-			    				<tbody>
-			    					
-			    				</tbody>
-			    			</table>
-		    			</div>
-		    		
-		    			<div>
+		    			<div class="clearfix">
 			    			<label for="rips-output-{$title->id()}">Output filename</label>
 			    			<input type="text" id="rips-output-{$title->id()}" name="rips[{$title->id()}][output_filename]" value="" />
 		    			</div>
 
-						<div>	
+						<div class="clearfix">	
 							<label for="rip-deinterlace-{$title->id()}">Deinterlacing</label>	    			
 			    			<select id="rip-deinterlace-{$title->id()}" name="rips[{$title->id()}][deinterlace]">
 			    				<option value="0">None</option>
@@ -162,6 +159,9 @@
 			}
 		});
 		$("#global-quantizer").val($("#quantizer-slider").slider("value"));
+        $('select[multiple]').asmSelect({
+            
+        });
 	});
 	</script>
 	{/literal}