/****
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
    var $forms = $$('form');
    $forms.each(function ($form) {
        // extend all fields with default value
        var $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.value == $($el).readAttribute('defvalue'))) {
                        $el.addClassName('on_defvalue');
                        $el.value = $($el).readAttribute('defvalue');
                    } else {
                        $el.removeClassName('on_defvalue');
                    }
                });
                // .. and set it to default
                if ($el.value == '') {
                    $el.addClassName('on_defvalue');
                    $el.value = $($el).readAttribute('defvalue');
                };
                // reroute the getvalue to return empty when the value if defvalue
                $el.convGetValue = $el.getValue;
                $el.getValue = function() {
                    if ($el.convGetValue() == $($el).readAttribute('defvalue')) {
                        return '';
                    } else {
                        return $el.convGetValue();
                    }
                }
                // reroute the setvalue to check on defvalue when setting
                $el.convSetValue = $el.setValue;
                $el.setValue = function($value) {
                    $el.convSetValue($value);
                    if ($value == '') {
                        $el.addClassName('on_defvalue');
                        $el.value = $($el).readAttribute('defvalue');
                    } else {
                        $el.removeClassName('on_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');
                }
            }
        });
        // get existing onsubmit
        var $currentOnSubmit = trim($form.readAttribute('onsubmit') + '');
        // block the submitting of the form
        $form.writeAttribute('onsubmit');
        // add an event on submitting the form
        addEvent($form, 'submit', function(e) {
            // add allready existing submit
            if (($currentOnSubmit != '') && ($currentOnSubmit != 'null') && ($currentOnSubmit != undefined) && ($currentOnSubmit != null)) {
                var $currentOnSubmitFunction = new Function($currentOnSubmit);
            } else {
                var $currentOnSubmitFunction = new Function('return true;');
            }
            // check if existing onsubmit returned no false
            $success = $currentOnSubmitFunction();
            if ($success) {
                resetFormElementsWithDefaultValue($form);
            }
            if (e.preventDefault) {
                // FF - standard
                if ($success) {
                    // just go ..
                } else {
                    e.stopPropagation();
                    e.preventDefault();
                }
            } else {
                // IE
                e.returnValue = $success;
            }
            return $success;
        });
    });
}

// resets the value of the fields if they contain the default value - for a certain form
function resetFormElementsWithDefaultValue($form) {
    $form = $($form);
    // get all these fields
    var $fields = $$('form#' + $form.id + ' .has_defvalue');
    $fields.each(function($el) {
        // check if they contain the default value
        if ($el.value == $($el).readAttribute('defvalue')) {
            // empty it
            $el.value = '';
            // and remove the on_defvalue class
            $el.removeClassName('on_defvalue');
        };
    });
}