// used to display/hide form input hints (ie. Search Names) and set its styling
function setFormHints() {
	// loop through all form input elements where class="form-hint"
	$$('input.form-hint').each(function(elm) {
		// watch for any focus events on the form input
		elm.observe('focus', function() {
			removeFormHint(elm);
		});
		// watch for any blur events on the form input
		elm.observe('blur', function() {
			displayFormHint(elm);
		});
		displayFormHint(elm);
	});
}
function removeFormHint(elm) {
	var attribute = elm.readAttribute('title');
	
	// if the value of the field is equal to the title, then we need to clear it and set the styling.
	if(elm.value == attribute) {
		elm.value = "";
		elm.style.color = "#000";
		elm.style.fontStyle = "normal";
	}
}
function displayFormHint(elm) {
	var attribute = elm.readAttribute('title');
	// if the value of the filed is empty then set it to the form hint (the title).
	if(elm.value == "") {
		elm.value = attribute;
		if(elm.id != 'search') {
			elm.style.color = "#999";
			elm.style.fontStyle = "italic";
		}
	} else if (elm.value == attribute) {
		if(elm.id != 'search') {
			elm.style.color = "#999";
			elm.style.fontStyle = "italic";
		}
	}
}

// when the dom has loaded, apply all form hint observers
document.observe('dom:loaded', setFormHints);


// calls the AJAX page that will change the database
function toggleBit(elm) {
	// find the underscore in the ID of the element. (ie. user_12)
	// get the id portion (12) and the identifier (user)
	var underscore = elm.id.lastIndexOf('_');
	var id = elm.id.substring(underscore + 1);
	var ident = elm.name;

	// call the AJAX method to toggle the bit.
	new Ajax.Updater(elm, '../ajax/toggle.php', {
		method : 'get',
		parameters : {'ident':ident, 'id':id}
	});
}