var FacebookList = Class.create(TextboxList, { 
  
  createBox: function($super, text, options) {
    var li = $super(text, options);
    li.observe('mouseenter', function() {
      this.addClassName('bit-hover')
    });
    li.observe('mouseleave', function() {
      this.removeClassName('bit-hover')
    });    
    var tmp = new Element('a', {
      'href': '#',
      'class': 'closebutton'
    });
    tmp.observe('click', function(e) {
          Event.stop(e);
          if(! this.current) this.focus(this.maininput);
          this.dispose(li);
    }.bind(this));    
    li.insert(tmp);
    return li;
  }
  
});

document.observe('dom:loaded', function() {
  var tlist = new TextboxList('input-demo');
  var tlist2 = new FacebookList('input-demo2');
  var tlist3 = new FacebookList('input-demo3', {'hideempty': false, 'resizable': {'step': 8}});
  var tlist4 = new TextboxList('input-demo4', {'extrainputs': false});
  
  $('add-click').observe('click', function(ev) {
    Event.stop(ev);
    if($F('add-input').length > 0)
    {
      [tlist,tlist2,tlist3,tlist4].each(function(el) {
        el.add($F('add-input'));
      });
    }
  });
  
  tlist.add('Karl Marx');
  tlist.add('Leon Trotsky');  
  
  tlist2.add('Jorge Luis Borges');
  tlist2.add('Julio Cortazar');
  
  tlist3.add('Steve Jobs');
  tlist3.add('Bill Gates');
  
  tlist4.add('Lost');
  tlist4.add('Prison Break'); 
  
});