//=require "default/empty"
enableAutoEmptyFields();
/**
 * Empty fields if their value equals their title on mouse over
 * and set the value the same as the title on mouse out.
 * Also, fields are emptyed before form submition.
 *
 * To enable this behavior add the 'autoempty' class to field.
 * Atention! If this class name is set, the value will be overridden
 * with the tilte on load.
 *
 * Required validation provided if 'require' class name is provided to field.
 * Make sure to add a message box with the same id as the validated field,
 * prefixed with 'advice-required-'
 *
 * 1) Include this script on your page
 * 2) add 'autoempty' and 'require' classes as described above
 * 3) add a message box (div, span, etc) with the id 'advice-required-'+field.id,
 *    as described above
 *
 * @author Tudor Raul
 */
function enableAutoEmptyFields(){
    // array of forms that contain autoempty fields
    var aoForms = new Array();
    $$('form input.autoempty[type=text], form textarea.autoempty').each(function(field){
        // set default value
        if(!field.title.blank()){
            field.value = field.title;
        }
        // on mouse over bahavior
        field.observe('focus', function(){
            if(field.value == field.title){
                field.clear();
                field.addClassName('autoempty_on');
            }
        });
        // on mouse out bahavior
        field.observe('blur', function(){
            if(field.value.blank()){
                field.value = field.title;
                field.removeClassName('autoempty_on');
            }
        });
        // validate and empty fields before form submition
        var parentForm = field.up('form');
        if( parentForm && aoForms.indexOf(parentForm.identify()) == -1 ){
            parentForm.observe('submit', function(ev){
                var errors = new Hash();
                $$('form#'+parentForm.identify()+' input.autoempty[type=text], form#'+parentForm.identify()+' textarea.autoempty').each(function(ffield){
                    if(ffield.hasClassName('require')){
                        var required = true;
                        var msgBox = $('advice-required-'+ffield.identify());
                    }
                    if( ffield.value == ffield.title || ffield.value.blank() ){
                        ffield.clear();
                        if(required){
                            errors.set(ffield.identify(), true);
                            if(msgBox){
                                msgBox.show();
                            }
                        }
                    }
                    else {
                        if(required){
                            errors.unset(ffield.identify());
                            if(msgBox){
                                msgBox.hide();
                            }
                        }
                    }
                });
                if(errors.keys().size() > 0){
                    ev.stop();
                }
            });
            aoForms.push(parentForm.identify());
        }
    });

    $$('form input.autoempty[type=password]').each(function(field){
        var fieldId = field.identify();
        var newFieldId = 'text_'+fieldId;

        // make it text input and set an id
        var newField = field.inspect().replace(/id=['"]{0,1}[\w_-]*['"]{0,1}/i, 'id="'+newFieldId+'"');
        field.up().insert(newField);
        newField = $(newFieldId);
        newField.removeClassName('autoempty_on')
        // copy tabindex
        newField.writeAttribute('tabindex', field.readAttribute('tabindex'));
        // switch inputs
        newField.show();
        field.hide();
        // set I18 string 'Parola'
        if($('PasswordI18Text')){
            newField.writeAttribute('value', $('PasswordI18Text').readAttribute('value'));
        }else{
            newField.writeAttribute('value', $(fieldId).title);
        }

        newField.observe('focus', function(){
            newField.hide();
            field.show();
            field.focus();
        });

        field.observe('blur', function(){
            if(field.value == ''){
                newField.show();
                field.hide();
            }
        })
    });
}