Switch to jQuery based numpad instead of relying on system keyboard

web_app/css/external/jquery.keypad.css

@@ -0,0 +1,106 @@
+/* Main style sheet for jQuery Keypad v2.0.0 */
+button.keypad-trigger {
+	width: 25px;
+	padding: 0px;
+}
+img.keypad-trigger {
+	margin: 2px;
+	vertical-align: middle;
+}
+.keypad-popup, .keypad-inline, .keypad-key, .keypad-special {
+	font-family: Arial,Helvetica,sans-serif;
+	font-size: 24px;
+}
+.keypad-popup {
+	display: none;
+	z-index: 10;
+	margin: 0;
+	padding: 0;
+	background-color: #fff;
+	color: #000;
+	border: 1px solid #888;
+	-moz-border-radius: 0.25em;
+	-webkit-border-radius: 0.25em;
+	border-radius: 0.25em;
+}
+.keypad-keyentry {
+	display: none;
+}
+.keypad-inline {
+	background-color: #fff;
+	border: 1px solid #888;
+	-moz-border-radius: 0.25em;
+	-webkit-border-radius: 0.25em;
+	border-radius: 0.25em;
+}
+.keypad-disabled {
+	position: absolute;
+	z-index: 100;
+	background-color: white;
+	opacity: 0.5;
+	filter: alpha(opacity=50);
+}
+.keypad-rtl {
+	direction: rtl;
+}
+.keypad-prompt {
+	clear: both;
+	text-align: center;
+}
+.keypad-prompt.ui-widget-header {
+	margin: 0.125em;
+}
+.keypad-row {
+	width: 100%;
+}
+.keypad-space {
+	display: inline-block;
+	margin: 0.125em;
+	width: 2em;
+}
+.keypad-half-space {
+	display: inline-block;
+	margin: 0.125em 0.0625em;
+	width: 1em;
+}
+.keypad-key, .keypad-special {
+	margin: 0.125em;
+	padding: 0em;
+	width: 2em;
+	background-color: #f4f4f4;
+	-moz-border-radius: 0.25em;
+	-webkit-border-radius: 0.25em;
+	border-radius: 0.25em;
+	text-align: center;
+	cursor: pointer;
+}
+.keypad-key[disabled] {
+	border: 0.125em outset;
+}
+.keypad-key-down {
+}
+.keypad-special {
+	width: 4.25em;
+}
+.keypad-spacebar {
+	width: 13.25em;
+}
+.keypad-tab {
+	width: 2em;
+}
+.keypad-clear, .keypad-back, .keypad-close, .keypad-shift {
+	color: #fff;
+	font-weight: bold;
+}
+.keypad-clear {
+	background-color: #a00;
+}
+.keypad-back {
+	background-color: #00a;
+}
+.keypad-close {
+	background-color: #0a0;
+}
+.keypad-shift {
+	background-color: #0aa;
+}

web_app/js/external/jquery.keypad.js

@@ -0,0 +1,920 @@
+/* http://keith-wood.name/keypad.html
+   Keypad field entry extension for jQuery v2.0.1.
+   Written by Keith Wood (kbwood{at}iinet.com.au) August 2008.
+   Available under the MIT (https://github.com/jquery/jquery/blob/master/LICENSE.txt) license. 
+   Please attribute the author if you use it. */
+   
+(function($) { // hide the namespace
+
+	var pluginName = 'keypad';
+	
+	var layoutStandard = ['  BSCECA', '_1_2_3_+@X', '_4_5_6_-@U', '_7_8_9_*@E', '_0_._=_/'];
+
+	/** Create the keypad plugin.
+		<p>Sets an input field to popup a keypad for keystroke entry,
+			or creates an inline keypad in a <code>div</code> or <code>span</code>.</p>
+		<p>Expects HTML like:</p>
+		<pre>&lt;input type="text"> or
+&lt;div&gt;&lt;/div&gt;</pre>
+		<p>Provide inline configuration like:</p>
+		<pre>&lt;input type="text" data-keypad="name: 'value'"/></pre>
+	 	@module Keypad
+		@augments JQPlugin
+		@example $(selector).keypad() */
+	$.JQPlugin.createPlugin({
+	
+		/** The name of the plugin. */
+		name: pluginName,
+			
+		/** Keypad before show callback.
+			Triggered before the keypad is shown.
+			@callback beforeShowCallback
+			@param div {jQuery} The div to be shown.
+			@param inst {object} The current instance settings. */
+			
+		/** Keypad on keypress callback.
+			Triggered when a key on the keypad is pressed.
+			@callback keypressCallback
+			@param key {string} The key just pressed.
+			@param value {string} The full value entered so far.
+			@param inst {object} The current instance settings. */
+			
+		/** Keypad on close callback.
+			Triggered when the keypad is closed.
+			@callback closeCallback
+			@param value {string} The full value entered so far.
+			@param inst {object} The current instance settings. */
+			
+		/** Keypad is alphabetic callback.
+			Triggered when an alphabetic key needs to be identified.
+			@callback isAlphabeticCallback
+			@param ch {string} The key to check.
+			@return {boolean} True if this key is alphabetic, false if not.
+			@example isAlphabetic: function(ch) {
+	return (ch >= 'A' && ch <= 'Z') || (ch >= 'a' && ch <= 'z');
+ } */
+			
+		/** Keypad is numeric callback.
+			Triggered when an numeric key needs to be identified.
+			@callback isNumericCallback
+			@param ch {string} The key to check.
+			@return {boolean} True if this key is numeric, false if not.
+			@example isNumeric: function(ch) {
+	return (ch >= '0' && ch <= '9');
+ } */
+			
+		/** Keypad to upper callback.
+			Triggered to convert keys to upper case.
+			@callback toUpperCallback
+			@param ch {string} The key to convert.
+			@return {string} The upper case version of this key.
+			@example toUpper: function(ch) {
+	return ch.toUpperCase();
+ } */
+			
+		/** Default settings for the plugin.
+			@property [showOn='focus'] {string} 'focus' for popup on focus, 'button' for trigger button, or 'both' for either.
+			@property [buttonImage=''] {string} URL for trigger button image.
+			@property [buttonImageOnly=false] {boolean} True if the image appears alone, false if it appears on a button.
+			@property [showAnim='show'] {string} Name of jQuery animation for popup.
+			@property [showOptions=null] {object} Options for enhanced animations.
+			@property [duration='normal'] {string|number} Duration of display/closure.
+			@property [appendText=''] {string} Display text following the text field, e.g. showing the format.
+			@property [useThemeRoller=false] {boolean} True to add ThemeRoller classes.
+			@property [keypadClass=''] {string} Additional CSS class for the keypad for an instance.
+			@property [prompt=''] {string} Display text at the top of the keypad.
+			@property [layout=this.numericLayout] {string} Layout of keys.
+			@property [separator=''] {string} Separator character between keys.
+			@property [target=null] {string|jQuery|Element} Input target for an inline keypad.
+			@property [keypadOnly=true] {boolean} True for entry only via the keypad, false for real keyboard too.
+			@property [randomiseAlphabetic=false] {boolean} True to randomise the alphabetic key positions, false to keep in order.
+			@property [randomiseNumeric=false] {boolean} True to randomise the numeric key positions, false to keep in order.
+			@property [randomiseOther=false] {boolean} True to randomise the other key positions, false to keep in order.
+			@property [randomiseAll=false] {boolean} True to randomise all key positions, false to keep in order.
+			@property [beforeShow=null] {beforeShowCallback} Callback before showing the keypad.
+			@property [onKeypress=null] {keypressCallback} Callback when a key is selected.
+			@property [onClose=null] {closeCallback} Callback when the panel is closed. */
+		defaultOptions: {
+			showOn: 'focus',
+			buttonImage: '',
+			buttonImageOnly: false,
+			showAnim: 'show',
+			showOptions: null,
+			duration: 'normal',
+			appendText: '',
+			useThemeRoller: false,
+			keypadClass: '',
+			prompt: '',
+			layout: [], // Set at the end
+			separator: '',
+			target: null,
+			keypadOnly: true,
+			randomiseAlphabetic: false,
+			randomiseNumeric: false,
+			randomiseOther: false,
+			randomiseAll: false,
+			beforeShow: null,
+			onKeypress: null,
+			onClose: null
+		},
+
+		/** Localisations for the plugin.
+			Entries are objects indexed by the language code ('' being the default US/English).
+			Each object has the following attributes.
+			@property [buttonText='...'] {string} Display text for trigger button.
+			@property [buttonStatus='Open the keypad'] {string} Status text for trigger button.
+			@property [closeText='Close'] {string} Display text for close link.
+			@property [closeStatus='Close the keypad'] {string} Status text for close link.
+			@property [clearText='Clear'] {string} Display text for clear link.
+			@property [clearStatus='Erase all the text'] {string} Status text for clear link.
+			@property [backText='Back'] {string} Display text for back link.
+			@property [backStatus='Erase the previous character'] {string} Status text for back link.
+			@property [spacebarText='&#160;'] {string} Display text for space bar.
+			@property [spacebarStatus='Space'] {string} Status text for space bar.
+			@property [enterText='Enter'] {string} Display text for carriage return.
+			@property [enterStatus='Carriage return'] {string} Status text for carriage return.
+			@property [tabText='→'] {string} Display text for tab.
+			@property [tabStatus='Horizontal tab'] {string} Status text for tab.
+			@property [shiftText='Shift'] {string} Display text for shift link.
+			@property [shiftStatus='Toggle upper/lower case characters'] {string} Status text for shift link.
+			@property [alphabeticLayout=this.qwertyAlphabetic] {string} Default layout for alphabetic characters.
+			@property [fullLayout=this.qwertyLayout] {string} Default layout for full keyboard.
+			@property [isAlphabetic=this.isAlphabetic] {isAlphabeticCallback} Function to determine if character is alphabetic.
+			@property [isNumeric=this.isNumeric] {isNumericCallback} Function to determine if character is numeric.
+			@property [toUpper=this.toUpper] {toUpperCallback} Function to convert characters to upper case.
+			@property [isRTL=false] {boolean} True if right-to-left language, false if left-to-right. */
+		regionalOptions: { // Available regional settings, indexed by language/country code
+			'': { // Default regional settings - English/US
+				buttonText: '...',
+				buttonStatus: 'Open the keypad',
+				closeText: 'Close',
+				closeStatus: 'Close the keypad',
+				clearText: 'Clear',
+				clearStatus: 'Erase all the text',
+				backText: 'Back',
+				backStatus: 'Erase the previous character',
+				spacebarText: '&#160;',
+				spacebarStatus: 'Space',
+				enterText: 'Enter',
+				enterStatus: 'Carriage return',
+				tabText: '→',
+				tabStatus: 'Horizontal tab',
+				shiftText: 'Shift',
+				shiftStatus: 'Toggle upper/lower case characters',
+				alphabeticLayout: [], // Set at the end
+				fullLayout: [],
+				isAlphabetic: null,
+				isNumeric: null,
+				toUpper: null,
+				isRTL: false
+			}
+		},
+		
+		/** Names of getter methods - those that can't be chained. */
+		_getters: ['isDisabled'],
+
+		_curInst: null, // The current instance in use
+		_disabledFields: [], // List of keypad fields that have been disabled
+		_keypadShowing: false, // True if the popup panel is showing , false if not
+		_keyCode: 0,
+		_specialKeys: [],
+		
+		_mainDivClass: pluginName + '-popup', // The main keypad division class
+		_inlineClass: pluginName + '-inline', // The inline marker class
+		_appendClass: pluginName + '-append', // The append marker class
+		_triggerClass: pluginName + '-trigger', // The trigger marker class
+		_disableClass: pluginName + '-disabled', // The disabled covering marker class
+		_inlineEntryClass: pluginName + '-keyentry', // The inline entry marker class
+		_rtlClass: pluginName + '-rtl', // The right-to-left marker class
+		_rowClass: pluginName + '-row', // The keypad row marker class
+		_promptClass: pluginName + '-prompt', // The prompt marker class
+		_specialClass: pluginName + '-special', // The special key marker class
+		_namePrefixClass: pluginName + '-', // The key name marker class prefix
+		_keyClass: pluginName + '-key', // The key marker class
+		_keyDownClass: pluginName + '-key-down', // The key down marker class
+
+		// Standard US keyboard alphabetic layout
+		qwertyAlphabetic: ['qwertyuiop', 'asdfghjkl', 'zxcvbnm'],
+		// Standard US keyboard layout
+		qwertyLayout: ['!@#$%^&*()_=' + this.HALF_SPACE + this.SPACE + this.CLOSE,
+			this.HALF_SPACE + '`~[]{}<>\\|/' + this.SPACE + '789',
+			'qwertyuiop\'"' + this.HALF_SPACE + '456',
+			this.HALF_SPACE + 'asdfghjkl;:' + this.SPACE + '123',
+			this.SPACE + 'zxcvbnm,.?' + this.SPACE + this.HALF_SPACE + '-0+',
+			'' + this.TAB + this.ENTER + this.SPACE_BAR + this.SHIFT +
+			this.HALF_SPACE + this.BACK + this.CLEAR],
+
+		/** Add the definition of a special key.
+			@param id {string} The identifier for this key - access via <code>$.keypad.xxx</code>.<id>.
+			@param name {string} The prefix for localisation strings and the suffix for a class name.
+			@param action {function} The action performed for this key - receives <code>inst</code> as a parameter.
+			@param noHighlight {boolean} True to suppress highlight when using ThemeRoller.
+			@return {Keypad} The keypad object for chaining further calls.
+			@example $.keypad.addKeyDef('CLEAR', 'clear', function(inst) { plugin._clearValue(inst); }); */
+		addKeyDef: function(id, name, action, noHighlight) {
+			if (this._keyCode == 32) {
+				throw 'Only 32 special keys allowed';
+			}
+			this[id] = String.fromCharCode(this._keyCode++);
+			this._specialKeys.push({code: this[id], id: id, name: name,
+				action: action, noHighlight: noHighlight});
+			return this;
+		},
+
+		/** Additional setup for the keypad.
+			Create popup div. */
+		_init: function() {
+			this.mainDiv = $('<div class="' + this._mainDivClass + '" style="display: none;"></div>');
+			this._super();
+		},
+
+		_instSettings: function(elem, options) {
+			var inline = !elem[0].nodeName.toLowerCase().match(/input|textarea/);
+			return {_inline: inline, ucase: false,
+				_mainDiv: (inline ? $('<div class="' + this._inlineClass + '"></div>') : plugin.mainDiv)};
+		},
+
+		_postAttach: function(elem, inst) {
+			if (inst._inline) {
+				elem.append(inst._mainDiv).
+					on('click.' + inst.name, function() { inst._input.focus(); });
+				this._updateKeypad(inst);
+			}
+			else if (elem.is(':disabled')) {
+				this.disable(elem);
+			}
+		},
+
+		/** Determine the input field for the keypad.
+			@private
+			@param elem {jQuery} The target control.
+			@param inst {object} The instance settings. */
+		_setInput: function(elem, inst) {
+			inst._input = $(!inst._inline ? elem : inst.options.target ||
+				'<input type="text" class="' + this._inlineEntryClass + '" disabled/>');
+			if (inst._inline) {
+				elem.find('input').remove();
+				if (!inst.options.target) {
+					elem.append(inst._input);
+				}
+			}
+		},
+
+		_optionsChanged: function(elem, inst, options) {
+			$.extend(inst.options, options);
+			elem.off('.' + inst.name).
+				siblings('.' + this._appendClass).remove().end().
+				siblings('.' + this._triggerClass).remove();
+			var appendText = inst.options.appendText;
+			if (appendText) {
+				elem[inst.options.isRTL ? 'before' : 'after'](
+					'<span class="' + this._appendClass + '">' + appendText + '</span>');
+			}
+			if (!inst._inline) {
+				if (inst.options.showOn == 'focus' || inst.options.showOn == 'both') {
+					// pop-up keypad when in the marked field
+					elem.on('focus.' + inst.name, this.show).
+						on('keydown.' + inst.name, this._doKeyDown);
+				}
+				if (inst.options.showOn == 'button' || inst.options.showOn == 'both') {
+					// pop-up keypad when button clicked
+					var buttonStatus = inst.options.buttonStatus;
+					var buttonImage = inst.options.buttonImage;
+					var trigger = $(inst.options.buttonImageOnly ? 
+						$('<img src="' + buttonImage + '" alt="' +
+						buttonStatus + '" title="' + buttonStatus + '"/>') :
+					$('<button type="button" title="' + buttonStatus + '"></button>').
+						html(buttonImage == '' ? inst.options.buttonText :
+						$('<img src="' + buttonImage + '" alt="' +
+						buttonStatus + '" title="' + buttonStatus + '"/>')));
+						elem[inst.options.isRTL ? 'before' : 'after'](trigger);
+					trigger.addClass(this._triggerClass).click(function() {
+						if (plugin._keypadShowing && plugin._lastField == elem[0]) {
+							plugin.hide();
+						}
+						else {
+							plugin.show(elem[0]);
+						}
+						return false;
+					});
+				}
+			}
+			inst.saveReadonly = elem.attr('readonly');
+			elem[inst.options.keypadOnly ? 'attr' : 'removeAttr']('readonly', true).
+				on('setData.' + inst.name, function(event, key, value) {
+					inst.options[key] = value;
+				}).
+				on('getData.' + inst.name, function(event, key) {
+					return inst.options[key];
+				});
+			this._setInput(elem, inst);
+			this._updateKeypad(inst);
+		},
+
+		_preDestroy: function(elem, inst) {
+			if (this._curInst == inst) {
+				this.hide();
+			}
+			elem.siblings('.' + this._appendClass).remove().end().
+				siblings('.' + this._triggerClass).remove().end().
+				prev('.' + this._inlineEntryClass).remove();
+			elem.empty().off('.' + inst.name)
+				[inst.saveReadonly ? 'attr' : 'removeAttr']('readonly', true);
+			inst._input.removeData(inst.name);
+		},
+
+		/** Enable the keypad for a jQuery selection.
+			@param elem {Element} The target text field.
+			@example $(selector).keypad('enable'); */
+		enable: function(elem) {
+			elem = $(elem);
+			if (!elem.hasClass(this._getMarker())) {
+				return;
+			}
+			var nodeName = elem[0].nodeName.toLowerCase();
+			if (nodeName.match(/input|textarea/)) {
+				elem.prop('disabled', false).
+					siblings('button.' + this._triggerClass).prop('disabled', false).end().
+					siblings('img.' + this._triggerClass).css({opacity: '1.0', cursor: ''});
+			}
+			else if (nodeName.match(/div|span/)) {
+				elem.children('.' + this._disableClass).remove();
+				this._getInst(elem)._mainDiv.find('button').prop('disabled', false);
+			}
+			this._disabledFields = $.map(this._disabledFields,
+				function(value) { return (value == elem[0] ? null : value); }); // delete entry
+		},
+
+		/** Disable the keypad for a jQuery selection.
+			@param elem {Element} The target text field.
+			@example $(selector).keypad('disable'); */
+		disable: function(elem) {
+			elem = $(elem);
+			if (!elem.hasClass(this._getMarker())) {
+				return;
+			}
+			var nodeName = elem[0].nodeName.toLowerCase();
+			if (nodeName.match(/input|textarea/)) {
+				elem.prop('disabled', true).
+					siblings('button.' + this._triggerClass).prop('disabled', true).end().
+					siblings('img.' + this._triggerClass).css({opacity: '0.5', cursor: 'default'});
+			}
+			else if (nodeName.match(/div|span/)) {
+				var inline = elem.children('.' + this._inlineClass);
+				var offset = inline.offset();
+				var relOffset = {left: 0, top: 0};
+				inline.parents().each(function() {
+					if ($(this).css('position') == 'relative') {
+						relOffset = $(this).offset();
+						return false;
+					}
+				});
+				elem.prepend('<div class="' + this._disableClass + '" style="width: ' +
+					inline.outerWidth() + 'px; height: ' + inline.outerHeight() +
+					'px; left: ' + (offset.left - relOffset.left) +
+					'px; top: ' + (offset.top - relOffset.top) + 'px;"></div>');
+				this._getInst(elem)._mainDiv.find('button').prop('disabled', true);
+			}
+			this._disabledFields = $.map(this._disabledFields,
+				function(value) { return (value == elem[0] ? null : value); }); // delete entry
+			this._disabledFields[this._disabledFields.length] = elem[0];
+		},
+
+		/** Is the text field disabled as a keypad?
+			@param elem {Element} The target text field.
+			@return {boolean} True if disabled, false if enabled.
+			@example var disabled = $(selector).keypad('isDisabled'); */
+		isDisabled: function(elem) {
+			return (elem && $.inArray(elem, this._disabledFields) > -1);
+		},
+
+		/** Pop-up the keypad for a given text field.
+			@param elem {Element|Event} The text field attached to the keypad or event if triggered by focus.
+			@example $(selector).keypad('show'); */
+		show: function(elem) {
+			elem = elem.target || elem;
+			if (plugin.isDisabled(elem) || plugin._lastField == elem) { // already here
+				return;
+			}
+			var inst = plugin._getInst(elem);
+			plugin.hide(null, '');
+			plugin._lastField = elem;
+			plugin._pos = plugin._findPos(elem);
+			plugin._pos[1] += elem.offsetHeight; // add the height
+			var isFixed = false;
+			$(elem).parents().each(function() {
+				isFixed |= $(this).css('position') == 'fixed';
+				return !isFixed;
+			});
+			var offset = {left: plugin._pos[0], top: plugin._pos[1]};
+			plugin._pos = null;
+			// determine sizing offscreen
+			inst._mainDiv.css({position: 'absolute', display: 'block', top: '-1000px', width: 'auto'});
+			plugin._updateKeypad(inst);
+			// and adjust position before showing
+			offset = plugin._checkOffset(inst, offset, isFixed);
+			inst._mainDiv.css({position: (isFixed ? 'fixed' : 'absolute'), display: 'none',
+				left: offset.left + 'px', top: offset.top + 'px'});
+			var duration = inst.options.duration;
+			var showAnim = inst.options.showAnim;
+			var postProcess = function() {
+				plugin._keypadShowing = true;
+			};
+			if ($.effects && ($.effects[showAnim] || ($.effects.effect && $.effects.effect[showAnim]))) {
+				var data = inst._mainDiv.data(); // Update old effects data
+				for (var key in data) {
+					if (key.match(/^ec\.storage\./)) {
+						data[key] = inst._mainDiv.css(key.replace(/ec\.storage\./, ''));
+					}
+				}
+				inst._mainDiv.data(data).show(showAnim,
+					inst.options.showOptions || {}, duration, postProcess);
+			}
+			else {
+				inst._mainDiv[showAnim || 'show']((showAnim ? duration : 0), postProcess);
+			}
+			if (inst._input[0].type != 'hidden') {
+				inst._input[0].focus();
+			}
+			plugin._curInst = inst;
+		},
+
+		/** Generate the keypad content.
+			@private
+			@param inst {object} The instance settings. */
+		_updateKeypad: function(inst) {
+			var borders = this._getBorders(inst._mainDiv);
+			inst._mainDiv.empty().append(this._generateHTML(inst)).
+				removeClass().addClass(inst.options.keypadClass +
+					(inst.options.useThemeRoller ? ' ui-widget ui-widget-content' : '') +
+					(inst.options.isRTL ? ' ' + this._rtlClass : '') + ' ' +
+					(inst._inline ? this._inlineClass : this._mainDivClass));
+			if ($.isFunction(inst.options.beforeShow)) {
+				inst.options.beforeShow.apply((inst._input ? inst._input[0] : null),
+					[inst._mainDiv, inst]);
+			}
+		},
+
+		/** Retrieve the size of left and top borders for an element.
+			@private
+			@param elem {jQuery} The element of interest.
+			@return {number[]} The left and top borders. */
+		_getBorders: function(elem) {
+			var convert = function(value) {
+				return {thin: 1, medium: 3, thick: 5}[value] || value;
+			};
+			return [parseFloat(convert(elem.css('border-left-width'))),
+				parseFloat(convert(elem.css('border-top-width')))];
+		},
+
+		/** Check positioning to remain on screen.
+			@private
+			@param inst {object} The instance settings.
+			@param offset {object} The current offset.
+			@param isFixed {boolean} True if the text field is fixed in position.
+			@return {object} The updated offset. */
+		_checkOffset: function(inst, offset, isFixed) {
+			var pos = inst._input ? this._findPos(inst._input[0]) : null;
+			var browserWidth = window.innerWidth || document.documentElement.clientWidth;
+			var browserHeight = window.innerHeight || document.documentElement.clientHeight;
+			var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
+			var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
+			// recalculate width as otherwise set to 100%
+			var width = 0;
+			inst._mainDiv.find(':not(div)').each(function() {
+				width = Math.max(width, this.offsetLeft + $(this).outerWidth(true));
+			});
+			inst._mainDiv.css('width', width + 1);
+			// reposition keypad panel horizontally if outside the browser window
+			if (inst.options.isRTL ||
+					(offset.left + inst._mainDiv.outerWidth() - scrollX) > browserWidth) {
+				offset.left = Math.max((isFixed ? 0 : scrollX),
+					pos[0] + (inst._input ? inst._input.outerWidth() : 0) -
+					(isFixed ? scrollX : 0) - inst._mainDiv.outerWidth());
+			}
+			else {
+				offset.left = Math.max((isFixed ? 0 : scrollX), offset.left - (isFixed ? scrollX : 0));
+			}
+			// reposition keypad panel vertically if outside the browser window
+			if ((offset.top + inst._mainDiv.outerHeight() - scrollY) > browserHeight) {
+				offset.top = Math.max((isFixed ? 0 : scrollY),
+					pos[1] - (isFixed ? scrollY : 0) - inst._mainDiv.outerHeight());
+			}
+			else {
+				offset.top = Math.max((isFixed ? 0 : scrollY), offset.top - (isFixed ? scrollY : 0));
+			}
+			return offset;
+		},
+	
+		/** Find an object's position on the screen.
+			@private
+			@param obj {Element} The element to find the position for.
+			@return {number[]} The element's position. */
+		_findPos: function(obj) {
+			while (obj && (obj.type == 'hidden' || obj.nodeType != 1)) {
+				obj = obj.nextSibling;
+			}
+			var position = $(obj).offset();
+			return [position.left, position.top];
+		},
+
+		/** Hide the keypad from view.
+			@param elem {Element} The text field attached to the keypad.
+			@param duration {string} The duration over which to close the keypad.
+			@example $(selector).keypad('hide') */
+		hide: function(elem, duration) {
+			var inst = this._curInst;
+			if (!inst || (elem && inst != $.data(elem, this.name))) {
+				return;
+			}
+			if (this._keypadShowing) {
+				duration = (duration != null ? duration : inst.options.duration);
+				var showAnim = inst.options.showAnim;
+				if ($.effects && ($.effects[showAnim] || ($.effects.effect && $.effects.effect[showAnim]))) {
+					inst._mainDiv.hide(showAnim, inst.options.showOptions || {}, duration);
+				}
+				else {
+					inst._mainDiv[(showAnim == 'slideDown' ? 'slideUp' :
+						(showAnim == 'fadeIn' ? 'fadeOut' : 'hide'))](showAnim ? duration : 0);
+				}
+			}
+			if ($.isFunction(inst.options.onClose)) {
+				inst.options.onClose.apply((inst._input ? inst._input[0] : null),  // trigger custom callback
+					[inst._input.val(), inst]);
+			}
+			if (this._keypadShowing) {
+				this._keypadShowing = false;
+				this._lastField = null;
+			}
+			if (inst._inline) {
+				inst._input.val('');
+			}
+			this._curInst = null;
+		},
+
+		/** Handle keystrokes.
+			@private
+			@param event {Event} The key event. */
+		_doKeyDown: function(event) {
+			if (event.keyCode == 9) { // Tab out
+				plugin.mainDiv.stop(true, true);
+				plugin.hide();
+			}
+		},
+
+		/** Close keypad if clicked elsewhere.
+			@private
+			@param event {Event} The mouseclick details. */
+		_checkExternalClick: function(event) {
+			if (!plugin._curInst) {
+				return;
+			}
+			var target = $(event.target);
+			if (target.closest('.' + plugin._mainDivClass).length === 0 &&
+					!target.hasClass(plugin._getMarker()) &&
+					target.closest('.' + plugin._triggerClass).length === 0 &&
+					plugin._keypadShowing) {
+				plugin.hide();
+			}
+		},
+
+		/** Toggle between upper and lower case.
+			@private
+			@param inst {object} The instance settings. */
+		_shiftKeypad: function(inst) {
+			inst.ucase = !inst.ucase;
+			this._updateKeypad(inst);
+			inst._input.focus(); // for further typing
+		},
+
+		/** Erase the text field.
+			@private
+			@param inst {object} The instance settings. */
+		_clearValue: function(inst) {
+			this._setValue(inst, '', 0);
+			this._notifyKeypress(inst, plugin.DEL);
+		},
+
+		/** Erase the last character.
+			@private
+			@param inst {object} The instance settings. */
+		_backValue: function(inst) {
+			var elem = inst._input[0];
+			var value = inst._input.val();
+			var range = [value.length, value.length];
+			range = (inst._input.prop('readonly') || inst._input.prop('disabled') ? range :
+				(elem.setSelectionRange /* Mozilla */ ? [elem.selectionStart, elem.selectionEnd] :
+				(elem.createTextRange /* IE */ ? this._getIERange(elem) : range)));
+			this._setValue(inst, (value.length == 0 ? '' :
+				value.substr(0, range[0] - 1) + value.substr(range[1])), range[0] - 1);
+			this._notifyKeypress(inst, plugin.BS);
+		},
+
+		/** Update the text field with the selected value.
+			@private
+			@param inst {object} The instance settings.
+			@param value {string} The new character to add. */
+		_selectValue: function(inst, value) {
+			this.insertValue(inst._input[0], value);
+			this._setValue(inst, inst._input.val());
+			this._notifyKeypress(inst, value);
+		},
+
+		/** Update the text field with the selected value.
+			@param input {string|Element|jQuery} The jQuery selector, input field, or jQuery collection.
+			@param value {string} The new character to add.
+			@example $.keypad.insertValue(field, 'abc'); */
+		insertValue: function(input, value) {
+			input = (input.jquery ? input : $(input));
+			var elem = input[0];
+			var newValue = input.val();
+			var range = [newValue.length, newValue.length];
+			range = (input.attr('readonly') || input.attr('disabled') ? range :
+				(elem.setSelectionRange /* Mozilla */ ? [elem.selectionStart, elem.selectionEnd] :
+				(elem.createTextRange /* IE */ ? this._getIERange(elem) : range)));
+			input.val(newValue.substr(0, range[0]) + value + newValue.substr(range[1]));
+			pos = range[0] + value.length;
+			if (input.is(':visible')) {
+				input.focus(); // for further typing
+			}
+			if (elem.setSelectionRange) { // Mozilla
+				if (input.is(':visible')) {
+						elem.setSelectionRange(pos, pos);
+				}
+			}
+			else if (elem.createTextRange) { // IE
+				range = elem.createTextRange();
+				range.move('character', pos);
+				range.select();
+			}
+		},
+
+		/** Get the coordinates for the selected area in the text field in IE.
+			@private
+			@param elem {Element} The target text field.
+			@return {number[]} The start and end positions of the selection. */
+		_getIERange: function(elem) {
+			elem.focus();
+			var selectionRange = document.selection.createRange().duplicate();
+			// Use two ranges: before and selection
+			var beforeRange = this._getIETextRange(elem);
+			beforeRange.setEndPoint('EndToStart', selectionRange);
+			// Check each range for trimmed newlines by shrinking the range by one
+			// character and seeing if the text property has changed. If it has not
+			// changed then we know that IE has trimmed a \r\n from the end.
+			var checkCRLF = function(range) {
+				var origText = range.text;
+				var text = origText;
+				var finished = false;
+				while (true) {
+					if (range.compareEndPoints('StartToEnd', range) == 0) {
+						break;
+					} 
+					else {
+						range.moveEnd('character', -1);
+						if (range.text == origText) {
+							text += '\r\n';
+						} 
+						else {
+							break;
+						}
+					}
+				}
+				return text;
+			};
+			var beforeText = checkCRLF(beforeRange);
+			var selectionText = checkCRLF(selectionRange);
+			return [beforeText.length, beforeText.length + selectionText.length];
+		},
+
+		/** Create an IE text range for the text field.
+			@private
+			@param elem {Element} The target text field.
+			@return {object} The corresponding text range. */
+		_getIETextRange: function(elem) {
+			var isInput = (elem.nodeName.toLowerCase() == 'input');
+			var range = (isInput ? elem.createTextRange() : document.body.createTextRange());
+			if (!isInput) {
+				range.moveToElementText(elem); // Selects all the text for a textarea
+			}
+			return range;
+		},
+
+		/** Set the text field to the selected value, and trigger any on change event.
+			@private
+			@param inst {object} The instance settings.
+			@param value {string} The new value for the text field. */
+		_setValue: function(inst, value) {
+			var maxlen = inst._input.attr('maxlength');
+			if (maxlen > -1) {
+				value = value.substr(0, maxlen);
+			}
+			inst._input.val(value);
+			if (!$.isFunction(inst.options.onKeypress)) {
+				inst._input.trigger('change'); // fire the change event
+			}
+		},
+
+		/** Notify clients of a keypress.
+			@private
+			@param inst {object} The instance settings.
+			@param key {string} The character pressed. */
+		_notifyKeypress: function(inst, key) {
+			if ($.isFunction(inst.options.onKeypress)) { // trigger custom callback
+				inst.options.onKeypress.apply((inst._input ? inst._input[0] : null),
+					[key, inst._input.val(), inst]);
+			}
+		},
+
+		/** Generate the HTML for the current state of the keypad.
+			@private
+			@param inst {object} The instance settings.
+			@return {jQuery} The HTML for this keypad. */
+		_generateHTML: function(inst) {
+			var html = (!inst.options.prompt ? '' : '<div class="' + this._promptClass +
+				(inst.options.useThemeRoller ? ' ui-widget-header ui-corner-all' : '') + '">' +
+				inst.options.prompt + '</div>');
+			var layout = this._randomiseLayout(inst);
+			for (var i = 0; i < layout.length; i++) {
+				html += '<div class="' + this._rowClass + '">';
+				var keys = layout[i].split(inst.options.separator);
+				for (var j = 0; j < keys.length; j++) {
+					if (inst.ucase) {
+						keys[j] = inst.options.toUpper(keys[j]);
+					}
+					var keyDef = this._specialKeys[keys[j].charCodeAt(0)];
+					if (keyDef) {
+						html += (keyDef.action ? '<button type="button" class="' +
+							this._specialClass + ' ' + this._namePrefixClass + keyDef.name +
+							(inst.options.useThemeRoller ? ' ui-corner-all ui-state-default' +
+							(keyDef.noHighlight ? '' : ' ui-state-highlight') : '') +
+							'" title="' + inst.options[keyDef.name + 'Status'] + '">' +
+							(inst.options[keyDef.name + 'Text'] || '&#160;') + '</button>' :
+							'<div class="' + this._namePrefixClass + keyDef.name + '"></div>');
+					}
+					else {
+						html += '<button type="button" class="' + this._keyClass +
+							(inst.options.useThemeRoller ? ' ui-corner-all ui-state-default' : '') +
+							'">' + (keys[j] == ' ' ? '&#160;' : keys[j]) + '</button>';
+					}
+				}
+				html += '</div>';
+			}
+			html = $(html);
+			var thisInst = inst;
+			var activeClasses = this._keyDownClass +
+				(inst.options.useThemeRoller ? ' ui-state-active' : '');
+			html.find('button').mousedown(function() { $(this).addClass(activeClasses); }).
+				mouseup(function() { $(this).removeClass(activeClasses); }).
+				mouseout(function() { $(this).removeClass(activeClasses); }).
+				filter('.' + this._keyClass).
+				click(function() { plugin._selectValue(thisInst, $(this).text()); });
+			$.each(this._specialKeys, function(i, keyDef) {
+				html.find('.' + plugin._namePrefixClass + keyDef.name).click(function() {
+					keyDef.action.apply(thisInst._input, [thisInst]);
+				});
+			});
+			return html;
+		},
+
+		/** Check whether characters should be randomised, and, if so, produce the randomised layout.
+			@private
+			@param inst {object} The instance settings.
+			@return {string[]} The layout with any requested randomisations applied. */
+		_randomiseLayout: function(inst) {
+			if (!inst.options.randomiseNumeric && !inst.options.randomiseAlphabetic &&
+					!inst.options.randomiseOther && !inst.options.randomiseAll) {
+				return inst.options.layout;
+			}
+			var numerics = [];
+			var alphas = [];
+			var others = [];
+			var newLayout = [];
+			// Find characters of different types
+			for (var i = 0; i < inst.options.layout.length; i++) {
+				newLayout[i] = '';
+				var keys = inst.options.layout[i].split(inst.options.separator);
+				for (var j = 0; j < keys.length; j++) {
+					if (this._isControl(keys[j])) {
+						continue;
+					}
+					if (inst.options.randomiseAll) {
+						others.push(keys[j]);
+					}
+					else if (inst.options.isNumeric(keys[j])) {
+						numerics.push(keys[j]);
+					}
+					else if (inst.options.isAlphabetic(keys[j])) {
+						alphas.push(keys[j]);
+					}
+					else {
+						others.push(keys[j]);
+					}
+				}
+			}
+			// Shuffle them
+			if (inst.options.randomiseNumeric) {
+				this._shuffle(numerics);
+			}
+			if (inst.options.randomiseAlphabetic) {
+				this._shuffle(alphas);
+			}
+			if (inst.options.randomiseOther || inst.options.randomiseAll) {
+				this._shuffle(others);
+			}
+			var n = 0;
+			var a = 0;
+			var o = 0;
+			// And replace them in the layout
+			for (var i = 0; i < inst.options.layout.length; i++) {
+				var keys = inst.options.layout[i].split(inst.options.separator);
+				for (var j = 0; j < keys.length; j++) {
+					newLayout[i] += (this._isControl(keys[j]) ? keys[j] :
+						(inst.options.randomiseAll ? others[o++] :
+						(inst.options.isNumeric(keys[j]) ? numerics[n++] :
+						(inst.options.isAlphabetic(keys[j]) ? alphas[a++] :
+						others[o++])))) + inst.options.separator;
+				}
+			}
+			return newLayout;
+		},
+
+		/** Is a given character a control character?
+			@private
+			@param ch {string} The character to test.
+			@return {boolean} True if a control character, false if not. */
+		_isControl: function(ch) {
+			return ch < ' ';
+		},
+
+		/** Is a given character alphabetic?
+			@param ch {string} The character to test.
+			@return {boolean} True if alphabetic, false if not. */
+		isAlphabetic: function(ch) {
+			return (ch >= 'A' && ch <= 'Z') || (ch >= 'a' && ch <= 'z');
+		},
+
+		/** Is a given character numeric?
+			@param ch {string} The character to test.
+			@return {boolean} True if numeric, false if not. */
+		isNumeric: function(ch) {
+			return (ch >= '0' && ch <= '9');
+		},
+
+		/** Convert a character to upper case.
+			@param ch {string} The character to convert.
+			@return {string} Its uppercase version. */
+		toUpper: function(ch) {
+			return ch.toUpperCase();
+		},
+		
+		/** Randomise the contents of an array.
+			@private
+			@param values {string[]} The array to rearrange. */
+		_shuffle: function(values) {
+			for (var i = values.length - 1; i > 0; i--) {
+				var j = Math.floor(Math.random() * values.length);
+				var ch = values[i];
+				values[i] = values[j];
+				values[j] = ch;
+			}
+		}
+	});
+
+	var plugin = $.keypad;
+
+	// Initialise the key definitions
+	plugin.addKeyDef('CLOSE', 'close', function(inst) {
+		plugin._curInst = (inst._inline ? inst : plugin._curInst);
+		plugin.hide();
+	});
+	plugin.addKeyDef('CLEAR', 'clear', function(inst) { plugin._clearValue(inst); });
+	plugin.addKeyDef('BACK', 'back', function(inst) { plugin._backValue(inst); });
+	plugin.addKeyDef('SHIFT', 'shift', function(inst) { plugin._shiftKeypad(inst); });
+	plugin.addKeyDef('SPACE_BAR', 'spacebar', function(inst) { plugin._selectValue(inst, ' '); }, true);
+	plugin.addKeyDef('SPACE', 'space');
+	plugin.addKeyDef('HALF_SPACE', 'half-space');
+	plugin.addKeyDef('ENTER', 'enter', function(inst) { plugin._selectValue(inst, '\x0D'); }, true);
+	plugin.addKeyDef('TAB', 'tab', function(inst) { plugin._selectValue(inst, '\x09'); }, true);
+
+	// Initialise the layouts and settings
+	plugin.numericLayout = ['123' + plugin.CLOSE, '456' + plugin.CLEAR, '789' + plugin.BACK, plugin.SPACE + '0'];
+	plugin.qwertyLayout = ['!@#$%^&*()_=' + plugin.HALF_SPACE + plugin.SPACE + plugin.CLOSE,
+		plugin.HALF_SPACE + '`~[]{}<>\\|/' + plugin.SPACE + '789',
+		'qwertyuiop\'"' + plugin.HALF_SPACE + '456',
+		plugin.HALF_SPACE + 'asdfghjkl;:' + plugin.SPACE + '123',
+		plugin.SPACE + 'zxcvbnm,.?' + plugin.SPACE + plugin.HALF_SPACE + '-0+',
+		'' + plugin.TAB + plugin.ENTER + plugin.SPACE_BAR + plugin.SHIFT +
+		plugin.HALF_SPACE + plugin.BACK + plugin.CLEAR],
+	$.extend(plugin.regionalOptions[''],
+		{alphabeticLayout: plugin.qwertyAlphabetic, fullLayout: plugin.qwertyLayout,
+		isAlphabetic: plugin.isAlphabetic, isNumeric: plugin.isNumeric, toUpper: plugin.toUpper});
+	plugin.setDefaults($.extend({layout: plugin.numericLayout}, plugin.regionalOptions['']));
+
+	// Add the keypad division and external click check
+	$(function() {
+		$(document.body).append(plugin.mainDiv).
+			on('mousedown.' + pluginName, plugin._checkExternalClick);
+	});
+
+})(jQuery);

web_app/js/external/jquery.plugin.js

@@ -0,0 +1,344 @@
+/* Simple JavaScript Inheritance
+ * By John Resig http://ejohn.org/
+ * MIT Licensed.
+ */
+// Inspired by base2 and Prototype
+(function(){
+	var initializing = false;
+
+	// The base JQClass implementation (does nothing)
+	window.JQClass = function(){};
+
+	// Collection of derived classes
+	JQClass.classes = {};
+ 
+	// Create a new JQClass that inherits from this class
+	JQClass.extend = function extender(prop) {
+		var base = this.prototype;
+
+		// Instantiate a base class (but only create the instance,
+		// don't run the init constructor)
+		initializing = true;
+		var prototype = new this();
+		initializing = false;
+
+		// Copy the properties over onto the new prototype
+		for (var name in prop) {
+			// Check if we're overwriting an existing function
+			prototype[name] = typeof prop[name] == 'function' &&
+				typeof base[name] == 'function' ?
+				(function(name, fn){
+					return function() {
+						var __super = this._super;
+
+						// Add a new ._super() method that is the same method
+						// but on the super-class
+						this._super = function(args) {
+							return base[name].apply(this, args || []);
+						};
+
+						var ret = fn.apply(this, arguments);				
+
+						// The method only need to be bound temporarily, so we
+						// remove it when we're done executing
+						this._super = __super;
+
+						return ret;
+					};
+				})(name, prop[name]) :
+				prop[name];
+		}
+
+		// The dummy class constructor
+		function JQClass() {
+			// All construction is actually done in the init method
+			if (!initializing && this._init) {
+				this._init.apply(this, arguments);
+			}
+		}
+
+		// Populate our constructed prototype object
+		JQClass.prototype = prototype;
+
+		// Enforce the constructor to be what we expect
+		JQClass.prototype.constructor = JQClass;
+
+		// And make this class extendable
+		JQClass.extend = extender;
+
+		return JQClass;
+	};
+})();
+
+(function($) { // Ensure $, encapsulate
+
+	/** Abstract base class for collection plugins v1.0.1.
+		Written by Keith Wood (kbwood{at}iinet.com.au) December 2013.
+		Licensed under the MIT (https://github.com/jquery/jquery/blob/master/LICENSE.txt) license.
+		@module $.JQPlugin
+		@abstract */
+	JQClass.classes.JQPlugin = JQClass.extend({
+
+		/** Name to identify this plugin.
+			@example name: 'tabs' */
+		name: 'plugin',
+
+		/** Default options for instances of this plugin (default: {}).
+			@example defaultOptions: {
+ 	selectedClass: 'selected',
+ 	triggers: 'click'
+ } */
+		defaultOptions: {},
+		
+		/** Options dependent on the locale.
+			Indexed by language and (optional) country code, with '' denoting the default language (English/US).
+			@example regionalOptions: {
+	'': {
+		greeting: 'Hi'
+	}
+ } */
+		regionalOptions: {},
+		
+		/** Names of getter methods - those that can't be chained (default: []).
+			@example _getters: ['activeTab'] */
+		_getters: [],
+
+		/** Retrieve a marker class for affected elements.
+			@private
+			@return {string} The marker class. */
+		_getMarker: function() {
+			return 'is-' + this.name;
+		},
+		
+		/** Initialise the plugin.
+			Create the jQuery bridge - plugin name <code>xyz</code>
+			produces <code>$.xyz</code> and <code>$.fn.xyz</code>. */
+		_init: function() {
+			// Apply default localisations
+			$.extend(this.defaultOptions, (this.regionalOptions && this.regionalOptions['']) || {});
+			// Camel-case the name
+			var jqName = camelCase(this.name);
+			// Expose jQuery singleton manager
+			$[jqName] = this;
+			// Expose jQuery collection plugin
+			$.fn[jqName] = function(options) {
+				var otherArgs = Array.prototype.slice.call(arguments, 1);
+				if ($[jqName]._isNotChained(options, otherArgs)) {
+					return $[jqName][options].apply($[jqName], [this[0]].concat(otherArgs));
+				}
+				return this.each(function() {
+					if (typeof options === 'string') {
+						if (options[0] === '_' || !$[jqName][options]) {
+							throw 'Unknown method: ' + options;
+						}
+						$[jqName][options].apply($[jqName], [this].concat(otherArgs));
+					}
+					else {
+						$[jqName]._attach(this, options);
+					}
+				});
+			};
+		},
+
+		/** Set default values for all subsequent instances.
+			@param options {object} The new default options.
+			@example $.plugin.setDefauls({name: value}) */
+		setDefaults: function(options) {
+			$.extend(this.defaultOptions, options || {});
+		},
+		
+		/** Determine whether a method is a getter and doesn't permit chaining.
+			@private
+			@param name {string} The method name.
+			@param otherArgs {any[]} Any other arguments for the method.
+			@return {boolean} True if this method is a getter, false otherwise. */
+		_isNotChained: function(name, otherArgs) {
+			if (name === 'option' && (otherArgs.length === 0 ||
+					(otherArgs.length === 1 && typeof otherArgs[0] === 'string'))) {
+				return true;
+			}
+			return $.inArray(name, this._getters) > -1;
+		},
+		
+		/** Initialise an element. Called internally only.
+			Adds an instance object as data named for the plugin.
+			@param elem {Element} The element to enhance.
+			@param options {object} Overriding settings. */
+		_attach: function(elem, options) {
+			elem = $(elem);
+			if (elem.hasClass(this._getMarker())) {
+				return;
+			}
+			elem.addClass(this._getMarker());
+			options = $.extend({}, this.defaultOptions, this._getMetadata(elem), options || {});
+			var inst = $.extend({name: this.name, elem: elem, options: options},
+				this._instSettings(elem, options));
+			elem.data(this.name, inst); // Save instance against element
+			this._postAttach(elem, inst);
+			this.option(elem, options);
+		},
+
+		/** Retrieve additional instance settings.
+			Override this in a sub-class to provide extra settings.
+			@param elem {jQuery} The current jQuery element.
+			@param options {object} The instance options.
+			@return {object} Any extra instance values.
+			@example _instSettings: function(elem, options) {
+ 	return {nav: elem.find(options.navSelector)};
+ } */
+		_instSettings: function(elem, options) {
+			return {};
+		},
+
+		/** Plugin specific post initialisation.
+			Override this in a sub-class to perform extra activities.
+			@param elem {jQuery} The current jQuery element.
+			@param inst {object} The instance settings.
+			@example _postAttach: function(elem, inst) {
+ 	elem.on('click.' + this.name, function() {
+ 		...
+ 	});
+ } */
+		_postAttach: function(elem, inst) {
+		},
+
+		/** Retrieve metadata configuration from the element.
+			Metadata is specified as an attribute:
+			<code>data-&lt;plugin name>="&lt;setting name>: '&lt;value>', ..."</code>.
+			Dates should be specified as strings in this format: 'new Date(y, m-1, d)'.
+			@private
+			@param elem {jQuery} The source element.
+			@return {object} The inline configuration or {}. */
+		_getMetadata: function(elem) {
+			try {
+				var data = elem.data(this.name.toLowerCase()) || '';
+				data = data.replace(/'/g, '"');
+				data = data.replace(/([a-zA-Z0-9]+):/g, function(match, group, i) { 
+					var count = data.substring(0, i).match(/"/g); // Handle embedded ':'
+					return (!count || count.length % 2 === 0 ? '"' + group + '":' : group + ':');
+				});
+				data = $.parseJSON('{' + data + '}');
+				for (var name in data) { // Convert dates
+					var value = data[name];
+					if (typeof value === 'string' && value.match(/^new Date\((.*)\)$/)) {
+						data[name] = eval(value);
+					}
+				}
+				return data;
+			}
+			catch (e) {
+				return {};
+			}
+		},
+
+		/** Retrieve the instance data for element.
+			@param elem {Element} The source element.
+			@return {object} The instance data or {}. */
+		_getInst: function(elem) {
+			return $(elem).data(this.name) || {};
+		},
+		
+		/** Retrieve or reconfigure the settings for a plugin.
+			@param elem {Element} The source element.
+			@param name {object|string} The collection of new option values or the name of a single option.
+			@param [value] {any} The value for a single named option.
+			@return {any|object} If retrieving a single value or all options.
+			@example $(selector).plugin('option', 'name', value)
+ $(selector).plugin('option', {name: value, ...})
+ var value = $(selector).plugin('option', 'name')
+ var options = $(selector).plugin('option') */
+		option: function(elem, name, value) {
+			elem = $(elem);
+			var inst = elem.data(this.name);
+			if  (!name || (typeof name === 'string' && value == null)) {
+				var options = (inst || {}).options;
+				return (options && name ? options[name] : options);
+			}
+			if (!elem.hasClass(this._getMarker())) {
+				return;
+			}
+			var options = name || {};
+			if (typeof name === 'string') {
+				options = {};
+				options[name] = value;
+			}
+			this._optionsChanged(elem, inst, options);
+			$.extend(inst.options, options);
+		},
+		
+		/** Plugin specific options processing.
+			Old value available in <code>inst.options[name]</code>, new value in <code>options[name]</code>.
+			Override this in a sub-class to perform extra activities.
+			@param elem {jQuery} The current jQuery element.
+			@param inst {object} The instance settings.
+			@param options {object} The new options.
+			@example _optionsChanged: function(elem, inst, options) {
+ 	if (options.name != inst.options.name) {
+ 		elem.removeClass(inst.options.name).addClass(options.name);
+ 	}
+ } */
+		_optionsChanged: function(elem, inst, options) {
+		},
+		
+		/** Remove all trace of the plugin.
+			Override <code>_preDestroy</code> for plugin-specific processing.
+			@param elem {Element} The source element.
+			@example $(selector).plugin('destroy') */
+		destroy: function(elem) {
+			elem = $(elem);
+			if (!elem.hasClass(this._getMarker())) {
+				return;
+			}
+			this._preDestroy(elem, this._getInst(elem));
+			elem.removeData(this.name).removeClass(this._getMarker());
+		},
+
+		/** Plugin specific pre destruction.
+			Override this in a sub-class to perform extra activities and undo everything that was
+			done in the <code>_postAttach</code> or <code>_optionsChanged</code> functions.
+			@param elem {jQuery} The current jQuery element.
+			@param inst {object} The instance settings.
+			@example _preDestroy: function(elem, inst) {
+ 	elem.off('.' + this.name);
+ } */
+		_preDestroy: function(elem, inst) {
+		}
+	});
+	
+	/** Convert names from hyphenated to camel-case.
+		@private
+		@param value {string} The original hyphenated name.
+		@return {string} The camel-case version. */
+	function camelCase(name) {
+		return name.replace(/-([a-z])/g, function(match, group) {
+			return group.toUpperCase();
+		});
+	}
+	
+	/** Expose the plugin base.
+		@namespace "$.JQPlugin" */
+	$.JQPlugin = {
+	
+		/** Create a new collection plugin.
+			@memberof "$.JQPlugin"
+			@param [superClass='JQPlugin'] {string} The name of the parent class to inherit from.
+			@param overrides {object} The property/function overrides for the new class.
+			@example $.JQPlugin.createPlugin({
+ 	name: 'tabs',
+ 	defaultOptions: {selectedClass: 'selected'},
+ 	_initSettings: function(elem, options) { return {...}; },
+ 	_postAttach: function(elem, inst) { ... }
+ }); */
+		createPlugin: function(superClass, overrides) {
+			if (typeof superClass === 'object') {
+				overrides = superClass;
+				superClass = 'JQPlugin';
+			}
+			superClass = camelCase(superClass);
+			var className = camelCase(overrides.name);
+			JQClass.classes[className] = JQClass.classes[superClass].extend(overrides);
+			new JQClass.classes[className]();
+		}
+	};
+
+})(jQuery);

web_app/js/external/jquery.plugin.min.js

@@ -0,0 +1,4 @@
+/** Abstract base class for collection plugins v1.0.1.
+	Written by Keith Wood (kbwood{at}iinet.com.au) December 2013.
+	Licensed under the MIT (https://github.com/jquery/jquery/blob/master/LICENSE.txt) license. */
+(function(){var j=false;window.JQClass=function(){};JQClass.classes={};JQClass.extend=function extender(f){var g=this.prototype;j=true;var h=new this();j=false;for(var i in f){h[i]=typeof f[i]=='function'&&typeof g[i]=='function'?(function(d,e){return function(){var b=this._super;this._super=function(a){return g[d].apply(this,a||[])};var c=e.apply(this,arguments);this._super=b;return c}})(i,f[i]):f[i]}function JQClass(){if(!j&&this._init){this._init.apply(this,arguments)}}JQClass.prototype=h;JQClass.prototype.constructor=JQClass;JQClass.extend=extender;return JQClass}})();(function($){JQClass.classes.JQPlugin=JQClass.extend({name:'plugin',defaultOptions:{},regionalOptions:{},_getters:[],_getMarker:function(){return'is-'+this.name},_init:function(){$.extend(this.defaultOptions,(this.regionalOptions&&this.regionalOptions[''])||{});var c=camelCase(this.name);$[c]=this;$.fn[c]=function(a){var b=Array.prototype.slice.call(arguments,1);if($[c]._isNotChained(a,b)){return $[c][a].apply($[c],[this[0]].concat(b))}return this.each(function(){if(typeof a==='string'){if(a[0]==='_'||!$[c][a]){throw'Unknown method: '+a;}$[c][a].apply($[c],[this].concat(b))}else{$[c]._attach(this,a)}})}},setDefaults:function(a){$.extend(this.defaultOptions,a||{})},_isNotChained:function(a,b){if(a==='option'&&(b.length===0||(b.length===1&&typeof b[0]==='string'))){return true}return $.inArray(a,this._getters)>-1},_attach:function(a,b){a=$(a);if(a.hasClass(this._getMarker())){return}a.addClass(this._getMarker());b=$.extend({},this.defaultOptions,this._getMetadata(a),b||{});var c=$.extend({name:this.name,elem:a,options:b},this._instSettings(a,b));a.data(this.name,c);this._postAttach(a,c);this.option(a,b)},_instSettings:function(a,b){return{}},_postAttach:function(a,b){},_getMetadata:function(d){try{var f=d.data(this.name.toLowerCase())||'';f=f.replace(/'/g,'"');f=f.replace(/([a-zA-Z0-9]+):/g,function(a,b,i){var c=f.substring(0,i).match(/"/g);return(!c||c.length%2===0?'"'+b+'":':b+':')});f=$.parseJSON('{'+f+'}');for(var g in f){var h=f[g];if(typeof h==='string'&&h.match(/^new Date\((.*)\)$/)){f[g]=eval(h)}}return f}catch(e){return{}}},_getInst:function(a){return $(a).data(this.name)||{}},option:function(a,b,c){a=$(a);var d=a.data(this.name);if(!b||(typeof b==='string'&&c==null)){var e=(d||{}).options;return(e&&b?e[b]:e)}if(!a.hasClass(this._getMarker())){return}var e=b||{};if(typeof b==='string'){e={};e[b]=c}this._optionsChanged(a,d,e);$.extend(d.options,e)},_optionsChanged:function(a,b,c){},destroy:function(a){a=$(a);if(!a.hasClass(this._getMarker())){return}this._preDestroy(a,this._getInst(a));a.removeData(this.name).removeClass(this._getMarker())},_preDestroy:function(a,b){}});function camelCase(c){return c.replace(/-([a-z])/g,function(a,b){return b.toUpperCase()})}$.JQPlugin={createPlugin:function(a,b){if(typeof a==='object'){b=a;a='JQPlugin'}a=camelCase(a);var c=camelCase(b.name);JQClass.classes[c]=JQClass.classes[a].extend(b);new JQClass.classes[c]()}}})(jQuery);

web_app/js/sif_tools.js

@@ -68,6 +68,17 @@ function setup_ui_elements()
 		}
 	});
 
+    // set up keypads
+    $( "#current_rank" ).keypad(); // {prompt: 'Enter here'}
+    $( "#current_exp" ).keypad(); // {prompt: 'Enter here'}
+    $( "#desired_rank" ).keypad(); // {prompt: 'Enter here'}
+    $( "#current_gems" ).keypad(); // {prompt: 'Enter here'}
+    $( "#gem_desired_gems" ).keypad(); // {prompt: 'Enter here'}
+    $( "#card_current_level" ).keypad(); // {prompt: 'Enter here'}
+    $( "#card_current_exp" ).keypad(); // {prompt: 'Enter here'}
+    $( "#card_desired_level" ).keypad(); // {prompt: 'Enter here'}
+    $( "#card_feed_exp" ).keypad(); // {prompt: 'Enter here'}
+    
     // set up date/time pickers
     $( "#gem_desired_date" ).datepicker();
     $( "#event_end_date" ).datepicker();

web_app/sif_tools.html

@@ -7,8 +7,11 @@
   <title>SIF Tools</title>
   <link href="css/external/jquery-ui.css" rel="stylesheet">
   <link href="css/external/jquery-ui-timepicker-addon.css" rel="stylesheet">
+  <link type="text/css" href="css/external/jquery.keypad.css" rel="stylesheet">
   <link href="css/sif-tools.css" rel="stylesheet">
   <script src="js/external/jquery.js"></script>
+  <script type="text/javascript" src="js/external/jquery.plugin.js"></script> 
+  <script type="text/javascript" src="js/external/jquery.keypad.js"></script>
   <script src="js/external/jquery-ui.js"></script>
   <script src="js/external/jquery-ui-timepicker-addon.js"></script>
   <script src="js/external/jquery-ui-sliderAccess.js"></script>
@@ -34,11 +37,11 @@
         <div id="tab-rank">
             <div id="the-form" align="center">
                 <h1>Rank Calculator</h1>
-                Current Rank:&nbsp;&nbsp;&nbsp;<input type="number" step="1" pattern="\d*" size="5" id="current_rank" name="current_rank" placeholder="rank" value="" />
+                Current Rank:&nbsp;&nbsp;&nbsp;<input type="text" readonly="true" size="5" id="current_rank" name="current_rank" placeholder="rank" value="" />
                 <br />
-                Current EXP (optional):&nbsp;&nbsp;&nbsp;<input type="number" step="1" pattern="\d*" size="5" id="current_exp" name="current_exp" placeholder="exp" value="" />
+                Current EXP (optional):&nbsp;&nbsp;&nbsp;<input type="text" readonly="true" size="5" id="current_exp" name="current_exp" placeholder="exp" value="" />
                 <br />
-                Desired Rank:&nbsp;&nbsp;&nbsp;<input type="number" step="1" pattern="\d*" size="5" id="desired_rank" name="desired_rank" placeholder="rank" value="" />
+                Desired Rank:&nbsp;&nbsp;&nbsp;<input type="text" readonly="true" size="5" id="desired_rank" name="desired_rank" placeholder="rank" value="" />
                 <br />
                 Game Version:&nbsp;&nbsp;&nbsp;
                 <select id="game_version" name="game_version">
@@ -63,7 +66,7 @@
       </div>
       <div id="tab-love-gem">
           <div id="love-gem-form" align="center">
-          Current Love Gems (optional):&nbsp;&nbsp;&nbsp;<input type="number" step="1" pattern="\d*" size="5" id="current_gems" name="current_gems" placeholder="gems" value="" />
+          Current Love Gems (optional):&nbsp;&nbsp;&nbsp;<input type="text" readonly="true" size="5" id="current_gems" name="current_gems" placeholder="gems" value="" />
             <br /><br />
             Mode:<br />
             <input type="radio" name="gem-mode" id="gem-mode" value="DATE" checked />Number of gems on date?<br />
@@ -72,7 +75,7 @@
                 Date:&nbsp;&nbsp;&nbsp;<input type="text" size="10" id="gem_desired_date" name="gem_desired_date" readonly="true" placeholder="MM/DD/YYYY" value="" />
             </div>
             <div id="gem-desired-gems-area">
-                Number of gems desired:&nbsp;&nbsp;&nbsp;<input type="number" step="1" pattern="\d*" size="5" id="gem_desired_gems" name="gem_desired_gems" placeholder="gems" value="" />
+                Number of gems desired:&nbsp;&nbsp;&nbsp;<input type="text" readonly="true" size="5" id="gem_desired_gems" name="gem_desired_gems" placeholder="gems" value="" />
             </div>
             <br /><br />
             <input type="checkbox" name="gems_verbose" id="gems_verbose" value="YES" />Verbose Mode<br />
@@ -100,18 +103,18 @@
       <option value="UR">UR</option>
   </select>
   <br />
-  Current Level:&nbsp;&nbsp;&nbsp;<input type="number" step="1" pattern="\d*" size="5" id="card_current_level" name="card_current_level" placeholder="level" value="" />
+  Current Level:&nbsp;&nbsp;&nbsp;<input type="text" readonly="true" size="5" id="card_current_level" name="card_current_level" placeholder="level" value="" />
   <br />
-  Current EXP (optional):&nbsp;&nbsp;&nbsp;<input type="number" step="1" pattern="\d*" size="5" id="card_current_exp" name="card_current_exp" placeholder="exp" value="" />
+  Current EXP (optional):&nbsp;&nbsp;&nbsp;<input type="text" readonly="true" size="5" id="card_current_exp" name="card_current_exp" placeholder="exp" value="" />
   <br /><br />
   Mode:<br />
   <input type="radio" name="card-mode" id="card-mode" value="LEVEL" checked />EXP needed to get to a level?<br />
   <input type="radio" name="card-mode" id="card-mode" value="EXP" />Level reached after feeding EXP?<br /><br />
   <div id="card-level-area">
-    Desired level:&nbsp;&nbsp;&nbsp;<input type="number" step="1" pattern="\d*" size="5" id="card_desired_level" name="card_desired_level" placeholder="level" value="" />
+    Desired level:&nbsp;&nbsp;&nbsp;<input type="text" readonly="true" size="5" id="card_desired_level" name="card_desired_level" placeholder="level" value="" />
 </div>
 <div id="card-exp-area">
-    EXP:&nbsp;&nbsp;&nbsp;<input type="number" step="1" pattern="\d*" size="5" id="card_feed_exp" name="card_feed_exp" placeholder="exp" value="" />
+    EXP:&nbsp;&nbsp;&nbsp;<input type="text" readonly="true" size="5" id="card_feed_exp" name="card_feed_exp" placeholder="exp" value="" />
 </div>
 <br /><br />
 <div id="button-calculate-card">Calculate</div>