html5forms-rails 0.1.3

data/vendor/assets/javascripts/html5forms/dev/html5Widgets.js

@@ -0,0 +1,1417 @@
+/*******************************************************************************
+ * This notice must be untouched at all times.
+ *
+ * This javascript library contains helper routines to assist with event 
+ * handling consinstently among browsers
+ *
+ * html5Widgets.js v.1.1 by Zoltan Hawryluk
+ * latest version and documentation available at http://www.useragentman.com/
+ *
+ * Changelog:
+ *  version 1.0: initial release
+ *  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
+ *
+ *******************************************************************************/
+
+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(); 
+		
+		me.resolveOutputs();
+		
+		/* document.getElementById('supports').innerHTML = 
+			DebugHelpers.getProperties(Modernizr.inputtypes, 'inputtypes') + " " +
+			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 "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));
+					}
+					break;
+				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) {
+					callback();
+				}
+			}
+			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++) {
+				var formNode = me.formElements[i];
+				var oninput = DOMHelpers.getAttributeValue(formNode, 'oninput');
+				if (oninput) {
+					eval(me.getValueFormula(oninput, formNode));
+				}
+			}
+		} else if (isIE9 && e) {
+			// must deal with buggy implementation - delete and backspace don't fire
+			// the oninput event
+			var input = EventHelpers.getEventTarget(e);
+			switch (e.type) {
+				
+				case "keyup":
+					var key = EventHelpers.getKey(e);
+					
+					switch (key) {
+						case 8:
+						case 46:
+						case 88:
+							EventHelpers.fireEvent(input.form, 'input');
+					}
+					break;
+				case "cut":
+					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) {
+			return null;
+		}
+		formula = formula
+			.replace(valueRe, 'value')
+			.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');
+			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
+				inp: me.node,
+				// A String containing the increment value (and the return precision, in this case 2 decimal places "x.20")
+				inc: step,
+				// Maximum keyboard increment (automatically uses double the normal increment if not given)
+				maxInc: step,
+				// Numeric range
+				range: [min, max],
+				// Callback functions
+				callbacks: {
+					"update": [me.changeEvent]
+				},
+				// String representing the classNames to give the created slider
+				classNames: "html5Widgets-slider fd_jump",
+				// Tween the handle onclick?
+				tween: false,
+				// Is this a vertical slider
+				vertical: false,
+				// Do we hide the associated input on slider creation
+				hideInput: false,
+				// Does the handle jump to the nearest click value point when the bar is clicked (tween cannot then be true)
+				clickJump: true,
+				// Full ARIA required
+				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;
+				delayedFireEvent(me.node, 'change', function () {
+					hasFiredChangeEvent = false;
+				});
+			}
+		}
+			
+		function changeOriginalNodeEvent(e) {
+			
+			fdSliderController.updateSlider(me.node.id);
+		}
+		
+		init();
+		
+	}
+	
+	function CalendarElement (node, type) {
+		var me = this;
+		
+		me.node = node;
+		me.type = type;
+		
+		var badDateTimeValueRe = 
+			/^[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}Z{0,1}$/;
+		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':
+					formatString = "%Y-%m-%d";
+					break;
+				case 'month':
+					formatString = "%Y-%m";
+					break;
+				case 'week':
+					formatString = "%Y-W%W";
+					break;
+				case 'datetime':
+					placeUTCInfo();
+				case 'datetime-local':
+				case 'datetime':
+					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 
+			* 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 
+			* data-webforms2-force-js-date-picker attribute set to "true".
+			*/
+			me.node.type = 'text';
+			
+			//me.node.readOnly = true;
+			
+			
+			
+			Calendar.setup(
+			    {
+				  eventName   :"click",
+				  showsTime   : type.indexOf('time') >= 0,
+				  cache		  : true,
+			      inputField  : me.node.id,      // ID of the input field
+			      ifFormat    : formatString,    // the date format
+			      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;
+						case "datetime":
+							if (me.node.value != "") {
+								me.node.value += "Z";
+							}
+					}
+					
+			}
+		}
+		
+		function prepareForDisplay() {
+			switch(me.type) {
+				case "datetime":
+				case "datetime-local":
+					if ( me.node.value.match(badDateTimeValueRe)) {
+						me.node.value = me.node.value.replace(/T/, ' ').replace(/Z/, '');
+					}
+					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();
+					this.focus();
+					EventHelpers.preventDefault(e);
+					openCalendar(e);
+					break;
+				case 9:
+					closeCalendar(e);
+					break;
+				default:
+					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');
+			if (!parentForm.id) {
+				parentForm.id = getNextDummyID();
+			}
+			
+			valueFormula = html5Widgets.getValueFormula(DOMHelpers.getAttributeValue(me.node, 'onforminput'), parentForm);
+		}
+		
+		
+		
+		me.resolve = function () {
+			if (valueFormula == null) {
+				return;
+			} else {
+				eval(valueFormula);
+				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.')
+			}
+			CSSHelpers.addClass(me.node, 'color');
+			CSSHelpers.addClass(me.node, '{hash:true,caps:false}');
+			me.node.type = "text";
+		}
+		
+		
+		init();
+	}
+	
+	/*
+	 * 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) { 
+			
+			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 (
+				(stepMult < 0 && (node.value > min || isNaN(min))) ||
+				(stepMult > 0 && (node.value < max || isNaN(max)))
+			) {
+				setValue(me.node, nearestValid(parseFloat(node.value) + stepMult, stepMult));
+			}
+
+			var delayedOnce = false;
+			var date = new Date();
+			var curDate = null;
+		
+			this.interval = setInterval(function() {
+				if (!delayedOnce) {
+					curDate = new Date();
+					if (curDate - date > 500) delayedOnce = true;
+				}
+				else if (
+					(stepMult < 0 && (node.value > min || isNaN(min))) ||
+					(stepMult > 0 && (node.value < max || isNaN(max)))
+				) {
+					setValue(me.node, nearestValid(parseFloat(node.value) + stepMult, stepMult));
+				}
+			}, 50);
+			EventHelpers.preventDefault(e);
+		}
+		
+		function setValue(node, value) {
+			if (isNaN(value)) {
+				node.value = '';
+			} else {
+				node.value = value;
+			}
+		}
+		
+		function buttonClickEvent(e) {
+			clearInterval(this.interval);
+			EventHelpers.preventDefault(e);
+		}
+		function buttonMouseUpEvent(e) {
+			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 
+		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')) {
+				me.node.value = "";
+				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 
+		 * 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; 
+			}
+			
+			
+			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)
+		{
+		  var computedStyle;
+		  if (typeof obj.currentStyle != 'undefined')
+		    { 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]
+				if (attr.nodeName == attrName && attr.specified) {
+				  	return attr;
+				}
+			}
+			return null;
+		}
+		/**
+		 * 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 {
+				var typeRe = new RegExp(attrName + '=(\\"([a-zA-Z\-]*)\\"|[a-zA-Z\-]*)');
+				//jslog.debug(XMLHelpers.getOuterXML(obj))
+				var typeVal = XMLHelpers.getOuterXML(obj).split('>')[0].match(typeRe);
+				//jslog.debug(typeVal)
+				if (typeVal && typeVal.length >= 1) {
+					return typeVal[1].replace(quoteRe, '');
+				} else {
+					return null;
+				}
+	
+			}
+		}
+		
+		me.insertAfter = function (refNode, nodeToInsert) {
+			var parent = refNode.parentNode;
+			
+			var nextSibling = refNode.nextSibling;
+			if (nextSibling) {
+				parent.insertBefore(nodeToInsert, nextSibling);
+			} else {
+				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; 
+				  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.
+		 ******************************************************************************/
+		me.sprintf = function (fstring)
+		  { var pad = function(str,ch,len)
+		      { var ps='';
+		        for(var i=0; i<Math.abs(len); i++) ps+=ch;
+		        return len>0?str+ps:ps+str;
+		      }
+		    var processFlags = function(flags,width,rs,arg)
+		      { var pn = function(flags,arg,rs)
+		          { if(arg>=0)
+		              { if(flags.indexOf(' ')>=0) rs = ' ' + rs;
+		                else if(flags.indexOf('+')>=0) rs = '+' + rs;
+		              }
+		            else
+		                rs = '-' + rs;
+		            return rs;
+		          }
+		        var iWidth = parseInt(width,10);
+		        if(width.charAt(0) == '0')
+		          { var ec=0;
+		            if(flags.indexOf(' ')>=0 || flags.indexOf('+')>=0) ec++;
+		            if(rs.length<(iWidth-ec)) rs = pad(rs,'0',rs.length-(iWidth-ec));
+		            return pn(flags,arg,rs);
+		          }
+		        rs = pn(flags,arg,rs);
+		        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();
+		    converters['c'] = function(flags,width,precision,arg)
+		      { if(typeof(arg) == 'number') return String.fromCharCode(arg);
+		        if(typeof(arg) == 'string') return arg.charAt(0);
+		        return '';
+		      }
+		    converters['d'] = function(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)); 
+		      }
+		    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); 
+		      }
+		    converters['E'] = function(flags,width,precision,arg) 
+		      { return (converters['e'](flags,width,precision,arg)).toUpperCase();
+		      }
+		    converters['e'] =  function(flags,width,precision,arg)
+		      { iPrecision = parseInt(precision);
+		        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);        
+		      }
+		    converters['f'] = function(flags,width,precision,arg)
+		      { iPrecision = parseInt(precision);
+		        if(isNaN(iPrecision)) iPrecision = 6;
+		        rs = (Math.abs(arg)).toFixed(iPrecision);
+		        if(rs.indexOf('.')<0 && flags.indexOf('#')>=0) rs = rs + '.';
+		        return processFlags(flags,width,rs,arg);
+		      }
+		    converters['G'] = function(flags,width,precision,arg)
+		      { return (converters['g'](flags,width,precision,arg)).toUpperCase();
+		      }
+		    converters['g'] = function(flags,width,precision,arg)
+		      { iPrecision = parseInt(precision);
+		        absArg = Math.abs(arg);
+		        rse = absArg.toExponential();
+		        rsf = absArg.toFixed(6);
+		        if(!isNaN(iPrecision))
+		          { rsep = absArg.toExponential(iPrecision);
+		            rse = rsep.length < rse.length ? rsep : rse;
+		            rsfp = absArg.toFixed(iPrecision);
+		            rsf = rsfp.length < rsf.length ? rsfp : rsf;
+		          }
+		        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);        
+		      }  
+		    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); 
+		      }
+		    converters['X'] = function(flags,width,precision,arg)
+		      { return (converters['x'](flags,width,precision,arg)).toUpperCase();
+		      }
+		    converters['x'] = function(flags,width,precision,arg)
+		      { var iPrecision=parseInt(precision);
+		        arg = Math.abs(arg);
+		        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); 
+		      }
+		    converters['s'] = function(flags,width,precision,arg)
+		      { var iPrecision=parseInt(precision);
+		        var rs = arg;
+		        if(rs.length > iPrecision) rs = rs.substring(0,iPrecision);
+		        return processFlags(flags,width,rs,0);
+		      }
+		    farr = fstring.split('%');
+		    retstr = farr[0];
+		    fpRE = /^([-+ #]*)(\d*)\.?(\d*)([cdieEfFgGosuxX])(.*)$/;
+		    for(var i=1; i<farr.length; i++)
+		      { fps=fpRE.exec(farr[i]);
+		        if(!fps) continue;
+		        if(arguments[i]!=null) retstr+=converters[fps[4]](fps[1],fps[2],fps[3],arguments[i]);
+		        retstr += fps[5];
+		      }
+		    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/		
+		 * 
+		 * @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
+		 * 		true, converts self closing tags, like <td />, to <td></td>.
+		 * @return {String} - the XML String inside the object.
+		 */
+		me.getOuterXML = function (node, options) {
+			var r;
+				// Internet Explorer
+				if (node.xml) {
+					r = node.xml;
+					
+				// 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
+				 * Opera will not like you, especially if you have empty <td> tags.
+				 */
+				if (options) {
+					if (options.insertClosingTags) {
+						r = r.replace(selfClosingTagRe, "<$1></$1>");
+					}
+				}
+				return r;
+		}
+	}
+	
+	
+	// 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);
+	}
+}
+
+
+
+EventHelpers.addPageLoadEvent('html5Widgets.init');
+