             Filters applying
             <ul>
              {
-              for filter, i in @state.nowFilterList
+              for {value, menu}, i in @state.nowFilterList
                 <li key="applied-filter-#{i}">
-                  {@state.categories[filter.id].filterClass.textFunc filter.value}
+                  {menu.textFunc? value}
                   <i className="fa fa-times remove-filter-icon"
                     onClick={@handleRemoveFilter.bind(this, i)}></i>
                 </li>

{React, ReactDOM} = window
{Input, Button, Table, Well, Panel, ListGroup, ListGroupItem, Alert} = ReactBootstrap

HasMapHpFilter = React.createClass
  statics:
    label: 'Map clearance'
    id: 'maphp'
    func: (value, record) -> (record.map?.hp?[0] > 0) == value
    textFunc: (value) ->
      "On a map that has #{if value then 'not ' else ''}been cleared"

  onChange: -> 
    value = @refs.input.getValue()
    result = if value == 'none'
      undefined
    else
      value == 'true'
    @props.onChange? result

  render: ->
    options = @props.options || {}
    <Input type="select" placeholder="select" ref='input' onChange={@onChange} 
      {...options} >
      <option value="none">Select...</option>
      <option value="true">A map that has not been cleared</option>
      <option value="false">A map that has been cleared</option>
    </Input>

HasShipIdFilter = React.createClass
  statics:
    label: 'Ship'
    id: 'hasship'
    func: (value, record) ->
      a = record.fleet.concat(record.fleet2 || []).filter(
        (sh) -> sh.shipId.toString() == value.toString())
      a.length != 0
    textFunc: (value) ->
      "With ship #{value}"

  onChange: -> 
    value = @refs.input.getValue()
    result = if value?.length == 0
      undefined
    else
      value
    @props.onChange? result

  render: ->
    options = @props.options || {}
    <Input type="text" ref='input' placeholder='Enter your ship id here'
      onChange={@onChange} {...options} />

FilterSelector = React.createClass
  getInitialState: ->
    activeCategory: null
    filterDetail: null
    nowFilterList: []
    categories: {}

  statics:
    categories: [
      HasMapHpFilter,
      HasShipIdFilter
    ]

  componentDidMount: ->
    categories = {}
    for filterClass in @constructor.categories
      categories[filterClass.id] = 
        label: filterClass.label
        filterClass: filterClass
    @setState {categories}

  generateFilterFunc_: (filterList) ->
    if filterList.length == 0
      return -> true
    filterList = JSON.parse(JSON.stringify(filterList))
    funcs = filterList.map ({id, value}) =>
      @state.categories[id]?.filterClass.func.bind(this, value)
    (record) ->
      funcs.every (f) -> f(record)

  handleCategory: (e) ->
    @setState
      activeCategory: e.target.value
      filterDetail: null

  handleFilterDetailChange: (value) ->
    @setState
      filterDetail: value

  handleAddFilter: ->
    nowFilterList = @state.nowFilterList
    nowFilterList.push
      id: @state.activeCategory
      value: @state.filterDetail
    @setState
      activeCategory: 'none'
      nowFilterList: nowFilterList
    @filterChangeTo(nowFilterList)


      @props.onFilterChanged @generateFilterFunc_(nowFilterList)

  render: ->
    <div>
      <Panel collapsible defaultExpanded header="Filter">
        <form className="form-horizontal">
          <ListGroup fill>
           {
            nowMenu = {sub: @constructor.menuTree}
            console.log nowMenu
            for id, level in @state.nowMenuPath
              nowMenu = nowMenu.sub[id]
              console.log id, level, nowMenu
              if nowMenu? && !nowMenu.value?
                options = Object.assign 
                  labelClassName: 'col-xs-1'
                  wrapperClassName: 'col-xs-11'
                  label: (['Category', 'Detail'][level] || ' ')
                  bsSize: 'medium'
                  nowMenu.options
                # A selection input
                if nowMenu.sub?
                  <Input type='select'
                    onChange={@handleInputSelectChange.bind(this, level)}
                    {...options} >
                    <option value='none'>Select...</option>
                    {
                      for subId, subItem of nowMenu.sub
                        <option value={subId} key={"option-#{level}-#{subId}"}>
                          {subItem.title}
                        </option>
                    }
                  </Input>

                # A text input
                else
                  <Input type="text" onChange={@handleInputTextChange}
                    {...options} />
           }
          </ListGroup>
          {
            lastMenu = @state.nowLastMenu
            console.log 'last', lastMenu
            if !lastMenu? || !lastMenu.sub?
              valid = @state.applyEnabled
              <Button disabled={!valid} onClick={@handleAddFilter}>Apply</Button>
          }
        </form>
      </Panel>
      {
