diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..a7b2017
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,8 @@
+{
+  "name": "html5Forms.js",
+  "description": "Implements a subset of the HTML5 Forms module, including calendars, colour swatches, sliding widgets, client side validation and more.",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/zoltan-dulac/html5Forms.js"
+  }
+}
diff --git a/shared/js/html5Widgets.js b/shared/js/html5Widgets.js
index 0e571d5..c73aedb 100644
--- a/shared/js/html5Widgets.js
+++ b/shared/js/html5Widgets.js
@@ -1,7 +1,7 @@
 /*******************************************************************************
  * This notice must be untouched at all times.
  *
- * This javascript library contains helper routines to assist with event 
+ * This javascript library contains helper routines to assist with event
  * handling consinstently among browsers
  *
  * html5Widgets.js v.1.1 by Zoltan Hawryluk
@@ -12,7 +12,7 @@
  *  version 1.1: implemented oninput method for form elements for unsupported browsers
  *               fix IE9 to ensure backspace and delete keys fire an oninput event.
  *  version 1.2: Added Number Element Widget
- *  
+ *
  * released under the MIT License:
  *   http://www.opensource.org/licenses/mit-license.php
  *
@@ -20,180 +20,180 @@
 
 var html5Widgets = new function(){
 	var me = this;
-	
-	
+
+
 	var delayEventTimeout = null;
-	
+
 	me.inputNodes = new Array();
 	me.outputNodes = new Array();
 	me.formElements = null;
 	me.placeholderNodes = new Array();
 	me.dummyLink = document.createElement('input');
 	var quoteRe = /\"/g;
-	
+
 	var dummyIDCount = 0;
 	var supportsNatively = new Object();
-	
+
 	var isBadChrome = navigator.userAgent.indexOf('Chrome');
 	var valueRe = /this\.value/g;
 	var varRe = /([a-zA-Z][a-zA-Z0-9]*\.value)/g;
 	var isDebug;
-	
+
 	var isIE9 = false;
-	
+
 	/*@cc_on
 	  @if (@_jscript_version == 9)
 	    isIE9 = true;
 	  @end
 	@*/
-	
-	
-	
+
+
+
 	me.init = function(){
-		
+
 		if (EventHelpers.hasPageLoadHappened(arguments)) {
 			return;
 		}
-		
+
 		supportsNatively['oninput'] = EventHelpers.isSupported('input', 'form');
-		
+
 		isDebug = CSSHelpers.isMemberOfClass(document.body, 'html5Widgets-debug')
-		
+
 		// dummy link setup
 		me.type = 'text'
 		me.dummyLink.style.position = 'absolute';
 		me.dummyLink.style.top = '-200px';
 		document.body.appendChild(me.dummyLink)
-		
+
 		var inputSupport = Modernizr.input
-		
+
 		if (!inputSupport['placeholder']) {
 			setPlaceholders();
 		}
 		indexOutputNodes();
-		insertElements(); 
-		
+		insertElements();
+
 		me.resolveOutputs();
-		
-		/* document.getElementById('supports').innerHTML = 
+
+		/* document.getElementById('supports').innerHTML =
 			DebugHelpers.getProperties(Modernizr.inputtypes, 'inputtypes') + " " +
-			DebugHelpers.getProperties(Modernizr.input, 'input') + " " + 
+			DebugHelpers.getProperties(Modernizr.input, 'input') + " " +
 			DebugHelpers.getProperties(Modernizr, 'Modernizr'); */
-		
+
 	}
-	
-	
-	
+
+
+
 	function supports_input_placeholder() {
 	  var i = document.createElement('input');
 	  return 'placeholder' in i;
 	}
-	
+
 	function setPlaceholders() {
-		
+
 		var nodes = [document.getElementsByTagName('input'), document.getElementsByTagName('textarea')];
-		
+
 		for (var i=0; i<nodes.length; i++) {
 			for (var j=0; j<nodes[i].length; j++) {
 				var node = nodes[i][j];
-				
+
 				if (DOMHelpers.getAttributeValue(node, 'placeholder')) {
 					me.placeholderNodes.push(new PlaceholderInput(node));
 				}
 			}
 		}
 	}
-	
-	
-	
-	
-	
+
+
+
+
+
 	function getNextDummyID () {
 		dummyIDCount ++;
 		return "id" + dummyIDCount;
 	}
-	
+
 	function indexOutputNodes () {
 		var outputElements = document.getElementsByTagName('output');
 		for (var i=0; i<outputElements.length; i++) {
 			var outputEl = outputElements[i];
 			if (outputEl.value != undefined && outputEl.onforminput != undefined) {
-				
+
 				// this browser supports the output tag .. bail
 				supportsNatively["output"] = true;
 				break;
 			}
 			me.outputNodes.push(new OutputElement(outputEl))
 		}
-		
+
 		me.formElements = document.getElementsByTagName('form');
-		
+
 	}
-	
+
 	function setOutputEvents(nodeName) {
 		var formElements = document.getElementsByTagName(nodeName);
-		
+
 		for (var i=0; i<formElements.length; i++) {
 			var formElement = formElements[i];
 			// first - set event to resolve output tags
 			EventHelpers.addEvent(formElement, 'change', me.resolveOutputs);
 			EventHelpers.addEvent(formElement, 'keyup', me.resolveOutputs);
 			EventHelpers.addEvent(formElement, 'cut', me.resolveOutputs);
-		}	
+		}
 	}
-		
-	
+
+
 	function insertElements(){
 		var inputSupport = Modernizr.inputtypes;
-		
-		
+
+
 		// Remove the onload event as we are creating the sliders with a JS call
 		if (window.fdSliderController) {
 			fdSliderController.removeOnLoadEvent();
 		}
-		
+
 		var formElementTypes = ["input", "select", "textarea"];
 		for (var i=0; i<formElementTypes.length; i++) {
 			setOutputEvents(formElementTypes[i]);
 		}
-		
+
 		var formElements = document.getElementsByTagName('input');
-		
+
 		// leave if this browser supports the range type.
 		if (formElements.length <= 0) {
 			return;
 		}
 
 		for (var i = 0; i < formElements.length; i++) {
-			
-			
+
+
 			var formElement = formElements[i];
-			
-			
+
+
 			//var elType = getAttributeValue(formElement, 'type');
 			var elType = DOMHelpers.getAttributeValue(formElement, 'type');
 			//jslog.debug(elType)
 			if (!formElement.name) {
 				formElement.name = getNextDummyID();
 			}
-			
+
 			switch (elType) {
-				
+
 				case "range":
-				
+
 					if (!inputSupport.range) {
-						
+
 						me.inputNodes.push(new RangeElement(formElement));
 					}
-					
+
 					break;
-					
-				case "date": 
+
+				case "date":
 				case "week":
 				case "month":
 				case "datetime":
 				case "datetime-local":
-					
+
 					// check to see if the browser supports the type.
 					if (!inputSupport[elType] || (window.html5Forms && html5Forms.forceJSDatePicker)) {
 						me.inputNodes.push(new CalendarElement(formElement, elType));
@@ -202,36 +202,36 @@ var html5Widgets = new function(){
 				case "color":
 					if (!inputSupport.color || isBadChrome) {
 						me.inputNodes.push(new ColorElement(formElement, elType));
-					} 
-					
+					}
+
 					break;
 				case "number":
-				
+
 					if (!inputSupport.number) {
 						me.inputNodes.push(new NumberElement(formElement, elType));
-					} 
-					
+					}
+
 					break;
 			}
-			
+
 		}
-		
-		
-		
+
+
+
 		if (window.fdSliderController) {
 			fdSliderController.redrawAll();
 		}
-		
+
 		if (window.jscolor) {
 			jscolor.init();
 		}
 	}
-	
-	
-	
-	
+
+
+
+
 	function delayedFireEvent(el, ev, callback){
-			
+
 			if (!document.createEventObject ) {
 				me.fireEvent(el, ev);
 				if (callback) {
@@ -239,37 +239,37 @@ var html5Widgets = new function(){
 				}
 			}
 			else {
-				
-					
+
+
 				if (delayEventTimeout != null) {
 					clearTimeout(delayEventTimeout)
 				}
-				
+
 				delayEventTimeout = setTimeout(
 					function(){
 						EventHelpers.fireEvent(el, ev);
-						
+
 						if (callback) {
 							callback();
 						}
 					}
 				, 1);
-				
+
 			}
 		}
-		
+
 	me.fireEvent = function(el, ev){
 		EventHelpers.fireEvent(el, ev);
 	}
-	
+
 	me.resolveOutputs = function (e) {
-		
+
 		// This resolves the onforminput events on the output nodes
 		for (var i=0; i<me.outputNodes.length; i++) {
 			var outputNode = me.outputNodes[i];
 			outputNode.resolve();
 		}
-		
+
 		// This resolves the oninput events on the form nodes
 		if (!supportsNatively['oninput']) {
 			for (var i=0; i<me.formElements.length; i++) {
@@ -284,10 +284,10 @@ var html5Widgets = new function(){
 			// the oninput event
 			var input = EventHelpers.getEventTarget(e);
 			switch (e.type) {
-				
+
 				case "keyup":
 					var key = EventHelpers.getKey(e);
-					
+
 					switch (key) {
 						case 8:
 						case 46:
@@ -299,18 +299,18 @@ var html5Widgets = new function(){
 					delayedFireEvent(input.form, 'input');
 					break;
 			}
-			
-		} 
+
+		}
 	}
-	
+
 	me.hideInput = function (node) {
-		
+
 		node.style.position = 'absolute';
 		node.style.top = '-1000px';
 		node.style.left = '-1000px';
 		node.style.visibility = 'hidden'
 	}
-	
+
 	me.getValueFormula = function(expr, parentForm) {
 		var formula = expr
 		if (formula == null) {
@@ -321,63 +321,63 @@ var html5Widgets = new function(){
 			.replace(varRe, 'document.forms["' + parentForm.id + '"].$1');
 		return formula;
 	}
-	
-	
+
+
 	function showError(err) {
 		if (isDebug) {
 			alert(err);
 		}
 		throw(err);
-	}		
-	
-	
-	
+	}
+
+
+
 	/*
 	 * Range Element
 	 */
-	
+
 	function RangeElement(node){
 		var me = this,
 			parentForm,
 			hasFiredChangeEvent = false;
-		
+
 		me.node = node;
 		me.sliderNode = null;
-		
-		
+
+
 		function init (){
-			parentForm = DOMHelpers.getAncestorByTagName(node, 'form');
+			parentForm = DOMHelpers.getAncestorByTagName(node, 'form') || document.body; // fallback to document.body
 			var min = parseFloat(DOMHelpers.getAttributeValue(me.node, 'min'));
 			var max = parseFloat(DOMHelpers.getAttributeValue(me.node, 'max'));
-			
+
 			if (!window.fdSliderController) {
 				showError("slider.js must be included in order for the range element to work in this browser. See documentation for more details.");
 			}
-			
+
 			if (isNaN(min)) {
 				min = 0;
 			}
-			
+
 			if (isNaN(max)) {
 				max = 100;
 			}
-			
-			
+
+
 			var step = DOMHelpers.getAttributeValue(me.node, 'step');
-			
+
 			if (step == null) {
 				step = "1"
 			} else if (typeof(step) == 'number') {
 				step = step + "";
 			}
-			
+
 			// Must add id if not there (Requirement of the script)
 			if (!me.node.id) {
 				me.node.id = "HTML5Form-slider" + getNextDummyID();
 			}
-			
-			
-			
+
+
+
 			// Create an Object to hold the slider's initialisation data
 			var options = {
 				// A reference to the input
@@ -406,40 +406,40 @@ var html5Widgets = new function(){
 				fullARIA: false,
 				// Do we disable the mouseWheel for this slider
 				noMouseWheel: false
-			
+
 			};
 
 			// Create the slider
 			fdSliderController.createSlider(options);
-			
+
 			//tweak styles
 			me.sliderNode = document.getElementById('fd-slider-' + me.node.id);
 			me.sliderNode.style.width = me.node.offsetWidth + "px";
-			
+
 			elDisplay = me.node.style.display
 			if (elDisplay != 'block') {
 				me.sliderNode.style.display = 'inline-block';
 			//me.sliderNode.style.paddingTop = "0.9em";
 			}
-			
+
 			html5Widgets.hideInput(me.node);
-			
+
 			document.getElementById('fd-slider-' + me.node.id).style.zIndex = '0';
-		
+
 			me.node.tabIndex = "-1";
 			me.node.type = "text";
-			
+
 			// Event Handling
 			EventHelpers.addEvent(me.node, 'change', changeOriginalNodeEvent);
 		}
-		
+
 		me.changeEvent = function (e){
 			var oninput = DOMHelpers.getAttributeValue(parentForm, 'oninput');
-			
+
 			if (oninput) {
 				eval(html5Widgets.getValueFormula(oninput, parentForm));
 			}
-			
+
 			/* The if statement is to prevent this to continuously fire in an endless loop */
 			if (!hasFiredChangeEvent) {
 				hasFiredChangeEvent = true;
@@ -448,48 +448,48 @@ var html5Widgets = new function(){
 				});
 			}
 		}
-			
+
 		function changeOriginalNodeEvent(e) {
-			
+
 			fdSliderController.updateSlider(me.node.id);
 		}
-		
+
 		init();
-		
+
 	}
-	
+
 	function CalendarElement (node, type) {
 		var me = this;
-		
+
 		me.node = node;
 		me.type = type;
-		
-		var badDateTimeValueRe = 
+
+		var badDateTimeValueRe =
 			/^[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}Z{0,1}$/;
-		var displayDateTimeValueRe = 
+		var displayDateTimeValueRe =
 			/^[0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}$/;
 		var originalVisibilityState;
-		
+
 		function init() {
-			
+
 			if (!window.Calendar && isDebug) {
 				showError("jscalendar scripts and CSS must be included for date and time form elements to work.  See documentation for more details. ")
 			}
-			
+
 			// Must add id if not there (Requirement of the script)
 			if (!me.node.id) {
 				me.node.id = "HTML5Form-calendar" + getNextDummyID();
 			}
-			
-			/* 
+
+			/*
 			 * If this is the result of coming back to the page from history,
 			 * then it may have an old reformatted version in it from a previous
 			 * submit.  Let's re-format it back.
 			 */
-			
+
 			prepareForDisplay();
-			
-			
+
+
 			var formatString = "";
 			switch (me.type) {
 				case 'date':
@@ -508,25 +508,25 @@ var html5Widgets = new function(){
 					formatString = "%Y-%m-%d %H:%M"
 					break;
 			}
-			
+
 			/*
 			* Chrome, unfortunately, only implements type="date", and it's
-			* implementation displays the data in DD/MM/YYYY format. Even 
+			* implementation displays the data in DD/MM/YYYY format. Even
 			* though it submits the data in YYYY-MM-DD format, this can
 			* be confusing to users if there is a, say, datetime widget
 			* with a date widget and they show different formats.  In order
 			* to fix this, I change the type to "text" so that it uses the
-			* polyfill instead of the native one.  Note that type="date" 
-			* widgets in Chrome are only changed to type="text" when 
-			* html5Forms.js's script tag has its 
+			* polyfill instead of the native one.  Note that type="date"
+			* widgets in Chrome are only changed to type="text" when
+			* html5Forms.js's script tag has its
 			* data-webforms2-force-js-date-picker attribute set to "true".
 			*/
 			me.node.type = 'text';
-			
+
 			//me.node.readOnly = true;
-			
-			
-			
+
+
+
 			Calendar.setup(
 			    {
 				  eventName   :"click",
@@ -537,56 +537,56 @@ var html5Widgets = new function(){
 			      button      : me.node.id       // ID of the button
 			    }
   			);
-			
-			
-			
-			
-			
+
+
+
+
+
 			EventHelpers.addEvent(me.node, 'click', forceCalToTop);
 			EventHelpers.addEvent(me.node, 'focus', focusEvent)
 			EventHelpers.addEvent(me.node, 'keypress', openCalendar);
 			EventHelpers.addEvent(me.node, 'blur', closeCalendar);
-			
+
 			EventHelpers.addEvent(me.node, 'keypress', keydownEvent)
 			//me.node.type = "text";
-			
+
 			// this will call submitEvent() after the form has been validated by
 			// webforms2.js
 			if (window.$wf2) {
 				$wf2.callBeforeValidation.push(prepareForSubmission);
 				$wf2.callAfterValidation.push(validationEvent);
 			}
-			
+
 		}
-		
+
 		function placeUTCInfo() {
-			
+
 			var label = document.createElement('span');
 			label.innerHTML = "UTC";
 			label.style.paddingLeft = "5px";
-			
+
 			DOMHelpers.insertAfter(me.node, label);
-			
+
 			var width = label.offsetWidth;
-			
+
 			me.node.style.width = (me.node.offsetWidth - 5 - width) + 'px';
-			
+
 		}
-		
+
 		function prepareForSubmission() {
 			var splitVals;
-			
+
 			switch (me.type) {
 				case "datetime":
 				case "datetime-local":
-					
+
 					originalVisibilityState = me.node.style.visibility;
 					me.node.style.visibility = 'hidden';
 					if (me.node.value.match(displayDateTimeValueRe)) {
 						splitVals = me.node.value.split(' ');
 						me.node.value = splitVals[0] + "T" + splitVals[1];
 					}
-					
+
 					switch (me.type) {
 						case "datetime-local":
 							break;
@@ -595,10 +595,10 @@ var html5Widgets = new function(){
 								me.node.value += "Z";
 							}
 					}
-					
+
 			}
 		}
-		
+
 		function prepareForDisplay() {
 			switch(me.type) {
 				case "datetime":
@@ -609,53 +609,53 @@ var html5Widgets = new function(){
 					if (originalVisibilityState != null) {
 						me.node.style.visibility = originalVisibilityState;
 					}
-					
+
 			}
-			
-			
+
+
 		}
-		
+
 		function validationEvent(e, hasValidated) {
 			if (!hasValidated) {
 				prepareForDisplay();
 			}
 		}
-		
+
 		function forceCalToTop(e) {
 			var cal = window.calendar;
-			
+
 			cal.element.style.zIndex = 100;
 		}
-		
+
 		function focusEvent(e) {
 			var el = EventHelpers.getEventTarget(e);
 			EventHelpers.fireEvent(el, 'click')
 		}
-		
+
 		function openCalendar(e) {
-			
+
 			var cal = window.calendar;
-			
+
 			cal.element.style.zIndex = 100;
 			if (cal.open != undefined) {
 				cal.open();
-			} 
+			}
 			//EventHelpers.fireEvent(this, 'blur');
 			//EventHelpers.fireEvent(this, 'focus');
 		}
-		
+
 		function closeCalendar(e){
-				
+
 				var cal = window.calendar;
 				if (cal) {
 					cal.hide();
 				}
-		} 
-		
+		}
+
 		function keydownEvent(e) {
-			
+
 		 	var c = EventHelpers.getKey(e);
-			
+
 			switch(c){
 				case 13:
 					html5Widgets.dummyLink.focus();
@@ -670,48 +670,48 @@ var html5Widgets = new function(){
 					EventHelpers.preventDefault(e);
 					break;
 			}
-			
-			
+
+
 		}
-		
+
 		function submitEvent(e) {
 			prepareForSubmission();
 		}
-		
+
 		init();
-		
+
 	}
-	
-	
-	
-	
-	
-	
-	
+
+
+
+
+
+
+
 	/*
 	 * Output Element
 	 */
 	function OutputElement (node) {
 		var me = this;
 		me.node = node;
-		
+
 		var value;
 		var valueFormula;
 		var parentForm;
-	
-		
-		
+
+
+
 		function init () {
-			parentForm = DOMHelpers.getAncestorByTagName(node, 'form');
+      var parentForm = DOMHelpers.getAncestorByTagName(node, 'form') || document.body; //fallback to document.body if element using for attribute outside form
 			if (!parentForm.id) {
 				parentForm.id = getNextDummyID();
 			}
-			
+
 			valueFormula = html5Widgets.getValueFormula(DOMHelpers.getAttributeValue(me.node, 'onforminput'), parentForm);
 		}
-		
-		
-		
+
+
+
 		me.resolve = function () {
 			if (valueFormula == null) {
 				return;
@@ -720,19 +720,19 @@ var html5Widgets = new function(){
 				me.node.innerHTML = value;
 				me.node.value = value;
 			}
-			
+
 		}
-		
-		
+
+
 		init();
 	}
-	
+
 	function ColorElement (node) {
 		var me = this;
-		
+
 		/* note: color picker setPad() is what you are looking for */
 		me.node = node;
-		
+
 		function init () {
 			if (!window.jscolor) {
 				showError('jscolor script must be included in order for the color input type to work in this browser. See documentation for more details.')
@@ -741,89 +741,89 @@ var html5Widgets = new function(){
 			CSSHelpers.addClass(me.node, '{hash:true,caps:false}');
 			me.node.type = "text";
 		}
-		
-		
+
+
 		init();
 	}
-	
+
 	/*
-	 * NumberElement: refactored from http://www.kethinov.com/jsstepper.php.
+	 * NumberElement: refactored from http://www.kethinov.com/jsstepper.php.
 	 */
-	
+
 	function NumberElement (node) {
 		var me = this,
 			min = parseFloat(DOMHelpers.getAttributeValue(node, 'min')),
 			max = parseFloat(DOMHelpers.getAttributeValue(node, 'max')),
 			step = parseFloat(DOMHelpers.getAttributeValue(node, 'step'));
-		
+
 		me.node = node;
-		
-		
-		
+
+
+
 		if (isNaN(step)) {
 			// we don't have to create the up and down arraw widgets
 			return;
 		}
-		
+
 		EventHelpers.addEvent(node, 'keyup', keyUpEvent);
-		
-		
+
+
 		function keyUpEvent() {
-			
+
 			if (isNumeric(this.value)) {
-				
+
 					/* if (this.value > max) this.value = max;
 					else if (this.value < min) this.value = this.min; */
-				
+
 			} else if (this.value != '') {
 				var val = parseFloat(this.value);
 				if (isNaN(val)) {
 					this.value = '';
 				} else {
 					this.value = val;
-				} 
+				}
 			}
-			
+
 		}
-	
-		
-		
-		function nearestValid(value, direction) { 
-			
+
+
+
+		function nearestValid(value, direction) {
+
 			var n = (value - min)/step,
 				r;
 			//alert(StringHelpers.sprintf("n: %s, value: %s, min: %s, step: %s", n, value, min, step))
 			if (n == parseInt(n)) {
 				r = value;
 			} else {
-			
+
 				if (direction < 0) {
 					n = Math.floor(n + 1);
 				} else {
 					n = Math.ceil(n -1);
 				}
-				
+
 				r = min + step * n;
 			}
-			
+
 			if (r > max) {
 				r -= step;
 			} else if (r < min) {
 				r+= step
 			}
-			
+
 			return r;
 		}
-		
+
 		function buttonMouseDownEvent(e) {
-			
+
 			var buttonType = this.className;
 			var stepMult = step;
 			if (buttonType == 'dnbutton') {
 				stepMult = -step;
 			}
-			
-			
+
+
 			var min = this.min;
 			var max = this.max;
 			if (
@@ -836,7 +836,7 @@ var html5Widgets = new function(){
 			var delayedOnce = false;
 			var date = new Date();
 			var curDate = null;
-		
+
 			this.interval = setInterval(function() {
 				if (!delayedOnce) {
 					curDate = new Date();
@@ -851,7 +851,7 @@ var html5Widgets = new function(){
 			}, 50);
 			EventHelpers.preventDefault(e);
 		}
-		
+
 		function setValue(node, value) {
 			if (isNaN(value)) {
 				node.value = '';
@@ -859,7 +859,7 @@ var html5Widgets = new function(){
 				node.value = value;
 			}
 		}
-		
+
 		function buttonClickEvent(e) {
 			clearInterval(this.interval);
 			EventHelpers.preventDefault(e);
@@ -868,142 +868,142 @@ var html5Widgets = new function(){
 			clearInterval(this.interval);
 			EventHelpers.preventDefault(e);
 		}
-		
+
 		function isNumeric(n) {
 		  return !isNaN(parseFloat(n)) && isFinite(n);
 		}
 
-	
+
 		function hasNativeSpinner() {
 			try {
 				return window.getComputedStyle(me.node, '-webkit-inner-spin-button').WebkitAppearance != undefined;
 			} catch (ex) {
 				return false;
 			}
-		}	
-		
+		}
+
 		function init () {
 			var upbutton = document.createElement('a');
 			upbutton.className = 'upbutton';
 			upbutton.appendChild(document.createTextNode("\u25B2"));
 			upbutton.targInput = node;
 			upbutton.max = max;
-			
+
 			var dnbutton = document.createElement('a');
 			dnbutton.className = 'dnbutton';
 			dnbutton.appendChild(document.createTextNode("\u25BC"));
 			dnbutton.targInput = node;
 			dnbutton.min = min;
 			dnbutton.max = max;
-		
+
 			EventHelpers.addEvent(upbutton, 'mousedown', buttonMouseDownEvent);
 			EventHelpers.addEvent(dnbutton, 'mousedown', buttonMouseDownEvent);
-			
+
 			EventHelpers.addEvent(upbutton, 'click', buttonClickEvent);
 			EventHelpers.addEvent(upbutton, 'mouseup', buttonMouseUpEvent);
 			EventHelpers.addEvent(dnbutton, 'click', buttonClickEvent);
 			EventHelpers.addEvent(dnbutton, 'mouseup', buttonMouseUpEvent);
-			
-			
+
+
 			if (!hasNativeSpinner()) {
 				var controlsNode = document.createElement('div');
 				controlsNode.className = 'html5-numberControls';
 				controlsNode.appendChild(upbutton);
 				controlsNode.appendChild(dnbutton);
-				
+
 				var wrapperNode = document.createElement('div')
 				wrapperNode.className = 'html5-numberWrapper';
 				wrapperNode.appendChild(controlsNode);
 				var parentNode = node.parentNode;
-				
-				
-				
-				
+
+
+
+
 				parentNode.insertBefore(wrapperNode, node);
-				
-		
+
+
 				var nodeWidth = node.offsetWidth;
 				var nodeStyle = CSSHelpers.getCurrentStyle(node);
-			
+
 				node.style.width = (nodeWidth - upbutton.offsetWidth -9) + 'px';
 				wrapperNode.style.width = nodeWidth + 'px';
 				wrapperNode.style.marginTop = nodeStyle.marginTop;
 				wrapperNode.style.height = (node.offsetHeight) + 'px';
 			}
-			
-			
-			
+
+
+
 		}
-		/* Finally: if the form field has a value onload that is not a number, remove it 
+		/* Finally: if the form field has a value onload that is not a number, remove it
 		if (!isNumeric(node.value)) {
 			node.value = '';
 			EventHelpers.fireEvent(node, 'change');
 		}*/
 		init();
 	}
-	
+
 	function PlaceholderInput (node) {
 		var me = this;
-		
+
 		me.node = node;
-		
+
 		var form, defaultText;
-				
+
 		function init () {
 			defaultText = DOMHelpers.getAttributeValue(node, 'placeholder');
 			form = DOMHelpers.getAncestorByTagName(node, 'form');
-			
+
 			me.setPlaceholderText(true);
 			EventHelpers.addEvent(me.node, 'blur', blurEvent);
 			EventHelpers.addEvent(me.node, 'focus', focusEvent);
-			
+
 			if (me.node.form) {
 				EventHelpers.addEvent(me.node.form, 'submit', removePlaceholderText);
 			}
-			
+
 			if (window.$wf2) {
 				if ($wf2.callBeforeValidation != undefined) {
 					$wf2.callBeforeValidation.push(removePlaceholderText);
 				}
-				
+
 				if ($wf2.callAfterValidation != undefined) {
 					$wf2.callAfterValidation.push(postValidationEvent);
 				}
 			}
 		}
-		
+
 		me.setPlaceholderText = function (isLoadEvent) {
 			//jslog.debug(StringHelpers.sprintf('initiator: %s', this));
 			var isAutofocus = DOMHelpers.getAttributeValue(me.node, 'autofocus') != null;
-			
-			
+
+
 			if (me.node.value == "" || (isLoadEvent && me.node.value == defaultText)) {
 				CSSHelpers.addClass(me.node, 'html5-hasPlaceholderText');
 				me.node.value = defaultText;
-				
+
 			}
-			
+
 			if (isLoadEvent && isAutofocus && me.node.value == defaultText ) {
 				CSSHelpers.removeClass(me.node, 'html5-hasPlaceholderText');
 				me.node.value = '';
 			}
-			
-			
-			
+
+
+
 		}
-		
+
 		function focusEvent(e) {
-			
+
 			CSSHelpers.addClass(me.node, 'html5-hasFocus');
 			removePlaceholderText();
 		}
-		
+
 		function blurEvent(e) {
 			//jslog.debug('removed focus on ' + me.node.name)
 			CSSHelpers.removeClass(me.node, 'html5-hasFocus');
 			me.setPlaceholderText();
 		}
-		
+
 		function removePlaceholderText() {
 			//jslog.debug('removePlaceholderText() for ' + me.node.name)
 			if (CSSHelpers.isMemberOfClass(me.node, 'html5-hasPlaceholderText')) {
@@ -1011,99 +1011,99 @@ var html5Widgets = new function(){
 				CSSHelpers.removeClass(me.node, 'html5-hasPlaceholderText');
 			}
 		}
-		
+
 		function postValidationEvent(e, didValidate) {
 			////jslog.debug(StringHelpers.sprintf('post Validation: %s, didValidate = %s, has focus = %s', me.node.name, didValidate, CSSHelpers.isMemberOfClass(me.node, 'html5-hasFocus') )	)
 			if (!didValidate && !CSSHelpers.isMemberOfClass(me.node, 'html5-hasFocus')) {
 				me.setPlaceholderText();
-			} 
+			}
 		}
-		
+
 		init();
 	}
-	
+
 	var CSSHelpers = new function () {
 		var me = this;
-		
+
 		var blankRe = new RegExp('\\s');
 
 		/**
 		 * Generates a regular expression string that can be used to detect a class name
-		 * in a tag's class attribute.  It is used by a few methods, so I 
+		 * in a tag's class attribute.  It is used by a few methods, so I
 		 * centralized it.
-		 * 
+		 *
 		 * @param {String} className - a name of a CSS class.
 		 */
-		
+
 		function getClassReString(className) {
 			return '\\s'+className+'\\s|^' + className + '\\s|\\s' + className + '$|' + '^' + className +'$';
 		}
-		
+
 		function getClassPrefixReString(className) {
 			return '\\s'+className+'-[0-9a-zA-Z_]+\\s|^' + className + '[0-9a-zA-Z_]+\\s|\\s' + className + '[0-9a-zA-Z_]+$|' + '^' + className +'[0-9a-zA-Z_]+$';
 		}
-		
-		
+
+
 		/**
 		 * Make an HTML object be a member of a certain class.
-		 * 
+		 *
 		 * @param {Object} obj - an HTML object
 		 * @param {String} className - a CSS class name.
 		 */
 		me.addClass = function (obj, className) {
-			
+
 			if (blankRe.test(className)) {
 				return;
 			}
-			
+
 			// only add class if the object is not a member of it yet.
 			if (!me.isMemberOfClass(obj, className)) {
 				obj.className += " " + className;
 			}
-			
+
 		}
-		
+
 		/**
 		 * Make an HTML object *not* be a member of a certain class.
-		 * 
+		 *
 		 * @param {Object} obj - an HTML object
 		 * @param {Object} className - a CSS class name.
 		 */
 		me.removeClass = function (obj, className) {
-			
+
 			if (blankRe.test(className)) {
-				return; 
+				return;
 			}
-			
-			
+
+
 			var re = new RegExp(getClassReString(className) , "g");
-			
+
 			var oldClassName = obj.className;
-		
-		
+
+
 			if (obj.className) {
 				obj.className = oldClassName.replace(re, ' ');
 			}
-		
+
 		}
-		
+
 		/**
 		 * Determines if an HTML object is a member of a specific class.
 		 * @param {Object} obj - an HTML object.
 		 * @param {Object} className - the CSS class name.
 		 */
 		me.isMemberOfClass = function (obj, className) {
-			
+
 			if (blankRe.test(className))
 				return false;
-			
+
 			var re = new RegExp(getClassReString(className) , "g");
-		
+
 			return (re.test(obj.className));
-		
-		
+
+
 		}
-		
+
 		/* from http://blog.stchur.com/2006/06/21/css-computed-style/ */
 		me.getCurrentStyle = function(obj)
 		{
@@ -1112,26 +1112,26 @@ var html5Widgets = new function(){
 		    { computedStyle = obj.currentStyle; }
 		  else
 		    { computedStyle = document.defaultView.getComputedStyle(obj, null); }
-		
+
 		  return computedStyle;
 		}
 	}
-	
-	
-	
+
+
+
 	var DOMHelpers = new function () {
 		var me = this;
-		
+
 		/**
 		 * Given an HTML or XML object, find the an attribute by name.
-		 * 
+		 *
 		 * @param {Object} obj - a DOM object.
 		 * @param {String} attrName - the name of an attribute inside the DOM object.
 		 * @return {Object} - the attribute object or null if there isn't one.
 		 */
 		me.getAttributeByName = function (obj, attrName) {
 			var i;
-			
+
 			var attributes = obj.attributes;
 			for (i=0; i<attributes.length; i++) {
 				var attr = attributes[i]
@@ -1143,14 +1143,14 @@ var html5Widgets = new function(){
 		}
 		/**
 		 * Given an HTML or XML object, find the value of an attribute.
-		 * 
+		 *
 		 * @param {Object} obj - a DOM object.
 		 * @param {String} attrName - the name of an attribute inside the DOM object.
 		 * @return {String} - the value of the attribute.
 		 */
 		me.getAttributeValue = function (obj, attrName) {
 			var attr = me.getAttributeByName(obj, attrName);
-			
+
 			if (attr != null) {
 				return attr.nodeValue;
 			} else {
@@ -1163,13 +1163,13 @@ var html5Widgets = new function(){
 				} else {
 					return null;
 				}
-	
+
 			}
 		}
-		
+
 		me.insertAfter = function (refNode, nodeToInsert) {
 			var parent = refNode.parentNode;
-			
+
 			var nextSibling = refNode.nextSibling;
 			if (nextSibling) {
 				parent.insertBefore(nodeToInsert, nextSibling);
@@ -1177,51 +1177,51 @@ var html5Widgets = new function(){
 				parent.appendChild(nodeToInsert);
 			}
 		}
-		
+
 		/**
 		 * Given an tag, find the first ancestor tag of a given tag name.
-		 * 
+		 *
 		 * @param {Object} obj - a HTML or XML tag.
 		 * @param {String} tagName - the name of the ancestor tag to find.
 		 * @return {Object} - the ancestor tag, or null if not found.
-		 */ 
+		 */
 		me.getAncestorByTagName = function(obj, tagName) {
-			
-			for (var node = obj.parentNode; 
+
+			for (var node = obj.parentNode;
 				  node.nodeName.toLowerCase() != 'body';
 				  node = node.parentNode) {
-			
+
 				if (tagName.toLowerCase() == node.nodeName.toLowerCase()) {
 					return node;
 				}
-				  
+
 			}
 			return null;
 		}
-		
+
 		me.removeNode = function (node) {
 			var parentNode = node.parentNode;
 			if (parentNode) {
 				parentNode.removeChild(node);
-			} 
+			}
 		}
-		
+
 	}
-	
+
 	var StringHelpers = new function () {
 		var me = this;
-		
+
 		/*******************************************************************************
 		 * Function sprintf(format_string,arguments...) Javascript emulation of the C
 		 * printf function (modifiers and argument types "p" and "n" are not supported
 		 * due to language restrictions)
-		 * 
+		 *
 		 * Copyright 2003 K&L Productions. All rights reserved
 		 * http://www.klproductions.com
-		 * 
+		 *
 		 * Terms of use: This function can be used free of charge IF this header is not
 		 * modified and remains with the function code.
-		 * 
+		 *
 		 * Legal: Use this code at your own risk. K&L Productions assumes NO
 		 * resposibility for anything.
 		 ******************************************************************************/
@@ -1252,7 +1252,7 @@ var html5Widgets = new function(){
 		        if(rs.length<iWidth)
 		          { if(flags.indexOf('-')<0) rs = pad(rs,' ',rs.length-iWidth);
 		            else rs = pad(rs,' ',iWidth - rs.length);
-		          }    
+		          }
 		        return rs;
 		      }
 		    var converters = new Array();
@@ -1262,18 +1262,18 @@ var html5Widgets = new function(){
 		        return '';
 		      }
 		    converters['d'] = function(flags,width,precision,arg)
-		      { return converters['i'](flags,width,precision,arg); 
+		      { return converters['i'](flags,width,precision,arg);
 		      }
 		    converters['u'] = function(flags,width,precision,arg)
-		      { return converters['i'](flags,width,precision,Math.abs(arg)); 
+		      { return converters['i'](flags,width,precision,Math.abs(arg));
 		      }
 		    converters['i'] =  function(flags,width,precision,arg)
 		      { var iPrecision=parseInt(precision);
 		        var rs = ((Math.abs(arg)).toString().split('.'))[0];
 		        if(rs.length<iPrecision) rs=pad(rs,' ',iPrecision - rs.length);
-		        return processFlags(flags,width,rs,arg); 
+		        return processFlags(flags,width,rs,arg);
 		      }
-		    converters['E'] = function(flags,width,precision,arg) 
+		    converters['E'] = function(flags,width,precision,arg)
 		      { return (converters['e'](flags,width,precision,arg)).toUpperCase();
 		      }
 		    converters['e'] =  function(flags,width,precision,arg)
@@ -1281,7 +1281,7 @@ var html5Widgets = new function(){
 		        if(isNaN(iPrecision)) iPrecision = 6;
 		        rs = (Math.abs(arg)).toExponential(iPrecision);
 		        if(rs.indexOf('.')<0 && flags.indexOf('#')>=0) rs = rs.replace(/^(.*)(e.*)$/,'$1.$2');
-		        return processFlags(flags,width,rs,arg);        
+		        return processFlags(flags,width,rs,arg);
 		      }
 		    converters['f'] = function(flags,width,precision,arg)
 		      { iPrecision = parseInt(precision);
@@ -1307,14 +1307,14 @@ var html5Widgets = new function(){
 		        if(rse.indexOf('.')<0 && flags.indexOf('#')>=0) rse = rse.replace(/^(.*)(e.*)$/,'$1.$2');
 		        if(rsf.indexOf('.')<0 && flags.indexOf('#')>=0) rsf = rsf + '.';
 		        rs = rse.length<rsf.length ? rse : rsf;
-		        return processFlags(flags,width,rs,arg);        
-		      }  
+		        return processFlags(flags,width,rs,arg);
+		      }
 		    converters['o'] = function(flags,width,precision,arg)
 		      { var iPrecision=parseInt(precision);
 		        var rs = Math.round(Math.abs(arg)).toString(8);
 		        if(rs.length<iPrecision) rs=pad(rs,' ',iPrecision - rs.length);
 		        if(flags.indexOf('#')>=0) rs='0'+rs;
-		        return processFlags(flags,width,rs,arg); 
+		        return processFlags(flags,width,rs,arg);
 		      }
 		    converters['X'] = function(flags,width,precision,arg)
 		      { return (converters['x'](flags,width,precision,arg)).toUpperCase();
@@ -1325,7 +1325,7 @@ var html5Widgets = new function(){
 		        var rs = Math.round(arg).toString(16);
 		        if(rs.length<iPrecision) rs=pad(rs,' ',iPrecision - rs.length);
 		        if(flags.indexOf('#')>=0) rs='0x'+rs;
-		        return processFlags(flags,width,rs,arg); 
+		        return processFlags(flags,width,rs,arg);
 		      }
 		    converters['s'] = function(flags,width,precision,arg)
 		      { var iPrecision=parseInt(precision);
@@ -1345,16 +1345,16 @@ var html5Widgets = new function(){
 		    return retstr;
 		}
 	}
-	
+
 	var XMLHelpers = new function () {
 		var me = this;
-		
+
 		/**
 		 * Given an XML node, return the XML inside as a string and the XML string of the node itself.
 		 * Similar to Internet Explorer's outerHTML property, except it is for XML, not HTML.
 		 * Created with information from http://www.codingforums.com/showthread.php?t=31489
-		 * and http://www.mercurytide.co.uk/whitepapers/issues-working-with-ajax/		
-		 * 
+		 * and http://www.mercurytide.co.uk/whitepapers/issues-working-with-ajax/
+		 *
 		 * @param {Object} node - a DOM object.
 		 * @param {Object} options - a JS object containing options.  To date,
 		 * 		the only one supported is "insertClosingTags", when set to
@@ -1366,19 +1366,19 @@ var html5Widgets = new function(){
 				// Internet Explorer
 				if (node.xml) {
 					r = node.xml;
-					
-				// Everyone else 
-				} else if (node.outerHTML) { 
+
+				// Everyone else
+				} else if (node.outerHTML) {
 					r = node.outerHTML;
 				} else if (window.XMLSerializer) {
-				
+
 					var serializer = new XMLSerializer();
 	    			var text = serializer.serializeToString(node);
 					r = text;
 				} else {
 					return null;
 				}
-				
+
 				/*
 				 * If the XML is actually HTML and you are inserting it into an HTML
 				 * document, you must use the "insertClosingTags" option, otherwise
@@ -1392,21 +1392,21 @@ var html5Widgets = new function(){
 				return r;
 		}
 	}
-	
-	
-	// default styles 
+
+
+	// default styles
 	var placeholderCSS = 'color: #999999; font-style: italic';
 	var placeholderRequiredCSS = 'color: #ffcccc !important;'
-	
+
 	var sb = "";
-	
+
 	// has to be two seperate rules, or some browsers, like firefox, will not use the rule.
 	if (document.getElementsByTagName('body').length == 0) {
 		sb = '<style type="text/css" id="testCSS">' +
 		StringHelpers.sprintf('.html5-hasPlaceholderText{%s} input::-webkit-input-placeholder {%s}', placeholderCSS, placeholderCSS) +
 		'</style>';
-		
-		
+
+
 		document.write(sb);
 	}
 }
@@ -1414,4 +1414,3 @@ var html5Widgets = new function(){
 
 
 EventHelpers.addPageLoadEvent('html5Widgets.init');
-
diff --git a/shared/js/visibleIf.js b/shared/js/visibleIf.js
index f23afcc..146f1d5 100644
--- a/shared/js/visibleIf.js
+++ b/shared/js/visibleIf.js
@@ -182,7 +182,7 @@ var visibleIf = new function(){
             var nodes = nodesToIndex[n];
             for (var i = 0; i < nodes.length; i++) {
                 var node = nodes[i];
-				var parentForm = DOMHelpers.getAncestorByTagName(node, 'form');
+				var parentForm = DOMHelpers.getAncestorByTagName(node, 'form') || document.body; //fallback to document.body if element using for attribute outside form
 				
 				
 				
@@ -337,7 +337,8 @@ var visibleIf = new function(){
         
             if (rule != null) {
             
-                //var parentForm = DOMHelpers.getAncestorByTagName(node, 'form');
+                // var parentForm = DOMHelpers.getAncestorByTagName(node, 'form') || document.body;
+
                 if (!parentForm) {
                     throw "Error: the rule " + rule + " is not attached to a form."
                 }