webshims-rails 0.4.7 → 1.10.3

data/vendor/assets/javascripts/webshims/shims/dom-extend.js

@@ -1,6 +1,17 @@
 //DOM-Extension helper
 jQuery.webshims.register('dom-extend', function($, webshims, window, document, undefined){
 	"use strict";
+	
+	webshims.assumeARIA = Modernizr.localstorage || 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");
+	}
+	
+	if(!$.parseHTML){
+		webshims.error("Webshims needs jQuery 1.8+ to work properly. Please update your jQuery version or downgrade webshims.");
+	}
+
 	//shortcus
 	var modules = webshims.modules;
 	var listReg = /\s*,\s*/;
@@ -17,10 +28,7 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 		return (_argless) ? oldVal.call($(elem)) : oldVal.call($(elem), val);
 	};
 	
-	$.fn.onTrigger = function(evt, fn){
-		return this.on(evt, fn).each(fn);
-	};
-	
+
 	$.fn.val = function(val){
 		var elem = this[0];
 		if(arguments.length && val == null){
@@ -49,6 +57,9 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 			}
 		});
 	};
+	$.fn.onTrigger = function(evt, fn){
+		return this.on(evt, fn).each(fn);
+	};
 	
 	var dataID = '_webshimsLib'+ (Math.round(Math.random() * 1000));
 	var elementData = function(elem, key, val){
@@ -70,13 +81,69 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 
 	[{name: 'getNativeElement', prop: 'nativeElement'}, {name: 'getShadowElement', prop: 'shadowElement'}, {name: 'getShadowFocusElement', prop: 'shadowFocusElement'}].forEach(function(data){
 		$.fn[data.name] = function(){
-			return this.map(function(){
+			var elems = [];
+			this.each(function(){
 				var shadowData = elementData(this, 'shadowData');
-				return shadowData && shadowData[data.prop] || this;
+				var elem = shadowData && shadowData[data.prop] || this;
+				if($.inArray(elem, elems) == -1){
+					elems.push(elem);
+				}
 			});
+			return this.pushStack(elems);
 		};
 	});
 	
+	if($.Tween.propHooks._default && $.css){
+		(function(){
+			var isjQ8 = false;
+			try {
+				isjQ8 = $.css($('<b style="width: 10px" />')[0], 'width', '') == '10px';
+			} catch(er){
+				webshims.error(er);
+			}
+			var css = isjQ8 ? 
+				function(elem, prop){
+					return $.css( elem, prop, false, "" );
+				} :
+				function(elem, prop){
+					return $.css( elem, prop, "" );
+				}
+			;
+				
+			$.extend($.Tween.propHooks._default, {
+				get: function( tween ) {
+					var result;
+					
+					if ( (tween.elem[ tween.prop ] != null || havePolyfill[ tween.prop ]) &&
+						(!tween.elem.style || tween.elem.style[ tween.prop ] == null) ) {
+						return havePolyfill[ tween.prop ] ? $.prop(tween.elem, tween.prop) : tween.elem[ tween.prop ];
+					}
+		
+					// passing an empty string as a 3rd parameter to .css will automatically
+					// attempt a parseFloat and fallback to a string if the parse fails
+					// so, simple values such as "10px" are parsed to Float.
+					// complex values such as "rotate(1rad)" are returned as is.
+					result = css( tween.elem, tween.prop );
+					// Empty strings, null, undefined and "auto" are converted to 0.
+					return !result || result === "auto" ? 0 : result;
+				},
+				set: function( tween ) {
+					// use step hook for back compat - use cssHook if its there - use .style if its
+					// available and use plain properties where available
+					if ( jQuery.fx.step[ tween.prop ] ) {
+						jQuery.fx.step[ tween.prop ]( tween );
+					} else if ( tween.elem.style && ( tween.elem.style[ jQuery.cssProps[ tween.prop ] ] != null || jQuery.cssHooks[ tween.prop ] ) ) {
+						jQuery.style( tween.elem, tween.prop, tween.now + tween.unit );
+					} else if( !havePolyfill[ tween.prop ] ) {
+						tween.elem[ tween.prop ] = tween.now;
+					} else {
+						$.prop(tween.elem, tween.prop, tween.now);
+					}
+				}
+			});
+		})();
+	}
+	
 	
 	['removeAttr', 'prop', 'attr'].forEach(function(type){
 		olds[type] = $[type];
@@ -196,7 +263,7 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 						getSup('set', desc, oldDesc) : 
 						(webshims.cfg.useStrict && prop == 'prop') ? 
 							function(){throw(prop +' is readonly on '+ nodeName);} : 
-							$.noop
+							function(){webshims.info(prop +' is readonly on '+ nodeName);}
 					;
 				}
 				if(!desc.get){
@@ -214,15 +281,14 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 		
 	});
 	
-	//see also: https://github.com/lojjic/PIE/issues/40 | https://prototype.lighthouseapp.com/projects/8886/tickets/1107-ie8-fatal-crash-when-prototypejs-is-loaded-with-rounded-cornershtc
-	var isExtendNativeSave = Modernizr.ES5;
 	var extendNativeValue = (function(){
 		var UNKNOWN = webshims.getPrototypeOf(document.createElement('foobar'));
 		var has = Object.prototype.hasOwnProperty;
+		//see also: https://github.com/lojjic/PIE/issues/40 | https://prototype.lighthouseapp.com/projects/8886/tickets/1107-ie8-fatal-crash-when-prototypejs-is-loaded-with-rounded-cornershtc
+		var isExtendNativeSave = Modernizr.advancedObjectProperties && Modernizr.objectAccessor;
 		return function(nodeName, prop, desc){
-			var elem;
-			var elemProto;
-			if( isExtendNativeSave && (elem = document.createElement(nodeName)) && (elemProto = webshims.getPrototypeOf(elem)) && UNKNOWN !== elemProto && ( !elem[prop] || !has.call(elem, prop) ) ){
+			var elem , elemProto;
+			 if( isExtendNativeSave && (elem = document.createElement(nodeName)) && (elemProto = webshims.getPrototypeOf(elem)) && UNKNOWN !== elemProto && ( !elem[prop] || !has.call(elem, prop) ) ){
 				var sup = elem[prop];
 				desc._supvalue = function(){
 					if(sup && sup.apply){
@@ -344,15 +410,24 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 			var ID = new Date().getTime();
 			return function(elem){
 				elem = $(elem);
-				var id = elem.attr('id');
+				var id = elem.prop('id');
 				if(!id){
 					ID++;
 					id = 'ID-'+ ID;
-					elem.attr('id', id);
+					elem.eq(0).prop('id', id);
 				}
 				return id;
 			};
 		})(),
+		implement: function(elem, type){
+			var data = elementData(elem, 'implemented') || elementData(elem, 'implemented', {});
+			if(data[type]){
+				webshims.info(type +' already implemented for element #'+elem.id);
+				return false;
+			}
+			data[type] = true;
+			return true;
+		},
 		extendUNDEFProp: function(obj, props){
 			$.each(props, function(name, prop){
 				if( !(name in obj) ){
@@ -831,7 +906,7 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 			var callRegister = function(module){
 				if(registeredCallbacks[module]){
 					registeredCallbacks[module].forEach(function(data){
-						data.callback();
+						data.callback(currentLang, shortLang, '');
 					});
 				}
 			};
@@ -872,7 +947,7 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 							registeredCallbacks[lang.register] = [];
 						}
 						registeredCallbacks[lang.register].push(lang);
-						lang.callback();
+						lang.callback(currentLang, shortLang, '');
 					} else {
 						if(!lang.activeLang){
 							lang.activeLang = '';
@@ -909,8 +984,20 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 });
 //html5a11y
 (function($, document){
-	//if we support basic styleing or do not support ARIA (assumed) abort
-	if(!Modernizr.localstorage || ('hidden' in document.createElement('a'))){return;}
+	if(!$.webshims.assumeARIA || ('content' in document.createElement('template'))){return;}
+	
+	$(function(){
+		var main = $('main').attr({role: 'main'});
+		if(main.length > 1){
+			webshims.error('only one main element allowed in document');
+		} else if(main.is('article *, section *')) {
+			webshims.error('main not allowed inside of article/section elements');
+		}
+	});
+	
+	if(('hidden' in document.createElement('a'))){
+		return;
+	}
 	
 	var elemMappings = {
 		article: "article",
@@ -926,6 +1013,7 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 		}
 	};
 	
+	
 	$.webshims.addReady(function(context, contextElem){
 		$.each(elemMappings, function(name, role){
 			var elems = $(name, context).add(contextElem.filter(name));
@@ -937,6 +1025,7 @@ jQuery.webshims.register('dom-extend', function($, webshims, window, document, u
 			var header = document.getElementsByTagName('header')[0];
 			var footers = document.getElementsByTagName('footer');
 			var footerLen = footers.length;
+			
 			if (header && !$(header).closest('section, article')[0]) {
 				addRole(header, 'banner');
 			}

data/vendor/assets/javascripts/webshims/shims/es5.js

@@ -664,6 +664,7 @@ var prepareString = "a"[0] != "a",
 	var defineProperty = 'defineProperty';
 	var advancedObjectProperties = !!(Object.create && Object.defineProperties && Object.getOwnPropertyDescriptor);
 	//safari5 has defineProperty-interface, but it can't be used on dom-object
+	//only do this test in non-IE browsers, because this hurts dhtml-behavior in some IE8 versions
 	if (advancedObjectProperties && Object[defineProperty] && Object.prototype.__defineGetter__) {
 		(function(){
 			try {

data/vendor/assets/javascripts/webshims/shims/form-core.js

@@ -1,7 +1,7 @@
 //additional tests for partial implementation of forms features
 (function($){
 	"use strict";
-	var isWebkit = /webkit/i.test(navigator.userAgent);
+	var isWebkit = 'webkitURL' in window;
 	var Modernizr = window.Modernizr;
 	var webshims = $.webshims;
 	var bugs = webshims.bugs;
@@ -46,7 +46,6 @@
 		testRequiredFind();
 	} else {
 		//create delegatable events
-		webshims.capturingEvents(['input']);
 		webshims.capturingEvents(['invalid'], true);
 		
 		if(window.opera || window.testGoodWithFix){
@@ -116,518 +115,608 @@
 			})();
 		}
 	}
-	
-
 
-jQuery.webshims.register('form-core', function($, webshims, window, document, undefined, options){
-	"use strict";
+	$.webshims.register('form-core', function($, webshims, window, document, undefined, options){
 	
-	
-	var checkTypes = {checkbox: 1, radio: 1};
-	var emptyJ = $([]);
-	var bugs = webshims.bugs;
-	var groupTypes = {radio: 1};
-	var getGroupElements = function(elem){
-		elem = $(elem);
-		var name;
-		var form;
-		var ret = emptyJ;
-		if(groupTypes[elem[0].type]){
-			form = elem.prop('form');
-			name = elem[0].name;
-			if(!name){
-				ret = elem;
-			} else if(form){
-				ret = $(form[name]);
-			} else {
-				ret = $(document.getElementsByName(name)).filter(function(){
-					return !$.prop(this, 'form');
-				});
-			}
-			ret = ret.filter('[type="radio"]');
-		}
-		return ret;
-	};
-	
-	var getContentValidationMessage = webshims.getContentValidationMessage = function(elem, validity, key){
-		var message = $(elem).data('errormessage') || elem.getAttribute('x-moz-errormessage') || '';
-		if(key && message[key]){
-			message = message[key];
-		}
-		if(typeof message == 'object'){
-			validity = validity || $.prop(elem, 'validity') || {valid: 1};
-			if(!validity.valid){
-				$.each(validity, function(name, prop){
-					if(prop && name != 'valid' && message[name]){
-						message = message[name];
-						return false;
-					}
-				});
+		var checkTypes = {checkbox: 1, radio: 1};
+		var emptyJ = $([]);
+		var bugs = webshims.bugs;
+		var getGroupElements = function(elem){
+			elem = $(elem);
+			var name;
+			var form;
+			var ret = emptyJ;
+			if(elem[0].type == 'radio'){
+				form = elem.prop('form');
+				name = elem[0].name;
+				if(!name){
+					ret = elem;
+				} else if(form){
+					ret = $(form[name]);
+				} else {
+					ret = $(document.getElementsByName(name)).filter(function(){
+						return !$.prop(this, 'form');
+					});
+				}
+				ret = ret.filter('[type="radio"]');
 			}
-		}
+			return ret;
+		};
 		
-		if(typeof message == 'object'){
-			message = message.defaultMessage;
-		}
-		return message || '';
-	};
-	
-	/*
-	 * Selectors for all browsers
-	 */
-	var rangeTypes = {number: 1, range: 1, date: 1/*, time: 1, 'datetime-local': 1, datetime: 1, month: 1, week: 1*/};
-	var hasInvalid = function(elem){
-		var ret = false;
-		$($.prop(elem, 'elements')).each(function(){
-			ret = $(this).is(':invalid');
-			if(ret){
-				return false;
+		var getContentValidationMessage = webshims.getContentValidationMessage = function(elem, validity, key){
+			var message = $(elem).data('errormessage') || elem.getAttribute('x-moz-errormessage') || '';
+			if(key && message[key]){
+				message = message[key];
 			}
-		});
-		return ret;
-	};
-	$.extend($.expr[":"], {
-		"valid-element": function(elem){
-			return $.nodeName(elem, 'form') ? !hasInvalid(elem) :!!($.prop(elem, 'willValidate') && isValid(elem));
-		},
-		"invalid-element": function(elem){
-			return $.nodeName(elem, 'form') ? hasInvalid(elem) : !!($.prop(elem, 'willValidate') && !isValid(elem));
-		},
-		"required-element": function(elem){
-			return !!($.prop(elem, 'willValidate') && $.prop(elem, 'required'));
-		},
-		"user-error": function(elem){
-			return ($.prop(elem, 'willValidate') && $(elem).hasClass('user-error'));
-		},
-		"optional-element": function(elem){
-			return !!($.prop(elem, 'willValidate') && $.prop(elem, 'required') === false);
-		},
-		"in-range": function(elem){
-			if(!rangeTypes[$.prop(elem, 'type')] || !$.prop(elem, 'willValidate')){
-				return false;
+			if(typeof message == 'object'){
+				validity = validity || $.prop(elem, 'validity') || {valid: 1};
+				if(!validity.valid){
+					$.each(validity, function(name, prop){
+						if(prop && name != 'valid' && message[name]){
+							message = message[name];
+							return false;
+						}
+					});
+				}
 			}
-			var val = $.prop(elem, 'validity');
-			return !!(val && !val.rangeOverflow && !val.rangeUnderflow);
-		},
-		"out-of-range": function(elem){
-			if(!rangeTypes[$.prop(elem, 'type')] || !$.prop(elem, 'willValidate')){
-				return false;
+			
+			if(typeof message == 'object'){
+				message = message.defaultMessage;
 			}
-			var val = $.prop(elem, 'validity');
-			return !!(val && (val.rangeOverflow || val.rangeUnderflow));
-		}
+			return message || '';
+		};
 		
-	});
-	
-	['valid', 'invalid', 'required', 'optional'].forEach(function(name){
-		$.expr[":"][name] = $.expr.filters[name+"-element"];
-	});
-	
-	
-	$.expr[":"].focus = function( elem ) {
-		try {
-			var doc = elem.ownerDocument;
-			return elem === doc.activeElement && (!doc.hasFocus || doc.hasFocus());
-		} catch(e){}
-		return false;
-	};
-	
-	if(Modernizr.formvalidation && isWebkit && !webshims.bugs.bustedValidity){
-		(function(){
-			var retriggerRadioValidity = function(){
-				var validity;
-				if((validity = this.validity) && !validity.customError){
-					this.setCustomValidity('');
-				}
-			};
-			
-			webshims.addReady(function(context, insertedElement){
-				if(context !== document){
-					$('input[type="radio"]:invalid', context)
-						.add(insertedElement.filter('input[type="radio"]:invalid'))
-						.each(retriggerRadioValidity)
-					;
+		/*
+		 * Selectors for all browsers
+		 */
+		var rangeTypes = {number: 1, range: 1, date: 1/*, time: 1, 'datetime-local': 1, datetime: 1, month: 1, week: 1*/};
+		var hasInvalid = function(elem){
+			var ret = false;
+			$($.prop(elem, 'elements')).each(function(){
+				ret = $(this).is(':invalid');
+				if(ret){
+					return false;
 				}
 			});
-		})();
-	}
-	
-	var customEvents = $.event.customEvent || {};
-	var isValid = function(elem){
-		return ($.prop(elem, 'validity') || {valid: 1}).valid;
-	};
-	
-	if (bugs.bustedValidity || bugs.findRequired) {
-		(function(){
-			var find = $.find;
-			var matchesSelector = $.find.matchesSelector;
-			
-			var regExp = /(\:valid|\:invalid|\:optional|\:required|\:in-range|\:out-of-range)(?=[\s\[\~\.\+\>\:\#*]|$)/ig;
-			var regFn = function(sel){
-				return sel + '-element';
-			};
+			return ret;
+		};
+		$.extend($.expr[":"], {
+			"valid-element": function(elem){
+				return $.nodeName(elem, 'form') ? !hasInvalid(elem) :!!($.prop(elem, 'willValidate') && isValid(elem));
+			},
+			"invalid-element": function(elem){
+				return $.nodeName(elem, 'form') ? hasInvalid(elem) : !!($.prop(elem, 'willValidate') && !isValid(elem));
+			},
+			"required-element": function(elem){
+				return !!($.prop(elem, 'willValidate') && $.prop(elem, 'required'));
+			},
+			"user-error": function(elem){
+				return ($.prop(elem, 'willValidate') && $(elem).hasClass('user-error'));
+			},
+			"optional-element": function(elem){
+				return !!($.prop(elem, 'willValidate') && $.prop(elem, 'required') === false);
+			},
+			"in-range": function(elem){
+				if(!rangeTypes[$.prop(elem, 'type')] || !$.prop(elem, 'willValidate')){
+					return false;
+				}
+				var val = $.prop(elem, 'validity');
+				return !!(val && !val.rangeOverflow && !val.rangeUnderflow);
+			},
+			"out-of-range": function(elem){
+				if(!rangeTypes[$.prop(elem, 'type')] || !$.prop(elem, 'willValidate')){
+					return false;
+				}
+				var val = $.prop(elem, 'validity');
+				return !!(val && (val.rangeOverflow || val.rangeUnderflow));
+			}
 			
-			$.find = (function(){
-				var slice = Array.prototype.slice;
-				var fn = function(sel){
-					var ar = arguments;
-					ar = slice.call(ar, 1, ar.length);
-					ar.unshift(sel.replace(regExp, regFn));
-					return find.apply(this, ar);
+		});
+		
+		['valid', 'invalid', 'required', 'optional'].forEach(function(name){
+			$.expr[":"][name] = $.expr.filters[name+"-element"];
+		});
+		
+		
+		$.expr[":"].focus = function( elem ) {
+			try {
+				var doc = elem.ownerDocument;
+				return elem === doc.activeElement && (!doc.hasFocus || doc.hasFocus());
+			} catch(e){}
+			return false;
+		};
+		
+		
+		var customEvents = $.event.customEvent || {};
+		var isValid = function(elem){
+			return ($.prop(elem, 'validity') || {valid: 1}).valid;
+		};
+		
+		if (bugs.bustedValidity || bugs.findRequired) {
+			(function(){
+				var find = $.find;
+				var matchesSelector = $.find.matchesSelector;
+				
+				var regExp = /(\:valid|\:invalid|\:optional|\:required|\:in-range|\:out-of-range)(?=[\s\[\~\.\+\>\:\#*]|$)/ig;
+				var regFn = function(sel){
+					return sel + '-element';
 				};
-				for (var i in find) {
-					if(find.hasOwnProperty(i)){
-						fn[i] = find[i];
+				
+				$.find = (function(){
+					var slice = Array.prototype.slice;
+					var fn = function(sel){
+						var ar = arguments;
+						ar = slice.call(ar, 1, ar.length);
+						ar.unshift(sel.replace(regExp, regFn));
+						return find.apply(this, ar);
+					};
+					for (var i in find) {
+						if(find.hasOwnProperty(i)){
+							fn[i] = find[i];
+						}
 					}
+					return fn;
+				})();
+				if(!Modernizr.prefixed || Modernizr.prefixed("matchesSelector", document.documentElement)){
+					$.find.matchesSelector = function(node, expr){
+						expr = expr.replace(regExp, regFn);
+						return matchesSelector.call(this, node, expr);
+					};
 				}
-				return fn;
+				
 			})();
-			if(!Modernizr.prefixed || Modernizr.prefixed("matchesSelector", document.documentElement)){
-				$.find.matchesSelector = function(node, expr){
-					expr = expr.replace(regExp, regFn);
-					return matchesSelector.call(this, node, expr);
-				};
-			}
-			
-		})();
-	}
-	
-	//ToDo needs testing
-	var oldAttr = $.prop;
-	var changeVals = {selectedIndex: 1, value: 1, checked: 1, disabled: 1, readonly: 1};
-	$.prop = function(elem, name, val){
-		var ret = oldAttr.apply(this, arguments);
-		if(elem && 'form' in elem && changeVals[name] && val !== undefined && $(elem).hasClass(invalidClass)){
-			if(isValid(elem)){
-				$(elem).getShadowElement().removeClass(invalidClasses);
-				if(name == 'checked' && val) {
-					getGroupElements(elem).not(elem).removeClass(invalidClasses).removeAttr('aria-invalid');
-				}
-			}
 		}
-		return ret;
-	};
-	
-	var returnValidityCause = function(validity, elem){
-		var ret;
-		$.each(validity, function(name, value){
-			if(value){
-				ret = (name == 'customError') ? $.prop(elem, 'validationMessage') : name;
-				return false;
-			}
-		});
-		return ret;
-	};
-	
-	var isInGroup = function(name){
-		var ret;
-		try {
-			ret = document.activeElement.name === name;
-		} catch(e){}
-		return ret;
-	};
-	/* form-ui-invalid/form-ui-valid are deprecated. use user-error/user-success instead */
-	var invalidClass = 'user-error';
-	var invalidClasses = 'user-error form-ui-invalid';
-	var validClass = 'user-success';
-	var validClasses = 'user-success form-ui-valid';
-	var switchValidityClass = function(e){
-		var elem, timer;
-		if(!e.target){return;}
-		elem = $(e.target).getNativeElement()[0];
-		if(elem.type == 'submit' || !$.prop(elem, 'willValidate')){return;}
-		timer = $.data(elem, 'webshimsswitchvalidityclass');
-		var switchClass = function(){
-			if(e.type == 'focusout' && elem.type == 'radio' && isInGroup(elem.name)){return;}
-			var validity = $.prop(elem, 'validity');
-			var shadowElem = $(elem).getShadowElement();
-			var addClass, removeClass, trigger, generaltrigger, validityCause;
-			
-			$(elem).trigger('refreshCustomValidityRules');
-			if(validity.valid){
-				if(!shadowElem.hasClass(validClass)){
-					addClass = validClasses;
-					removeClass = invalidClasses;
-					generaltrigger = 'changedvaliditystate';
-					trigger = 'changedvalid';
-					if(checkTypes[elem.type] && elem.checked){
-						getGroupElements(elem).not(elem).removeClass(removeClass).addClass(addClass).removeAttr('aria-invalid');
+		
+		//ToDo needs testing
+		var oldAttr = $.prop;
+		var changeVals = {selectedIndex: 1, value: 1, checked: 1, disabled: 1, readonly: 1};
+		$.prop = function(elem, name, val){
+			var ret = oldAttr.apply(this, arguments);
+			if(elem && 'form' in elem && changeVals[name] && val !== undefined && $(elem).hasClass(invalidClass)){
+				if(isValid(elem)){
+					$(elem).getShadowElement().removeClass(invalidClass);
+					if(name == 'checked' && val) {
+						getGroupElements(elem).not(elem).removeClass(invalidClass).removeAttr('aria-invalid');
 					}
-					$.removeData(elem, 'webshimsinvalidcause');
 				}
-			} else {
-				validityCause = returnValidityCause(validity, elem);
-				if($.data(elem, 'webshimsinvalidcause') != validityCause){
-					$.data(elem, 'webshimsinvalidcause', validityCause);
-					generaltrigger = 'changedvaliditystate';
+			}
+			return ret;
+		};
+		
+		var returnValidityCause = function(validity, elem){
+			var ret;
+			$.each(validity, function(name, value){
+				if(value){
+					ret = (name == 'customError') ? $.prop(elem, 'validationMessage') : name;
+					return false;
 				}
-				if(!shadowElem.hasClass(invalidClass)){
-					addClass = invalidClasses;
-					removeClass = validClasses;
-					if (checkTypes[elem.type] && !elem.checked) {
-						getGroupElements(elem).not(elem).removeClass(removeClass).addClass(addClass);
+			});
+			return ret;
+		};
+		
+		var isInGroup = function(name){
+			var ret;
+			try {
+				ret = document.activeElement.name === name;
+			} catch(e){}
+			return ret;
+		};
+		/* form-ui-invalid/form-ui-valid are deprecated. use user-error/user-success instead */
+		var invalidClass = 'user-error';
+		var validClass = 'user-success';
+		var stopChangeTypes = {
+			time: 1,
+			date: 1,
+			month: 1,
+			datetime: 1,
+			week: 1,
+			'datetime-local': 1
+		};
+		var switchValidityClass = function(e){
+			var elem, timer;
+			if(!e.target){return;}
+			elem = $(e.target).getNativeElement()[0];
+			if(elem.type == 'submit' || !$.prop(elem, 'willValidate')){return;}
+			timer = $.data(elem, 'webshimsswitchvalidityclass');
+			var switchClass = function(){
+				if(e.type == 'focusout' && elem.type == 'radio' && isInGroup(elem.name)){return;}
+				var validity = $.prop(elem, 'validity');
+				var shadowElem = $(elem).getShadowElement();
+				var addClass, removeClass, trigger, generaltrigger, validityCause;
+				
+				if(isWebkit && e.type == 'change' && !bugs.bustedValidity && stopChangeTypes[shadowElem.prop('type')] && shadowElem.is(':focus')){return;}
+				
+				$(elem).trigger('refreshCustomValidityRules');
+				
+				if(validity.valid){
+					if(!shadowElem.hasClass(validClass)){
+						addClass = validClass;
+						removeClass = invalidClass;
+						generaltrigger = 'changedvaliditystate';
+						trigger = 'changedvalid';
+						if(checkTypes[elem.type] && elem.checked){
+							getGroupElements(elem).not(elem).removeClass(removeClass).addClass(addClass).removeAttr('aria-invalid');
+						}
+						$.removeData(elem, 'webshimsinvalidcause');
+					}
+				} else {
+					validityCause = returnValidityCause(validity, elem);
+					if($.data(elem, 'webshimsinvalidcause') != validityCause){
+						$.data(elem, 'webshimsinvalidcause', validityCause);
+						generaltrigger = 'changedvaliditystate';
+					}
+					if(!shadowElem.hasClass(invalidClass)){
+						addClass = invalidClass;
+						removeClass = validClass;
+						if (checkTypes[elem.type] && !elem.checked) {
+							getGroupElements(elem).not(elem).removeClass(removeClass).addClass(addClass);
+						}
+						trigger = 'changedinvalid';
 					}
-					trigger = 'changedinvalid';
 				}
+				
+				if(addClass){
+					shadowElem.addClass(addClass).removeClass(removeClass);
+					//jQuery 1.6.1 IE9 bug (doubble trigger bug)
+					setTimeout(function(){
+						$(elem).trigger(trigger);
+					}, 0);
+				}
+				if(generaltrigger){
+					setTimeout(function(){
+						$(elem).trigger(generaltrigger);
+					}, 0);
+				}
+				
+				$.removeData(elem, 'webshimsswitchvalidityclass');
+			};
+			
+			if(timer){
+				clearTimeout(timer);
 			}
-			if(addClass){
-				shadowElem.addClass(addClass).removeClass(removeClass);
-				//jQuery 1.6.1 IE9 bug (doubble trigger bug)
-				setTimeout(function(){
-					$(elem).trigger(trigger);
-				}, 0);
-			}
-			if(generaltrigger){
-				setTimeout(function(){
-					$(elem).trigger(generaltrigger);
-				}, 0);
+			if(e.type == 'refreshvalidityui'){
+				switchClass();
+			} else {
+				$.data(elem, 'webshimsswitchvalidityclass', setTimeout(switchClass, 9));
 			}
-			$.removeData(e.target, 'webshimsswitchvalidityclass');
 		};
 		
-		if(timer){
-			clearTimeout(timer);
-		}
-		if(e.type == 'refreshvalidityui'){
-			switchClass();
-		} else {
-			$.data(elem, 'webshimsswitchvalidityclass', setTimeout(switchClass, 9));
-		}
-	};
-	
-	$(document).on(options.validityUIEvents || 'focusout change refreshvalidityui', switchValidityClass);
-	customEvents.changedvaliditystate = true;
-	customEvents.refreshCustomValidityRules = true;
-	customEvents.changedvalid = true;
-	customEvents.changedinvalid = true;
-	customEvents.refreshvalidityui = true;
-	
-	
-	webshims.triggerInlineForm = function(elem, event){
-		$(elem).trigger(event);
-	};
-	
-	webshims.modules["form-core"].getGroupElements = getGroupElements;
-	
-	
-	var setRoot = function(){
-		webshims.scrollRoot = (isWebkit || document.compatMode == 'BackCompat') ?
-			$(document.body) : 
-			$(document.documentElement)
+		$(document).on(options.validityUIEvents || 'focusout change refreshvalidityui', switchValidityClass);
+		customEvents.changedvaliditystate = true;
+		customEvents.refreshCustomValidityRules = true;
+		customEvents.changedvalid = true;
+		customEvents.changedinvalid = true;
+		customEvents.refreshvalidityui = true;
+		
+		
+		webshims.triggerInlineForm = function(elem, event){
+			$(elem).trigger(event);
+		};
+		
+		webshims.modules["form-core"].getGroupElements = getGroupElements;
+		
+		
+		var setRoot = function(){
+			webshims.scrollRoot = (isWebkit || document.compatMode == 'BackCompat') ?
+				$(document.body) : 
+				$(document.documentElement)
+			;
+		};
+		var minWidth = (Modernizr.boxSizing || Modernizr['display-table'] || $.support.getSetAttribute) ?
+			'minWidth' :
+			'width'
 		;
-	};
-	setRoot();
-	webshims.ready('DOM', setRoot);
-	
-	webshims.getRelOffset = function(posElem, relElem){
-		posElem = $(posElem);
-		var offset = $(relElem).offset();
-		var bodyOffset;
-		$.swap($(posElem)[0], {visibility: 'hidden', display: 'inline-block', left: 0, top: 0}, function(){
-			bodyOffset = posElem.offset();
-		});
-		offset.top -= bodyOffset.top;
-		offset.left -= bodyOffset.left;
-		return offset;
-	};
-	
-	/* some extra validation UI */
-	webshims.validityAlert = (function(){
-		var alertElem = 'span';
-		var errorBubble;
-		var hideTimer = false;
-		var focusTimer = false;
-		var resizeTimer = false;
-		var boundHide;
+		setRoot();
+		webshims.ready('DOM', setRoot);
 		
-		var api = {
-			hideDelay: 5000,
-			
-			showFor: function(elem, message, noFocusElem, noBubble){
-				api._create();
-				elem = $(elem);
-				var visual = $(elem).getShadowElement();
-				var offset = api.getOffsetFromBody(visual);
-				api.clear();
-				if(noBubble){
-					this.hide();
-				} else {
-					
-					this.getMessage(elem, message);
-					this.position(visual, offset);
-					
-					this.show();
-					if(this.hideDelay){
-						hideTimer = setTimeout(boundHide, this.hideDelay);
-					}
-					$(window)
-						.on('resize.validityalert reposoverlay.validityalert', function(){
-							clearTimeout(resizeTimer);
-							resizeTimer = setTimeout(function(){
-								api.position(visual);
-							}, 9);
-						})
-					;
-				}
+		webshims.getRelOffset = function(posElem, relElem){
+			posElem = $(posElem);
+			var offset = $(relElem).offset();
+			var bodyOffset;
+			$.swap($(posElem)[0], {visibility: 'hidden', display: 'inline-block', left: 0, top: 0}, function(){
+				bodyOffset = posElem.offset();
+			});
+			offset.top -= bodyOffset.top;
+			offset.left -= bodyOffset.left;
+			return offset;
+		};
+		
+		webshims.wsPopover = {
+			_create: function(){
+				this.options =  $.extend({}, webshims.cfg.wspopover, this.options);
+				this.id = webshims.wsPopover.id++;
+				this.eventns = '.wsoverlay'+this.id;
+				this.timers = {};
+				this.element = $('<div class="ws-popover" tabindex="-1"><div class="ws-po-outerbox"><div class="ws-po-arrow"><div class="ws-po-arrowbox" /></div><div class="ws-po-box" /></div></div>');
+				this.contentElement = $('.ws-po-box', this.element);
+				this.lastElement = $([]);
+				this.bindElement();
 				
-				if(!noFocusElem){
-					this.setFocus(visual, offset);
-				}
+				this.element.data('wspopover', this);
+				
+			},
+			options: {},
+			content: function(html){
+				this.contentElement.html(html);
+			},
+			bindElement: function(){
+				var that = this;
+				var stopBlur = function(){
+					that.stopBlur = false;
+				};
+				this.preventBlur = function(e){
+					that.stopBlur = true;
+					clearTimeout(that.timers.stopBlur);
+					that.timers.stopBlur = setTimeout(stopBlur, 9);
+				};
+				this.element.on({
+					'mousedown': this.preventBlur
+				});
 			},
-			getOffsetFromBody: function(elem){
-				return webshims.getRelOffset(errorBubble, elem);
+			
+			isInElement: function(container, contained){
+				return container == contained || $.contains(container, contained);
 			},
-			setFocus: function(visual, offset){
-				var focusElem = $(visual).getShadowFocusElement();
-				var scrollTop = webshims.scrollRoot.scrollTop();
-				var elemTop = ((offset || focusElem.offset()).top) - 30;
-				var smooth;
+			show: function(element){
+				var e = $.Event('wspopoverbeforeshow');
+				this.element.trigger(e);
+				if(e.isDefaultPrevented() || this.isVisible){return;}
+				this.isVisible = true;
+				element = $(element || this.options.prepareFor).getNativeElement() ;
 				
-				if(webshims.getID && alertElem == 'label'){
-					errorBubble.attr('for', webshims.getID(focusElem));
-				}
+				var that = this;
+				var visual = $(element).getShadowElement();
+	
+				this.clear();
+				this.element.removeClass('ws-po-visible').css('display', 'none');
 				
-				if(scrollTop > elemTop){
-					webshims.scrollRoot.animate(
-						{scrollTop: elemTop - 5}, 
-						{
-							queue: false, 
-							duration: Math.max( Math.min( 600, (scrollTop - elemTop) * 1.5 ), 80 )
-						}
-					);
-					smooth = true;
-				}
-				try {
-					focusElem[0].focus();
-				} catch(e){}
-				if(smooth){
-					webshims.scrollRoot.scrollTop(scrollTop);
-					setTimeout(function(){
-						webshims.scrollRoot.scrollTop(scrollTop);
-					}, 0);
-				}
-				setTimeout(function(){
-					$(document).on('focusout.validityalert', boundHide);
-				}, 10);
-				$(window).triggerHandler('reposoverlay');
+				this.prepareFor(element, visual);
+				
+				this.position(visual);
+				that.timers.show = setTimeout(function(){
+					that.element.css('display', '');
+					that.timers.show = setTimeout(function(){
+						that.element.addClass('ws-po-visible').trigger('wspopovershow');
+					}, 9);
+				}, 9);
+				$(document).on('focusin'+this.eventns+' mousedown'+this.eventns, function(e){
+					if(that.options.hideOnBlur && !that.stopBlur && !that.isInElement(that.lastElement[0] || document.body, e.target) && !that.isInElement(element[0] || document.body, e.target) && !that.isInElement(that.element[0], e.target)){
+						that.hide();
+					}
+				});
+				$(window).on('resize'+this.eventns + ' pospopover'+this.eventns, function(){
+					clearTimeout(that.timers.repos);
+					that.timers.repos = setTimeout(function(){
+						that.position(visual);
+					}, 900);
+				});
 			},
-			getMessage: function(elem, message){
-				if (!message) {
-					message = getContentValidationMessage(elem[0]) || elem.prop('customValidationMessage') || elem.prop('validationMessage');
+			prepareFor: function(element, visual){
+				var onBlur;
+				var opts = $.extend({}, this.options, $(element.prop('form') || []).data('wspopover') || {}, element.data('wspopover'));
+				var that = this;
+				var css = {};
+				this.lastElement = $(element).getShadowFocusElement();
+				if(opts.appendTo == 'element'){
+					this.element.insertAfter(element);
+				} else {
+					this.element.appendTo(opts.appendTo);
 				}
-				if (message) {
-					$('span.va-box', errorBubble).text(message);
+				
+				this.element.attr({
+					'data-class': element.prop('className'),
+					'data-id': element.prop('id')
+				});
+				
+				css[minWidth] = opts.constrainWidth ? visual.outerWidth() : '';
+				
+				this.element.css(css);
+				
+				if(opts.hideOnBlur){
+					onBlur = function(e){
+						if(that.stopBlur){
+							e.stopImmediatePropagation();
+						} else {
+							that.hide();
+						}
+					};
+					
+					that.timers.bindBlur = setTimeout(function(){
+						that.lastElement.off(that.eventns).on('focusout'+that.eventns + ' blur'+that.eventns, onBlur);
+						that.lastElement.getNativeElement().off(that.eventns);
+					}, 10);
+					
+					
 				}
-				else {
-					this.hide();
+				
+				if(!this.prepared){
+					
+					if($.fn.bgIframe){
+						this.element.bgIframe();
+					}
 				}
+				this.prepared = true;
 			},
-			position: function(elem, offset){
-				offset = offset ? $.extend({}, offset) : api.getOffsetFromBody(elem);
-				offset.top += elem.outerHeight();
-				errorBubble.css(offset);
-			},
-			show: function(){
-				if(errorBubble.css('display') === 'none'){
-					errorBubble.css({opacity: 0}).show();
-				}
-				errorBubble.addClass('va-visible').fadeTo(400, 1);
+			clear: function(){
+				$(window).off(this.eventns);
+				$(document).off(this.eventns);
+				
+				this.stopBlur = false;
+				$.each(this.timers, function(timerName, val){
+					clearTimeout(val);
+				});
 			},
 			hide: function(){
-				errorBubble.removeClass('va-visible').fadeOut();
-			},
-			clear: function(){
-				clearTimeout(focusTimer);
-				clearTimeout(hideTimer);
-				$(document).unbind('.validityalert');
-				$(window).unbind('.validityalert');
-				errorBubble.stop().removeAttr('for');
+				var e = $.Event('wspopoverbeforehide');
+				this.element.trigger(e);
+				if(e.isDefaultPrevented() || !this.isVisible){return;}
+				this.isVisible = false;
+				var that = this;
+				var forceHide = function(){
+					that.element.css('display', 'none').attr({'data-id': '', 'data-class': '', 'hidden': 'hidden'});
+					clearTimeout(that.timers.forcehide);
+				};
+				this.clear();
+				this.element.removeClass('ws-po-visible').trigger('wspopoverhide');
+				$(window).on('resize'+this.eventns, forceHide);
+				that.timers.forcehide = setTimeout(forceHide, 999);
 			},
-			_create: function(){
-				if(errorBubble){return;}
-				errorBubble = api.errorBubble = $('<'+alertElem+' class="validity-alert-wrapper" role="alert"><span  class="validity-alert"><span class="va-arrow"><span class="va-arrow-box"></span></span><span class="va-box"></span></span></'+alertElem+'>').css({position: 'absolute', display: 'none'});
-				webshims.ready('DOM', function(){
-					errorBubble.appendTo('body');
-					if($.fn.bgIframe){
-						errorBubble.bgIframe();
-					}
-				});
+			position: function(element){
+				var offset = webshims.getRelOffset(this.element.css({marginTop: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}).removeAttr('hidden'), element);
+				offset.top += element.outerHeight();
+				this.element.css({marginTop: '', marginLeft: '', marginRight: '', marginBottom: ''}).css(offset);
 			}
 		};
 		
+		webshims.wsPopover.id = 0;
 		
-		boundHide = $.proxy(api, 'hide');
+		/* some extra validation UI */
+		webshims.validityAlert = (function(){
+			
+			
+			var focusTimer = false;
+			
+			var api = webshims.objectCreate(webshims.wsPopover, {}, options.messagePopover);
+			var boundHide = api.hide.bind(api);
+			
+			api.element.addClass('validity-alert').attr({role: 'alert'});
+			$.extend(api, {
+				hideDelay: 5000,
+				showFor: function(elem, message, noFocusElem, noBubble){
+					
+					elem = $(elem).getNativeElement();
+					this.clear();
+					this.hide();
+					if(!noBubble){
+						this.getMessage(elem, message);
+						
+						this.show(elem);
+						if(this.hideDelay){
+							this.timers.delayedHide = setTimeout(boundHide, this.hideDelay);
+						}
+						
+					}
+					
+					if(!noFocusElem){
+						this.setFocus(elem);
+					}
+				},
+				setFocus: function(element){
+					var focusElem = $(element).getShadowFocusElement();
+					var scrollTop = webshims.scrollRoot.scrollTop();
+					var elemTop = focusElem.offset().top - 30;
+					var smooth;
+					
+					if(scrollTop > elemTop){
+						webshims.scrollRoot.animate(
+							{scrollTop: elemTop - 5}, 
+							{
+								queue: false, 
+								duration: Math.max( Math.min( 600, (scrollTop - elemTop) * 1.5 ), 80 )
+							}
+						);
+						smooth = true;
+					}
+					try {
+						focusElem[0].focus();
+					} catch(e){}
+					if(smooth){
+						webshims.scrollRoot.scrollTop(scrollTop);
+						setTimeout(function(){
+							webshims.scrollRoot.scrollTop(scrollTop);
+						}, 0);
+					}
+					
+					$(window).triggerHandler('pospopover'+this.eventns);
+				},
+				getMessage: function(elem, message){
+					if (!message) {
+						message = getContentValidationMessage(elem[0]) || elem.prop('customValidationMessage') || elem.prop('validationMessage');
+					}
+					if (message) {
+						api.contentElement.text(message);
+					} else {
+						this.hide();
+					}
+				}
+			});
+			
+			
+			return api;
+		})();
 		
-		return api;
-	})();
-	
-	
-	/* extension, but also used to fix native implementation workaround/bugfixes */
-	(function(){
-		var firstEvent,
-			invalids = [],
-			stopSubmitTimer,
-			form
-		;
 		
-		$(document).on('invalid', function(e){
-			if(e.wrongWebkitInvalid){return;}
-			var jElm = $(e.target);
-			var shadowElem = jElm.getShadowElement();
-			if(!shadowElem.hasClass(invalidClass)){
-				shadowElem.addClass(invalidClasses).removeClass(validClasses);
-				setTimeout(function(){
-					$(e.target).trigger('changedinvalid').trigger('changedvaliditystate');
-				}, 0);
-			}
+		/* extension, but also used to fix native implementation workaround/bugfixes */
+		(function(){
+			var firstEvent,
+				invalids = [],
+				stopSubmitTimer,
+				form
+			;
 			
-			if(!firstEvent){
-				//trigger firstinvalid
-				firstEvent = $.Event('firstinvalid');
-				firstEvent.isInvalidUIPrevented = e.isDefaultPrevented;
-				var firstSystemInvalid = $.Event('firstinvalidsystem');
-				$(document).triggerHandler(firstSystemInvalid, {element: e.target, form: e.target.form, isInvalidUIPrevented: e.isDefaultPrevented});
-				jElm.trigger(firstEvent);
-			}
-
-			//if firstinvalid was prevented all invalids will be also prevented
-			if( firstEvent && firstEvent.isDefaultPrevented() ){
-				e.preventDefault();
-			}
-			invalids.push(e.target);
-			e.extraData = 'fix'; 
-			clearTimeout(stopSubmitTimer);
-			stopSubmitTimer = setTimeout(function(){
-				var lastEvent = {type: 'lastinvalid', cancelable: false, invalidlist: $(invalids)};
-				//reset firstinvalid
-				firstEvent = false;
-				invalids = [];
-				$(e.target).trigger(lastEvent, lastEvent);
-			}, 9);
-			jElm = null;
-			shadowElem = null;
-		});
-	})();
-	
-	$.fn.getErrorMessage = function(){
-		var message = '';
-		var elem = this[0];
-		if(elem){
-			message = getContentValidationMessage(elem) || $.prop(elem, 'customValidationMessage') || $.prop(elem, 'validationMessage');
-		}
-		return message;
-	};
+			$(document).on('invalid', function(e){
+				if(e.wrongWebkitInvalid){return;}
+				var jElm = $(e.target);
+				var shadowElem = jElm.getShadowElement();
+				if(!shadowElem.hasClass(invalidClass)){
+					shadowElem.addClass(invalidClass).removeClass(validClass);
+					setTimeout(function(){
+						$(e.target).trigger('changedinvalid').trigger('changedvaliditystate');
+					}, 0);
+				}
+				
+				if(!firstEvent){
+					//trigger firstinvalid
+					firstEvent = $.Event('firstinvalid');
+					firstEvent.isInvalidUIPrevented = e.isDefaultPrevented;
+					var firstSystemInvalid = $.Event('firstinvalidsystem');
+					$(document).triggerHandler(firstSystemInvalid, {element: e.target, form: e.target.form, isInvalidUIPrevented: e.isDefaultPrevented});
+					jElm.trigger(firstEvent);
+				}
 	
-	if(options.replaceValidationUI){
-		webshims.ready('DOM forms', function(){
-			$(document).on('firstinvalid', function(e){
-				if(!e.isInvalidUIPrevented()){
+				//if firstinvalid was prevented all invalids will be also prevented
+				if( firstEvent && firstEvent.isDefaultPrevented() ){
 					e.preventDefault();
-					$.webshims.validityAlert.showFor( e.target ); 
 				}
+				invalids.push(e.target);
+				e.extraData = 'fix'; 
+				clearTimeout(stopSubmitTimer);
+				stopSubmitTimer = setTimeout(function(){
+					var lastEvent = {type: 'lastinvalid', cancelable: false, invalidlist: $(invalids)};
+					//reset firstinvalid
+					firstEvent = false;
+					invalids = [];
+					$(e.target).trigger(lastEvent, lastEvent);
+				}, 9);
+				jElm = null;
+				shadowElem = null;
 			});
-		});
-	}
-});
+		})();
+		
+		$.fn.getErrorMessage = function(){
+			var message = '';
+			var elem = this[0];
+			if(elem){
+				message = getContentValidationMessage(elem) || $.prop(elem, 'customValidationMessage') || $.prop(elem, 'validationMessage');
+			}
+			return message;
+		};
+		
+		if(options.replaceValidationUI){
+			if(options.overrideMessages && (options.customMessages || options.customMessages == null)){
+				options.customMessages = true;
+				options.overrideMessages = false;
+				webshims.info("set overrideMessages to false. Use customMessages instead");
+			}
+			webshims.ready('DOM forms', function(){
+				$(document).on('firstinvalid', function(e){
+					if(!e.isInvalidUIPrevented()){
+						e.preventDefault();
+						$.webshims.validityAlert.showFor( e.target ); 
+					}
+				});
+			});
+		}
+	});
 
 })(jQuery);