/****************************************************************
---------INSTRUCTIONS-----------
To use this all you have to do is put:
<script src="textrefill.js" type="text/javascript"></script>
in the header of the html file.
After the elements you want to blank and refill have loaded call:
refiller(<id>, <default>);
Where id is the id of the element you want to blank and refill, and default is the value you want it to be.  You don't have to put anything in the onblur or onfocus.

*****************************************************************/

//This class should take a default value and an element (from its constructor) and apply an
//initial value, and onfocus function, and an onblur function to that element.
//onfocus should clear the value if it's the default value
//onblur should restore the default value if the value is ''

function textrefiller(id, value){//element id and default value
	
	this.id = id;
	
	

	//refill text on blur
	document.getElementById(this.id).onfocus = function(){
			if(document.getElementById(this.id).value == value){
				document.getElementById(this.id).value = "";}
			document.getElementById(this.id).className='field_bg_on';
			}
			

	//blank text on focus
	document.getElementById(this.id).onblur = function(){
		if(document.getElementById(this.id).value == ""){
			document.getElementById(this.id).value = value;}
			document.getElementById(this.id).className='field_bg';
		}
}



//collection of textrefiller objects
var refillers = [];

//create textrefiller object with element with specified id and add it to the collection
//this is the only function you'll need to call from the html.
function refiller(id, defval){//maybe add in ability to apply this to a class too.
	
	document.getElementById(id).value = defval;
	refillers.push(new textrefiller(id, defval));
	
}