(function(){

  /**
   * DROPDOWN
   */

  var Dropdown = new Class('ui.Dropdown', {
    Implements: [Options],

    options: {
      header: {},
      panel: {}
    },

    initialize: function(element, options){
      this.element = element
      this.options = Object.merge(this.options, options)
      this.build()
      this.addEvents()
      this.element.store('dropdown', this)
    },

    build: function(){
      this.header = new ui.DropdownHeader(this.element.getElement('header'), this.options.header)
      this.panel = new ui.DropdownPanel(this.element.getElement('ol'), this.options.panel)
    },

    addEvents: function(){
      this.header.addEvent('onDropdownHeaderEnter', this.panel.show.bind(this.panel))
      this.header.addEvent('onDropdownHeaderLeave', this.panel.hide.bind(this.panel))
      this.panel.addEvent('onDropdownPanelEnter', this.header.killTimer.bind(this.header))
      this.panel.addEvent('onDropdownPanelLeave', this.panel.hide.bind(this.panel))
    }
  })

  /**
   * DROPDOWN HEADER
   */

  var DropdownHeader = new Class('ui.DropdownHeader', {
    Implements: [Options, Events],

    options: {},

    initialize: function(element, options){
      this.element = element
      this.options = Object.merge(this.options, options)
      this.addEvents()
      this.element.store('dropdown_header', this)
    },

    addEvents: function(){
      this.element.addEvent('mouseenter', this.onMouseEnter.bind(this))
      this.element.addEvent('mouseleave', this.onMouseLeave.bind(this))
    },

    onMouseEnter: function(event){
      this.killTimer()
      this.fireEvent('onDropdownHeaderEnter')
    },

    onMouseLeave: function(event){
      this.timer = this.fireEvent.delay(500, this, 'onDropdownHeaderLeave')
    },

    killTimer: function(event){
      if (this.timer) clearTimeout(this.timer)
    }
  })

  /**
   * DROPDOWN PANEL
   */

  var DropdownPanel = new Class('ui.DropdownPanel', {
    Implements: [Options, Events],

    options: {
      openAtStart: false
    },

    initialize: function(element, options){
      this.element = element
      this.options = Object.merge(this.options, options)
      this.build()
      this.addEvents()
      this.element.store('dropdown_panel', this)
    },

    build: function(){
      this.hide()
      if (this.options.openAtStart) this.show()
    },

    addEvents: function(){
      this.element.addEvent('mouseenter', this.onMouseEnter.bind(this))
      this.element.addEvent('mouseleave', this.onMouseLeave.bind(this))
    },

    show: function(event){
      this.element.show()
    },

    hide: function(event){
      this.element.hide()
    },

    onMouseEnter: function(event){
      this.fireEvent('onDropdownPanelEnter')
    },

    onMouseLeave: function(event){
      this.fireEvent('onDropdownPanelLeave')
    }
  })
})()