// Create user extensions namespace (Ext.ux)
Ext.namespace('Ext.ux');

/**
 * Ext.ux.TextFieldMessage Extension Class
 */
Ext.ux.TextFieldMessage = function(config){
    if (!config) 
        config = {};
    // call parent constructor
	    // set custom config properties (or assume component defaults)
    this.showTextMessage = config.showTextMessage || true;
    this.messageText = config.messageText || 'Information Box', 
	this.textMessageCls = config.textMessageCls || 'x-form-text-Message';
	this.x_axis = config.x_axis || 0;
	this.y_axis = config.y_axis || 0;
	
    Ext.ux.TextFieldMessage.superclass.constructor.call(this, config);

	
    
};



Ext.extend(Ext.ux.TextFieldMessage, Ext.form.TextField, {
    inputType: 'text',
	messageID: null,
    
    // private
    onRender: function(ct, position){
        Ext.ux.TextFieldMessage.superclass.onRender.call(this, ct, position);
        
        // create text box
        if (this.showTextMessage) {
            this.messageID = Ext.id();
			this.textBox = Ext.DomHelper.append(document.body, {
                tag: 'div',
                style: 'width: 20em; z-index: 3',
                children: [{
                    tag: 'div',
                    style: 'text-align: center; color: green;',
                    html: this.messageText,
                    id: this.messageID
                }]
            }, true);
            Ext.fly(this.messageID).boxWrap();
            this.textBox.hide();
        }
        
    },
    
    initEvents: function(){
        Ext.ux.TextFieldMessage.superclass.initEvents.call(this);
        
        this.el.on('keypress', this.handleKeypress, this);
        this.el.on('blur', this.handleBlur, this);
        this.el.on('focus', this.handleFocus, this);
        this.el.on('keyup', this.handleKeyUp, this);
    },
    handleFocus: function(e){
    
    },
    handleBlur: function(e){
    
    },
    handleKeypress: function(e){
    
    },
    handleKeyUp: function(e, element){
        var txtElement  = this;
		var msgID = this.messageID;
        this.keyUpEvent(element.value, function(respond){
            if (respond.result == true) {
                if (txtElement.showTextMessage) {
					document.getElementById(msgID).innerHTML =  respond.promotion;
					document.getElementById(msgID).style.color = 'green';
                    txtElement.showMessage(element);
                }
                else {
                    txtElement.hideMessage();
                }
            }else{
            	if (txtElement.showTextMessage) {
					document.getElementById(msgID).innerHTML =  respond.promotion;
					document.getElementById(msgID).style.color = 'red';
                    txtElement.showMessage(element);
                }
                else {
                    txtElement.hideMessage();
                }
			}
            
            
        });
    },
    
    /*validator : function(value){
     Ext.ux.TextFieldMessage.superclass.validator.call(this);
     },*/
    keyUpEvent: null,
    
    showMessage: function(el){
        // align el to other-el using the default positioning ("tl-bl", non-constrained)
        var trblPosition = "tl-bl";
        // align the top left corner of el with the top right corner of other-el (constrained to viewport)
        var trPosition = "tr";
        // align the bottom right corner of el with the center left edge of other-el
        var brlPosition = "br-l";
        // align the center of el with the bottom left corner of other-el and
        var cblPosition = "c-bl";
        // adjust the x position by -6 pixels (and the y position by 0)
        //el.alignTo("other-el", "c-bl", [-6, 0]);
        
        this.textBox.alignTo(el,cblPosition, [this.x_axis,this.y_axis]);
        this.textBox.show();
    },
    hideMessage: function(){
        this.textBox.hide();
    }
    
});