/*
Description:

	Outlines input elements (of type text) and/or textarea's when they gain focus

Usage:

	$(window).load(
		function()
		{
			$("*").outlineTextInputs(); // or $("input,textarea").outlineTextInputs()
		}
	);

Optional parameters:
	
	oColour  : Outline colour
	oWidth   : Outline width
	bgColour : Background colour
http://sam.collett.googlepages.com/outlineTextInputs.html
*/
$.fn.outlineTextInputs = function(oColour, oWidth, bgColour)
{
	this.each(
		function()
		{
			// if node is not an input or textarea, skip
			if((this.nodeName.toLowerCase() != "input"
				&& this.nodeName.toLowerCase() != "textarea")
				// also skip the following types of inputs:
				|| this.type == "checkbox"
				|| this.type == "radio"
				|| this.type == "image"
				|| this.type == "reset"
				|| this.type == "submit")
			{
				return;
			}
			oColour = oColour || "#9cc";
			oWidth = oWidth || 2;
			bgColour = bgColour || "#fff";
			var isIE = false;
			/*@cc_on
				isIE = true;
			@*/
			if(isIE)
			{
				var currentElement = this.cloneNode(true);
				var borderElement = document.createElement('span');
				currentElement.oldbgcolour = $(currentElement).css("background-color") || "#fff";
				$(currentElement).focus(
					function()
					{
						$(this.parentNode).css(this.parentNode.borderCss.on);
						$(this).css({backgroundColor: bgColour});
					}
				)
				.blur(
					function()
					{
						$(this.parentNode).css(this.parentNode.borderCss.off);
						$(this).css({backgroundColor: this.oldbgcolour});
					}
				)
				borderElement.borderCss =
				{
					off:
					{
						borderWidth: oWidth + "px",
						borderStyle: "solid",
						borderColor: "#fff",
						padding: "0px",
						/* trigger hasLayout (else there is no bottom border)
							side effect: 1px padding applied to top and bottom */
						zoom : 1
					}
					, on:
					{
						borderColor: oColour
					}
				}
				$(borderElement).css(borderElement.borderCss.off);
				borderElement.appendChild(currentElement);
				this.parentNode.replaceChild(borderElement, this);
			}
			else
			{
				// apply a margin equal to the width of the outline (to prevent overlap)
				$(this).css({margin: oWidth + "px"});
				this.outlineCss =
				{
					off:
					{
						outlineStyle: "solid",
						outlineWidth: oWidth + "px",
						outlineColor: "#fff",
						backgroundColor: "#fff"
					}
					, on:
					{
						outlineColor: oColour,
						backgroundColor: bgColour
					}
				}
				$(this).css(this.outlineCss.off)
				.focus(
					function()
					{
						$(this).css(this.outlineCss.on);
					}
				)
				.blur(
					function()
					{
						$(this).css(this.outlineCss.off);
					}
				)
			}	
		}
	)
	return this;
}
//-->