document.observe('dom:loaded', function() {
    setTimeout(function() {
        // for all items with hint-classname
        $$('.hint').each(function(item) {
            // Initializing
            // If the value is blank then use the title attribute value as a hint and add the hintShown class
            if ((item.type == 'select-one') || (item.type == 'select-multiple')) {
                if (item.length == 0) {
                    item.disabled = true;
                    item.options[0] = new Option(item.readAttribute('title'), "");
                    item.addClassName('hintShown');
                }
            }
            else {
                if (item.getValue() == '') {
                    item.setValue(item.readAttribute('title'));
                    item.addClassName('hintShown');
                }
            }

            // On Focus
            // If the hintShown class is active (hint currently showing) then then clear the value and remove the class
            // Always add the hintActive class ("entering data" effect)
            item.observe('focus', function() {
                if (item.hasClassName('hintShown')) {
                    item.setValue('');
                    item.removeClassName('hintShown');
                }
                item.addClassName('hintActive');
            });

            // On Blur
            // If the value is blank then add the hint title and hintShown class
            // Always remove the hintActive class ("entering data" effect)
            item.observe('blur', function() {
                if (item.getValue() == '') {
                    item.setValue(item.readAttribute('title'));
                    item.addClassName('hintShown');
                }
                item.removeClassName('hintActive');
            });
        });
    }, 300);
});



// FormHintsClearField
// Set value to the hint title and add the hintShown class
// Always remove the hintActive class ("entering data" effect)
function FormHintsClearField(item) {
    item.setValue(item.readAttribute('title'));
    item.addClassName('hintShown');
    item.removeClassName('hintActive');
}



// On Submit
// If the hintShown class is active (hint currently showing)
// then disable the element to keep the value from being submitted
// This minimizes flickering as opposed to clearing the value
function FormHintsOnSubmit() {
    $$('.hintShown').each(function(item) {
        item.disabled = true;
    });
}