Jel.FieldHint = Base.extend
({
    constructor: function(fields, hint, options)
    {
        this.fields = fields.length ? fields : [fields];
        this.hint = hint;
        
        this.options = Object.extend
        (
            {
                hintClassName: 'hint',
                clearOnFocus: true,
                restoreOnBlur: false,
                clearOnFormSubmit: true                
            },
            options || {}
        );
        
        this.observers = 
        {
            fieldOnBlur: this.fieldOnBlur.bindAsEventListener(this),
            fieldOnFocus: this.fieldOnFocus.bindAsEventListener(this),
            onFormSubmit: this.onFormSubmit.bindAsEventListener(this)
        };
        
        this.fields.each
        (
            function(field)
            {
                this.setFieldHint(field);

                Event.observe(field, 'focus', this.observers.fieldOnFocus); 
                
                if (this.options.restoreOnBlur)
                {
                    Event.observe(field, 'blur', this.observers.fieldOnBlur);
                }
            }
            .bind(this)
        );
        
        if (this.options.clearOnFormSubmit)
        {
            Event.observe(this.fields[0].form, 'submit', this.observers.onFormSubmit);
        }
    },
    
    onFormSubmit: function(event)
    {
        this.fields.each
        (
            function(field)
            {
                if (field.value == this.hint)
                    field.value = '';
            }
            .bind(this)
        );
    },
    
    setFieldHint: function(field)
    {
        Element.removeClassName(field, this.options.hintClassName);

        if (Form.Element.isInputText(field) || Form.Element.isTextArea(field))
        {
            if (field.value == '' || field.value == this.hint)
            {
                Element.addClassName(field, this.options.hintClassName);
                field.value = this.hint;
            }
        }
    },
    
    clearFieldHint: function(field)
    {
        Element.removeClassName(field, this.options.hintClassName);

        if (Form.Element.isInputText(field) || Form.Element.isTextArea(field))
        {
            if (field.value == this.hint)
                field.value = '';
        }
    },
    
    fieldOnFocus: function(event)
    {
        this.clearFieldHint(Event.element(event));  
    },
    
    fieldOnBlur: function(event)
    {
        this.setFieldHint(Event.element(event));  
    }
});