 
     matrix = svgElement.getCTM().multiply(transformationMatrix)
     matrixString = "#{matrix.a} #{matrix.b} #{matrix.c} #{matrix.d} #{matrix.e} #{matrix.f}"
-    $svg.attr("transform", "matrix(#{matrixString})")
+    $el.attr("transform", "matrix(#{matrixString})")
     @oldZoomLevel = zoomLevel

    p.x = mouse.x
    p.y = mouse.y

    p.matrixTransform(@transformationGroup.getCTM().inverse())

    transformationMatrix = svgElement.createSVGMatrix()
      .translate(p.x, p.y)


class PanZoomSVG

  constructor : (@$el) ->

    EventMixin.extend(this)

    @buffer = 0
    @mouseDown = false
    @oldZoomLevel = 1

    $el
      .on("mousedown", @mouseDownHandler)
      .on("mouseup", @mouseUpHandler)
      .on("mousemove", @mouseMoveHandler)
      .on("mousewheel", @mouseWheelHandler)

  mouseDownHandler : => @mouseDown = true; return
  mouseUpHandler : => @mouseDown = false; return
  mouseWheelHandler : (event) =>

    event.preventDefault()
    return if @mouseDown

    buffer = @buffer
    { wheelDelta, wheelDeltaX, wheelDeltaY, pageX, pageY } = event.originalEvent

    buffer += wheelDeltaY
    unless -BUFFER_THRESHOLD < buffer < BUFFER_THRESHOLD

      if wheelDeltaY < 0
	wheelDelta = Math.ceil(buffer / BUFFER_THRESHOLD)
      else
	wheelDelta = Math.floor(buffer / BUFFER_THRESHOLD)

      buffer = buffer % BUFFER_THRESHOLD

      @panZoom([ pageX, pageY ], wheelDelta)


  mouseMoveHandler : (event) =>
