       @div outlet: 'lineNumbers', class: 'line-numbers'
 
   firstScreenRow: -1
+  highestNumberWidth: null
 
   afterAttach: (onDom) ->
     @editor()?.on 'cursor-move', => @highlightCursorLine()
+    @calculateWidth() if onDom
 
   editor: ->
     @parentView
+
+  lineNumberPadding: ->
+    widthTesterElement = $$ -> @div {class: 'line-number'}, ""
+    @append(widthTesterElement)
+    lineNumberPadding = widthTesterElement.outerWidth()
+    widthTesterElement.remove()
+    lineNumberPadding
 
   renderLineNumbers: (startScreenRow, endScreenRow) ->
     @firstScreenRow = startScreenRow

{View, $$$} = require 'space-pen'

$ = require 'jquery'
_ = require 'underscore'

    @highlightCursorLine()

  calculateWidth: ->
    highestNumberWidth = @editor().getLineCount().toString().length * @editor().charWidth
    if highestNumberWidth != @highestNumberWidth
      @highestNumberWidth = highestNumberWidth
      @lineNumbers.width(highestNumberWidth + @lineNumberPadding())
      @widthChanged?(@outerWidth())

  highlightCursorLine: ->
    cursorScreenRow = @editor().getCursorScreenPosition().row
    screenRowIndex = cursorScreenRow - @firstScreenRow
    @find(".line-number.cursor-line-number").removeClass('cursor-line-number')
    @find(".line-number:eq(#{screenRowIndex})").addClass('cursor-line-number')
