     @puzzle = puzzle_app
 
     @puzzle_xy = [100,30]
+
+    @bottom_margin = [100,246,420,34]
+    @right_margin = [484,0,36,246]
 
     @backgrounds = ["#cc5050","#80cc50","#50b4cc",
                     "#b450cc","#cc8050","#50cc50",




###############################################################################
## FIXME Saving this method from a discontinued class
#       as an example because the redraw works correctly.
#  draw_piece:  (a,b) ->
#    @pc_img = document.getElementById("piece")
#    if @grid_model.in_range(a,b)
#      xy = @grid_model.get_xy(a,b)
#      xx = xy[0]+@dx
#      yy = xy[1]+@dy

#      @context.drawImage(@redraw,@redraw_x,@redraw_y) if @redraw_active
#      ctx = @redraw.getContext('2d')
#      ctx.drawImage(@canvas,xx,yy,@width,@height,0,0,@width,@height)
#      @redraw_active = true
#      @redraw_x = xx
#      @redraw_y =yy

#      @context.drawImage(@pc_img,xx,yy)
#    else
#      @context.drawImage(@pc_img,0,100)
###############################################################################



class PieceRedrawBuffer
# TODO Set a height delta of 10px if anchor hex column is odd?

  constructor: () ->
    @redraw = document.createElement('canvas')

    @redraw.width = @width
    @redraw.height = @height

    @redraw_x = 0
    @redraw_y = 0
    @redraw_active = false

  reset_size: (x,y) ->
    # TODO this resets the w&h for this object but not for @redraw
    @width = x
    @height = y

#    @dim = @get_dim()
#    @width = @dim[0]
#    @height = @dim[1]
#    @redraw.reset_size(@width,@height)

#    dxy = @get_piece_xy_offset()
#    @dx = dxy[0]
#    @dy = dxy[1]



class PieceRenderBox

  constructor: (piece) ->

    @piece = piece
    @metrics_report = false


  set_box_dimensions: () ->

    left = 30
    right = 0
    top = 100
    bottom = 0
    hx_top = 12
    hx_bottom = 0
    high_hex_col = null
    low_hex_col = null
    @high_hex_adjust = false

    @hexes = @piece.hexes
    for hx in @hexes
      aa = hx[0]
      bb = hx[1]
      b = 5 + 10*(bb-1) + 5*(aa%2)
      left = aa if aa < left
      right = aa if aa > right
      if b < top
        top = b
        hx_top = bb
        high_hex_col = aa
      if b > bottom
        bottom = b
        hx_bottom = bb
        low_hex_col = aa

    @anchor_hex = [left,hx_top]
    anchor_top = 5 + 10*(hx_top-1) + 5*(left%2)

    cols = right - left + 1
    halves = (bottom - top)/5 + 2
    @width = 6 + cols*14
    @height = halves*10

    a = @anchor_hex[0]
    b = @anchor_hex[1]
    if anchor_top > top
      high_hex_half_step = true
    else
      high_hex_half_step = false
    
    x = a*14+7
    y = b*20-12
    @box_xy = [x,y]

    ca_x = 10
    if high_hex_half_step then ca_y = 19 else ca_y = 9
    @center_to_anchor_delta = [ca_x,ca_y]


    if halves % 2 == 1
      if (high_hex_col - a) % 2 == 0 and a%2 == 1 then @high_hex_adjust = true

      anchor_in_hexes = false
      ax = @anchor_hex[0]
      ay = @anchor_hex[1]
      for hx in @hexes
        anchor_in_hexes = true if hx[0] == ax and hx[1] == ay

      if (not anchor_in_hexes) and (high_hex_col - a) % 2 == 1 and anchor_top < top
        console.log("Non-rendered anchor hex is out of bounds (higher than high hex).") if @metrics_report == true
        @high_hex_adjust = true

    if @metrics_report == true
      console.log("PieceRenderBox:")
      console.log("    top = "+top)
      console.log("    anchor_top = "+anchor_top)
      console.log("    high_hex_half_step = "+high_hex_half_step)
      console.log("    bottom = "+bottom)
      console.log("    left = "+left)
      console.log("    right = "+right)
      console.log("    center to anchor delta = "+@center_to_anchor_delta[0]+","+@center_to_anchor_delta[1])
  #    console.log("     = "+)
  #    console.log("     = "+)
      console.log("    cols = "+cols)
      console.log("    halves = "+halves)
      console.log("    WIDTH = "+@width)
      console.log("    HEIGHT = "+@height)
      console.log("    BOX-XY = "+@box_xy[0]+","+@box_xy[1])
      console.log("    HIGH HEX ADJUST = "+@high_hex_adjust)
      console.log("    ANCHOR HEX = "+@anchor_hex[0]+","+@anchor_hex[1])




    @context = @get_drawing_context("canvas")
    @img = document.getElementById("photo")
    @context.drawImage(@img,@puzzle_xy[0],@puzzle_xy[1])


  clear_margins: () ->
    bt = @bottom_margin
    rt = @right_margin
    @context = @get_drawing_context("canvas")
    @context.clearRect(bt[0],bt[1],bt[2],bt[3])
    @context.clearRect(rt[0],rt[1],rt[2],rt[3])


  get_drawing_context: (mode) ->
