         @ctx.fillStyle = "#" + color
         @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
+
+  _onclick: (e) ->
+    coords = mouse.getMouseCoords e
+    rectWidth = @g.zoomer.get "columnWidth"
+    rectHeight = @g.zoomer.get "rowHeight"
+    coords[0] += Math.floor(@g.zoomer.get("_alignmentScrollLeft") / rectWidth) * rectWidth
+    coords[1] += Math.floor(@g.zoomer.get("_alignmentScrollTop") / rectHeight) * rectHeight
+    x = Math.floor(coords[0] / rectWidth )
+    y = Math.floor(coords[1] / rectHeight)
+    seqId = @model.at(y).get "id"
+    @g.trigger "residue:click", {seqId:seqId, rowPos: x, evt:e}
+    console.log x,y
+    @render()
 
   render: ->
 


    #@el.setAttribute 'width', 300
    #@el.style.width = 300

  draw: ->
    @removeViews()

     paddingLeft += @g.zoomer.get "metaWidth" if @g.vis.get "metacell"
     return paddingLeft

  # TODO: should I be moved to the selection manager?
  # returns an array with the currently selected residues
  # e.g. [0,3] = pos 0 and 3 are selected
  _getSelection: (model) ->
    maxLen = model.get("seq").length
    selection = []
    sels = @g.selcol.getSelForRow model.get "id"
    rows = _.find sels, (el) -> el.get("type") is "row"
    if rows?
      # full match
      for n in [0..maxLen - 1] by 1
        selection.push n
    else if sels.length > 0
      for sel in sels
        for n in [sel.get("xStart")..sel.get("xEnd")] by 1
          selection.push n

    return selection


  _adjustWidth: ->
    if @el.parentNode?
      parentWidth = @el.parentNode.offsetWidth
