/*

textbox_labels.js
manages form textbox labels using the prototype javascript library.
(c) ade.se 2009
you may freely use this script in a non-commercial or commercial project.

the label is taken from the 'title' attribute in the input element.
input element need to exist in DOM when function is called. so either
call the function after the element is created or use a event wrapper
like the example below.

example usage:

<input type="text" title="The label goes here" id="inputid">
<script type="text/javascript">
	Event.observe(window, 'load', function() { 
	    textbox_labels_add('inputid');		
	}); 
</script>

You may also send the element itself to the function. eg. textbox_labels_add($('inputid'));

*/

//Customize these for your webpage (or use the function parameters)
var textbox_labels_default_labelcolor = "#a2a2a2";
var textbox_labels_default_inputcolor = "#767676";

function textbox_labels_add(inputid, label, labelcolor, valuecolor) {
	
	//Get elements
	var input_element;
	input_element = $(inputid);

	var form_element = input_element.up('form');
	
	//Variable									Default value
	label  		= 	(label == undefined) 		? input_element.readAttribute('title') 	: label;
	labelcolor 	= 	(labelcolor == undefined) 	? textbox_labels_default_labelcolor 	: labelcolor;
	valuecolor 	= 	(valuecolor == undefined) 	? textbox_labels_default_inputcolor 	: valuecolor;
	
	//Set default color and label
	if(input_element.getValue() == "") {
		input_element.value = label;
		input_element.setStyle({
			  color: labelcolor
			});
	}
			
	//When clicked, remove label if present
	input_element.observe('focus', function () {
		if(input_element.getValue() == label) {
			input_element.value = "";
			input_element.setStyle({
			  color: valuecolor
			});
		}
	}, false);
	
	//When blurred, add label if empty
	input_element.observe('blur', function () {
		if (input_element.getValue() == "") {
			input_element.value = label;
			input_element.setStyle({
			  color: labelcolor
			});
		} 
	}, false);
	
	if(form_element != null) {
		//If the form is submitted, clear our textboxes if they've got the label.
		//This is the native event, and is only called when using a <input type="submit"> or <input type="image"> and NOT when using $(form).submit();
		form_element.observe('submit', function () {
			if (input_element.getValue() == label) {
				input_element.value = "";
				input_element.setStyle({
				  color: valuecolor
				});
			} 
		}, false);
		
		//Raise this event if you need to submit the form manually via javascript, via a image or link for example, eg. $('form').fire('textbox_labels:submit');
		form_element.observe('textbox_labels:submit', function () { 
			if (input_element.getValue() == label) {
				input_element.value = "";
				input_element.setStyle({
				  color: valuecolor
				});
			} 
		}, false);
		
		//If the form is submitted but failed in a (ajax?) validation, put back labels to textboxes, by firing this event, eg $('form').fire('textbox_labels:submitfail');
		form_element.observe('textbox_labels:submitfail', function () {
			if (input_element.getValue() == "") {
				input_element.value = label;
				input_element.setStyle({
				  color: labelcolor
				});
			} 
		}, false);
	}
}