//Handles the different states of the search box

var form = document.getElementById('searchform'); //form ID
var field = document.getElementById('searchboxtext'); //Input text ID
var background = document.getElementById('searchbackground'); //Search Background div ID
var defaultText = "Search VPFP..."; //What you want to display in search box
field.value = defaultText;

var classInactive = "searchboxtext_inactive"; //CSS class name for inactive state of Input box
var classActive = "searchboxtext_active"; //CSS class name for inactive state of Input box
var classText = "searchboxtext_text"; //CSS class name for inactive state of Input box

var classInactiveBG = "searchbackground_inactive"; //CSS class name for inactive state of Search Background div
var classActiveBG = "searchbackground_active"; //CSS class name for active state of Search Background div


//Do not touch below unless you know javascript
field.c = field.className;
field.className = field.c + " " + classInactive;

background.c = background.className;
background.className = background.c + " " + classInactiveBG;

field.onfocus = function(){
	this.className = this.c + " "  + classActive;
	background.className = background.c + " " + classActiveBG;
	this.value = (this.value == "" || this.value == defaultText) ?  "" : this.value;
};
field.onblur = function(){
	this.className = (this.value != "" && this.value != defaultText) ? this.c + " " +  classText : this.c + " " +  classInactive; background.className = background.c + " " + classInactiveBG;
	this.value = (this.value != "" && this.value != defaultText) ?  this.value : defaultText;
};
form.onsubmit = function(){
	return (field.value!=defaultText && field.value!='');
};