       @setState "#{stateKey}": (@state[stateKey] + 5)
 
 
-  _renderScore: (limit) =>
-    (score, i) =>
-      modsText =
-        if score.mods.length
-          " +#{(mod.shortName for mod in score.mods).join(',')} "
-        else
-          ' '
+  _renderScore: (score, i, limit) ->
+    modsText =
+      if score.mods.length
+        " +#{(mod.shortName for mod in score.mods).join(',')} "
+      else
+        ' '
 
-      topClasses = 'profile-extra-entries__item profile-extra-entries__item--top-ranks'
-      if (i + 1) > limit
-        topClasses += ' hidden'
+    topClasses = 'profile-extra-entries__item profile-extra-entries__item--top-ranks'
+    if (i + 1) > limit
+      topClasses += ' hidden'
 
-      title = "#{score.beatmapSet.data.title} [#{score.beatmap.data.version}]#{modsText}(#{Math.round(score.accuracy * 100, 2)}%)"
+    title = "#{score.beatmapSet.data.title} [#{score.beatmap.data.version}]#{modsText}(#{Math.round(score.accuracy * 100, 2)}%)"
 
-      li
-        key: score.id
-        className: topClasses
+    li
+      key: score.id
+      className: topClasses
+      div
+        className: 'profile-extra-entries__icon'
+        div className: "badge-rank badge-rank--#{score.rank}"
+
+      div className: 'profile-extra-entries__detail profile-extra-entries__detail--vertical',
         div
-          className: 'profile-extra-entries__icon'
-          div className: "badge-rank badge-rank--#{score.rank}"
-
-        div className: 'profile-extra-entries__detail profile-extra-entries__detail--vertical',
+          className: 'profile-extra-entries__detail-row'
           div
-            className: 'profile-extra-entries__detail-row'
-            div
-              className: 'profile-extra-entries__detail-column profile-extra-entries__detail-column--full'
-              a
-                href: score.beatmap.data.url
-                className: 'profile-extra-entries__text-score profile-extra-entries__text-score--title'
-                title: title
-                title
+            className: 'profile-extra-entries__detail-column profile-extra-entries__detail-column--full'
+            a
+              href: score.beatmap.data.url
+              className: 'profile-extra-entries__text-score profile-extra-entries__text-score--title'
+              title: title
+              title
+          div
+            className: 'profile-extra-entries__detail-column'
+            span
+              className: 'profile-extra-entries__text-score profile-extra-entries__text-score--pp'
+              Lang.get('users.show.extra.top_ranks.pp', amount: Math.round(score.pp))
+        div
+          className: 'profile-extra-entries__detail-row'
+          div
+            className: 'profile-extra-entries__detail-column profile-extra-entries__detail-column--full'
+            span
+              className: 'profile-extra-entries__text-score profile-extra-entries__text-score--time'
+              dangerouslySetInnerHTML:
+                __html: osu.timeago score.created_at
+          if score.weight != undefined
             div
               className: 'profile-extra-entries__detail-column'
               span
-                className: 'profile-extra-entries__text-score profile-extra-entries__text-score--pp'
-                Lang.get('users.show.extra.top_ranks.pp', amount: Math.round(score.pp))
-          div
-            className: 'profile-extra-entries__detail-row'
-            div
-              className: 'profile-extra-entries__detail-column profile-extra-entries__detail-column--full'
-              span
-                className: 'profile-extra-entries__text-score profile-extra-entries__text-score--time'
-                dangerouslySetInnerHTML:
-                  __html: osu.timeago score.created_at
-            if score.weight != undefined
-              div
-                className: 'profile-extra-entries__detail-column'
-                span
-                  className: 'profile-extra-entries__text-score'
-                  Lang.get 'users.show.extra.top_ranks.weighted_pp',
-                    percentage: "#{Math.round(score.weight.data.percentage)}%"
-                    pp: Lang.get('users.show.extra.top_ranks.pp', amount: Math.round(score.weight.data.pp))
+                className: 'profile-extra-entries__text-score'
+                Lang.get 'users.show.extra.top_ranks.weighted_pp',
+                  percentage: "#{Math.round(score.weight.data.percentage)}%"
+                  pp: Lang.get('users.show.extra.top_ranks.pp', amount: Math.round(score.weight.data.pp))
 
 
-  render: =>
+  render: ->
     div
       className: 'osu-layout__row osu-layout__row--page profile-extra'
       div className: 'profile-extra__anchor js-profile-page-extra--scrollspy', id: 'top_ranks'

{div, h2, h3, ul, li, a, p, pre, span} = React.DOM
el = React.createElement

class ProfilePage.TopRanks extends React.Component
  constructor: (props) ->
    @state =
      limitBest: 5
      limitFirst: 5

    super props


  _increaseLimit: (mode) =>
    (e) =>
      e.preventDefault()
      stateKey =

        h3 className: 'profile-extra__title--small', Lang.get('users.show.extra.top_ranks.first.title')
        if @props.scoresFirst && @props.scoresFirst.length
          ul className: 'profile-extra-entries',
            @props.scoresFirst.map (score, i) => @_renderScore(score, i, @state.limitFirst)
            if @state.limitFirst < @props.scoresFirst.length
              li className: 'profile-extra-entries__item profile-extra-entries__item--show-more',
                a href: '#', onClick: @_increaseLimit('first'), 'show more'
