###
Chosen for Protoype.js
by Patrick Filler for Harvest

Copyright (c) 2011 Harvest

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
###

root = exports ? this

class Chosen

  constructor: (elmn) ->
    this.set_default_values()
    
    @form_field = elmn
    @is_multiple = @form_field.multiple

    @default_text_default = if @form_field.multiple then "Select Some Options" else "Select an Option"

    this.set_up_html()
    this.register_observers()


  set_default_values: ->
    
    @click_test_action = (evt) => this.test_active_click(evt)
    @active_field = false
    @mouse_on_container = false
    @results_showing = false
    @result_highlighted = null
    @result_single_selected = null
    @choices = 0

    # HTML Templates
    @single_temp = new Template('<a href="#" class="chzn-single"><span>#{default}</span><div><b></b></div></a><div class="chzn-drop" style="left:-9000px;"><div class="chzn-search"><input type="text" /></div><ul class="chzn-results"></ul></div>')
    @multi_temp = new Template('<ul class="chzn-choices"><li class="search-field"><input type="text" value="#{default}" class="default" style="width:25px;" /></li></ul><div class="chzn-drop" style="left:-9000px;"><ul class="chzn-results"></ul></div>')
    @choice_temp = new Template('<li class="search-choice" id="#{id}"><span>#{choice}</span><a href="#" class="search-choice-close" rel="#{position}"></a></li>')
    @no_results_temp = new Template('<li class="no-results">No results match "<span>#{terms}</span>"</li>')


  set_up_html: ->
    @container_id = @form_field.id + "_chzn"
    
    @f_width = if @form_field.getStyle("width") then parseInt @form_field.getStyle("width"), 10 else @form_field.getWidth()
    
    container_props =
      'id': @container_id
      'class': 'chzn-container'
      'style': 'width: ' + (@f_width) + 'px' #use parens around @f_width so coffeescript doesn't think + ' px' is a function parameter
    
    @default_text = if @form_field.readAttribute 'title' then @form_field.readAttribute 'title' else @default_text_default
    
    base_template = if @is_multiple then new Element('div', container_props).update( @multi_temp.evaluate({ "default": @default_text}) ) else new Element('div', container_props).update( @single_temp.evaluate({ "default":@default_text }) )

    @form_field.hide().insert({ after: base_template })
    @container = $(@container_id)
    @container.addClassName( "chzn-container-" + (if @is_multiple then "multi" else "single") )
    @dropdown = @container.down('div.chzn-drop')
    
    dd_top = @container.getHeight()
    dd_width = (@f_width - get_side_border_padding(@dropdown))
    
    @dropdown.setStyle({"width": dd_width  + "px", "top": dd_top + "px"})

    @search_field = @container.down('input')
    @search_results = @container.down('ul.chzn-results')
    this.search_field_scale()

    @search_no_results = @container.down('li.no-results')
    
    if @is_multiple
      @search_choices = @container.down('ul.chzn-choices')
      @search_container = @container.down('li.search-field')
    else
      @search_container = @container.down('div.chzn-search')
      @selected_item = @container.down('.chzn-single')
      sf_width = dd_width - get_side_border_padding(@search_container) - get_side_border_padding(@search_field)
      @search_field.setStyle( {"width" : sf_width + "px"} )
    
    this.results_build()
    this.set_tab_index()


  register_observers: ->
    @container.observe "click", (evt) => this.container_click(evt)
    @container.observe "mouseenter", (evt) => this.mouse_enter(evt)
    @container.observe "mouseleave", (evt) => this.mouse_leave(evt)
    
    @search_results.observe "click", (evt) => this.search_results_click(evt)
    @search_results.observe "mouseover", (evt) => this.search_results_mouseover(evt)
    @search_results.observe "mouseout", (evt) => this.search_results_mouseout(evt)
    
    @form_field.observe "liszt:updated", (evt) => this.results_update_field(evt)

    @search_field.observe "blur", (evt) => this.input_blur(evt)
    @search_field.observe "keyup", (evt) => this.keyup_checker(evt)
    @search_field.observe "keydown", (evt) => this.keydown_checker(evt)

    if @is_multiple
      @search_choices.observe "click", (evt) => this.choices_click(evt)
      @search_field.observe "focus", (evt) => this.input_focus(evt)
    else
      @selected_item.observe "focus", (evt) => this.activate_field(evt)


  container_click: (evt) ->
    if evt and evt.type is "click"
      evt.stop()
    if not @pending_destroy_click
      if not @active_field
        @search_field.clear() if @is_multiple
        document.observe "click", @click_test_action
        this.results_show()
      else if not @is_multiple and evt and (evt.target is @selected_item || evt.target.up("a.chzn-single"))
        this.results_show()

      this.activate_field()
    else
      @pending_destroy_click = false

  mouse_enter: -> @mouse_on_container = true
  mouse_leave: -> @mouse_on_container = false

  input_focus: (evt) ->
    setTimeout this.container_click.bind(this), 50 unless @active_field
  
  input_blur: (evt) ->
    if not @mouse_on_container
      @active_field = false
      setTimeout this.blur_test.bind(this), 100

  blur_test: (evt) ->
    this.close_field() if not @active_field and @container.hasClassName("chzn-container-active")

  close_field: ->
    document.stopObserving "click", @click_test_action
    
    if not @is_multiple
      @selected_item.tabIndex = @search_field.tabIndex
      @search_field.tabIndex = -1
    
    @active_field = false
    this.results_hide()

    @container.removeClassName "chzn-container-active"
    this.winnow_results_clear()
    this.clear_backstroke()

    this.show_search_field_default()
    this.search_field_scale()

  activate_field: ->
    if not @is_multiple and not @active_field
      @search_field.tabIndex = @selected_item.tabIndex
      @selected_item.tabIndex = -1

    @container.addClassName "chzn-container-active"
    @active_field = true

    @search_field.value = @search_field.value
    @search_field.focus()


  test_active_click: (evt) ->
    if evt.target.up('#' + @container.id)
      @active_field = true
    else
      this.close_field()

  results_build: ->
    startTime = new Date()
    @parsing = true
    @results_data = OptionsParser.select_to_array @form_field

    if @is_multiple and @choices > 0
      @search_choices.select("li.search-choice").invoke("remove")
      @choices = 0
    else if not @is_multiple
      @selected_item.down("span").update(@default_text)

    content = ''
    for data in @results_data
      if data.group
        content += this.result_add_group data
      else
        content += this.result_add_option data
        if data.selected and @is_multiple
          this.choice_build data
        else if data.selected and not @is_multiple
          @selected_item.down("span").update( data.text )

    this.show_search_field_default()
    @search_results.update content
    @parsing = false


  result_add_group: (group) ->
    if not group.disabled
      group.dom_id = @form_field.id + "chzn_g_" + group.id
      '<li id="' + group.dom_id + '" class="group-result">' + group.label.escapeHTML() + '</li>'
    else
      ""
  
  result_add_option: (option) ->
    if not option.disabled 
      option.dom_id = @form_field.id + "chzn_o_" + option.id
      
      classes = if option.selected and @is_multiple then [] else ["active-result"]
      classes.push "result-selected" if option.selected
      classes.push "group-option" if option.group_id >= 0
      
      '<li id="' + option.dom_id + '" class="' + classes.join(' ') + '">' + option.text.escapeHTML() + '</li>'
    else
      ""

  results_update_field: ->
    this.result_clear_highlight()
    @result_single_selected = null
    this.results_build()

  result_do_highlight: (el) ->
      this.result_clear_highlight();

      @result_highlight = el;
      @result_highlight.addClassName "highlighted"

      maxHeight = parseInt @search_results.getStyle('maxHeight'), 10
      visible_top = @search_results.scrollTop
      visible_bottom = maxHeight + visible_top

      high_top = @result_highlight.positionedOffset().top
      high_bottom = high_top + @result_highlight.getHeight()

      if high_bottom >= visible_bottom
        @search_results.scrollTop = if (high_bottom - maxHeight) > 0 then (high_bottom - maxHeight) else 0
      else if high_top < visible_top
        @search_results.scrollTop = high_top
    
  result_clear_highlight: ->
    @result_highlight.removeClassName('highlighted') if @result_highlight
    @result_highlight = null

  results_show: ->
    if not @is_multiple
      @selected_item.addClassName('chzn-single-with-drop')
      if @result_single_selected
        this.result_do_highlight( @result_single_selected )

    dd_top = if @is_multiple then @container.getHeight() else (@container.getHeight() - 1)
    @dropdown.setStyle {"top":  dd_top + "px", "left":0}
    @results_showing = true

    @search_field.focus()
    @search_field.value = @search_field.value

    this.winnow_results()

  results_hide: ->
    @selected_item.removeClassName('chzn-single-with-drop') unless @is_multiple
    this.result_clear_highlight()
    @dropdown.setStyle({"left":"-9000px"})
    @results_showing = false


  set_tab_index: (el) ->
    if @form_field.tabIndex
      ti = @form_field.tabIndex
      @form_field.tabIndex = -1

      if @is_multiple
        @search_field.tabIndex = ti
      else
        @selected_item.tabIndex = ti
        @search_field.tabIndex = -1

  show_search_field_default: ->
    if @is_multiple and @choices < 1 and not @active_field
      @search_field.value = @default_text
      @search_field.addClassName "default"
    else
      @search_field.value = ""
      @search_field.removeClassName "default"

  search_results_click: (evt) ->
    target = if evt.target.hasClassName("active-result") then evt.target else evt.target.up(".active-result")
    if target
      @result_highlight = target
      this.result_select()

  search_results_mouseover: (evt) ->
    target = if evt.target.hasClassName("active-result") then evt.target else evt.target.up(".active-result")
    this.result_do_highlight( target ) if target

  search_results_mouseout: (evt) ->
    this.result_clear_highlight() if evt.target.hasClassName('active-result') or evt.target.up('.active-result')


  choices_click: (evt) ->
    evt.preventDefault()
    if( @active_field and not(evt.target.hasClassName('search-choice') or evt.target.up('.search-choice')) and not @results_showing )
      this.results_show()

  choice_build: (item) ->
    choice_id = @form_field.id + "_chzn_c_" + item.id
    @choices += 1
    @search_container.insert { before: @choice_temp.evaluate({"id":choice_id, "choice":item.text, "position":item.id}) }
    link = $(choice_id).down('a')
    link.observe "click", (evt) => this.choice_destroy_link_click(evt)

  choice_destroy_link_click: (evt) ->
    evt.preventDefault()
    @pending_destroy_click = true
    this.choice_destroy evt.target

  choice_destroy: (link) ->
    @choices -= 1
    this.show_search_field_default()

    this.results_hide() if @is_multiple and @choices > 0 and @search_field.value.length < 1

    this.result_deselect link.readAttribute("rel")
    link.up('li').remove()

  result_select: ->
    if @result_highlight
      high = @result_highlight
      this.result_clear_highlight();

      high.addClassName("result-selected")
      
      if @is_multiple 
        this.result_deactivate high
      else
        @result_single_selected = high
        
      position = high.id.substr(high.id.lastIndexOf("_") + 1 )
      item = @results_data[position]
      item.selected = true

      @form_field.options[item.select_index].selected = true

      if @is_multiple
        this.choice_build item
      else
        @selected_item.down("span").update(item.text)

      this.results_hide()
      @search_field.value = ""

      @form_field.simulate("change") if typeof Event.simulate is 'function'
      this.search_field_scale()

  result_activate: (el) ->
    el.addClassName("active-result").show()

  result_deactivate: (el) ->
    el.removeClassName("active-result").hide()

  result_deselect: (pos) ->
    result_data = @results_data[pos]
    result_data.selected = false

    @form_field.options[result_data.select_index].selected = false
    result = $(@form_field.id + "chzn_o_" + pos)
    result.removeClassName("result-selected").addClassName("active-result").show()

    this.result_clear_highlight()
    this.winnow_results()

    @form_field.simulate("change") if typeof Event.simulate is 'function'
    this.search_field_scale()

  results_search: (evt) ->
    if @results_showing
      this.winnow_results()
    else
      this.results_show()

  winnow_results: ->
    startTime = new Date()
    this.no_results_clear()

    results = 0

    searchText = if @search_field.value is @default_text then "" else @search_field.value.strip()
    regex = new RegExp('^' + searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'i')
    zregex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'i')

    for option in @results_data
      if not option.disabled
        if option.group
          $(option.dom_id).hide()
        else if not (@is_multiple and option.selected)
          found = false
          result_id = @form_field.id + "chzn_o_" + option.id
          
          if regex.test option.text
            found = true;
            results += 1;
          else if option.text.indexOf(" ") >= 0 or option.text.indexOf("[") == 0
            #TODO: replace this substitution of /\[\]/ with a list of characters to skip.
            parts = option.text.replace(/\[|\]/g, "").split(" ")
            if parts.length
              for part in parts
                if regex.test part
                  found = true
                  results += 1

          if found
            if searchText.length
              startpos = option.text.search zregex
              text = option.text.substr(0, startpos + searchText.length) + '</em>' + option.text.substr(startpos + searchText.length)
              text = text.substr(0, startpos) + '<em>' + text.substr(startpos)
            else
              text = option.text

            $(result_id).update text if $(result_id).innerHTML != text

            this.result_activate $(result_id)

            $(@results_data[option.group_id].dom_id).show() if option.group_id?
          else
            this.result_clear_highlight() if $(result_id) is @result_highlight
            this.result_deactivate $(result_id)

    if results < 1 and searchText.length
      this.no_results(searchText)
    else
      this.winnow_results_set_highlight()

  winnow_results_clear: ->
    @search_field.clear()
    lis = @search_results.select("li")

    for li in lis
      if li.hasClassName("group-result")
        li.show()
      else if not @is_multiple or not li.hasClassName("result-selected")
        this.result_activate li

  winnow_results_set_highlight: ->
    if not @result_highlight
      do_high = @search_results.down(".active-result")
      if(do_high)
        this.result_do_highlight do_high
  
  no_results: (terms) ->
    @search_results.insert @no_results_temp.evaluate({"terms":terms.escapeHTML()})
  
  no_results_clear: ->
    nr = null
    nr.remove() while nr = @search_results.down(".no-results")


  keydown_arrow: ->
    actives = @search_results.select("li.active-result")
    if actives.length
      if not @result_highlight
        this.result_do_highlight actives.first()
      else if @results_showing
        sibs = @result_highlight.nextSiblings()
        nexts = sibs.intersect(actives)
        this.result_do_highlight nexts.first() if nexts.length
      this.results_show() if not @results_showing

  keyup_arrow: ->
    if not @results_showing and not @is_multiple
      this.results_show()
    else if @result_highlight
      sibs = @result_highlight.previousSiblings()
      actives = @search_results.select("li.active-result")
      prevs = sibs.intersect(actives)

      if prevs.length
        this.result_do_highlight prevs.first()
      else
        this.results_hide() if @choices > 0
        this.result_clear_highlight()

  keydown_backstroke: ->
    if @pending_backstroke
      this.choice_destroy @pending_backstroke.down("a")
      this.clear_backstroke()
    else
      @pending_backstroke = @search_container.siblings("li.search-choice").last()
      @pending_backstroke.addClassName("search-choice-focus")

  clear_backstroke: ->
    @pending_backstroke.removeClassName("search-choice-focus") if @pending_backstroke
    @pending_backstroke = null

  keyup_checker: (evt) ->
    stroke = evt.which ? evt.keyCode
    this.search_field_scale()

    switch stroke
      when 8
        if @is_multiple and @backstroke_length < 1 and @choices > 0
          this.keydown_backstroke()
        else if not @pending_backstroke
          this.result_clear_highlight()
          this.results_search()
      when 13
        evt.preventDefault()
        this.result_select() if this.results_showing
      when 9, 13, 38, 40, 16
        # don't do anything on these keys
      else this.results_search()


  keydown_checker: (evt) ->
    stroke = evt.which ? evt.keyCode
    this.search_field_scale()

    this.clear_backstroke() if stroke != 8 and this.pending_backstroke
    
    switch stroke
      when 8
        @backstroke_length = this.search_field.value.length
      when 9
        @mouse_on_container = false
      when 13
        evt.preventDefault()
      when 38
        evt.preventDefault()
        this.keyup_arrow()
      when 40
        this.keydown_arrow()


  search_field_scale: ->
    if @is_multiple
      h = 0
      w = 0

      style_block = "position:absolute; left: -1000px; top: -1000px; display:none;"
      styles = ['font-size','font-style', 'font-weight', 'font-family','line-height', 'text-transform', 'letter-spacing']
      
      for style in styles
        style_block += style + ":" + @search_field.getStyle(style) + ";"
      
      div = new Element('div', { 'style' : style_block }).update(@search_field.value)
      document.body.appendChild(div)

      w = Element.measure(div, 'width') + 25
      div.remove()

      if( w > @f_width-10 )
        w = @f_width - 10

      @search_field.setStyle({'width': w + 'px'})

      dd_top = @container.getHeight()
      @dropdown.setStyle({"top":  dd_top + "px"})

root.Chosen = Chosen

document.observe 'dom:loaded', (evt) ->
  selects = $$(".chzn-select")
  new Chosen select for select in selects

get_side_border_padding = (elmt) ->
  layout = new Element.Layout(elmt)
  side_border_padding = layout.get("border-left") + layout.get("border-right") + layout.get("padding-left") + layout.get("padding-right")

root.get_side_border_padding = get_side_border_padding

root = exports ? this

class OptionsParser
  
  constructor: ->
    @group_index = 0
    @sel_index = 0
    @parsed = []

  add_node: (child) ->
    if child.nodeName is "OPTGROUP"
      this.add_group child
    else
      this.add_option child

  add_group: (group) ->
    group_id = @sel_index + @group_index
    @parsed.push
      id: group_id
      group: true
      label: group.label
      position: @group_index
      children: 0
      disabled: group.disabled
    this.add_option( option, group_id, group.disabled ) for option in group.childNodes
    @group_index += 1

  add_option: (option, group_id, group_disabled) ->
    if option.nodeName is "OPTION" and (@sel_index > 0 or option.text != "")
      if group_id || group_id is 0
        @parsed[group_id].children += 1
      @parsed.push
        id: @sel_index + @group_index
        select_index: @sel_index
        value: option.value
        text: option.text
        selected: option.selected
        disabled: ((group_disabled is true) ? group_disabled : option.disabled)
        group_id: group_id
      @sel_index += 1

OptionsParser.select_to_array = (select) ->
  parser = new OptionsParser()
  parser.add_node( child ) for child in select.childNodes
  parser.parsed
  
root.OptionsParser = OptionsParser