         .html('<i class="hx-icon hx-icon-step-forward"></i>')
         .on 'click', 'hx.paginator', ->
           if self._.pageCount is undefined
-            select(self, self.selected + 1, 'user')
+            select(self, self._.page + 1, 'user')
           else
             select(self, self._.pageCount, 'user')
 
     @container.on 'resize', 'hx.paginator', -> render(self)
-
-    @_.visibleCount = 10
-    @_.pageCount = 10
-    @selected = 1
     render(this)
 
   page: (i) ->

    visibleCount = Math.max(visibleCount, 1)

    # XXX: Probably shouldn't run this twice every time
    {start, end} = getRange(paginator.selected, visibleCount, paginator._.pageCount)

    data = hx.range(end - start).map (i) ->
      {
        value: start + i
        selected: paginator.selected == start + i
        dataLength: maxLength
      }

  paginator.view.apply(data)

select = (paginator, i, cause) ->
  if paginator._.pageCount is undefined
    newPage = Math.max(i, 1)
  else
    newPage = hx.clamp(1, paginator._.pageCount, i)

  if newPage != paginator.selected
    paginator.selected = newPage
    render(paginator)
    paginator.emit 'change', {cause: cause, selected: paginator.selected}


class Paginator extends hx.EventEmitter
  constructor: (selector) ->
    super

    hx.component.register(selector, this)

    @container = hx.select(selector).classed('hx-paginator', true)
    @_ =
      selector: selector

    self = this


      select(@, i, 'api')
      this
    else
      @_.page

  pageCount: (value) ->
    if value?
