var Incremental = {}

Incremental.TextField = new Class({
  initialize : function(elm, left, top){
    this.base = $(elm);
    this.div = new Element('div').inject(this.base, 'before');
    this.div.setStyles({
      'position' : 'absolute',
      'margin' : this.base.getStyle('margin'),
      'display' : 'none'
    });
    this.shim = new Element('iframe', {frameborder: '0', scrolling: 'no'}).inject(this.div);
    this.shim.setStyles({
      'position' : 'absolute',
      'width' : this.base.getStyle('width'),
      'padding' : this.base.getStyle('padding'),
      'margin' : '0',
      'left' : parseInt(left) + 'px',
      'top' : parseInt(top) + 'px',
      'z-index' : '10'
    });
    this.list = new Element('ul').inject(this.div);
    this.list.setStyles({
      'position' : 'absolute',
      'overflow' : 'hidden',
      'width' : this.base.getStyle('width'),
      'padding' : this.base.getStyle('padding'),
      'border' : '1px solid black',
      'margin' : '0',
      'left' : parseInt(left) + 'px',
      'top' : parseInt(top) + 'px',
      'background-color' : 'white',
      'z-index' : '20'
    });
    this.base.addEvent('keydown', this.onKeyUpDown.bindWithEvent(this));
    var self = this;
    window.addEvent('domready', function(){
      $$('*').each(function(elm){
        try {
          elm.addEvent('click', function(e){if (!self.isMine(e.target)) self.hide();});
        }
        catch(err) {}
        try {
          elm.addEvent('focus', function(e){if (!self.isMine(e.target)) self.hide();});
        }
        catch(err) {}
      });
    });
    this.before = this.base.get('value');
    this.selected_index = null;
    this.handlers = [];
    (function(){
      var val = this.base.get('value');
      if(this.before != val) {
        this.before = val;
        if(val) {
          this.handlers.each(function(func){func(encodeURI(val))})
        }
        else {
          this.hide();
        }
      }
    }).periodical(500, this);
  },

  onKeyUpDown : function(event){
    var index;
    if(event.key == 'up') {
      if(this.selected_index==null) {
        index = this.list.getChildren().length - 1;
      }
      else {
        index = this.selected_index - 1;
      }
    }
    else if(event.key == 'down') {
      if(this.selected_index==null) {
        index = 0;
      }
      else {
        index = this.selected_index + 1;
      }
    }
    if(event.key == 'up' || event.key == 'down') {
      this.select(index);
      var text;
      if(this.list.getChildren()[index]) {
        text = this.list.getChildren()[index].get('html');
      }
      else {
        text = this.original_text;
      }
      this.before = text;
      this.base.value = text;
    }
    else if(event.key == 'enter' && this.div.getStyle('display') != 'none') {
    	this.hide();
    	event.stop();
    }
  },

  onClickList : function(event) {
    this.before = event.target.get('html');
    this.base.value = event.target.get('html');
    this.hide();
  },

  addHandler : function(handler){
    this.handlers.push(handler);
  },

  removeHandlers : function(){
    this.handlers = [];
  },

  set_list : function(list){
    this.original_text = this.base.get('value');
    this.selected_index = null;
    if (list && list.length > 0) {
      this.list.empty();
      this.div.setStyle('display', 'block');
      list.slice(0,5).each(function(item){
        var li = new Element('li', {
          text : item
        });
        li.setStyles({
          'overflow' : 'hidden',
          'text-align' : 'left',
          'font-size' : '13px',
          'margin' : '0',
          'padding' : '0 0 0 5px'
        });
        li.inject(this.list);
        li.addEvents({
          'mouseover': this.select.bind(this, [this.list.getChildren().indexOf(li)]),
          'click': this.onClickList.bindWithEvent(this)
        });
      }, this);
      this.shim.setStyles({
        'width' : parseInt(this.list.getStyle('width')) + 2 + 'px',
        'height' : parseInt(this.list.getStyle('height')) + 2 + 'px'
      });
    }
    else {
      this.hide();
    }
  },

  select : function(index){
    var items = this.list.getChildren();
    this.selected_index = null;
    $each(items, function(item){
      if(items[index] == item) {
        this.selected_index = index;
        item.setStyles({'background-color': '#DDF'});
      }
      else {
        item.setStyles({'background-color': 'white'});
      }
    }, this);
  },

  hide : function(){
    this.list.empty();
    this.div.setStyle('display', 'none');
    this.original_text = this.base.get('value');
  },

  isMine : function(elm){
    var result = false;
    result = result || elm == this.base;
    result = result || elm == this.div;
    result = result || elm == this.list;
    this.list.getChildren().each(function(child){
      result = result || elm == child;
    });
    return result;
  }
});