webshims-rails 1.10.3 → 1.10.6

data/vendor/assets/javascripts/webshims/shims/combos/9.js

@@ -1,8 +1,8 @@
 //DOM-Extension helper
-jQuery.webshims.register('dom-extend', function($, webshims, window, document, undefined){
+webshims.register('dom-extend', function($, webshims, window, document, undefined){
 	"use strict";
 	
-	webshims.assumeARIA = Modernizr.localstorage || Modernizr.video || Modernizr.boxsizing;
+	webshims.assumeARIA = $.support.getSetAttribute || Modernizr.canvas || Modernizr.video || Modernizr.boxsizing;
 	
 	if($('<input type="email" />').attr('type') == 'text' || $('<form />').attr('novalidate') === "" || ('required' in $('<input />')[0].attributes)){
 		webshims.error("IE browser modes are busted in IE10. Please test your HTML/CSS/JS with a real IE version or at least IETester or similiar tools");
@@ -11,6 +11,57 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 	if(!$.parseHTML){
 		webshims.error("Webshims needs jQuery 1.8+ to work properly. Please update your jQuery version or downgrade webshims.");
 	}
+	if (!webshims.cfg.no$Switch) {
+		var switch$ = function(){
+			if (window.jQuery && (!window.$ || window.jQuery == window.$) && !window.jQuery.webshims) {
+				webshims.error("jQuery was included more than once. Make sure to include it only once! Webshims and other Plugins might not work properly.");
+				if (window.$) {
+					window.$ = webshims.$;
+				}
+				window.jQuery = webshims.$;
+			}
+			if(webshims.M != Modernizr){
+				webshims.error("Modernizr was included more than once. Make sure to include it only once! Webshims and other scripts might not work properly.");
+				for(var i in Modernizr){
+					if(!(i in webshims.M)){
+						webshims.M[i] = Modernizr[i];
+					}
+				}
+				Modernizr = webshims.M;
+			}
+		};
+		switch$();
+		setTimeout(switch$, 90);
+		$(switch$);
+	}
+//	(function(){
+//		var hostNames = {
+//			'afarkas.github.io': 1,
+//			localhost: 1,
+//			'127.0.0.1': 1
+//		};
+//		
+//		if( webshims.debug && (hostNames[location.hostname] || location.protocol == 'file:') ){
+//			var list = $('<ul class="webshims-debug-list" />');
+//			webshims.errorLog.push = function(message){
+//				list.appendTo('body');
+//				$('<li style="display: none;">'+ message +'</li>')
+//					.appendTo(list)
+//					.slideDown()
+//					.delay(3000)
+//					.slideUp(function(){
+//						$(this).remove();
+//						if(!$('li', list).length){
+//							list.detach();
+//						}
+//					})
+//				;
+//			};
+//			$.each(webshims.errorLog, function(i, message){
+//				webshims.errorLog.push(message);
+//			});
+//		}
+//	})();
 
 	//shortcus
 	var modules = webshims.modules;
@@ -28,6 +79,24 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 		return (_argless) ? oldVal.call($(elem)) : oldVal.call($(elem), val);
 	};
 	
+	//jquery mobile and jquery ui
+	if(!$.widget){
+		(function(){
+			var _cleanData = $.cleanData;
+			$.cleanData = function( elems ) {
+				if(!$.widget){
+					for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {
+						try {
+							$( elem ).triggerHandler( "remove" );
+						// http://bugs.jquery.com/ticket/8235
+						} catch( e ) {}
+					}
+				}
+				_cleanData( elems );
+			};
+		})();
+	}
+	
 
 	$.fn.val = function(val){
 		var elem = this[0];
@@ -61,6 +130,18 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 		return this.on(evt, fn).each(fn);
 	};
 	
+	$.fn.onWSOff = function(evt, fn, trigger, evtDel){
+		if(!evtDel){
+			evtDel = document;
+		}
+		$(evtDel)[trigger ? 'onTrigger' : 'on'](evt, fn);
+		this.on('remove', function(e){
+			if(!e.originalEvent){
+				$(evtDel).off(evt, fn);
+			}
+		});
+	};
+	
 	var dataID = '_webshimsLib'+ (Math.round(Math.random() * 1000));
 	var elementData = function(elem, key, val){
 		elem = elem.jquery ? elem[0] : elem;
@@ -422,7 +503,7 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 		implement: function(elem, type){
 			var data = elementData(elem, 'implemented') || elementData(elem, 'implemented', {});
 			if(data[type]){
-				webshims.info(type +' already implemented for element #'+elem.id);
+				webshims.warn(type +' already implemented for element #'+elem.id);
 				return false;
 			}
 			data[type] = true;
@@ -566,6 +647,12 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 					shadowFocusElementData = $.data(opts.shadowFocusElement, dataID) || $.data(opts.shadowFocusElement, dataID, shadowFocusElementData);
 				}
 				
+				$(nativeElem).on('remove', function(e){
+					if (!e.originalEvent) {
+						$(shadowElem).remove();
+					}
+				});
+				
 				nativeData.hasShadow = shadowElem;
 				shadowFocusElementData.nativeElement = shadowData.nativeElement = nativeElem;
 				shadowFocusElementData.shadowData = shadowData.shadowData = nativeData.shadowData = {
@@ -1085,6 +1172,7 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 			var oVal = val;
 			var thumbStyle = {};
 			var rangeStyle = {};
+			
 			if(!_noNormalize && parseFloat(val, 10) != val){
 				val = o.min + ((o.max - o.min) / 2);
 			}
@@ -1094,6 +1182,7 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 			}
 			left =  100 * ((val - o.min) / (o.max - o.min));
 			
+			if(this._init && val == o.value && oVal == val){return;}
 			this.options.value = val;
 			this.thumb.stop();
 			this.range.stop();
@@ -1163,24 +1252,30 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 			$('.ws-range-ticks', trail).remove();
 			
 			
-			$(this.orig).jProp('list').find('option').each(function(){
-				o.options[$.prop(this, 'value')] = $.prop(this, 'label');
+			$(this.orig).jProp('list').find('option:not([disabled])').each(function(){
+				o.options[$.prop(this, 'value')] = $.prop(this, 'label') || '';
 			});
 			
 			$.each(o.options, function(val, label){
 				if(!isNumber(val) || val < min || val > max){return;}
 				var left = 100 * ((val - min) / (max - min));
-				var title = o.showLabels ? ' title="'+ label +'"' : '';
+				var title = o.showLabels && label ? ' title="'+ label +'"' : '';
 				if(that.vertical){
 					left = Math.abs(left - 100);
 				}
-				trail.append('<span class="ws-range-ticks"'+ title +' style="'+(that.dirs.left)+': '+left+'%;" />');
+				
+				that.posCenter(
+					$('<span class="ws-range-ticks"'+ title +' data-label="'+label+'" style="'+(that.dirs.left)+': '+left+'%;" />').appendTo(trail)
+				);
 			});
 		},
 		readonly: function(val){
 			val = !!val;
 			this.options.readonly = val;
 			this.element.attr('aria-readonly', ''+val);
+			if(this._init){
+				this.updateMetrics();
+			}
 		},
 		disabled: function(val){
 			val = !!val;
@@ -1190,6 +1285,9 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 			} else {
 				this.element.attr({tabindex: this.options.tabindex, 'aria-disabled': 'false'});
 			}
+			if(this._init){
+				this.updateMetrics();
+			}
 		},
 		tabindex: function(val){
 			this.options.tabindex = val;
@@ -1269,6 +1367,24 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 			
 			return val;
 		},
+		addRemoveClass: function(cName, add){
+			var isIn = this.element.prop('className').indexOf(cName) != -1;
+			var action;
+			if(!add && isIn){
+				action = 'removeClass';
+				this.element.removeClass(cName);
+				this.updateMetrics();
+			} else if(add && !isIn){
+				action = 'addClass';
+				
+			}
+			if(action){
+				this.element[action](cName);
+				if(this._init){
+					this.updateMetrics();
+				}
+			}
+		},
 		addBindings: function(){
 			var leftOffset, widgetUnits, hasFocus;
 			var that = this;
@@ -1308,25 +1424,36 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 					that.value(val, false, animate);
 					eventTimer.call('input', val);
 				}
+				if(e && e.type == 'mousemove'){
+					e.preventDefault();
+				}
 			};
-			
 			var remove = function(e){
 				if(e && e.type == 'mouseup'){
 					eventTimer.call('input', o.value);
 					eventTimer.call('change', o.value);
 				}
-				that.element.removeClass('ws-active');
+				that.addRemoveClass('ws-active');
 				$(document).off('mousemove', setValueFromPos).off('mouseup', remove);
+				$(window).off('blur', removeWin);
+			};
+			var removeWin = function(e){
+				if(e.target == window){remove();}
 			};
 			var add = function(e){
+				var outerWidth;
 				e.preventDefault();
 				$(document).off('mousemove', setValueFromPos).off('mouseup', remove);
+				$(window).off('blur', removeWin);
 				if(!o.readonly && !o.disabled){
-					leftOffset = that.element.focus().addClass('ws-active').offset();
-					widgetUnits = that.element[that.dirs.width]();
+					that.element.focus();
+					that.addRemoveClass('ws-active', true);
+					leftOffset = that.element.focus().offset();
+					widgetUnits = that.element[that.dirs.innerWidth]();
 					if(!widgetUnits || !leftOffset){return;}
+					outerWidth = that.thumb[that.dirs.outerWidth]();
 					leftOffset = leftOffset[that.dirs.pos];
-					widgetUnits = 100 / (widgetUnits  - ((that.thumb[that.dirs.outerWidth]() || 2) / 2));
+					widgetUnits = 100 / widgetUnits;
 					setValueFromPos(e, o.animate);
 					$(document)
 						.on({
@@ -1334,6 +1461,7 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 							mousemove: setValueFromPos
 						})
 					;
+					$(window).on('blur', removeWin);
 					e.stopPropagation();
 				}
 			};
@@ -1343,18 +1471,20 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 					if(!o.disabled){
 						eventTimer.init('input', o.value);
 						eventTimer.init('change', o.value);
-						that.element.addClass('ws-focus');
+						that.addRemoveClass('ws-focus', true);
+						that.updateMetrics();
 					}
 					hasFocus = true;
 				},
 				blur: function(e){
 					that.element.removeClass('ws-focus ws-active');
+					that.updateMetrics();
 					hasFocus = false;
 					eventTimer.init('input', o.value);
 					eventTimer.call('change', o.value);
 				},
 				keyup: function(){
-					that.element.removeClass('ws-active');
+					that.addRemoveClass('ws-active');
 					eventTimer.call('input', o.value);
 					eventTimer.call('change', o.value);
 				},
@@ -1379,7 +1509,7 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 							step = false;
 						}
 						if (step) {
-							that.element.addClass('ws-active');
+							that.addRemoveClass('ws-active', true);
 							eventTimer.call('input', o.value);
 							e.preventDefault();
 						}
@@ -1401,38 +1531,88 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 			this.thumb.on({
 				mousedown: add
 			});
+			$(function(){
+				webshims.ready('dom-support', function(){
+					that.element.onWSOff('updateshadowdom', function(){
+						that.updateMetrics();
+					});
+				});
+				if(!$.fn.onWSOff){
+					webshims._polyfill(['dom-support']);
+				}
+			});
+		},
+		posCenter: function(elem, outerWidth){
+			var temp;
+			if(this.options.calcCenter && (!this._init || this.element[0].offsetWidth)){
+				if(!elem){
+					elem = this.thumb;
+				}
+				if(!outerWidth){
+					outerWidth = elem[this.dirs.outerWidth]();
+				}
+				outerWidth = outerWidth / -2;
+				elem.css(this.dirs.marginLeft, outerWidth);
+				
+				if(this.options.calcTrail && elem[0] == this.thumb[0]){
+					temp = this.element[this.dirs.innerHeight]();
+					elem.css(this.dirs.marginTop, (elem[this.dirs.outerHeight]() - temp) / -2);
+					this.range.css(this.dirs.marginTop, (this.range[this.dirs.outerHeight]() - temp) / -2 );
+					outerWidth *= -1;
+					this.trail
+						.css(this.dirs.left, outerWidth)
+						.css(this.dirs.right, outerWidth)
+					;
+				}
+			}
 		},
 		updateMetrics: function(){
 			var width = this.element.innerWidth();
 			this.vertical = (width && this.element.innerHeight() - width  > 10);
 			
 			this.dirs = this.vertical ? 
-				{mouse: 'pageY', pos: 'top', min: 'max', max: 'min', left: 'top', width: 'height', outerWidth: 'outerHeight'} :
-				{mouse: 'pageX', pos: 'left', min: 'min', max: 'max', left: 'left', width: 'width', outerWidth: 'outerWidth'}
+				{mouse: 'pageY', pos: 'top', min: 'max', max: 'min', left: 'top', right: 'bottom', width: 'height', innerWidth: 'innerHeight', innerHeight: 'innerWidth', outerWidth: 'outerHeight', outerHeight: 'outerWidth', marginTop: 'marginLeft', marginLeft: 'marginTop'} :
+				{mouse: 'pageX', pos: 'left', min: 'min', max: 'max', left: 'left', right: 'right', width: 'width', innerWidth: 'innerWidth', innerHeight: 'innerHeight', outerWidth: 'outerWidth', outerHeight: 'outerHeight', marginTop: 'marginTop', marginLeft: 'marginLeft'}
 			;
 			this.element
 				[this.vertical ? 'addClass' : 'removeClass']('vertical-range')
 				[this.vertical ? 'addClass' : 'removeClass']('horizontal-range')
 			;
+			this.posCenter();
 		}
 	};
 	
 	$.fn.rangeUI = function(opts){
-		opts = $.extend({readonly: false, disabled: false, tabindex: 0, min: 0, step: 1, max: 100, value: 50, input: $.noop, change: $.noop, _change: $.noop, showLabels: true, options: {}}, opts);
+		opts = $.extend({
+			readonly: false, 
+			disabled: false, 
+			tabindex: 0, 
+			min: 0, 
+			step: 1, 
+			max: 100, 
+			value: 50, 
+			input: $.noop, 
+			change: $.noop, 
+			_change: $.noop, 
+			showLabels: true, 
+			options: {},
+			calcCenter: true,
+			calcTrail: true
+		}, opts);
 		return this.each(function(){
-			$.webshims.objectCreate(rangeProto, {
+			webshims.objectCreate(rangeProto, {
 				element: {
 					value: $(this)
 				}
 			}, opts);
 		});
 	};
-	jQuery.webshims.isReady('range-ui', true);
+	webshims.isReady('range-ui', true);
 })(jQuery);
-jQuery.webshims.register('form-number-date-ui', function($, webshims, window, document, undefined, options){
+webshims.register('form-number-date-ui', function($, webshims, window, document, undefined, options){
 	"use strict";
 	var curCfg;
-	var formcfg = $.webshims.formcfg;
+	var formcfg = webshims.formcfg;
 	
 	var stopPropagation = function(e){
 		e.stopImmediatePropagation(e);
@@ -1450,7 +1630,7 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 		date: {
 			_create: function(){
 				var obj = {
-					splits: [$('<input type="text" class="yy" size="4" maxlength />')[0], $('<input type="text" class="mm" maxlength="2" size="2" />')[0], $('<input type="text" class="dd ws-spin" maxlength="2" size="2" />')[0]] 
+					splits: [$('<input type="text" class="yy" size="4" inputmode="numeric" />')[0], $('<input type="text" class="mm" inputmode="numeric" maxlength="2" size="2" />')[0], $('<input type="text" class="dd ws-spin" inputmode="numeric" maxlength="2" size="2" />')[0]] 
 				};
 				obj.elements = [obj.splits[0], $('<span class="ws-input-seperator" />')[0], obj.splits[1], $('<span class="ws-input-seperator" />')[0], obj.splits[2]];
 				return obj;
@@ -1476,7 +1656,7 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 		month: {
 			_create: function(){
 				var obj = {
-					splits: [$('<input type="text" class="yy" size="4" />')[0], $('<input type="text" class="mm ws-spin" />')[0]] 
+					splits: [$('<input type="text" class="yy" inputmode="numeric" size="4" />')[0], $('<input type="text" class="mm ws-spin" />')[0]] 
 				};
 				obj.elements = [obj.splits[0], $('<span class="ws-input-seperator" />')[0], obj.splits[1]];
 				return obj;
@@ -1496,6 +1676,23 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 			}
 		}
 	};
+	
+	var steps = {
+		number: {
+			step: 1
+		},
+		time: {
+			step: 60
+		},
+		month: {
+			step: 1,
+			start: new Date()
+		},
+		date: {
+			step: 1,
+			start: new Date()
+		}
+	};
 	var labelWidth = (function(){
 		var getId = function(){
 			return webshims.getID(this);
@@ -1520,7 +1717,8 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 		
 	(function(){
 		var monthDigits = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
-		formcfg.de = {
+		
+		formcfg.de = $.extend(true, {
 			numberFormat: {
 				",": ".",
 				".": ","
@@ -1554,9 +1752,9 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 				showMonthAfterYear: false,
 				yearSuffix: ''
 			}
-		};
+		}, formcfg.de || {});
 		
-		formcfg.en = {
+		formcfg.en = $.extend(true, {
 			numberFormat: {
 				".": ".",
 				",": ","
@@ -1588,13 +1786,17 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 				"showMonthAfterYear": false,
 				"yearSuffix": ""
 			}
-		};
+		}, formcfg['en'] || {});
+		if(!formcfg['en-US']){
+			formcfg['en-US'] = formcfg['en'];
+		}
+		if(!formcfg['']){
+			formcfg[''] = formcfg['en-US'];
+		}
 		
-		formcfg['en-US'] = formcfg['en-US'] || formcfg['en'];
-		formcfg[''] = formcfg[''] || formcfg['en-US'];
 		curCfg = formcfg[''];
 		
-		var createMonthKeys = function(langCfg){
+		var processLangCFG = function(langCfg){
 			if(!langCfg.date.monthkeys){
 				var create = function(i, name){
 					var strNum;
@@ -1610,24 +1812,25 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 				$.each(langCfg.date.monthNames, create);
 				$.each(langCfg.date.monthNamesShort, create);
 			}
+			if(!langCfg.colorSigns){
+				langCfg.colorSigns = '#abcdefABCDEF';
+			}
 		};
 		
-		createMonthKeys(curCfg);
+		processLangCFG(curCfg);
 		
-		$.webshims.ready('dom-extend', function(){
-			$.webshims.activeLang({
-				register: 'form-core', 
-				callback: function(){
-					$.each(arguments, function(i, val){
-						if(formcfg[val]){
-							curCfg = formcfg[val];
-							createMonthKeys(curCfg);
-							$(document).triggerHandler('wslocalechange');
-							return false;
-						}
-					});
-				}
-			});
+		$.webshims.activeLang({
+			register: 'form-core', 
+			callback: function(){
+				$.each(arguments, function(i, val){
+					if(formcfg[val]){
+						curCfg = formcfg[val];
+						processLangCFG(curCfg);
+						$(document).triggerHandler('wslocalechange');
+						return false;
+					}
+				});
+			}
 		});
 	})();
 		
@@ -1647,8 +1850,6 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 			return val * 1;
 		};
 		
-		var createOpts = ['step', 'min', 'max', 'readonly', 'title', 'disabled', 'tabindex', 'placeholder', 'value'];
-		
 		
 		var formatVal = {
 			number: function(val){
@@ -1687,6 +1888,16 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 				}
 				
 				return val;
+			},
+			color: function(val, opts){
+				var ret = '#000000';
+				if(val){
+					val = val.toLowerCase();
+					if(val.length == 7 && createHelper('color').isValid(val)) {
+						ret = val;
+					}
+				}
+				return ret;
 			}
 		};
 		
@@ -1701,7 +1912,7 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 				
 				var p = (!opts.splitInput) ? val.trim().split(/[\.\s-\/\\]+/) : val;
 				
-				if(p.length == 2){
+				if(p.length == 2 && p[0] && p[1]){
 					p[0] = curCfg.date.monthkeys[p[0]] || p[0];
 					p[1] = curCfg.date.monthkeys[p[1]] || p[1];
 					if(p[1].length == 2){
@@ -1731,27 +1942,25 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 					([addZero(val[obj.yy]), addZero(val[obj.mm]), addZero(val[obj.dd])]).join('-') : 
 					''
 				;
-			}
-		};
-		
-		var steps = {
-			number: {
-				step: 1
-			},
-			time: {
-				step: 60
 			},
-			month: {
-				step: 1,
-				start: new Date()
-			},
-			date: {
-				step: 1,
-				start: new Date()
+			color: function(val, opts){
+				var ret = '#000000';
+				if(val){
+					val = val.toLowerCase();
+					if (val.indexOf('#') !== 0) {
+						val = '#' + val;
+					}
+					if(val.length == 4){
+						val = '#' + val.charAt(1) + val.charAt(1) + val.charAt(2) + val.charAt(2) + val.charAt(3) + val.charAt(3);
+					}
+					if(val.length == 7 && createHelper('color').isValid(val)) {
+						ret = val;
+					}
+				}
+				return ret;
 			}
 		};
 		
-		
 		var placeholderFormat = {
 			date: function(val, opts){
 				var hintValue = (val || '').split('-');
@@ -1796,6 +2005,9 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 						asValue: function(val){
 							var type = (typeof val == 'object') ? 'valueAsDate' : 'valueAsNumber';
 							return input.prop(type, val).prop('value');
+						},
+						isValid: function(val){
+							return input.prop('value', val).is(':valid') && input.prop('value') == val;
 						}
 					};
 				}
@@ -1805,211 +2017,80 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 		
 		steps.range = steps.number;
 		
-		
-		var spinBtnProto = {
+		var wsWidgetProto = {
 			_create: function(){
-				var i;
+				var i, that, timedMirror;
 				var o = this.options;
-				var helper = createHelper(o.type);
+				var createOpts = this.createOpts;
+				
 				this.type = o.type;
 				this.orig = o.orig;
 				
-				this.elemHelper = $('<input type="'+ this.type+'" />');
-				this.asNumber = helper.asNumber;
-				this.asValue = helper.asValue;
+				this.buttonWrapper = $('<span class="input-buttons '+this.type+'-input-buttons"></span>').insertAfter(this.element);
+				this.options.containerElements.push(this.buttonWrapper[0]);
 				
-				this.buttonWrapper = $('<span class="input-buttons '+this.type+'-input-buttons"><span unselectable="on" class="step-controls"><span class="step-up"></span><span class="step-down"></span></span></span>')
-					.insertAfter(this.element)
-				;
+				o.mirrorValidity = o.mirrorValidity && this.orig && Modernizr.formvalidation && !webshims.bugs.bustedValidity;
 				
-				if(o.splitInput){
+				if(o.splitInput && this._addSplitInputs){
 					this._addSplitInputs();
 				} else {
 					this.inputElements = this.element;
 				}
 				
-				this.options.containerElements.push(this.buttonWrapper[0]);
-				
-				if(typeof steps[this.type].start == 'object'){
+				if( steps[this.type] && typeof steps[this.type].start == 'object'){
 					steps[this.type].start = this.asNumber(steps[this.type].start);
 				}
 				
-				
-				
 				for(i = 0; i < createOpts.length; i++){
-					this[createOpts[i]](o[createOpts[i]]);
-				}
-				
-				this.element.data('wsspinner', this);
-				
-				this.addBindings();
-				
-				if(!o.min && typeof o.relMin == 'number'){
-					o.min = this.asValue(this.getRelNumber(o.relMin));
-					$.prop(this.orig, 'min', o.min);
+					if(o[createOpts[i]] != null){
+						this[createOpts[i]](o[createOpts[i]], o[createOpts[i]]);
+					}
 				}
-				
-				if(!o.max && typeof o.relMax == 'number'){
-					o.max = this.asValue(this.getRelNumber(o.relMax));
-					$.prop(this.orig, 'max', o.max);
+				if(this.type == 'color'){
+					this.inputElements.prop('maxLength', 7);
 				}
+				this.addBindings();
+				$(this.element).data('wsWidget'+o.type, this);
 				
 				this._init = true;
-			},
-			_addSplitInputs: function(){
-				if(!this.inputElements){
-					var create = splitInputs[this.type]._create();
-					this.splits = create.splits;
-					this.inputElements = $(create.elements).prependTo(this.element).filter('input');
-				}
-			},
-			parseValue: function(){
-				var value = this.inputElements.map(function(){
-					return $.prop(this, 'value');
-				}).get();
-				if(!this.options.splitInput){
-					value = value[0];
-				}
-				return parseVal[this.type](value, this.options);
-			},
-			formatValue: function(val, noSplit){
-				return formatVal[this.type](val, noSplit === false ? false : this.options);
-			},
-			placeholder: function(val){
-				var options = this.options;
-				options.placeholder = val;
-				var placeholder = val;
-				if(placeholderFormat[this.type]){
-					placeholder = placeholderFormat[this.type](val, this.options);
-				}
-				if(options.splitInput && typeof placeholder == 'object'){
-					$.each(this.splits, function(i, elem){
-						$.prop(elem, 'placeholder', placeholder[i]);
-					});
-				} else {
-					this.element.prop('placeholder', placeholder);
-				}
-			},
-			getRelNumber: function(rel){
-				var start = steps[this.type].start || 0;
-				if(rel){
-					start += rel;
-				}
-				return start;
-			},
-			addZero: addZero,
-			_setStartInRange: function(){
-				var start = this.getRelNumber(this.options.relDefaultValue);
-				if(!isNaN(this.minAsNumber) && start < this.minAsNumber){
-					start = this.minAsNumber;
-				} else if(!isNaN(this.maxAsNumber) && start > this.maxAsNumber){
-					start = this.maxAsNumber;
-				}
-				this.elemHelper.prop('valueAsNumber', start);
-				this.options.defValue = this.elemHelper.prop('value');
-				
-			},
-			reorderInputs: function(){
-				if(splitInputs[this.type]){
-					var element = this.element;
-					splitInputs[this.type].sort(element);
-					setTimeout(function(){
-						var data = webshims.data(element);
-						if(data && data.shadowData){
-							data.shadowData.shadowFocusElement = element.find('input')[0] || element[0];
-						}
-					}, 9);
-				}
-			},
-			value: function(val){
-				this.valueAsNumber = this.asNumber(val);
-				this.options.value = val;
-				if(isNaN(this.valueAsNumber) || (!isNaN(this.minAsNumber) && this.valueAsNumber < this.minAsNumber) || (!isNaN(this.maxAsNumber) && this.valueAsNumber > this.maxAsNumber)){
-					this._setStartInRange();
-				} else {
-					this.elemHelper.prop('value', val);
-					this.options.defValue = "";
-				}
 				
-				val = formatVal[this.type](val, this.options);
-				if(this.options.splitInput){
+				if(o.mirrorValidity){
+					that = this;
+					timedMirror = function(){
+						clearTimeout(timedMirror._timerDealy);
+						timedMirror._timerDealy = setTimeout(timedMirror._wsexec, 9);
+					};
+					timedMirror._wsexec = function(){
+						clearTimeout(timedMirror._timerDealy);
+						that.mirrorValidity(true);
+					};
 					
-					$.each(this.splits, function(i, elem){
-						$.prop(elem, 'value', val[i]);
-					});
-				} else {
-					this.element.prop('value', val);
-				}
-				
-				this._propertyChange('value');
-			},
-			initDataList: function(){
-				var listTimer;
-				var that = this;
-				var updateList = function(){
-					$(that.orig)
-						.jProp('list')
-						.off('updateDatalist', updateList)
-						.on('updateDatalist', updateList)
-					;
-					clearTimeout(listTimer);
-					listTimer = setTimeout(function(){
-						if(that.list){
-							that.list();
+					timedMirror();
+					$(this.orig).on('change input', function(e){
+						if(e.type == 'input'){
+							timedMirror();
+						} else {
+							timedMirror._wsexec();
 						}
-					}, 9);
-					
-				};
-				
-				$(this.orig).onTrigger('listdatalistchange', updateList);
-			},
-			getOptions: function(){
-				var options = {};
-				var datalist = $(this.orig).jProp('list');
-				datalist.find('option').each(function(){
-					options[$.prop(this, 'value')] = $.prop(this, 'label');
-				});
-				return [options, datalist.data('label')];
-			},
-			list: function(val){
-				if(this.type == 'number' || this.type == 'time'){
-					this.element.attr('list', $.attr(this.orig, 'list'));
-				}
-				this.options.list = val;
-				this._propertyChange('list');
-			},
-			_propertyChange: $.noop,
-			tabindex: function(val){
-				this.options.tabindex = val;
-				this.inputElements.prop('tabindex', this.options.tabindex);
-			},
-			title: function(val){
-				this.options.title = val;
-				this.element.prop('title', this.options.title);
-			},
-			
-			min: function(val){
-				this.elemHelper.prop('min', val);
-				this.minAsNumber = this.asNumber(val);
-				if(this.valueAsNumber != null && isNaN(this.valueAsNumber)){
-					this._setStartInRange();
+					});
 				}
-				this.options.min = val;
-				this._propertyChange('min');
 			},
-			max: function(val){
-				this.elemHelper.prop('max', val);
-				this.maxAsNumber = this.asNumber(val);
-				if(this.valueAsNumber != null && isNaN(this.valueAsNumber)){
-					this._setStartInRange();
+			mirrorValidity: function(_noTest){
+				//
+				if(this._init && this.options.mirrorValidity){
+					if(!_noTest){
+						$.prop(this.orig, 'validity');
+					}
+					var message = $(this.orig).getErrorMessage();
+					if(message !== this.lastErrorMessage){
+						this.inputElements.prop('setCustomValidity', function(i, val){
+							if(val._supvalue){
+								val._supvalue.call(this, message);
+							}
+						});
+						this.lastErrorMessage = message;
+					}
 				}
-				this.options.max = val;
-				this._propertyChange('max');
-			},
-			step: function(val){
-				var defStep = steps[this.type];
-				this.options.step = val;
-				this.elemHelper.prop('step', retDefault(val, defStep.step));
 			},
 			addBindings: function(){
 				var isFocused;
@@ -2062,6 +2143,9 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 						var val;
 						clearTimeout(timer);
 						val = that.parseValue();
+						if(that.type == 'color'){
+							that.inputElements.val(val);
+						}
 						$.prop(that.orig, 'value', val);
 						eventTimer.call('input', val);
 						if(!e || e.type != 'wsupdatevalue'){
@@ -2098,6 +2182,7 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 					;
 					setTimeout(function(){
 						if(that.popover){
+							that.popover.element.on('wspopoverhide', onBlur);
 							$('> *', that.popover.element)
 								.on({
 									'focusin': onFocus,
@@ -2178,7 +2263,7 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 									e.preventDefault();
 								}
 							}
-						}
+						};
 					})()
 				};
 				var mouseDownInit = function(){
@@ -2202,28 +2287,6 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 					};
 				})();
 				
-				['stepUp', 'stepDown'].forEach(function(name){
-					step[name] = function(factor){
-						if(!o.disabled && !o.readonly){
-							if(!isFocused){
-								mouseDownInit();
-							}
-							var ret = false;
-							if (!factor) {
-								factor = 1;
-							}
-							try {
-								that.elemHelper[name](factor);
-								ret = that.elemHelper.prop('value');
-								that.value(ret);
-								eventTimer.call('input', ret);
-							} catch (er) {}
-							return ret;
-						}
-					};
-				});
-				
-				
 				
 				this.buttonWrapper.on('mousedown', mouseDownInit);
 				
@@ -2240,960 +2303,415 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 				
 				this.inputElements.on(elementEvts);
 				
-				if(!o.noSpinbtn){
-					spinEvents[$.fn.mwheelIntent ? 'mwheelIntent' : 'mousewheel'] = function(e, delta){
-						if(delta && isFocused && !o.disabled){
-							step[delta > 0 ? 'stepUp' : 'stepDown']();
-							e.preventDefault();
-						}
-					};
-					spinEvents.keydown = function(e){
-						if(o.list || e.isDefaultPrevented() || $.attr(this, 'list')){return;}
-						var stepped = true;
-						var code = e.keyCode;
-						if (code == 38) {
-							step.stepUp();
-						} else if (code == 40) {
-							step.stepDown();
-						} else {
-							stepped = false;
-						}
-						if(stepped){
-							e.preventDefault();
-						}
-					};
-					
-					spinElement.attr({'autocomplete': 'off', role: 'spinbutton'}).on(spinEvents);
-				}
-				
-				
-				if(!o.splitInput){
-					$(document).on('wslocalechange',function(){
-						if(o.value){
-							that.value(o.value);
-						}
-
-						if(placeholderFormat[that.type] && o.placeholder){
-							that.placeholder(o.placeholder);
-						}
-					});
-				} else {
-					$(document).onTrigger('wslocalechange',function(){
-						that.reorderInputs();
+				if(steps[this.type]){
+					['stepUp', 'stepDown'].forEach(function(name){
+						step[name] = function(factor){
+							if(!o.disabled && !o.readonly){
+								if(!isFocused){
+									mouseDownInit();
+								}
+								var ret = false;
+								if (!factor) {
+									factor = 1;
+								}
+								try {
+									that.elemHelper[name](factor);
+									ret = that.elemHelper.prop('value');
+									that.value(ret);
+									eventTimer.call('input', ret);
+								} catch (er) {}
+								return ret;
+							}
+						};
 					});
-				}
-				
-				$('.step-up', this.buttonWrapper)
-					.on({
-						'mousepressstart mousepressend': mousePress,
-						'mousedown mousepress': function(e){
-							step.stepUp();
-						}
-					})
-				;
-				$('.step-down', this.buttonWrapper)
-					.on({
-						'mousepressstart mousepressend': mousePress,
-						'mousedown mousepress': function(e){
-							step.stepDown();
-						}
-					})
-				;
-				initChangeEvents();
-			}
-		};
-		
-		['readonly', 'disabled'].forEach(function(name){
-			spinBtnProto[name] = function(val){
-				if(this.options[name] != val || !this._init){
-					this.options[name] = !!val;
-					if(name == 'readonly' && this.options.noInput){
-						this.element
-							.prop(name, true)
-							.attr({'aria-readonly': this.options[name]})
-						;
-					} else {
-						this.element.prop(name, this.options[name]);
+					if(!o.noSpinbtn){
+						spinEvents[$.fn.mwheelIntent ? 'mwheelIntent' : 'mousewheel'] = function(e, delta){
+							if(delta && isFocused && !o.disabled){
+								step[delta > 0 ? 'stepUp' : 'stepDown']();
+								e.preventDefault();
+							}
+						};
+						spinEvents.keydown = function(e){
+							if(o.list || e.isDefaultPrevented() || $.attr(this, 'list')){return;}
+							var stepped = true;
+							var code = e.keyCode;
+							if (code == 38) {
+								step.stepUp();
+							} else if (code == 40) {
+								step.stepDown();
+							} else {
+								stepped = false;
+							}
+							if(stepped){
+								e.preventDefault();
+							}
+						};
+						
+						spinElement.attr({'autocomplete': 'off', role: 'spinbutton'}).on(spinEvents);
 					}
-					this.buttonWrapper[this.options[name] ? 'addClass' : 'removeClass']('ws-'+name);
+					$(this.buttonWrapper)
+						.on('mousepressstart mousepressend', '.step-up, .step-down', mousePress)
+						.on('mousedown mousepress', '.step-up', function(e){
+								step.stepUp();
+						})
+						.on('mousedown mousepress', '.step-down', function(e){
+								step.stepDown();
+						})
+					;
 				}
-			};
-		});
-		
-		
-		$.fn.spinbtnUI = function(opts){
-			opts = $.extend({
-				monthNames: 'monthNames',
-				size: 1,
-				startView: 0
-			}, opts);
-			return this.each(function(){
-				$.webshims.objectCreate(spinBtnProto, {
-					element: {
-						value: $(this)
-					}
-				}, opts);
-			});
-		};
-	})();
-	
-	(function(){
-		var picker = {};
-		var disable = {
-			
-		};
-		
-		var getDateArray = function(date){
-			var ret = [date.getFullYear(), addZero(date.getMonth() + 1), addZero(date.getDate())];
-			ret.month = ret[0]+'-'+ret[1];
-			ret.date = ret[0]+'-'+ret[1]+'-'+ret[2];
-			return ret;
-		};
-		var today = getDateArray(new Date());
+				if(this.type != 'color'){
+					(function(){
+						var localeChange ;
+						if(!o.splitInput){
+							localeChange = function(){
+								if(o.value){
+									that.value(o.value);
+								}
 		
-		var _setFocus = function(element, _noFocus){
-			var setFocus, that;
-			element = $(element || this.activeButton);
-			this.activeButton.attr({tabindex: '-1', 'aria-selected': 'false'});
-			this.activeButton = element.attr({tabindex: '0', 'aria-selected': 'true'});
-			this.index = this.buttons.index(this.activeButton[0]);
-			
-			clearTimeout(this.timer);
-			
-			if(!this.popover.openedByFocus && !_noFocus){
-				that = this;
-				setFocus = function(noTrigger){
-					clearTimeout(that.timer);
-					that.timer = setTimeout(function(){
-						if(element[0]){
-							element[0].focus();
-							if(noTrigger !== true && !element.is(':focus')){
-								setFocus(true);
-							}
+								if(placeholderFormat[that.type] && o.placeholder){
+									that.placeholder(o.placeholder);
+								}
+							};
+						} else {
+							localeChange = function(){
+								that.reorderInputs();
+							};
+							that.reorderInputs();
 						}
-					}, that.popover.isVisible ? 99 : 360);
-				};
-				this.popover.activateElement(element);
-				setFocus();
-			}
-			
-		};
-		
-		var _initialFocus = function(){
-			var sel;
-			if(this.popover.navedInitFocus){
-				sel = this.popover.navedInitFocus.sel || this.popover.navedInitFocus;
-				if((!this.activeButton || !this.activeButton[0]) && this.buttons[sel]){
-					this.activeButton = this.buttons[sel]();
-				} else if(sel){
-					this.activeButton = $(sel, this.element);
+						$(that.orig).onWSOff('wslocalechange', localeChange);
+					})();
 				}
 				
-				if(!this.activeButton[0] && this.popover.navedInitFocus.alt){
-					this.activeButton = this.buttons[this.popover.navedInitFocus.alt]();
+				initChangeEvents();
+			},
+			value: function(val){
+				if(!this._init || val !== this.options.value){
+					this.element.val(this.formatValue(val));
+					this.options.value = val;
+					this._propertyChange('value');
+					this.mirrorValidity();
 				}
-			}
-			
-			if(!this.activeButton || !this.activeButton[0]){
-				this.activeButton = this.buttons.filter('.checked-value');
-			}
-			
-			if(!this.activeButton[0]){
-				this.activeButton = this.buttons.filter('.this-value');
-			}
-			if(!this.activeButton[0]){
-				this.activeButton = this.buttons.eq(0);
-			}
-			
-			this.setFocus(this.activeButton, this.opts.noFocus);
-		};
-		
-		
-		webshims.ListBox = function (element, popover, opts){
-			this.element = $('ul', element);
-			this.popover = popover;
-			this.opts = opts || {};
-			this.buttons = $('button:not(:disabled)', this.element);
-			
-			
-			this.ons(this);
-			this._initialFocus();
-		};
-		
-		webshims.ListBox.prototype = {
-			setFocus: _setFocus,
-			_initialFocus: _initialFocus,
-			prev: function(){
-				var index = this.index - 1;
-				if(index < 0){
-					if(this.opts.prev){
-						this.popover.navedInitFocus = 'last';
-						this.popover.actionFn(this.opts.prev);
-						this.popover.navedInitFocus = false;
-					}
-				} else {
-					this.setFocus(this.buttons.eq(index));
+				
+			},
+			required: function(val, boolVal){
+				this.inputElements.attr({'aria-required': ''+boolVal});
+				this.mirrorValidity();
+			},
+			parseValue: function(){
+				var value = this.inputElements.map(function(){
+					return $.prop(this, 'value');
+				}).get();
+				if(!this.options.splitInput){
+					value = value[0];
 				}
+				return parseVal[this.type](value, this.options);
 			},
-			next: function(){
-				var index = this.index + 1;
-				if(index >= this.buttons.length){
-					if(this.opts.next){
-						this.popover.navedInitFocus = 'first';
-						this.popover.actionFn(this.opts.next);
-						this.popover.navedInitFocus = false;
-					}
+			formatValue: function(val, noSplit){
+				return formatVal[this.type](val, noSplit === false ? false : this.options);
+			},
+			createOpts: ['readonly', 'title', 'disabled', 'tabindex', 'placeholder', 'value', 'required'],
+			placeholder: function(val){
+				var options = this.options;
+				options.placeholder = val;
+				var placeholder = val;
+				if(placeholderFormat[this.type]){
+					placeholder = placeholderFormat[this.type](val, this.options);
+				}
+				if(options.splitInput && typeof placeholder == 'object'){
+					$.each(this.splits, function(i, elem){
+						$.prop(elem, 'placeholder', placeholder[i]);
+					});
 				} else {
-					this.setFocus(this.buttons.eq(index));
+					this.element.prop('placeholder', placeholder);
 				}
 			},
-			ons: function(that){
-				this.element
-					.on({
-						'keydown': function(e){
-							var handled;
-							var key = e.keyCode;
-							if(e.ctrlKey){return;}
-							if(key == 36 || key == 33){
-								that.setFocus(that.buttons.eq(0));
-								handled = true;
-							} else if(key == 34 || key == 35){
-								that.setFocus(that.buttons.eq(that.buttons.length - 1));
-								handled = true;
-							} else if(key == 38 || key == 37){
-								that.prev();
-								handled = true;
-							} else if(key == 40 || key == 39){
-								that.next();
-								handled = true;
-							}
-							if(handled){
-								return false;
-							}
+			initDataList: function(){
+				var listTimer;
+				var that = this;
+				var updateList = function(){
+					$(that.orig)
+						.jProp('list')
+						.off('updateDatalist', updateList)
+						.on('updateDatalist', updateList)
+					;
+					clearTimeout(listTimer);
+					listTimer = setTimeout(function(){
+						if(that.list){
+							that.list();
 						}
-					})
-				;
-			}
-		};
-		
-		webshims.Grid = function (element, popover, opts){
-			this.element = $('tbody', element);
-			this.popover = popover;
-			this.opts = opts || {};
-			this.buttons = $('button:not(:disabled,.othermonth)', this.element);
-			
-			this.ons(this);
-			
-			this._initialFocus();
-			if(this.popover.openedByFocus){
-				this.popover.activeElement = this.activeButton;
-			}
-		};
-		
-		
-		
-		webshims.Grid.prototype = {
-			setFocus: _setFocus,
-			_initialFocus: _initialFocus,
-			
-			first: function(){
-				this.setFocus(this.buttons.eq(0));
+					}, 9);
+					
+				};
+				
+				$(this.orig).onTrigger('listdatalistchange', updateList);
 			},
-			last: function(){
-				this.setFocus(this.buttons.eq(this.buttons.length - 1));
+			getOptions: function(){
+				var options = {};
+				var datalist = $(this.orig).jProp('list');
+				datalist.find('option').each(function(){
+					options[$.prop(this, 'value')] = $.prop(this, 'label');
+				});
+				return [options, datalist.data('label')];
 			},
-			upPage: function(){
-				$('.ws-picker-header > button:not(:disabled)', this.popover.element).trigger('click');
+			list: function(val){
+				if(this.type == 'number' || this.type == 'time'){
+					this.element.attr('list', $.attr(this.orig, 'list'));
+				}
+				this.options.list = val;
+				this._propertyChange('list');
 			},
-			downPage: function(){
-				this.activeButton.filter(':not([data-action="changeInput"])').trigger('click');
+			_propertyChange: $.noop,
+			tabindex: function(val){
+				this.options.tabindex = val;
+				this.inputElements.prop('tabindex', this.options.tabindex);
+				$('button', this.buttonWrapper).prop('tabindex', this.options.tabindex);
 			},
-			ons: function(that){
-				this.element
-					.on({
-						'keydown': function(e){
-							var handled;
-							var key = e.keyCode;
-							
-							if(e.shiftKey){return;}
-							
-							if((e.ctrlKey && key == 40)){
-								handled = 'downPage';
-							} else if((e.ctrlKey && key == 38)){
-								handled = 'upPage';
-							} else if(key == 33 || (e.ctrlKey && key == 37)){
-								handled = 'prevPage';
-							} else if(key == 34 || (e.ctrlKey && key == 39)){
-								handled = 'nextPage';
-							} else if(e.keyCode == 36 || e.keyCode == 33){
-								handled = 'first';
-							} else if(e.keyCode == 35){
-								handled = 'last';
-							} else if(e.keyCode == 38){
-								handled = 'up';
-							} else if(e.keyCode == 37){
-								handled = 'prev';
-							} else if(e.keyCode == 40){
-								handled = 'down';
-							} else if(e.keyCode == 39){
-								handled = 'next';
-							}
-							if(handled){
-								that[handled]();
-								return false;
-							}
-						}
-					})
-				;
-			}
-		};
-		$.each({
-			prevPage: {get: 'last', action: 'prev'}, 
-			nextPage: {get: 'first', action: 'next'}
-		}, function(name, val){
-			webshims.Grid.prototype[name] = function(){
-				if(this.opts[val.action]){
-					this.popover.navedInitFocus = {
-						sel: 'button[data-id="'+ this.activeButton.attr('data-id') +'"]:not(:disabled,.othermonth)',
-						alt: val.get
-					};
-					this.popover.actionFn(this.opts[val.action]);
-					this.popover.navedInitFocus = false;
-				}
-			};
-		});
-		
-		$.each({
-			up: {traverse: 'prevAll', get: 'last', action: 'prev', reverse: true}, 
-			down: {traverse: 'nextAll', get: 'first', action: 'next'}
-		}, function(name, val){
-			webshims.Grid.prototype[name] = function(){
-				var cellIndex = this.activeButton.closest('td').prop('cellIndex');
-				var sel = 'td:nth-child('+(cellIndex + 1)+') button:not(:disabled,.othermonth)';
-				var button = this.activeButton.closest('tr')[val.traverse]();
-				
-				if(val.reverse){
-					button = $(button.get().reverse());
-				}
-				button = button.find(sel)[val.get]();
-				
-				if(!button[0]){
-					if(this.opts[val.action]){
-						this.popover.navedInitFocus = sel+':'+val.get;
-						this.popover.actionFn(this.opts[val.action]);
-						this.popover.navedInitFocus = false;
-					}
-				} else {
-					this.setFocus(button.eq(0));
-				}
-			};
-		});
-		
-		$.each({
-			prev: {traverse: 'prevAll',get: 'last', reverse: true}, 
-			next: {traverse: 'nextAll', get: 'first'}
-		}, function(name, val){
-			webshims.Grid.prototype[name] = function(){
-				var sel = 'button:not(:disabled,.othermonth)';
-				var button = this.activeButton.closest('td')[val.traverse]('td');
-				if(val.reverse){
-					button = $(button.get().reverse());
-				}
-				button = button.find(sel)[val.get]();
-				if(!button[0]){
-					button = this.activeButton.closest('tr')[val.traverse]('tr');
-					if(val.reverse){
-						button = $(button.get().reverse());
-					}
-					button = button.find(sel)[val.get]();
+			title: function(val){
+				if(!val && this.orig && $.attr(this.orig, 'title') == null){
+					val = null;
 				}
-				
-				if(!button[0]){
-					if(this.opts[name]){
-						this.popover.navedInitFocus = val.get;
-						this.popover.actionFn(this.opts[name]);
-						this.popover.navedInitFocus = false;
-					}
+				this.options.title = val;
+				if(val == null){
+					this.inputElements.removeAttr('title');
 				} else {
-					this.setFocus(button.eq(0));
+					this.inputElements.prop('title', this.options.title);
 				}
-			};
-		});
-		
-		picker.getWeek = function(date){
-			var onejan = new Date(date.getFullYear(),0,1);
-			return Math.ceil((((date - onejan) / 86400000) + onejan.getDay()+1)/7);
-		};
-		picker.getYearList = function(value, data){
-			var j, i, val, disabled, lis, prevDisabled, nextDisabled, classStr, classArray, start;
-			
-			
-			var size = data.options.size;
-			var max = data.options.max.split('-');
-			var min = data.options.min.split('-');
-			var currentValue = data.options.value.split('-');
-			var xthCorrect = 0;
-			var enabled = 0;
-			var str = '';
-			var rowNum = 0;
-			
-			if(data.options.useDecadeBase == 'max' && max[0]){
-				xthCorrect = 11 - (max[0] % 12);
-			} else if(data.options.useDecadeBase == 'min' && min[0]){
-				xthCorrect = 11 - (min[0] % 12);
 			}
-			
-			value = value[0] * 1;
-			start = value - ((value + xthCorrect) % (12 * size));
-			
-			
-			
-			for(j = 0; j < size; j++){
-				if(j){
-					start += 12;
-				}  else {
-					prevDisabled = picker.isInRange([start-1], max, min) ? {'data-action': 'setYearList','value': start-1} : false;
-				}
-				
-				str += '<div class="year-list picker-list ws-index-'+ j +'"><div class="ws-picker-header"><button disabled="disabled">'+ start +' – '+(start + 11)+'</button></div>';
-				lis = [];
-				for(i = 0; i < 12; i++){
-					val = start + i ;
-					classArray = [];
-					if( !picker.isInRange([val], max, min) ){
-						disabled = ' disabled=""';
-					} else {
-						disabled = '';
-						enabled++;
-					}
-					
-					if(val == today[0]){
-						classArray.push('this-value');
-					}
-					
-					if(currentValue[0] == val){
-						classArray.push('checked-value');
-					}
-					
-					classStr = classArray.length ? ' class="'+ (classArray.join(' ')) +'"' : '';
-					
-					if(i && !(i % 3)){
-						rowNum++;
-						lis.push('</tr><tr class="ws-row-'+ rowNum +'">');
-					}
-					lis.push('<td class="ws-item-'+ i +'" role="presentation"><button  data-id="year-'+ i +'" type="button"'+ disabled + classStr +' data-action="setMonthList" value="'+val+'" tabindex="-1" role="gridcell">'+val+'</button></td>');
-				}
-				if(j == size - 1){
-					nextDisabled = picker.isInRange([val+1], max, min) ? {'data-action': 'setYearList','value': val+1} : false;
-				}
-				str += '<div class="picker-grid"><table role="grid" aria-label="'+ start +' – '+(start + 11)+'"><tbody><tr class="ws-row-0">'+ (lis.join(''))+ '</tr></tbody></table></div></div>';
-			}
-			
-			return {
-				enabled: enabled,
-				main: str,
-				next: nextDisabled,
-				prev: prevDisabled,
-				type: 'Grid'
-			};
 		};
 		
 		
-		picker.getMonthList = function(value, data){
-			
-			var j, i, name, val, disabled, lis, fullyDisabled, prevDisabled, nextDisabled, classStr, classArray;
-			var o = data.options;
-			var size = o.size;
-			var max = o.max.split('-');
-			var min = o.min.split('-');
-			var currentValue = o.value.split('-');
-			var enabled = 0;
-			var rowNum = 0;
-			var str = '';
-			
-			value = value[0] - Math.floor((size - 1) / 2);
-			for(j = 0; j < size; j++){
-				if(j){
-					value++;
-				} else {
-					prevDisabled = picker.isInRange([value-1], max, min) ? {'data-action': 'setMonthList','value': value-1} : false;
-				}
-				if(j == size - 1){
-					nextDisabled = picker.isInRange([value+1], max, min) ? {'data-action': 'setMonthList','value': value+1} : false;
-				}
-				lis = [];
-				
-				if( !picker.isInRange([value, '01'], max, min) && !picker.isInRange([value, '12'], max, min)){
-					disabled = ' disabled=""';
-					fullyDisabled = true;
-				} else {
-					fullyDisabled = false;
-					disabled = '';
-				}
-				
-				if(o.minView >= 1){
-					disabled = ' disabled=""';
-				}
-				
-				str += '<div class="month-list picker-list ws-index-'+ j +'"><div class="ws-picker-header">';
-				
-				str += o.selectNav ? 
-					'<select data-action="setMonthList" class="year-select">'+ picker.createYearSelect(value, max, min).join('') +'</select>' : 
-					'<button data-action="setYearList"'+disabled+' value="'+ value +'" tabindex="-1">'+ value +'</button>';
-				str += '</div>';
-				
-				for(i = 0; i < 12; i++){
-					val = curCfg.date.monthkeys[i+1];
-					name = (curCfg.date[o.monthNames] || curCfg.date.monthNames)[i];
-					classArray = [];
-					if(fullyDisabled || !picker.isInRange([value, val], max, min) ){
-						disabled = ' disabled=""';
-					} else {
-						disabled = '';
-						enabled++;
-					}
-					
-					if(value == today[0] && today[1] == val){
-						classArray.push('this-value');
-					}
-					
-					if(currentValue[0] == value && currentValue[1] == val){
-						classArray.push('checked-value');
-					}
-					
-					classStr = (classArray.length) ? ' class="'+ (classArray.join(' ')) +'"' : '';
-					if(i && !(i % 3)){
-						rowNum++;
-						lis.push('</tr><tr class="ws-row-'+ rowNum +'">');
+		['readonly', 'disabled'].forEach(function(name){
+			var isDisabled = name == 'disabled';
+			wsWidgetProto[name] = function(val, boolVal){
+				if(this.options[name] != boolVal || !this._init){
+					this.options[name] = !!boolVal;
+					this.inputElements.prop(name, this.options[name]);
+					this.buttonWrapper[this.options[name] ? 'addClass' : 'removeClass']('ws-'+name);
+					if(isDisabled){
+						$('button', this.buttonWrapper).prop('disabled', this.options[name]);
 					}
-
-					lis.push('<td class="ws-item-'+ i +'" role="presentation"><button data-id="month-'+ i +'" type="button"'+ disabled + classStr +' data-action="'+ (data.type == 'month' ? 'changeInput' : 'setDayList' ) +'" value="'+value+'-'+val+'" tabindex="-1" role="gridcell" aria-label="'+ curCfg.date.monthNames[i] +'">'+name+'</button></td>');
-					
 				}
-				
-				str += '<div class="picker-grid"><table role="grid" aria-label="'+value+'"><tbody><tr class="ws-row-0">'+ (lis.join(''))+ '</tr></tbody></table></div></div>';
-			}
-			
-			return {
-				enabled: enabled,
-				main: str,
-				prev: prevDisabled,
-				next: nextDisabled,
-				type: 'Grid'
 			};
-		};
-		
+		});
 		
-		picker.getDayList = function(value, data){
-			
-			var j, i, k, day, nDay, name, val, disabled, lis,  prevDisabled, nextDisabled, addTr, week, rowNum;
-			
-			var lastMotnh, curMonth, otherMonth, dateArray, monthName, fullMonthName, buttonStr, date2, classArray;
-			var o = data.options;
-			var size = o.size;
-			var max = o.max.split('-');
-			var min = o.min.split('-');
-			var currentValue = o.value.split('-');
-			var monthNames = curCfg.date[o.monthNamesHead] || curCfg.date[o.monthNames] || curCfg.date.monthNames; 
-			var enabled = 0;
-			var str = [];
-			var date = new Date(value[0], value[1] - 1, 1);
-			
-			date.setMonth(date.getMonth()  - Math.floor((size - 1) / 2));
-			
-			for(j = 0;  j < size; j++){
-				date.setDate(1);
-				lastMotnh = date.getMonth();
-				rowNum = 0;
-				if(!j){
-					date2 = new Date(date.getTime());
-					date2.setDate(-1);
-					dateArray = getDateArray(date2);
-					prevDisabled = picker.isInRange(dateArray, max, min) ? {'data-action': 'setDayList','value': dateArray[0]+'-'+dateArray[1]} : false;
-				}
+		var spinBtnProto = $.extend({}, wsWidgetProto, {
+			_create: function(){
+				var o = this.options;
+				var helper = createHelper(o.type);
 				
-				dateArray = getDateArray(date);
+				this.elemHelper = $('<input type="'+ o.type+'" />');
+				this.asNumber = helper.asNumber;
+				this.asValue = helper.asValue;
 				
-				str.push('<div class="day-list picker-list ws-index-'+ j +'"><div class="ws-picker-header">');
-				if( o.selectNav ){
-					monthName = ['<select data-action="setDayList" class="month-select" tabindex="0">'+ picker.createMonthSelect(dateArray, max, min, monthNames).join('') +'</select>', '<select data-action="setDayList" class="year-select" tabindex="0">'+ picker.createYearSelect(dateArray[0], max, min, '-'+dateArray[1]).join('') +'</select>'];
-					if(curCfg.date.showMonthAfterYear){
-						monthName.reverse();
-					}
-					str.push( monthName.join(' ') );
-				} 
+				wsWidgetProto._create.apply(this, arguments);
+				this._init = false;
 				
-				fullMonthName = [curCfg.date.monthNames[(dateArray[1] * 1) - 1], dateArray[0]];
-				monthName = [monthNames[(dateArray[1] * 1) - 1], dateArray[0]];
-				if(curCfg.date.showMonthAfterYear){
-					monthName.reverse();
-					fullMonthName.reverse();
-				}
+				this.buttonWrapper.html('<span unselectable="on" class="step-controls"><span class="step-up"></span><span class="step-down"></span></span>');
 				
-				if(!data.options.selectNav) {
-					str.push(  
-						'<button data-action="setMonthList"'+ (o.minView >= 2 ? ' disabled="" ' : '') +' value="'+ dateArray.date +'" tabindex="-1">'+ monthName.join(' ') +'</button>'
-					);
+				if(this.type == 'number'){
+					this.inputElements.attr('inputmode', 'numeric');
 				}
 				
 				
-				str.push('</div><div class="picker-grid"><table role="grid" aria-label="'+ fullMonthName.join(' ')  +'"><thead><tr>');
+				if(!o.min && typeof o.relMin == 'number'){
+					o.min = this.asValue(this.getRelNumber(o.relMin));
+					$.prop(this.orig, 'min', o.min);
+				}
 				
-				if(data.options.showWeek){
-					str.push('<th class="week-header">'+ curCfg.date.weekHeader +'</th>');
+				if(!o.max && typeof o.relMax == 'number'){
+					o.max = this.asValue(this.getRelNumber(o.relMax));
+					$.prop(this.orig, 'max', o.max);
 				}
-				for(k = curCfg.date.firstDay; k < curCfg.date.dayNamesShort.length; k++){
-					str.push('<th class="day-'+ k +'"><abbr title="'+ curCfg.date.dayNames[k] +'">'+ curCfg.date.dayNamesShort[k] +'</abbr></th>');
+				this._init = true;
+			},
+			createOpts: ['step', 'min', 'max', 'readonly', 'title', 'disabled', 'tabindex', 'placeholder', 'value', 'required'],
+			_addSplitInputs: function(){
+				if(!this.inputElements){
+					var create = splitInputs[this.type]._create();
+					this.splits = create.splits;
+					this.inputElements = $(create.elements).prependTo(this.element).filter('input');
 				}
-				k = curCfg.date.firstDay;
-				while(k--){
-					str.push('<th class="day-'+ k +'"><abbr title="'+ curCfg.date.dayNames[k] +'">'+ curCfg.date.dayNamesShort[k] +'</abbr></th>');
+			},
+			
+			getRelNumber: function(rel){
+				var start = steps[this.type].start || 0;
+				if(rel){
+					start += rel;
 				}
-				str.push('</tr></thead><tbody><tr class="ws-row-0">');
-				
-				if(data.options.showWeek) {
-					week = picker.getWeek(date);
-					str.push('<td class="week-cell">'+ week +'</td>');
+				return start;
+			},
+			addZero: addZero,
+			_setStartInRange: function(){
+				var start = this.getRelNumber(this.options.relDefaultValue);
+				if(!isNaN(this.minAsNumber) && start < this.minAsNumber){
+					start = this.minAsNumber;
+				} else if(!isNaN(this.maxAsNumber) && start > this.maxAsNumber){
+					start = this.maxAsNumber;
 				}
+				this.elemHelper.prop('valueAsNumber', start);
+				this.options.defValue = this.elemHelper.prop('value');
 				
-				for (i = 0; i < 99; i++) {
-					addTr = (i && !(i % 7));
-					curMonth = date.getMonth();
-					otherMonth = lastMotnh != curMonth;
-					day = date.getDay();
-					classArray = [];
-					
-					if(addTr && otherMonth ){
-						str.push('</tr>');
-						break;
-					}
-					if(addTr){
-						rowNum++;
-						str.push('</tr><tr class="ws-row-'+ rowNum +'">');
-						if(data.options.showWeek) {
-							week++;
-							str.push('<td class="week-cell">'+ week +'</td>');
-						}
-					}
-					
-					if(!i){
-						
-						if(day != curCfg.date.firstDay){
-							nDay = day - curCfg.date.firstDay;
-							if(nDay < 0){
-								nDay += 7;
-							}
-							date.setDate(date.getDate() - nDay);
-							day = date.getDay();
-							curMonth = date.getMonth();
-							otherMonth = lastMotnh != curMonth;
+			},
+			reorderInputs: function(){
+				if(splitInputs[this.type]){
+					var element = this.element;
+					splitInputs[this.type].sort(element);
+					setTimeout(function(){
+						var data = webshims.data(element);
+						if(data && data.shadowData){
+							data.shadowData.shadowFocusElement = element.find('input')[0] || element[0];
 						}
-					}
-					
-					dateArray = getDateArray(date);
-					buttonStr = '<td role="presentation" class="day-'+ day +'"><button data-id="day-'+ date.getDate() +'" role="gridcell" data-action="changeInput" value="'+ (dateArray.join('-')) +'"';
+					}, 9);
+				}
+			},
+			value: function(val){
+				
+				if(!this._init || this.options.value !== val){
+					this.valueAsNumber = this.asNumber(val);
+					this.options.value = val;
 					
-					if(otherMonth){
-						classArray.push('othermonth');
+					if(isNaN(this.valueAsNumber) || (!isNaN(this.minAsNumber) && this.valueAsNumber < this.minAsNumber) || (!isNaN(this.maxAsNumber) && this.valueAsNumber > this.maxAsNumber)){
+						this._setStartInRange();
 					} else {
-						classArray.push('day-'+date.getDate());
-					}
-					
-					if(dateArray[0] == today[0] && today[1] == dateArray[1] && today[2] == dateArray[2]){
-						classArray.push('this-value');
+						this.elemHelper.prop('value', val);
+						this.options.defValue = "";
 					}
 					
-					if(currentValue[0] == dateArray[0] && dateArray[1] == currentValue[1] && dateArray[2] == currentValue[2]){
-						classArray.push('checked-value');
-					}
-					
-					if(classArray.length){
-						buttonStr += ' class="'+ classArray.join(' ') +'"';
-					}
-					
-					if(!picker.isInRange(dateArray, max, min) || (data.options.disableDays && $.inArray(day, data.options.disableDays) != -1)){
-						buttonStr += ' disabled=""';
+					val = formatVal[this.type](val, this.options);
+					if(this.options.splitInput){
+						$.each(this.splits, function(i, elem){
+							$.prop(elem, 'value', val[i]);
+						});
+					} else {
+						this.element.prop('value', val);
 					}
-					
-					str.push(buttonStr+' tabindex="-1">'+ date.getDate() +'</button></td>');
-					
-					date.setDate(date.getDate() + 1);
-				}
-				str.push('</tbody></table></div></div>');
-				if(j == size - 1){
-					dateArray = getDateArray(date);
-					dateArray[2] = 1;
-					nextDisabled = picker.isInRange(dateArray, max, min) ? {'data-action': 'setDayList','value': dateArray.date} : false;
+					this._propertyChange('value');
+					this.mirrorValidity();
 				}
+			},
+			step: function(val){
+				var defStep = steps[this.type];
+				this.options.step = val;
+				this.elemHelper.prop('step', retDefault(val, defStep.step));
+				this.mirrorValidity();
 			}
-					
-			
-			return {
-				enabled: 9,
-				main: str.join(''),
-				prev: prevDisabled,
-				next: nextDisabled,
-				type: 'Grid'
-			};
-		};
+		});
 		
-		picker.isInRange = function(values, max, min){
-			var i;
-			var ret = true;
-			for(i = 0; i < values.length; i++){
-				
-				if(min[i] && min[i] > values[i]){
-					ret = false;
-					break;
-				} else if( !(min[i] && min[i] == values[i]) ){
-					break;
+		$.each({min: 1, max: -1}, function(name, factor){
+			var numName = name +'AsNumber';
+			spinBtnProto[name] = function(val){
+				this.elemHelper.prop(name, val);
+				this[numName] = this.asNumber(val);
+				if(this.valueAsNumber != null && (isNaN(this.valueAsNumber) || (!isNaN(this[numName]) && (this.valueAsNumber * factor) < (this[numName] * factor)))){
+					this._setStartInRange();
 				}
-			}
-			if(ret){
-				for(i = 0; i < values.length; i++){
-					
-					if((max[i] && max[i] < values[i])){
-						ret = false;
-						break;
-					} else if( !(max[i] && max[i] == values[i]) ){
-						break;
+				this.options[name] = val;
+				this._propertyChange(name);
+				this.mirrorValidity();
+			};
+		});
+		
+		$.fn.wsBaseWidget = function(opts){
+			opts = $.extend({}, opts);
+			return this.each(function(){
+				$.webshims.objectCreate(wsWidgetProto, {
+					element: {
+						value: $(this)
 					}
-				}
-			}
-			return ret;
+				}, opts);
+			});
 		};
 		
-		picker.createMonthSelect = function(value, max, min, monthNames){
-			if(!monthNames){
-				monthNames = curCfg.date.monthNames;
-			}
-			
-			var selected;
-			var i = 0;
-			var options = [];
-			var tempVal = value[1]-1;
-			for(; i < monthNames.length; i++){
-				selected = tempVal == i ? ' selected=""' : '';
-				if(selected || picker.isInRange([value[0], i+1], max, min)){
-					options.push('<option value="'+ value[0]+'-'+addZero(i+1) + '"'+selected+'>'+ monthNames[i] +'</option>');
-				}
+		$.fn.spinbtnUI = function(opts){
+			opts = $.extend({
+				monthNames: 'monthNames',
+				size: 1,
+				startView: 0
+			}, opts);
+			return this.each(function(){
+				$.webshims.objectCreate(spinBtnProto, {
+					element: {
+						value: $(this)
+					}
+				}, opts);
+			});
+		};
+	})();
+	
+	(function(){
+		var picker = {};
+
+		var loadPicker = function(type, name){
+			type = (type == 'color' ? 'color' : 'forms')+'-picker';
+			if(!loadPicker[name+'Loaded'+type]){
+				loadPicker[name+'Loaded'+type] = true;
+				webshims.ready(name, function(){
+					webshims.loader.loadList([type]);
+				});
 			}
-			return options;
+			return type;
 		};
+		options.addZero = addZero;
+		webshims.loader.addModule('forms-picker', {
+			noAutoCallback: true,
+			options: options
+		});
+		webshims.loader.addModule('color-picker', {
+			noAutoCallback: true, 
+			css: 'jpicker/jpicker.css',
+			options: options
+		});
 		
-		picker.createYearSelect = function(value, max, min, valueAdd){
-			
-			var temp;
-			var goUp = true;
-			var goDown = true;
-			var options = ['<option selected="">'+ value + '</option>'];
-			var i = 0;
-			if(!valueAdd){
-				valueAdd = '';
-			}
-			while(i < 8 && (goUp || goDown)){
-				i++;
-				temp = value-i;
-				if(goUp && picker.isInRange([temp], max, min)){
-					options.unshift('<option value="'+ (temp+valueAdd) +'">'+ temp +'</option>');
-				} else {
-					goUp = false;
-				}
-				temp = value + i;
-				if(goDown && picker.isInRange([temp], max, min)){
-					options.push('<option value="'+ (temp+valueAdd) +'">'+ temp +'</option>');
-				} else {
-					goDown = false;
-				}
+		picker._genericSetFocus = function(element, _noFocus){
+			element = $(element || this.activeButton);
+			if(!this.popover.openedByFocus && !_noFocus){
+				var that = this;
+				var setFocus = function(noTrigger){
+					clearTimeout(that.timer);
+					that.timer = setTimeout(function(){
+						if(element[0]){
+							element[0].focus();
+							if(noTrigger !== true && !element.is(':focus')){
+								setFocus(true);
+							}
+						}
+					}, that.popover.isVisible ? 99 : 360);
+				};
+				this.popover.activateElement(element);
+				setFocus();
 			}
-			return options;
 		};
-			
-		var actions = {
+		
+		picker._actions = {
 			changeInput: function(val, popover, data){
+				picker._actions.cancel(val, popover, data);
+				data.setChange(val);
+			},
+			cancel: function(val, popover, data){
 				popover.stopOpen = true;
 				data.element.getShadowFocusElement().focus();
 				setTimeout(function(){
 					popover.stopOpen = false;
 				}, 9);
-				popover.hide();
-				data.setChange(val);
-			}
-		};
-		
-		(function(){
-			var retNames = function(name){
-				return 'get'+name+'List';
-			};
-			var retSetNames = function(name){
-				return 'set'+name+'List';
-			};
-			var stops = {
-				date: 'Day',
-				week: 'Day',
-				month: 'Month'
-			};
-			
-			$.each({'setYearList' : ['Year', 'Month', 'Day'], 'setMonthList': ['Month', 'Day'], 'setDayList': ['Day']}, function(setName, names){
-				var getNames = names.map(retNames);
-				var setNames = names.map(retSetNames);
-				actions[setName] = function(val, popover, data, startAt){
-					val = ''+val;
-					var o = data.options;
-					var values = val.split('-');
-					if(!startAt){
-						startAt = 0;
-					}
-					$.each(getNames, function(i, item){
-						if(i >= startAt){
-							var content = picker[item](values, data);
-							
-							if( values.length < 2 || content.enabled > 1 || stops[data.type] === names[i]){
-								popover.element
-									.attr({'data-currentview': setNames[i]})
-									.addClass('ws-size-'+o.size)
-									.data('pickercontent', {
-										data: data,
-										content: content,
-										values: values
-									})
-								;
-								popover.bodyElement.html(content.main);
-								if(content.prev){
-									popover.prevElement
-										.attr(content.prev)
-										.prop({disabled: false})
-									;
-								} else {
-									popover.prevElement
-										.removeAttr('data-action')
-										.prop({disabled: true})
-									;
-								}
-								if(content.next){
-									popover.nextElement
-										.attr(content.next)
-										.prop({disabled: false})
-									;
-								} else {
-									popover.nextElement
-										.removeAttr('data-action')
-										.prop({disabled: true})
-									;
-								}
-								if(webshims[content.type]){
-									new webshims[content.type](popover.bodyElement.children(), popover, content);
-								}
-								popover.element.trigger('pickerchange');
-								return false;
-							}
-						}
-					});
-				};
-			});
-		})();
-		
-		picker.commonInit = function(data, popover){
-			var actionfn = function(e){
-				if(!$(this).is('.othermonth') || $(this).css('cursor') == 'pointer'){
-					popover.actionFn({
-						'data-action': $.attr(this, 'data-action'),
-						value: $(this).val() || $.attr(this, 'value')
-					});
-				}
-				return false;
-			};
-			var id = new Date().getTime();
-			var generateList = function(o, max, min){
-				var options = [];
-				var label = '';
-				var labelId = '';
-				o.options = data.getOptions() || {};
-				$('div.ws-options', popover.contentElement).remove();
-				$.each(o.options[0], function(val, label){
-					var disabled = picker.isInRange(val.split('-'), o.maxS, o.minS) ?
-						'' :
-						' disabled="" '
-					;
-					options.push('<li role="presentation"><button value="'+ val +'" '+disabled+' data-action="changeInput" tabindex="-1"  role="option">'+ (label || data.formatValue(val, false)) +'</button></li>');
-				});
-				if(options.length){
-					id++;
-					if(o.options[1]){
-						labelId = 'datalist-'+id;
-						label = '<h5 id="'+labelId+'">'+ o.options[1] +'</h5>';
-						labelId = ' aria-labelledbyid="'+ labelId +'" ';
-					}
-					new webshims.ListBox($('<div class="ws-options">'+label+'<ul role="listbox" '+ labelId +'>'+ options.join('') +'</div>').insertAfter(popover.bodyElement)[0], popover, {noFocus: true});
-				}
-			};
-			var updateContent = function(){
-				if(popover.isDirty){
-					var o = data.options;
-					o.maxS = o.max.split('-');
-					o.minS = o.min.split('-');
-					
-					$('button', popover.buttonRow).each(function(){
-						var text;
-						if($(this).is('.ws-empty')){
-							text = curCfg.date.clear;
-							if(!text){
-								text = formcfg[''].date.clear || 'clear';
-								webshims.warn("could not get clear text from form cfg");
-							}
-						} else if($(this).is('.ws-current')){
-							text = (curCfg[data.type] || {}).currentText;
-							if(!text){
-								text = (formcfg[''][[data.type]] || {}).currentText || 'current';
-								webshims.warn("could not get currentText from form cfg");
-							}
-							$.prop(this, 'disabled', !picker.isInRange(today[data.type].split('-'), o.maxS, o.minS));
-						}
-						if(text){
-							$(this).text(text).attr({'aria-label': text});
-							if(webshims.assumeARIA){
-								$.attr(this, 'aria-label', text);
-							}
-						}
-						
-					});
-					popover.nextElement.attr({'aria-label': curCfg.date.nextText});
-					$('> span', popover.nextElement).html(curCfg.date.nextText);
-					popover.prevElement.attr({'aria-label': curCfg.date.prevText});
-					$('> span', popover.prevElement).html(curCfg.date.prevText);
-					
-					generateList(o, o.maxS, o.minS);
-					
-				}
-				$('button.ws-empty', popover.buttonRow).prop('disabled', $.prop(data.orig, 'required'));
-				popover.isDirty = false;
-			};
-			
-			popover.actionFn = function(obj){
-				if(actions[obj['data-action']]){
-					actions[obj['data-action']](obj.value, popover, data, 0);
-				} else {
-					webshims.warn('no action for '+ obj['data-action']);
-				}
-			};
-			
-			popover.contentElement.html('<button class="ws-prev" tabindex="0"><span></span></button> <button class="ws-next" tabindex="0"><span></span></button><div class="ws-picker-body"></div><div class="ws-button-row"><button type="button" class="ws-current" data-action="changeInput" value="'+today[data.type]+'" tabindex="0"></button> <button type="button" data-action="changeInput" value="" class="ws-empty" tabindex="0"></button></div>');
-			popover.nextElement = $('button.ws-next', popover.contentElement);
-			popover.prevElement = $('button.ws-prev', popover.contentElement);
-			popover.bodyElement = $('div.ws-picker-body', popover.contentElement);
-			popover.buttonRow = $('div.ws-button-row', popover.contentElement);
+				popover.hide();
+			}
+		};
+		
+		
+		picker.commonInit = function(data, popover){
+			var tabbable;
 			
 			popover.isDirty = true;
 			
-			popover.contentElement
-				.on('click', 'button[data-action]', actionfn)
-				.on('change', 'select[data-action]', actionfn)
-			;
-			
+			popover.element.on('updatepickercontent pickerchange', function(){
+				tabbable = false;
+			});
 			popover.contentElement.on({
 				keydown: function(e){
 					if(e.keyCode == 9){
-						var tabbable = $('[tabindex="0"]:not(:disabled)', this).filter(':visible');
+						if(!tabbable){
+							tabbable = $('input:not(:disabled), [tabindex="0"]:not(:disabled)', this).filter(':visible');
+						}
 						var index = tabbable.index(e.target);
 						if(e.shiftKey && index <= 0){
 							tabbable.last().focus();
@@ -3211,18 +2729,11 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 				}
 			});
 			
-			$(data.options.orig).on('input', function(){
-				var currentView;
-				if(data.options.updateOnInput && popover.isVisible && data.options.value && (currentView = popover.element.attr('data-currentview'))){
-					actions[currentView]( data.options.value , popover, data, 0);
-				}
-			});
-			
 			data._propertyChange = (function(){
 				var timer;
 				var update = function(){
 					if(popover.isVisible){
-						updateContent();
+						popover.element.triggerHandler('updatepickercontent');
 					}
 				};
 				return function(prop){
@@ -3248,50 +2759,51 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 			popover.element.on({
 				wspopoverbeforeshow: function(){
 					data.element.triggerHandler('wsupdatevalue');
-					updateContent();
+					popover.element.triggerHandler('updatepickercontent');
 				}
 			});
 			
-			$(document).onTrigger('wslocalechange', data._propertyChange);
+			
+			$(data.orig).on('remove', function(e){
+				if(!e.originalEvent){
+					$(document).off('wslocalechange', data._propertyChange);
+				}
+			});
 		};
 		
+		
 		picker._common = function(data){
 			var popover = webshims.objectCreate(webshims.wsPopover, {}, {prepareFor: data.element});
 			var opener = $('<button type="button" class="ws-popover-opener"><span /></button>').appendTo(data.buttonWrapper);
 			var options = data.options;
-			var init = false;
 			
+			var showPickerContent = function(){
+				(picker[data.type].showPickerContent || picker.showPickerContent)(data, popover);
+			};
 			var show = function(){
+				var type = loadPicker(data.type, 'DOM');
 				if(!options.disabled && !options.readonly && !popover.isVisible){
-					if(!init){
-						picker.commonInit(data, popover);
-					}
-					
-					if(!init || data.options.restartView) {
-						actions.setYearList( options.defValue || options.value, popover, data, data.options.startView);
-					} else {
-						actions[popover.element.attr('data-currentview') || 'setYearList']( options.defValue || options.value, popover, data, 0);
-					}
-					
-					init = true;
+					webshims.ready(type, showPickerContent);
 					popover.show(data.element);
 				}
 			};
 			
 			options.containerElements.push(popover.element[0]);
 			
-			if(!options.startView){
-				options.startView = 0;
-			}
-			if(!options.minView){
-				options.minView = 0;
-			}
-			if(options.startView < options.minView){
-				options.minView = options.startView;
-				webshims.warn("wrong config for minView/startView.");
-			}
-			if(!options.size){
-				options.size = 1;
+			if(data.type != 'color'){
+				if(!options.startView){
+					options.startView = 0;
+				}
+				if(!options.minView){
+					options.minView = 0;
+				}
+				if(options.startView < options.minView){
+					options.startView = options.minView;
+					webshims.warn("wrong config for minView/startView.");
+				}
+				if(!options.size){
+					options.size = 1;
+				}
 			}
 			
 			popover.element
@@ -3318,10 +2830,15 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 			labelWidth(popover.element.children('div.ws-po-outerbox').attr({role: 'group'}), options.labels, true);
 			labelWidth(opener, options.labels, true);
 			
+			if(options.tabindex != null){
+				opener.attr({tabindex: options.tabindex});
+			}
+			
+			if(options.disabled){
+				opener.prop({disabled: true});
+			}
+			
 			opener
-				.attr({
-					'tabindex': options.labels.length ? 0 : '-1'
-				})
 				.on({
 					mousedown: function(){
 						stopPropagation.apply(this, arguments);
@@ -3366,10 +2883,51 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 				});
 			})();
 			data.popover = popover;
+			data.opener = opener;
+			$(data.orig).on('remove', function(e){
+				if(!e.originalEvent){
+					opener.remove();
+					popover.element.remove();
+				}
+			});
+			
+			loadPicker(data.type, 'WINDOWLOAD');
 		};
 		
 		picker.month = picker._common;
-		picker.date = picker.month;
+		picker.date = picker._common;
+		picker.color = function(data){
+			var ret = picker._common.apply(this, arguments);
+			var alpha = $(data.orig).data('alphacontrol');
+			var colorIndicator = data.opener
+				.prepend('<span class="ws-color-indicator-bg"><span class="ws-color-indicator" /></span>')
+				.find('.ws-color-indicator')
+			;
+			var showColor = function(){
+				colorIndicator.css({backgroundColor: $.prop(this, 'value') || '#000'})
+			};
+			var showOpacity = (function(){
+				var timer;
+				var show = function(){
+					try {
+						var value = data.alpha.prop('valueAsNumber') / (data.alpha.prop('max') || 1);
+						if(!isNaN(value)){
+							colorIndicator.css({opacity: value});
+						}
+					} catch(er){}
+					
+				};
+				return function(e){
+					clearTimeout(timer);
+					timer = setTimeout(show, !e || e.type == 'change' ? 4: 40);
+				};
+			})();
+			data.alpha = (alpha) ? $('#'+alpha) : $([]);
+			
+			$(data.orig).on('wsupdatevalue change', showColor).each(showColor);
+			data.alpha.on('wsupdatevalue change input', showOpacity).each(showOpacity);
+			return ret;
+		};
 		
 		webshims.picker = picker;
 	})();
@@ -3390,6 +2948,7 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 			'max',
 			'step',
 			'title',
+			'required',
 			'placeholder'
 		];
 		
@@ -3398,11 +2957,11 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 			
 		$.each(copyProps.concat(copyAttrs), function(i, name){
 			var fnName = name.replace(/^data\-/, '');
-			webshims.onNodeNamesPropertyModify('input', name, function(val){
+			webshims.onNodeNamesPropertyModify('input', name, function(val, boolVal){
 				if(!stopCircular){
 					var shadowData = webshims.data(this, 'shadowData');
 					if(shadowData && shadowData.data && shadowData.nativeElement === this && shadowData.data[fnName]){
-						shadowData.data[fnName](val);
+						shadowData.data[fnName](val, boolVal);
 					}
 				}
 			});
@@ -3433,6 +2992,7 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 		var sizeInput = function(data){
 			var init;
 			var updateStyles = function(){
+				$(data.orig).removeClass('ws-important-hide');
 				$.style( data.orig, 'display', '' );
 				var hasButtons, marginR, marginL;
 				var correctWidth = 0.6;
@@ -3466,13 +3026,14 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 					data.element.outerWidth( $(data.orig).outerWidth() - correctWidth );
 				}
 				init = true;
-				$.style( data.orig, 'display', 'none' );
+				$(data.orig).addClass('ws-important-hide');
 			};
-			$(document).onTrigger('updateshadowdom', updateStyles);
+			data.element.onWSOff('updateshadowdom', updateStyles, true);
 		};
 		
 		
 		var implementType = function(){
+			
 			var type = $.prop(this, 'type');
 			
 			var i, opts, data, optsName, labels;
@@ -3527,7 +3088,7 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 				data.shim.options.containerElements.push(data.shim.element[0]);
 				
 				labelWidth($(this).getShadowFocusElement(), labels);
-				$.attr(this, 'required', $.attr(this, 'required'));
+				
 				$(this).on('change', function(e){
 					if(!stopCircular){
 						data.shim.value($.prop(this, 'value'));
@@ -3586,18 +3147,13 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 				
 				if(opts.calculateWidth){
 					sizeInput(data.shim);
+				} else {
+					$(this).css({display: 'none'});
 				}
-				$(this).css({display: 'none'});
 			}
+			
 		};
 		
-		if(!modernizrInputTypes.range || options.replaceUI){
-			extendType('range', {
-				_create: function(opts, set){
-					return $('<span />').insertAfter(opts.orig).rangeUI(opts).data('rangeUi');
-				}
-			});
-		}
 		
 		if(Modernizr.formvalidation){
 			['input', 'form'].forEach(function(name){
@@ -3614,12 +3170,20 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 			});
 		}
 		
+		if(!modernizrInputTypes.range || options.replaceUI){
+			extendType('range', {
+				_create: function(opts, set){
+					var data = $('<span />').insertAfter(opts.orig).rangeUI(opts).data('rangeUi');
+					return data;
+				}
+			});
+		}
 		
-		['number', 'time', 'month', 'date'].forEach(function(name){
-			if(!modernizrInputTypes[name] || options.replaceUI){
+		var isStupid = navigator.userAgent.indexOf('MSIE 10.0') != -1 && navigator.userAgent.indexOf('Touch') == -1;
+		['number', 'time', 'month', 'date', 'color'].forEach(function(name){
+			if(!modernizrInputTypes[name] || options.replaceUI || (name == 'number' && isStupid)){
 				extendType(name, {
 					_create: function(opts, set){
-						
 						if(opts.splitInput && !splitInputs[name]){
 							webshims.warn('splitInput not supported for '+ name);
 							opts.splitInput = false;
@@ -3627,11 +3191,12 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 						var markup = opts.splitInput ?
 								'<span class="ws-'+name+' ws-input" role="group"></span>' :
 								'<input class="ws-'+name+'" type="text" />';
-						var data = $(markup) //role="spinbutton"???
-							.insertAfter(opts.orig)
-							.spinbtnUI(opts)
-							.data('wsspinner')
-						;
+						var data = $(markup).insertAfter(opts.orig);
+						if(steps[name]){
+							data = data.spinbtnUI(opts).data('wsWidget'+name);
+						} else {
+							data = data.wsBaseWidget(opts).data('wsWidget'+name);
+						}
 						if(webshims.picker && webshims.picker[name]){
 							webshims.picker[name](data);
 						}
@@ -3653,9 +3218,37 @@ jQuery.webshims.register('form-number-date-ui', function($, webshims, window, do
 });
 
 
-jQuery.webshims.register('form-datalist', function($, webshims, window, document, undefined, options){
+webshims.register('form-datalist', function($, webshims, window, document, undefined, options){
 	"use strict";
-	var doc = document;	
+	var doc = document;
+	var lazyLoad = function(name){
+		if(!name || typeof name != 'string'){
+			name = 'DOM';
+		}
+		if(!lazyLoad[name+'Loaded']){
+			lazyLoad[name+'Loaded'] = true;
+			webshims.ready(name, function(){
+				webshims.loader.loadList(['form-datalist-lazy']);
+			});
+		}
+	};
+	var noDatalistSupport = {
+		submit: 1,
+		button: 1,
+		reset: 1, 
+		hidden: 1,
+		
+		range: 1,
+		date: 1,
+		month: 1
+	};
+	if(webshims.modules["form-number-date-ui"].loaded){
+		$.extend(noDatalistSupport, {
+			number: 1,
+			time: 1
+		});
+	}
+	
 
 	/*
 	 * implement propType "element" currently only used for list-attribute (will be moved to dom-extend, if needed)
@@ -3691,28 +3284,6 @@ jQuery.webshims.register('form-datalist', function($, webshims, window, document
 			var initializeDatalist =  function(){
 				
 				
-			if(!listSupport){
-				webshims.defineNodeNameProperty('datalist', 'options', {
-					prop: {
-						writeable: false,
-						get: function(){
-							var elem = this;
-							var select = $('select', elem);
-							var options;
-							if(select[0]){
-								options = select[0].options;
-							} else {
-								options = $('option', elem).get();
-								if(options.length){
-									webshims.warn('you should wrap your option-elements for a datalist in a select element to support IE and other old browsers.');
-								}
-							}
-							return options;
-						}
-					}
-				});
-			}
-				
 			var inputListProto = {
 				//override autocomplete
 				autocomplete: {
@@ -3772,27 +3343,8 @@ jQuery.webshims.register('form-datalist', function($, webshims, window, document
 				};
 			}
 			
-			if(!listSupport){
-				
-				inputListProto['list'] = {
-					attr: {
-						get: function(){
-							var val = webshims.contentAttr(this, 'list');
-							return (val == null) ? undefined : val;
-						},
-						set: function(value){
-							var elem = this;
-							webshims.contentAttr(elem, 'list', value);
-							webshims.objectCreate(shadowListProto, undefined, {input: elem, id: value, datalist: $.prop(elem, 'list')});
-							$(elem).triggerHandler('listdatalistchange');
-						}
-					},
-					initAttr: true,
-					reflect: true,
-					propType: 'element',
-					propNodeName: 'datalist'
-				};
-			} else {
+			
+			if(listSupport){
 				//options only return options, if option-elements are rooted: but this makes this part of HTML5 less backwards compatible
 				if(!($('<datalist><select><option></option></select></datalist>').prop('options') || []).length ){
 					webshims.defineNodeNameProperty('datalist', 'options', {
@@ -3812,13 +3364,15 @@ jQuery.webshims.register('form-datalist', function($, webshims, window, document
 						}
 					});
 				}
-				inputListProto['list'] = {
+				inputListProto.list = {
 					attr: {
 						get: function(){
 							var val = webshims.contentAttr(this, 'list');
 							if(val != null){
 								$.data(this, 'datalistListAttr', val);
-								this.removeAttribute('list');
+								if(!noDatalistSupport[$.prop(this, 'type')] && !noDatalistSupport[$.attr(this, 'type')]){
+									this.removeAttribute('list');
+								}
 							} else {
 								val = $.data(this, 'datalistListAttr');
 							}
@@ -3828,7 +3382,15 @@ jQuery.webshims.register('form-datalist', function($, webshims, window, document
 						set: function(value){
 							var elem = this;
 							$.data(elem, 'datalistListAttr', value);
-							webshims.objectCreate(shadowListProto, undefined, {input: elem, id: value, datalist: $.prop(elem, 'list')});
+							if (!noDatalistSupport[$.prop(this, 'type')] && !noDatalistSupport[$.attr(this, 'type')]) {
+								webshims.objectCreate(shadowListProto, undefined, {
+									input: elem,
+									id: value,
+									datalist: $.prop(elem, 'list')
+								});
+							} else {
+								elem.setAttribute('list', value);
+							}
 							$(elem).triggerHandler('listdatalistchange');
 						}
 					},
@@ -3848,62 +3410,14 @@ jQuery.webshims.register('form-datalist', function($, webshims, window, document
 					.each(function(){
 						$(this).triggerHandler('updateDatalist');
 					})
-					
 				;
-				
 			});
-			
-			
 		};
 		
 		
 		/*
 		 * ShadowList
 		 */
-		var listidIndex = 0;
-		var noDatalistSupport = {
-			submit: 1,
-			button: 1,
-			reset: 1, 
-			hidden: 1,
-			
-			range: 1,
-			date: 1,
-			month: 1
-		};
-		if(webshims.modules["form-number-date-ui"].loaded){
-			$.extend(noDatalistSupport, {
-				number: 1,
-				time: 1
-			});
-		}
-
-		var globStoredOptions = {};
-		var getStoredOptions = function(name){
-			if(!name){return [];}
-			if(globStoredOptions[name]){
-				return globStoredOptions[name];
-			}
-			var data;
-			try {
-				data = JSON.parse(localStorage.getItem('storedDatalistOptions'+name));
-			} catch(e){}
-			globStoredOptions[name] = data || [];
-			return data || [];
-		};
-		var storeOptions = function(name, val){
-			if(!name){return;}
-			val = val || [];
-			try {
-				localStorage.setItem( 'storedDatalistOptions'+name, JSON.stringify(val) );
-			} catch(e){}
-		};
-		
-		var getText = function(elem){
-			return (elem.textContent || elem.innerText || $.text([ elem ]) || '');
-		};
-		var lReg = /</g;
-		var gReg = />/g;
 		
 		var shadowListProto = {
 			_create: function(opts){
@@ -3911,6 +3425,7 @@ jQuery.webshims.register('form-datalist', function($, webshims, window, document
 				if(noDatalistSupport[$.prop(opts.input, 'type')] || noDatalistSupport[$.attr(opts.input, 'type')]){return;}
 				var datalist = opts.datalist;
 				var data = $.data(opts.input, 'datalistWidget');
+				var that = this;
 				if(datalist && data && data.datalist !== datalist){
 					data.datalist = datalist;
 					data.id = opts.id;
@@ -3931,9 +3446,8 @@ jQuery.webshims.register('form-datalist', function($, webshims, window, document
 				} else if(data && data.datalist === datalist){
 					return;
 				}
-				listidIndex++;
-				var that = this;
-				this.hideList = $.proxy(that, 'hideList');
+				
+				
 				
 				this.datalist = datalist;
 				this.id = opts.id;
@@ -3941,121 +3455,21 @@ jQuery.webshims.register('form-datalist', function($, webshims, window, document
 				this._autocomplete = $.attr(opts.input, 'autocomplete');
 				$.data(opts.input, 'datalistWidget', this);
 				
-				this.popover = webshims.objectCreate(webshims.wsPopover, {}, options.datalistPopover);
-				this.shadowList = this.popover.element.addClass('datalist-polyfill');
-				
-				
-				this.index = -1;
-				this.input = opts.input;
-				this.arrayOptions = [];
-				
-				this.shadowList
-					.delegate('li', 'mouseenter.datalistWidget mousedown.datalistWidget click.datalistWidget', function(e){
-						var items = $('li:not(.hidden-item)', that.shadowList);
-						var select = (e.type == 'mousedown' || e.type == 'click');
-						that.markItem(items.index(e.currentTarget), select, items);
-						if(e.type == 'click'){
-							that.hideList();
-							if(formsCFG.customDatalist){
-								$(opts.input).getNativeElement().trigger('datalistselect');
-							}
-						}
-						return (e.type != 'mousedown');
-					})
-				;
-				
-				opts.input.setAttribute('autocomplete', 'off');
-				
-				$(opts.input)
-					.attr({
-						//role: 'combobox',
-						'aria-haspopup': 'true'
-					})
-					.on({
-						'input.datalistWidget': function(){
-							if(!that.triggeredByDatalist){
-								that.changedValue = false;
-								that.showHideOptions();
-							}
-						},
-						'keydown.datalistWidget': function(e){
-							var keyCode = e.keyCode;
-							var activeItem;
-							var items;
-							if(keyCode == 40 && !that.showList()){
-								that.markItem(that.index + 1, true);
-								return false;
-							}
-							
-							if(!that.popover.isVisible){return;}
-							
-							 
-							if(keyCode == 38){
-								that.markItem(that.index - 1, true);
-								return false;
-							} 
-							if(!e.shiftKey && (keyCode == 33 || keyCode == 36)){
-								that.markItem(0, true);
-								return false;
-							} 
-							if(!e.shiftKey && (keyCode == 34 || keyCode == 35)){
-								items = $('li:not(.hidden-item)', that.shadowList);
-								that.markItem(items.length - 1, true, items);
-								return false;
-							} 
-							if(keyCode == 13 || keyCode == 27){
-								if (keyCode == 13){
-									activeItem = $('li.active-item:not(.hidden-item)', that.shadowList);
-									that.changeValue( $('li.active-item:not(.hidden-item)', that.shadowList) );
-								}
-								that.hideList();
-								if(formsCFG.customDatalist && activeItem && activeItem[0]){
-									$(opts.input).getNativeElement().trigger('datalistselect');
-								}
-								return false;
-							}
-						},
-						'focus.datalistWidget': function(){
-							if($(this).hasClass('list-focus')){
-								that.showList();
-							}
-						},
-						'mousedown.datalistWidget': function(){
-							if($(this).is(':focus')){
-								that.showList();
-							}
-						}
-					})
-				;
-				
-				
-				$(this.datalist)
-					.off('updateDatalist.datalistWidget')
-					.on('updateDatalist.datalistWidget', $.proxy(this, '_resetListCached'))
-				;
-				
-				this._resetListCached();
+				lazyLoad('WINDOWLOAD');
 				
-				if(opts.input.form && (opts.input.name || opts.input.id)){
-					$(opts.input.form).on('submit.datalistWidget'+opts.input.id, function(){
-						if(!$(opts.input).hasClass('no-datalist-cache') && that._autocomplete != 'off'){
-							var val = $.prop(opts.input, 'value');
-							var name = (opts.input.name || opts.input.id) + $.prop(opts.input, 'type');
-							if(!that.storedOptions){
-								that.storedOptions = getStoredOptions( name );
-							}
-							if(val && that.storedOptions.indexOf(val) == -1){
-								that.storedOptions.push(val);
-								storeOptions(name, that.storedOptions );
-							}
+				if(webshims.isReady('form-datalist-lazy')){
+					this._lazyCreate(opts);
+				} else {
+					$(opts.input).one('focus', lazyLoad);
+					webshims.ready('form-datalist-lazy', function(){
+						if(!that._destroyed){
+							that._lazyCreate(opts);
 						}
 					});
 				}
-				$(window).on('unload.datalist'+this.id+' beforeunload.datalist'+this.id, function(){
-					that.destroy();
-				});
 			},
-			destroy: function(){
+			destroy: function(e){
+				var input;
 				var autocomplete = $.attr(this.input, 'autocomplete');
 				$(this.input)
 					.off('.datalistWidget')
@@ -4073,268 +3487,21 @@ jQuery.webshims.register('form-datalist', function($, webshims, window, document
 				} else {
 					$(this.input).attr('autocomplete', autocomplete);
 				}
-			},
-			_resetListCached: function(e){
-				var that = this;
-				var forceShow;
-				this.needsUpdate = true;
-				this.lastUpdatedValue = false;
-				this.lastUnfoundValue = '';
-
-				if(!this.updateTimer){
-					if(window.QUnit || (forceShow = ($(that.input).is(':focus') && ($(that.input).hasClass('list-focus') || $.prop(that.input, 'value'))) )){
-						that.updateListOptions(forceShow);
-					} else {
-						webshims.ready('WINDOWLOAD', function(){
-							that.updateTimer = setTimeout(function(){
-								that.updateListOptions();
-								that = null;
-								listidIndex = 1;
-							}, 200 + (100 * listidIndex));
-						});
-					}
-				}
-			},
-			updateListOptions: function(_forceShow){
-				this.needsUpdate = false;
-				clearTimeout(this.updateTimer);
-				this.updateTimer = false;
-				
-				this.searchStart = formsCFG.customDatalist && $(this.input).hasClass('search-start');
-				this.addMarkElement = options.addMark || $(this.input).hasClass('mark-option-text');
-				
-				var list = [];
-				
-				var values = [];
-				var allOptions = [];
-				var rElem, rItem, rOptions, rI, rLen, item, value;
-				for(rOptions = $.prop(this.datalist, 'options'), rI = 0, rLen = rOptions.length; rI < rLen; rI++){
-					rElem = rOptions[rI];
-					if(!rElem.disabled && (value = $(rElem).val())){
-						rItem = {
-							value: value.replace(lReg, '&lt;').replace(gReg, '&gt;'),
-							label: $.trim($.attr(rElem, 'label') || getText(rElem)).replace(lReg, '&lt;').replace(gReg, '&gt;'),
-							className: rElem.className || ''
-						};
-						
-						if(rItem.label){
-							rItem.className += ' has-option-label';
-						}
-						values.push(rItem.value);
-						allOptions.push(rItem);
-					}
-				}
-				
-				if(!this.storedOptions){
-					this.storedOptions = ($(this.input).hasClass('no-datalist-cache') || this._autocomplete == 'off') ? [] : getStoredOptions((this.input.name || this.input.id) + $.prop(this.input, 'type'));
-				}
-				
-				this.storedOptions.forEach(function(val, i){
-					if(values.indexOf(val) == -1){
-						allOptions.push({value: val, label: '', className: 'stored-suggest', style: ''});
-					}
-				});
-				
-				for(rI = 0, rLen = allOptions.length; rI < rLen; rI++){
-					item = allOptions[rI];
-					list[rI] = '<li class="'+ item.className +'" tabindex="-1" role="listitem">'+ this.getOptionContent(item) +'</li>';
-				}
-				
-				this.arrayOptions = allOptions;
-				this.popover.contentElement.html('<div class="datalist-box"><ul role="list">'+ list.join("\n") +'</ul></div>');
-				
-				
-				if(_forceShow || this.popover.isVisible){
-					this.showHideOptions();
-				}
-			},
-			getOptionContent: function(item){
-				var content = '';
-				if(options.getOptionContent){
-					content = options.apply(this, arguments) || '';
-				} else {
-					content = '<span class="option-value">'+ item.value +'</span>';
-					if(item.label){
-						content += ' <span class="option-label">'+ item.label +'</span>';
-					}
-				}
-				return content;
-			},
-			showHideOptions: function(_fromShowList){
-				var value = $.prop(this.input, 'value').toLowerCase();
-
-				//first check prevent infinite loop, second creates simple lazy optimization
-				if(value === this.lastUpdatedValue){
-					return;
-				} 
-				if(this.lastUnfoundValue && value.indexOf(this.lastUnfoundValue) === 0){
-					this.hideList();
-					return;
-				}
-				
-				
-				this.lastUpdatedValue = value;
-				var found = false;
-				var startSearch = this.searchStart;
-				var lis = $('li', this.shadowList);
-				var that = this;
-				if(value){
-					
-					this.arrayOptions.forEach(function(item, i){
-						var search, searchIndex, foundName;
-						if(!('lowerValue' in item)){
-							item.lowerValue = item.value.toLowerCase();
-							if(item.label && item.label != item.value ){
-								item.lowerLabel = item.label.toLowerCase();
-							}
-						}
-						
-						if(value != item.lowerValue && item.lowerLabel != value){
-							searchIndex = item.lowerValue.indexOf(value);
-							search = startSearch ? !searchIndex : searchIndex !== -1;
-							if(search){
-								foundName = 'value';
-							} else if(item.lowerLabel){
-								searchIndex = item.lowerLabel.indexOf(value);
-								search = startSearch ? !searchIndex : searchIndex !== -1;
-								foundName = 'label';
-							}
-						}
-						
-						if(search){
-							that.addMark($(lis[i]).removeClass('hidden-item'), item, foundName, searchIndex, value.length);
-							found = true;
-						} else {
-							$(lis[i]).addClass('hidden-item');
-						}
-					});
-				} else if(lis.length) {
-					this.removeMark(lis.removeClass('hidden-item'));
-					found = true;
-				}
-				
-				this.hasViewableData = found;
-				if(!_fromShowList && found){
-					this.showList();
-				}
-				
-				if(!found){
-					this.lastUnfoundValue = value;
-					this.hideList();
-				} else {
-					this.lastUnfoundValue = false;
-				}
-			},
-			otherType: {
-				value: 'label',
-				label: 'value'
-			},
-			addMark: function(elem, item, prop, start, length){
-				if(this.addMarkElement){
-					var text = item[prop].substr(start, length);
-					text = item[prop].replace(text ,'<mark>'+ text +'</mark>');
-					$('.option-'+ this.otherType[prop] +' > mark', elem).each(this._replaceMark);
-					$('.option-'+prop, elem).html(text);
-					
-				}
-			},
-			_replaceMark: function(){
-				var content = $(this).html();
-				$(this).replaceWith(content);
-			},
-			removeMark: function(lis){
-				if(this.addMarkElement){
-					$('mark', lis).each(this._replaceMark);
-				}
-			},
-			showList: function(){
-				if(this.popover.isVisible){return false;}
-				if(this.needsUpdate){
-					this.updateListOptions();
-				}
-				this.showHideOptions(true);
-				if(!this.hasViewableData){return false;}
-				var that = this;
-				
-				that.shadowList.find('li.active-item').removeClass('active-item');
-				that.popover.show(this.input);
-				
-				
-				return true;
-			},
-			hideList: function(){
-				if(!this.popover.isVisible){return false;}
-				var that = this;
-				
-				
-				this.popover.hide();
-				that.shadowList.removeClass('datalist-visible list-item-active');
-				that.index = -1;
-				if(that.changedValue){
-					that.triggeredByDatalist = true;
-					$(that.input).trigger('input').trigger('change');
-					that.changedValue = false;
-					that.triggeredByDatalist = false;
-				}
-				
-				return true;
-			},
-			scrollIntoView: function(elem){
-				var ul = $('ul', this.shadowList);
-				var div = $('div.datalist-box', this.shadowList);
-				var elemPos = elem.position();
-				var containerHeight;
-				elemPos.top -=  (parseInt(ul.css('paddingTop'), 10) || 0) + (parseInt(ul.css('marginTop'), 10) || 0) + (parseInt(ul.css('borderTopWidth'), 10) || 0);
-				if(elemPos.top < 0){
-					div.scrollTop( div.scrollTop() + elemPos.top - 2);
-					return;
-				}
-				elemPos.top += elem.outerHeight();
-				containerHeight = div.height();
-				if(elemPos.top > containerHeight){
-					div.scrollTop( div.scrollTop() + (elemPos.top - containerHeight) + 2);
-				}
-			},
-			changeValue: function(activeItem){
-				if(!activeItem[0]){return;}
-				var spinner;
-				var newValue = $('span.option-value', activeItem).text();
-				var oldValue = $.prop(this.input, 'value');
-				if(newValue != oldValue){
-					
-					$(this.input)
-						.prop('value', newValue)
-						.triggerHandler('updateInput')
-					;
-					this.changedValue = true;
-					if((spinner = $.data(this.input, 'wsspinner')) && spinner.setInput){
-						spinner.setInput(newValue);
-					}
-				}
-			},
-			markItem: function(index, doValue, items){
-				var activeItem;
-				var goesUp;
-				
-				items = items || $('li:not(.hidden-item)', this.shadowList);
-				if(!items.length){return;}
-				if(index < 0){
-					index = items.length - 1;
-				} else if(index >= items.length){
-					index = 0;
-				}
-				items.removeClass('active-item');
-				this.shadowList.addClass('list-item-active');
-				activeItem = items.filter(':eq('+ index +')').addClass('active-item');
-				
-				if(doValue){
-					this.changeValue(activeItem);
-					this.scrollIntoView(activeItem);
+				if(e && e.type == 'beforeunload'){
+					input = this.input;
+					setTimeout(function(){
+						$.attr(input, 'list', $.attr(input, 'list'));
+					}, 9);
 				}
-				this.index = index;
+				this._destroyed = true;
 			}
 		};
 		
+		webshims.loader.addModule('form-datalist-lazy', {
+			noAutoCallback: true,
+			options: $.extend(options, {shadowListProto: shadowListProto})
+		});
+		
 		//init datalist update
 		initializeDatalist();
 	})();