var Quickdrop = new Class({
  Implements:[Options,Events],
  links:{},
  id: '',
  parent: {},
  title:{},
  handle:{},
  list:{},
  popup:{},
  options:{
    height:200,
    space:5
  },
  initialize: function(id,options){
    this.id = id;
    this.parent = $(id);
    this.setOptions(options);
    this.parent.setStyle("overflow","hidden");

    this.title = this.parent.getElement('.title');
    this.handle = this.parent.getElement('.handle');

    this.list = this.parent.getElement('ul').clone();
    this.parent.getElement('ul').destroy();
    this.popup = new Element('div',{
      'class':'QD_popup',
      styles:{
        'position':'absolute',
        'height':1,
        'display':'none',
        'overflow-x':'hidden',
        'overflow-y':'scroll'
      }
    });

    this.list.inject(this.popup);
    this.popup.inject($(document.body))

    this.parent.addEvent('mouseup',this.toggle.bind(this));
    this.parent.addEvent('mouseenter',this.over.bind(this));
    this.parent.addEvent('mouseleave',this.out.bind(this));

  },
  open:function(){
    this.parent.addClass('open');
    var bounds = this.parent.getCoordinates();
    this.popup.setStyles({
      'display':'block',
      'left':bounds.left,
      'top':bounds.bottom+this.options.space
    });


    //decide on width;
    if(this.popup.getScrollSize().x > this.parent.getSize().x){
      this.popup.setStyle('width',this.popup.getScrollSize().x);
    }else{
      var trim =
        this.popup.getStyle('border-left-width').toInt()+
        this.popup.getStyle('border-left-width').toInt()+
        this.popup.getStyle('border-right-width').toInt()+
        this.popup.getStyle('padding-left').toInt()+
        this.popup.getStyle('padding-right').toInt();

      this.popup.setStyle('width',this.parent.getSize().x - trim);
    }

    this.popup.set('tween', {onComplete:$empty});
    this.popup.tween('height', this.options.height);
  },
  close:function(){
    this.popup.set('tween', {
      onComplete:function(){
        this.popup.setStyle('display','none');
        this.parent.removeClass('open');
      }.bind(this)
    });
    this.popup.tween('height',1);
  },
  toggle:function(){
    if(this.parent.hasClass('open')){
      this.close();
    }else{
      this.open();
    }
  },
  over:function(){
    this.parent.addClass('over');
  },
  out:function(){
    this.parent.removeClass('over');
  }
});