/****
REQUIRES PROTOTYPE (tested and working on version 1.6.0.3)
REQUIRES 'general.js' > addEvent
****/

/**
 * This function runs trough all forms on the page and makes the fields have an (optionally greyed out)
 * default value that, most logically, is the label/value-description of the field.
 *
 * How does it work:
 * - Add to the field element [text, textarea, select] the classname 'has_defvalue'
 * - Add to the field element the a value it has before anything is entered as attribute 'defvalue', like:
 *   defvalue="Vul hier uw naam in .."
 * - The script puts the 'defvalue' as value and when the element gets focus, clears it
 * - When nothing is entered onloosing focus the default value is re-entered
 * - The script adds the classname 'on_defvalue' to the elements when nothing new, no value, is entered
 *
 * Just try it, it looks fucking awesome
 *
 * Don't forget to add a class in your CSS, something like this:
 * .on_defvalue {
 *    font-style: italic;
 *    color: #808080;
 * }
 */
function extendFormElementsWithDefaultValue() {
    // get all forms
    $forms = $$('form');
    $forms.each(function ($form) {
        // extend all fields with default value
        $fields = $$('form#' + $form.id + ' .has_defvalue');
        $fields.each(function($el) {
            // input[type="text"], input[type="password"] OR textarea
            if (($el.readAttribute('type') == 'text') || ($el.readAttribute('type') == 'password') || ($el.tagName.toLowerCase() == 'textarea')) {
                addEvent($el, 'focus', function() {
                    if ($el.value == $($el).readAttribute('defvalue')) {
                        $el.value = '';
                        $el.removeClassName('on_defvalue');
                    }
                });
                addEvent($el, 'click', function() {
                    if ($el.value == $($el).readAttribute('defvalue')) {
                        $el.value = '';
                        $el.removeClassName('on_defvalue');
                    }
                });
                addEvent($el, 'blur', function() {
                    if ($el.value == '') {
                        $el.addClassName('on_defvalue');
                        $el.value = $($el).readAttribute('defvalue');
                    }
                });
                // .. and set it to default
                if ($el.value == '') {
                    $el.addClassName('on_defvalue');
                    $el.value = $($el).readAttribute('defvalue');
                };
            }
            // select
            if ($el.tagName.toLowerCase() == 'select') {
                addEvent($el, 'focus', function() {
                    // get normal color
                    $el.removeClassName('on_defvalue');
                });
                addEvent($el, 'click',function() {
                    // get normal color
                    $el.removeClassName('on_defvalue');
                });
                addEvent($el, 'blur', function() {
                    // become greyed out if top-most item is selected
                    if ($el.selectedIndex == 0) {
                        $el.addClassName('on_defvalue');
                    } else {
                        $el.removeClassName('on_defvalue');
                    }
                });
                addEvent($el, 'change', function() {
                    // become greyed out if top-most item is selected
                    if ($el.selectedIndex == 0) {
                        $el.addClassName('on_defvalue');
                    } else {
                        $el.removeClassName('on_defvalue');
                    }
                });
                // .. and set it to default
                if ($el.selectedIndex == 0) {
                    $el.addClassName('on_defvalue');
                }
            }
        });
        // when submitting the form that contains ths element, the value will get emptied
        addEvent($form, 'submit', function() {
            $fields = $$('form#' + $form.id + ' .has_defvalue');
            $fields.each(function($el) {
                // .. and set it to ''
                if ($el.value == $($el).readAttribute('defvalue')) {
                    $el.removeClassName('on_defvalue');
                    $el.value = '';
                };
            });
        });
    });
}