var TextField = Class.create({
    initialize: function (element) {
        this._element = $(element);
        this._placeholder = '';
        this._changed = this._element.value != '';
 
        ['focus', 'blur', 'change'].each(function (s) {
            this._element.observe(s, this['_' + s].bindAsEventListener(this));
        }.bind(this));
 
        Event.observe(window, 'unload', this._unload.bindAsEventListener(this));
 
        var form = TextField.formOf(element);
        if (! form) {
            return;
        }
        $(form).observe('submit', function () {
            if (! this._changed) {
                this._element.value = '';
            }
        }.bindAsEventListener(this));
    },
 
    _focus: function () {
        if (! this._changed) {
            this._element.value = '';
        }
        this._showPlaceholder(false);
    },
 
    _blur: function () {
        if (this._element.value == '') {
            this._changed = false;
        }
 
        this._showPlaceholder(true);
    },
 
    _change: function () {
        this._changed = true;
    },
 
    _unload: function () {
        if (! this._changed) {
            this._element.value = '';
        }
    },
 
    setPlaceholder: function (str) {
        this._placeholder = str;
        this._showPlaceholder(true);
    },
 
    _showPlaceholder: function (flag) {
        if (flag && ! this._changed) {
            this._element.value = this._placeholder;
            this._element.addClassName('placeholder');
        } else {
            this._element.removeClassName('placeholder');
        }
    }
});
 
TextField.formOf = function (input) {
    var node = input;
    while ((node = node.parentNode) != null) {
        if (node.tagName == 'FORM') {
            return node;
        }
    }
    return null;
};