//Handles the different states of the search box

var field = document.getElementById('searchBoxText'); //Input text ID
var background = document.getElementById('searchBackground'); //Search Background div ID
var defaultText = "Search Department..."; //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;
};