Ext.ns('GetIt');

GetIt.Location = function(inputId, comboId)
{
    var emptyText, 
    input, suggestions, keyPressTask,
    browsing = false; // true, if we start selecting city from list with arrow keys

    input = Ext.get(inputId);
    suggestions = Ext.get(comboId);
    if (!input || !suggestions) {
        return;
    }
    emptyText = input.getAttribute('defaultMsg');
    configureEmptyText();
    configureEvents();
    
    /**
     * Configure input to show empty text when no location is entered by user
     */
    function configureEmptyText() {
        if (!input.dom.value) {
            input.dom.value = emptyText;
            input.setStyle('color', 'gray');
        }
        
        input.on({
            focus: function(e,t,o) {
                if (this.dom.value == emptyText) {
                    this.dom.value = '';
                    this.setStyle('color', 'black');
                }
            },
            blur: function(e,t,o) {
                if (this.dom.value == '') {
                    this.dom.value = emptyText;
                    this.setStyle('color', 'gray');
                }
            },
            scope: input
        });
    }
    
    /**
     * Configure events for the input box
     */
    function configureEvents()
    {
        keyPressTask = new Ext.util.DelayedTask(retrieveLocations);
        if (Ext.isIE) {
            input.on({
                keydown: function(e) {
                    selectRecord(e);
                },
                keypress: function(e) {
                    selectRecordIe(e);
                }
            });
        } else if (Ext.isChrome || Ext.isSafari) {
            input.on({
                keydown: function(e) {
                        selectRecord(e);
                    }
            });
        } else {
            input.on({
                keypress: function(e) {
                    selectRecord(e);
                }
            });
        }
        input.on({    
            blur: function(e, t, o) {
                Ext.Ajax.abort();
                keyPressTask.cancel();
                suggestions.fadeOut('t');
                browsing = false;
            }    
        });
    }
    
    /**
     * Retrieve locations from serve and update combo list
     */
    function retrieveLocations()
    {
        if (input.dom.value.length>0) {
            Ext.Ajax.request({
                autoAbort: true,
                url: '/location',
                method: 'GET',
                params: {
                    q: input.dom.value
                },
                success: function(r) {
                    var t = r.responseText,
                    list = Ext.util.JSON.decode(t);
                    updateComboList(list);
                }
            });
        } else {
            suggestions.fadeOut('t');
            inputLenghtS = input.dom.value.length; 
        }
    }

    /**
     * Update suggestions conbo list
     */
    function updateComboList(list)
    {
        suggestions.hide();
        suggestions.select('div').remove();
        if (list.length == 0) {
            return;
        }
        
        for (var i=0, child; i<list.length; i++) {
            var str1 = list[i].substr(0,input.dom.value.length),
                str2 = list[i].substr(input.dom.value.length,list[i].length),
            child = suggestions.createChild({
                id: 's-'+i,
                tag: 'div',
                cls: '',
                html: str1.bold() +str2
            });
            child.on({
                click: function(text) {
                    return function() {
                        input.dom.value = text;
                    }
                }(list[i]),
                mouseenter: function(e, t) {
                    var te = new Ext.Element(t);
                    te.radioClass('sbsr');
                },
                mouseleave: function(e, t) {
                    var te = new Ext.Element(t);
                }
            });
        }
        suggestions.setX(input.getX());
        suggestions.setY(input.getY()+input.getHeight());
        suggestions.setWidth(input.getWidth());
        //suggestions.first().addClass('sbsr');
        inputLenghtS = input.dom.value.length; 
        suggestions.show();
    }

    
    function selectRecord(e)
    {
        var keyCode = e.keyCode;
        if(!suggestions.isVisible()) {
            keyPressTask.delay(100);
            return 0;
        }
        switch (keyCode) {
            // Return/Enter
            case 13:
                if (!Ext.isIE) {
                    if (!browsing) {
                        return 0;
                    }
                    browsing = false;
                    var se = suggestions.select('div.sbsr').item(0);
                    if (se) {
                        input.dom.value = se.dom.textContent;
                        e.stopEvent();
                        suggestions.fadeOut('t');
                    }
                }
                break;                
            // Escape
            case 27:
                if (!Ext.isIE) {
                    Ext.Ajax.abort();
                    suggestions.fadeOut('t');
                    browsing = false;
                }
                break;            
            // Up arrow
            case 38:
                var se = suggestions.select('div.sbsr').item(0),
                    ne = null;
                if (se) {
                    ne = se.prev();
                } else {
                    ne = suggestions.last();
                }
                if (ne) {
                    ne.radioClass('sbsr');
                }
                browsing = true;
                break;         
            // Down arrow
            case 40:
                var se = suggestions.select('div.sbsr').item(0),
                    ne = null;
                if (se) {
                    ne = se.next();
                } else {
                    ne = suggestions.first();
                }
                if (ne) {
                    ne.radioClass('sbsr');
                }
                browsing = true;
                break;
            default:
                if(input.dom.value.length == 0) {
                    return 0;
                }
                keyPressTask.delay(100);
            break;
        }
    }

    function selectRecordIe(e)
    {
        var keyCode = e.keyCode;
        switch (keyCode) {
            // Return/Enter
            case 13:
                if (!browsing) {
                    return 0;
                }
                browsing = false;
                var se = suggestions.select('div.sbsr').item(0);
                if (se) {
                    input.dom.value = se.dom.innerText;
                    e.stopEvent();
                    suggestions.fadeOut('t');
                }
                break;
                
            // Escape
            case 27:
                Ext.Ajax.abort();
                suggestions.fadeOut('t');
                e.stopEvent();
                browsing = true;
                break;
        }
    }
}