         @ctx.fillRect x,y,rectWidth,rectHeight
         @ctx.strokeText c,x + 3,y + 12,rectWidth
 
-      # check for selection
-      if selection.indexOf(j) >= 0
-        @ctx.lineWidth = 2
-        @ctx.fillStyle = "red"
-        @ctx.strokeRect x,y,rectWidth,rectHeight
-        @ctx.lineWidth = 1
-
       x = x + rectWidth
-
       # out of viewport - stop
       if x > @el.width
         break
+
+  drawSeqExtended: (data) ->
+    seq = data.model.get "seq"
+    rectWidth = @g.zoomer.get "columnWidth"
+    rectHeight = @g.zoomer.get "rowHeight"
+
+    start = Math.max 0, Math.abs(Math.ceil( - @g.zoomer.get('_alignmentScrollLeft') / rectWidth))
+    x = - Math.abs( - @g.zoomer.get('_alignmentScrollLeft') % rectWidth)
+    xZero = x - start * rectWidth
+
+    selection = @_getSelection data.model
+    [mPrevSel,mNextSel] = @_getPrevNextSelection data.model
+    features = data.model.get "features"
+
+    yZero = Math.ceil(data.y / rectHeight) * rectHeight
+
+    for j in [start.. seq.length - 1] by 1
+      starts = features.startOn j
+      if starts.length > 0
+        for f in starts
+          @appendFeature f: f,xZero: x, yZero: yZero
+
+      x = x + rectWidth
+      # out of viewport - stop
+      if x > @el.width
+        break
+
+    @_appendSelection model: data.model, xZero: xZero, yZero: yZero
 
   _onclick: (e) ->
     coords = mouse.getMouseCoords e

    rectHeight = @g.zoomer.get "rowHeight"

    @ctx.font="14px Courier New"
    #@ctx.font="14px Lucida Console"

    x = - @g.zoomer.get "_alignmentScrollLeft"
    # skip unneeded blocks at the beginning
    start = Math.max 0, - Math.ceil(x / rectWidth)
    x = 0

    selection = @_getSelection data.model

    for j in [start.. seq.length - 1] by 1
      c = seq[j]


    return selection

  appendFeature: (data) ->
    f = data.f
    # TODO: this is a very naive way of using SVG to display features
    boxWidth = @g.zoomer.get("columnWidth")
    boxHeight = @g.zoomer.get("rowHeight")
    width = (f.get("xEnd") - f.get("xStart")) * boxWidth

    beforeWidth = @ctx.lineWidth
    @ctx.lineWidth = 3
    beforeStyle = @ctx.strokeStyle
    @ctx.strokeStyle = f.get "fillColor"


    @ctx.strokeRect data.xZero, data.yZero, width,boxHeight
    @ctx.strokeStyle = beforeStyle
    @ctx.lineWidth = beforeWidth

  # displays the current user selection
  # and checks the prev and next row for selection  -> no borders in a selection
  _renderSelection: (data) ->

    xZero = data.xZero
    yZero = data.yZero
    n = data.n
    selection = data.selection
    mPrevSel= data.mPrevSel
    mNextSel = data.mNextSel

    # get the length of this selection
    selectionLength = 0
    for i in [n.. data.model.get("seq").length - 1] by 1

      if selection.indexOf(i) >= 0
        selectionLength++
      else
        break

    # TODO: ugly!
    boxWidth = @g.zoomer.get("columnWidth")
    boxHeight = @g.zoomer.get("rowHeight")
    totalWidth = (boxWidth * selectionLength) + 1

    hidden = @g.columns.get('hidden')

    @ctx.beginPath()
    beforeWidth = @ctx.lineWidth
    @ctx.lineWidth = 3
    beforeStyle = @ctx.strokeStyle
    @ctx.strokeStyle = "#FF0000"

    xZero += n * boxWidth

    # split up the selection into single cells
    xPart = 0
    for i in [0.. selectionLength - 1]
      xPos = n + i
      if hidden.indexOf(xPos) >= 0
        continue
      # upper line
      unless mPrevSel? and mPrevSel.indexOf(xPos) >= 0
        @ctx.moveTo xZero + xPart, yZero
        @ctx.lineTo xPart + boxWidth + xZero, yZero
      # lower line
      unless mNextSel? and mNextSel.indexOf(xPos) >= 0
        @ctx.moveTo xPart + xZero, boxHeight + yZero
        @ctx.lineTo xPart + boxWidth + xZero, boxHeight + yZero

      xPart += boxWidth

    # left
    @ctx.moveTo xZero,yZero
    @ctx.lineTo xZero, boxHeight + yZero

    # right
    @ctx.moveTo xZero + totalWidth,yZero
    @ctx.lineTo xZero + totalWidth, boxHeight + yZero

    @ctx.stroke()
    @ctx.strokeStyle = beforeStyle
    @ctx.lineWidth = beforeWidth

  _appendSelection: (data) ->
    seq = data.model.get("seq")
    selection = @_getSelection data.model
    hidden = @g.columns.get "hidden"
    # get the status of the upper and lower row
    [mPrevSel,mNextSel] = @_getPrevNextSelection data.model

    boxWidth = @g.zoomer.get("columnWidth")
    boxHeight = @g.zoomer.get("rowHeight")

    # avoid unnecessary loops
    return if selection.length is 0

    hiddenOffset = 0
    for n in [0..seq.length - 1] by 1
      if hidden.indexOf(n) >= 0
        hiddenOffset++
      else
        k = n - hiddenOffset
        # only if its a new selection
        if selection.indexOf(n) >= 0 and (k is 0 or selection.indexOf(n - 1) < 0 )
          @_renderSelection n:n,selection: selection,mPrevSel: mPrevSel,mNextSel:mNextSel, xZero: data.xZero, yZero: data.yZero, model: data.model



  _adjustWidth: ->
    if @el.parentNode?
