Ext.ns('Inda');

// input placeholder
Inda.Placeholder = function(el, config){
    this.el = Ext.get(el);
    this.config = config;
    this.empty = true;
    this.type = this.el.dom.type;

    if (this.type == 'password') {
	    this.ph = Ext.DomHelper.insertAfter(this.el, {
		    tag: 'input',
		    type: 'text',
		    value: this.config.text
        }, true);

        this.ph.setVisibilityMode(Ext.Element.DISPLAY).hide();

        this.ph.on({
            scope: this,
            focus: function(){
                if (this.type == 'password') {
                    this.ph.setVisibilityMode(Ext.Element.DISPLAY).hide();
                    this.el.setVisibilityMode(Ext.Element.DISPLAY).show();
                }
                this.el.dom.value = '';
                this.el.focus();
            }
        });
    }

    if (this.el.dom.value.length == 0) {
        if (this.type == 'password') {
            this.el.setVisibilityMode(Ext.Element.DISPLAY).hide();
            this.ph.setVisibilityMode(Ext.Element.DISPLAY).show();
        }
        this.el.dom.value = this.config.text;
    }

    this.el.on({
        scope: this,
        focus: function(){
            if (this.empty) {
                this.el.dom.value = '';
            }
        },
        blur: function(){
            if (this.el.dom.value == '') {
                this.empty = true;
                if (this.type == 'password') {
                    this.el.setVisibilityMode(Ext.Element.DISPLAY).hide();
                    this.ph.setVisibilityMode(Ext.Element.DISPLAY).show();
                }
                this.el.dom.value = this.config.text;
            } else {
                this.empty = false;
            }
        }
    });
}