         .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) ->

      select(@, i, 'api')
      this
    else
      @selected


  pageCount: (value) ->
    if value?

getRange = (obj) ->
  start = Math.max(1, obj.page - Math.floor(obj.visibleCount / 2))
  end = Math.min(start + obj.visibleCount, obj.pageCount + 1)
  start = Math.max(1, end - obj.visibleCount)
  {start: start, end: end}

render = (paginator) ->

  if paginator._.pageCount is undefined
    data = [{
      value: paginator._.page
      selected: true
      dataLength: paginator._.page.toString().length
    }]
  else
    {start, end} = getRange(paginator._)

    maxLength = Math.max(start.toString().length, (end - 1).toString().length)
    buttonSize = 30 + (5 * Math.max(0, maxLength - 2))
