Merge branch 'feature-destinations' into develop

webui/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); 

webui/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));

webui/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);

webui/scripts/main.js

@@ -280,11 +280,11 @@ var rc = {
             
             var line = $('<div>');
             line.attr('id', 'settings_'+id+'_line'+next.val());
-            line.append($('<input type="text" class="settings_field_string" />'));
+            line.append($('<input type="text" name="'+id+'[]" class="setting settings_field_string" />'));
             line.append(' ');
             var button = $('<input type="button" value="-" class="settings_field_remove"/>');
             button.click(function() {
-                rc.settings.remove_field(id, next_value);
+                rc.settings.remove_stringlist_field(id, next_value);
             });
             line.append(button);
             
@@ -293,12 +293,43 @@ var rc = {
             
             // Increment the next counter
             next.val(parseInt(next_value)+1);
-            
         },
     
         remove_stringlist_field: function(id, line) {
             $("#settings_"+id+"_line"+line).remove();
-        }, 
+        },
+        
+        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="New" class="setting hash_key" />');
+            var hash_value = $('<input type="text" id="setting_'+id+'_value'+next_value+'" name="'+id+'[New]" class="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 = $('<input type="button" value="-" class="settings_field_remove"/>');
+            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);
+        },
+        
+        remove_hash_field: function(id, line) {
+        	$("#settings_"+id+"_line"+line).remove();
+        },
         
         save: function() {
             

webui/source/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.

webui/source/pages/rips/setup.php

@@ -8,6 +8,13 @@ $config = $main->config();
 $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 ( ! in_array($_POST['rip-options']['output-directory'], $recent_output_directories)) {
+        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']);
@@ -31,6 +38,12 @@ if ($req->exists('submit')) {
     $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);
 }
 
 ?>

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

@@ -22,4 +22,22 @@
             <input type="button" value="+" class="settings_field_add" onclick="rc.settings.add_stringlist_field('{$id}')" />
         </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}
+        </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}')" />
+        </div>
+        
+    {/case}
+    {default}
+        <em>Unsupported setting type!</em>
 {/switch}

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

@@ -14,6 +14,7 @@
                     <option value="bool">Boolean</option>
                     <option value="string">String</option>
                     <option value="string-list">String List</option>
+                    <option value="hash">Hash</option>
                 </select>
             </td>
         </tr>

webui/source/templates/home.tpl

@@ -4,8 +4,26 @@
 
 {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}
+        <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}

webui/source/templates/index.tpl

@@ -11,9 +11,13 @@
             var base_url = "{$base_url|escape:'quote'}";
         </script>
         
-        <link type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" rel="Stylesheet" />	
+        <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" rel="Stylesheet" />
+        <link type="text/css" href="{$base_uri}styles/3rdparty/jquery.asmselect.css" rel="Stylesheet" />	
 		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+        <script type="text/javascript" src="{$base_uri}scripts/3rdparty/jquery.jec-1.3.2.js"></script>
+        <script type="text/javascript" src="{$base_uri}scripts/3rdparty/jquery.asmselect.js"></script>
+        <script type="text/javascript" src="{$base_uri}scripts/3rdparty/jquery.progressbar.min.js"></script>
 		<script type="text/javascript" src="{$base_uri}scripts/main.js"></script>
     </head>
     <body>

webui/source/templates/rips/setup.tpl

@@ -19,7 +19,30 @@
 	
 			<div>
 				<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]">
+                    <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>
@@ -78,7 +101,7 @@
 
 						<div>		    			
 			    			<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}
@@ -101,7 +124,7 @@
 		    		
 		    			<div>
 			    			<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}
@@ -162,6 +185,9 @@
 			}
 		});
 		$("#global-quantizer").val($("#quantizer-slider").slider("value"));
+        $('select[multiple]').asmSelect({
+            
+        });
 	});
 	</script>
 	{/literal}

webui/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; 
+}

webui/styles/normal.css

@@ -155,6 +155,12 @@ table#settings td {
 table#settings input[type=text] {
     width: 40em;    
 }
+table#settings input.hash_key {
+	width: 10em;
+}
+table#settings input.hash_value {
+	width: 25em;
+}
 .settings_addfieldcontainer {
     text-align: right;    
 }