Merge branch 'feature-layout' into 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.chained.js

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

public/scripts/main.js

@@ -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/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

@@ -353,6 +353,10 @@ class RippingCluster_Job {
     public function destinationFilename() {
         return $this->destination_filename;
     }
+    
+    public function destinationFileBasename() {
+        return basename($this->destination_filename);
+    }
 
     public function title() {
         return $this->title;
@@ -364,7 +368,7 @@ class RippingCluster_Job {
             $env['RIPPING_CLUSTER_CONFIG'] = $_SERVER['RIPPING_CLUSTER_CONFIG'];
         }
         
-        RippingCluster_BackgroundTask::run('/usr/bin/php ' . RippingCluster_Main::makeAbsolutePath('run-jobs.php'), null, $env);
+        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 = '/var/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 . '/templates');
+                $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/webui/pages/ajax/admin/add-setting.php

@@ -32,7 +32,7 @@ try {
         } break;
         case 'hash': {
             $type = Sihnon_Config::TYPE_HASH;
-            $value = array();
+            $value = array('' => '');
         } break;
     }
     

source/webui/pages/rips/setup.php

@@ -11,7 +11,14 @@ if ($req->exists('submit')) {
     
     // Update the recently used list
     $recent_output_directories = $config->get('rips.output_directories.recent');
-    if ( ! in_array($_POST['rip-options']['output-directory'], $recent_output_directories)) {
+    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)));
     }

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

@@ -3,38 +3,40 @@
         <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="setting settings_field_numeric" />
+        <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="setting settings_field_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="setting settings_field_string" />
-                    <input type="button" value="-" class="settings_field_remove" onclick="rc.settings.remove_stringlist_field('{$id}', '{$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}" />
-            <input type="button" value="+" class="settings_field_add" onclick="rc.settings.add_stringlist_field('{$id}')" />
+            <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}">
-            {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="setting hash_key" />
-                    <input type="text" name="{$id}[{$hash_key}]" value="{$hash_value}" class="setting hash_value" />
-                    <input type="button" value="-" class="settings_field_remove" onclick="rc.settings.remove_hash_field('{$id}', '{$smarty.foreach.settings.iteration}')" />
-                </div>
-            {/foreach}
+            {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}" />
-            <input type="button" value="+" class="settings_field_add" onclick="rc.settings.add_hash_field('{$id}')" />
+            <button class="btn small settings_field_add" onclick="rc.settings.add_hash_field('{$id}')">+</button>
         </div>
         
     {/case}

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

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

source/webui/templates/index.tpl

@@ -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,9 +17,9 @@
 
 			<input type="hidden" name="id" value="{$source->filenameEncoded()|escape:"html"}" />
 	
-			<div>
+			<div class="clearfix">
 				<label for="global-output-directory">Output directory</label>
-                <select id="global-output-directory" name="rip-options[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}
@@ -45,41 +45,45 @@
                 
 			</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-height" name="rip-options[video-height]" 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">
@@ -89,17 +93,17 @@
 		    		<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][]" title="Select audio tracks" size="5" multiple="multiple" class="rip-streams">
 			    				{foreach from=$title->audioTracks() item=audio}
@@ -107,22 +111,7 @@
 			    				{/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][]" title="Select subtitle tracks" size="5" multiple="multiple" class="rip-streams">
 			    				{foreach from=$title->subtitleTracks() item=subtitle}
@@ -130,27 +119,12 @@
 			    				{/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>