var myAutocompleter = new Class({

  initialize: function(element, url) {
    
    this.element = element;
    this.display();
    this.element.url = url;
    this.prepareField();   
    
  },
  
  prepareField: function(){
    $('displayer').setStyle('display', 'none');
    this.element.addEvent('focus', function(e){
      $('displayer').getChildren('a').each(function(el, index){
        el.removeClass('focused');
        
      });
    });    
    this.element.addEvent('keyup', function(e){
      $('displayer').setStyle('display', 'block');      
      if(e.key !=='down'){
        if(jsonRequest){
          jsonRequest.cancel();
        }
        var jsonRequest = new Request.JSON(
        {       
            url: this.url,
            link:'cancel',
            onComplete: function(towns){
            $('displayer').empty();
            towns.each(function(item, index){
              list_element = new Element('li');
              link = new Element('a');
              link.set('html', item.name+' - <i>'+item.country_code+'</i>');
              link.set('id', 'displayer-item-'+index);
              link.set('href', '#');
              link.set('tab-index', index);
              
              link.setProperty('latitude', item.latitude);
              link.setProperty('longitude', item.longitude);
              
              link.addEvent('click', function(e){
					          $('store_search').setProperty('value', this.get('text'));
					          $('latitude').set('value',this.get('latitude'));
					          $('longitude').set('value',this.get('longitude'));
					          $('displayer').empty();
					          $('store_search').focus();
					          return false;
              });
              
              link.addEvent('keydown', function(e){
                switch (e.key) {
					
				          case 'down':
				            if(this.getParent().getNext()){
				              this.getParent().getNext().getFirst().focus();
				              this.getParent().getNext().getFirst().addClass('focused');
				              this.removeClass('focused');
			              }
			              else{
					            this.focus();
				            }
				            return false;
				          break;
				          
				          
				          case 'up':
				            if(this.getParent().getPrevious()){
				              this.getParent().getPrevious().getFirst().focus();
				              this.getParent().getPrevious().getFirst().addClass('focused');
			                this.removeClass('focused');
			              }
			              else{
					            this.focus();
				            }
				            return false;
				          break;
				          
				          case 'esc': case 'tab': case 'enter':
					          $('store_search').setProperty('value', this.get('text'));
					          $('latitude').set('value',this.get('latitude'));
					          $('longitude').set('value',this.get('longitude'));
					          $('displayer').empty();
					          $('store_search').focus();
					          return false;
					          break;
			          }  
              });
              
              
              list_element.adopt(link);
              $('displayer').adopt(list_element);    
              
            });        
          }
        }).get({'label': this.value, country_search : $('country_search').value});    
      }
    });
    this.element.addEvent('keydown', function(e){
      switch (e.key) {
				case 'enter':
				  					
					break;  
					
				case 'up': case 'down':
				  if($('displayer-item-0'))
				  {
				    $('displayer-item-0').focus();  	
				    $('displayer-item-0').addClass('focused');
					}
					return false;
				
				case 'esc': case 'tab':
					
					break;
			}  
    });
  }, 
  
  display: function(){
    var displayer = new Element('ul');
    var pos = this.element.getCoordinates();
    displayer.setStyles({
			'left': pos.left,
			'top': pos.bottom,
			'position' : 'absolute'
		});
		displayer.setProperty('id', 'displayer');	
		
		$(document.body).adopt(displayer);
  }
});