     ['#players']
   ]
 
-window.loadAndShowRankHistory = (players, fromYear, toYear) ->
+T.def 'player-field', (player, index) ->
+  return  if index >= 50
+
+  name = player.first + " " + player.last
+  value = (player.first + "_" + player.last).toLowerCase().replace(/[ -]/g, "_")
+  [
+    [ 'div.player'
+      [ 'input'
+        type: 'checkbox'
+        name: 'player'
+        value: value
+      ]
+      ['span', name]
+    ]
+    ['br'] if index % 5 is 4
+  ]
+
+loadAndShowRankHistory = (players, fromYear, toYear) ->
   if players.length is 0
     alert "No player is chosen!"
     return

      .margin(left: 20, right: 40)
      .color(d3.scale.category10().range())
    chart.xAxis.rotateLabels(30)
      .tickValues( do -> $.map getYears(), (year) -> Date.parse "1/1/" + year)
      .tickFormat((d) -> d3.time.format("%x")(new Date(d)))

    chart.yAxis.tickValues([0, 10, 20, 30, 40, 45, 46, 47, 48, 49])

FIRST_YEAR = 2003
THIS_YEAR  = new Date().getYear() + 1900
YEARS      = [FIRST_YEAR..THIS_YEAR]

T.def 'rank-history', (fromYear, toYear) ->
  [
    [ 'h2'
      'ATP rank history'
      [ 'span.generated-note'
        ' (generated at '
        [ 'span.generated-at' ]
        ' )'
      ]
    ]
    ['#rank-history', ['svg']]
    [ '#timespan'
      'Time span: '
      [ 'select'
        name: 'fromYear'
        #change: ->
        #  fromYear = $(this).val()
        #  toYear   = $("[name = toYear]").val()
        #  $("[name=toYear]").html ""
        #  year = parseInt(fromYear)

        #  while year <= THIS_YEAR
        #    $("[name=toYear]").append "<option>" + year + "</option>"
        #    year++

        #  $("[name=toYear]").val (if toYear then toYear else THIS_YEAR)

        renderComplete: (el) -> $(el).val(fromYear)

        for year in YEARS
          ['option', year]
      ]
      ' - '
      [ 'select'
        name: 'toYear'
        renderComplete: (el) -> $(el).val(toYear)

        for year in YEARS
          ['option', year]
      ]
      [ 'button.update', 
        click: ->
          players = []
          $("[name=player]:checked").each -> players.push(@value)

          if players.length is 0
            alert "No player is selected."
          else
            window.location.hash = "#/rank-history/#{players.join(',')}?fromYear=#{$("[name=fromYear]").val()}&toYear=#{$("[name=toYear]").val()}"

        'Update graph'
      ]
