var SearchSuggest = new Class({
    initialize: function() {
        this.searchField = document.getElement('.entire-search');
        if (!this.searchField)
            return;
        this.searchField.set('autocomplete', 'off');
        
        this.suggestions = new Element('ul', {'class':'current-suggestions'});
        this.suggestions.setStyles({
            'width': this.searchField.getSize().x - 2/* ,
           'top': this.searchField.getPosition(document.getElement('#header')).y - 17,
            'left': this.searchField.getPosition(document.getElement('#header')).x */
        });
        
        this.loading = false;
        this.storedValue = this.searchField.get('value');
        
        var that = this;        
        this.searchField.addEvents({
            'keyup':   function(e) {that._onKeyup.call(that, e);},
            'keydown': function(e) {that._onKeydown.call(that, e)},
            'focus':   function(e) {that._onFocus.call(that, e)},
            'blur':    function(e) {that._onBlur.call(that, e)}
        });
    },
    
    _onKeyup: function(e) { 
        if(e.key != 'up' && e.key != 'down' && e.key != 'enter')
            this._fetchSuggestions(this.searchField.get('value'));
        else
            this.searchField.set('value',this.suggestions.getElement('.active').getElement('a').get('text'));
    },

    _onKeydown: function(e) {
        switch (e.key) {
        case 'down':
            e.preventDefault();
            var active = this.suggestions.getElement('.active');
            if (active) {
                if (active.getNext()) {
                    active.removeClass('active');
                    active.getNext().addClass('active');
                }
            } else {
                if (this.suggestions.getChildren().length > 0) {
                    active = this.suggestions.getChildren()[0];
                    active.addClass('active');
                }
            }
            break;
        case 'up':
            e.preventDefault();
            var active = this.suggestions.getElement('.active');
            if (active) {
                if (active.getPrevious()) {
                    active.removeClass('active');
                    active.getPrevious().addClass('active');
                }
            } else {
                if (this.suggestions.getChildren().length > 0)
                    this.suggestions.getChildren()[0].addClass('active');
            }
            break;
        case 'enter':
            this.suggestions.setStyle('display','none');
            this.suggestions.empty();
            break;
        }
    },

    _onFocus: function(e) {
        if (this.searchField.get('value') != ''){
            this._fetchSuggestions(this.searchField.get('value'));
        }
    },

    _onBlur: function(e) {
        var that = this;
        (function() {
            that._removeSuggestions();
        }).delay(500);
    },
    
    _removeSuggestions: function() {
        this.suggestions.dispose()
    },

    _empty: function(element) {
        element.getChildren().each(function(child) {
            element.removeChild(child);
        });
    },
    
    _fetchSuggestions: function(value) {
        if (this.loading)
            this.loading.cancel();
        
        if(this.suggestions.getParent() == null)
            this.searchField.getParent().grab(this.suggestions);
        
        this.storedValue = value;
        
        var num = 0;
        var that = this;
        var newSuggestions = [];
        var regexp = new RegExp("^(" + value + ")(.*)", "i");
        
        this.loading = new Request.JSON({'url': '/AutoComplete.action', onComplete: function(suggestions) {
            
            if(that.suggestions.getStyle('display') == 'none')
                that.suggestions.setStyle('display','block');
                
            suggestions.each(function(suggestion, i) {
                var results = regexp.exec(suggestion);
                var li = new Element('li');
                var a = new Element('a', {'href': "/search/" + suggestion, 'html': "<strong>" + results[1] + "</strong>" + results[2]});
                li.grab(a);
                
                suggestion = new Hash({'title': suggestion, 'element': li, 'a': a});
                newSuggestions[num] = suggestion['element'];
                
                num++;
            });

            if (num == 0) {
                that.suggestions.setStyle('display','none');
                that.suggestions.empty();
                return;
            }

            var oldSuggestions = that.suggestions.getChildren('li');

            if(oldSuggestions.length == newSuggestions.length) {
                newSuggestions.each(function(suggestion, i){
                    suggestion.replaces(oldSuggestions[i]);
                });
            } else if (oldSuggestions.length > newSuggestions.length) {
                oldSuggestions.each(function(suggestion, i) {
                    if(newSuggestions[i])
                        newSuggestions[i].replaces(suggestion);
                    else
                        suggestion.dispose();
                });
            } else {
                newSuggestions.each(function(suggestion, i) {
                    if(oldSuggestions[i])
                        suggestion.replaces(oldSuggestions[i]);
                    else
                        that.suggestions.grab(suggestion);
                });
            }
        }}).get({'searchTerm': value, 'limit': 10});        

        
    }
});