/**
 * The emptyText function will take care of 
 * specialized "Enter something here" behavior 
 * for form fields.  It will make sure the text 
 * is displaying when the field is empty and 
 * gone when the user clicks on it to enter 
 * something.  
 * 
 * Here's how to use this function:
 * 
 * <input 
 *    id="date"                  [optional]
 *    name="date"                [optional]
 *    value="{$date}"            [optional]
 *    class="normalclass"        [optional]
 *    emptyvalue="Enter date"    [required]
 *    emptyclass="grayedout"     [optional]
 *  />
 * <script>emptyText()</script>
 * 
 * Notice the two extra non-standard attributes,
 * emptyvalue and emptyclass.  These specify the 
 * text and class that will be given to the 
 * field when it is empty.  Like the class 
 * attribute, emptyclass may include more than 
 * one class.  If emptyclass is not specified, 
 * the class will not change when the field is 
 * empty.
 * 
 * You can optionally pass an argument to the 
 * emptyText function that is an id or a 
 * reference to the element you wish to effect.  
 * This can be useful for dynamically created 
 * elements or to avoid ambiguity.  If you don't 
 * pass any arguments to the emptyText function, 
 * it will search backward from the <script> 
 * element for an <input> element.  It is 
 * recommended keep the  <script> element close 
 * to the <input> element.  
 * 
 * It has the added benefit that if a field 
 * contains the empty text when the 
 * form is submitted, the empty text won't get 
 * sent to the server. This  relieves the form 
 * handling code from having to check for the 
 * empty text.
 * 
 * This should almost always "just work".  One 
 * exception is if you want to clear the input 
 * element from javascript.  Instead of setting 
 * input.value = '', use input.clear().  That 
 * will ensure the empty text is  showing after 
 * the input is cleared.
 * 
 * Requires prototype.js
 * 
 * @author Russ Black
 * 
 */

 // Use a function to create a namespace to prevent name collisions 
 // with other libraries
(function() {

// define it with bouncyCase and lowercase.
emptyText = emptytext = function(input)
{
	if (!input)
	{
		input = findLastInput()
	}
	input = $(input)
	if (input.emptytext) 
	{
		// this element has already been styled.
		return 
	}
	
	// make a new input element to hold the empty text. Leave it anonymous
	// (no "name" attribute) so it won't get submitted with the form.
	var emptytext = document.createElement('input')
	
	// give it the appropriate class
	if (input.hasAttribute('emptyclass')) 
	{
		emptytext.className = input.getAttribute('emptyclass')
	}
	else 
	{
		emptytext.className = input.className
	}
	
	if (input.hasAttribute("id"))
	{
		emptytext.id=input.id+'-emptytext'
	}
	
	// copy size attribute
	if (input.hasAttribute('size'))
	{
		emptytext.size=input.getAttribute('size')
	}
	
	// populate it an empty value
	if (input.hasAttribute('emptyvalue'))
	{
		emptytext.value=input.getAttribute('emptyvalue')
	}

	// insert emptytext before input
	input.parentNode.insertBefore(emptytext,input)
	
	// give input a reference to its emptytext
	input.emptytext = emptytext
	
	// assume it doesn't currently have focus
	input.hasFocus = false 
	
	// wrap prototype's clear function so we can catch this event and treat it like an empty blur
	input.oldclear=input.clear
	input.clear = function() {
		var r = input.oldclear();
		if (!input.hasFocus) onBlur(input);
		return r
	}
	
	// wrap focus function so we can trap the event
	input.oldfocus = input.focus
	input.focus = function() {
		onFocus(input)
		input.oldfocus()
	}
	
	// add focus listeners
	Event.observe(input,'blur',function() {onBlur(input)})
	Event.observe(input,'focus',function() {onFocus(input)})
	Event.observe(emptytext,'focus',function() {input.focus()})
	
	emptyTextFields.push(input)
	var len = emptyTextFields.length
	
	// set initial state
	onBlur(input)

	// schedule a css scan
	setTimeout(function(){
		if (len == emptyTextFields.length) 
		{
			scanAllCss()
		}
	},500)
}

Event.observe(window, 'load', scanAllCss)
var emptyTextFields = new Array()

/**
 * Called when focus leaves the input field.  Shows the empty text if the input 
 * field is empty
 */
function onBlur(input)
{
	if (input.value.length == 0)
	{
		input.emptytext.style.display=''
		input.style.display='none'
	}
	else
	{
		input.emptytext.style.display='none'
		input.style.display=''
	}
	input.hasFocus=false
}

/**
 * Called when the input field receives focus.  Hides the empty text, shows input field
 */
function onFocus(input)
{
	input.emptytext.style.display='none'
	input.style.display=''
	input.hasFocus=true
}

/**
 * This function looks for any id-specific css selectors on the emptytext 
 * fields and adds corresponding css rules for the emptytext fields.
 * This allows css designers to style at the ID level and still have the 
 * emptytext field look right.  
 */
function scanAllCss()
{	
	// see if any of our fields have an id.  If not, we can 
	// skip this step.
	var hasId = false
	for(var j=0; j<emptyTextFields.length; j++)
	{
		var field = emptyTextFields[j]
		if (field.hasAttribute("id"))
		{
			hasId = true
			break
		}
	}
	if (hasId)
	{
		for (var i=0; i<document.styleSheets.length; i++)
		{
			var ss=document.styleSheets[i]
			scanCss(ss)
		}
	}
}

function scanCss(ss)
{
	try
	{
		// scan imports
		if (ss.imports)
		{
			for(var i=0; i<ss.imports.length; i++)
			{
				scanCss(ss.imports[i])
			}
		}
		
		var rules;
		if (typeof(ss.cssRules) != "undefined") rules = ss.cssRules; // ff and safari
		else if (typeof(ss.rules) != "undefined") rules = ss.rules; // ID
		if (typeof(rules) != "undefined") 
		{
			for(var i=0; i<rules.length; i++)
			{
				var rule = rules[i]
				
				if (rule.styleSheet) // imported style sheet
				{
					scanCss(rule.styleSheet)
				}
				else
				{
					for(var j=0; j<emptyTextFields.length; j++)
					{
						var field = emptyTextFields[j]
						if (field.hasAttribute("id"))
						{
							var id=field.id
							var rex = new RegExp("#"+id+"([^a-zA-Z0-9_-]|$)")
							
							if (rule.selectorText && rule.selectorText.search(rex)>=0 && rule.selectorText.indexOf("-emptytext") == -1)
							{
								var newRule = rule.selectorText.replace(rex,"#"+id+"-emptytext") + '{' + rule.style.cssText + '}'

								addCss(newRule)
							}
						}
					}
				}
			}
		}
	}
	catch(e)
	{
		//console.log("Caught " + e)
	}
}

function addCss(cssCode) {
	var styleElement = document.createElement("style");
	styleElement.type = "text/css";
	if (styleElement.styleSheet) {
		styleElement.styleSheet.cssText = cssCode;
	} else {
		styleElement.appendChild(document.createTextNode(cssCode));
	}
	document.getElementsByTagName("head")[0].appendChild(styleElement);
}

function findLastInput()
{
	var elem = document.body.lastChild
	while (elem)
	{
		if (elem.tagName.toLowerCase() == "script")
		{
			return findPreviousEmptyTextInput(elem)
		}
		elem = elem.lastChild
	}
	return null
}

function findPreviousTerminalNode(node)
{
	if (node.previousSibling)
	{
		node = node.previousSibling
		while (node.lastChild) node = node.lastChild
		return node
	}
	else if (node.parentNode) return findPreviousTerminalNode(node.parentNode)
	else return null
}

function findPreviousEmptyTextInput(elem)
{
	var node = $(findPreviousTerminalNode(elem))
	while (node && !(node.tagName && node.tagName.toLowerCase() == "input" && node.hasAttribute("emptyvalue")))
	{
		node = $(findPreviousTerminalNode(node))
	}
	return node
}

})() // end wrap