     'mousedown .tracker' : 'beginMove'
     'mousedown .handleR' : 'beginRotate'
     'mousedown .dragbar' : 'handlerDispatcher'
-    'mousedown .handle' : 'handlerDispatcher'
+    'mousedown .handle'  : 'handlerDispatcher'
 
   # @params options {object}
   # @params options.model {Block}

    $(document).off('mouseleave', @endResize)
    @options.workspace.off('mousemove', @resize)

  # global subcontainer to which rotations will be applied
  createRotateEl: ->
    $el = $('<div></div>', {
      style: 'width: 100%; height: 100%; position: absolute;'
    })
    $el: $el, el: $el[0]

  # dCt : display container that holds the content and the borders of the
  # content
  createDisplayEl: ->
    $el = $('<div></div>', {
      style: 'width: 100%; height: 100%; position: absolute; overflow: hidden; bottom:0px;'
    })
    $el: $el, el: $el[0]

  # the content that we display
  createContentEl: ->
    $el = $('<img>', {
      src: 'assets/images/cat.jpg',
      style: 'border: none; visibility: visible; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; -webkit-user-select:none;'
    })
    $el: $el, el: $el[0]

  # the borders are the line that are displayed around the content
  createBordersEl: ->
    $el = []
    el = for className, i in ['jcrop-hline', 'jcrop-hline bottom', 'jcrop-vline', 'jcrop-vline right']
      $_el = $('<div></div>', {
        style: 'position:absolute; opacity:0.4;'
      })
      $_el.addClass className
      $el.push $_el
      $_el[0]
    $el: $el, el: el

  # hCt: Handler container that will hold all the handlers
  createHandlerContainerEl: ->
    $el = $('<div></div>', {
      style: 'width: 100%; height: 100%; bottom: 0px; position: absolute; display: block;'
    })
    $el: $el, el: $el[0]

  # create the dragbars
  createDragbarsEl: ->
    $el = []
    el = for dir, i in @cards.slice(0, 4)
      $_el = $('<div></div>', {
        style: 'position:absolute;'
      })
      $_el.css
        cursor: dir + '-resize'
      $_el.addClass "ord-#{dir} jcrop-dragbar dragbar"
      $el.push $_el
      $_el[0]
    $el: $el, el: el

  # create the handles
  createHandlesEl: ->
    $el = []
    el = for dir, i in @cards
      $_el = $ '<div></div>', style: 'position:absolute;'
      $_el.css
        cursor: dir + '-resize'
      $_el.addClass "ord-#{dir} jcrop-handle handle"
      $el.push $_el
      $_el[0]
    $el: $el, el: el

  # the special handler responsible for the rotation
  createRotateHandleEl: ->
    $el = $('<div></div>', {
      style: 'position:absolute; margin-left: -4px; margin-top: -4px; left: 50%; top:-25px; cursor:url(assets/images/rotate.png) 12 12, auto;'
    })
    $el.addClass 'jcrop-handle handleR'
    $el: $el, el: $el[0]

  #This element is here to receive mouse events (clicks)
  createTrackerEl: ->
    $el = $ '<div></div>', style: 'cursor: move; position: absolute;'
    $el.addClass 'jcrop-tracker tracker'
    $el: $el, el: $el[0]

  #
  # render create all the dom elements and append them
  # el
  #   rotate
  #     display
  #       content
  #       borders
  #     handlerContainer
  #       tracker
  #       rotateHandle
  #       dragbars
  #       handles
  createContains: ->
    @contains  =
      rotate:           @createRotateEl()
      display:          @createDisplayEl()
      content:          @createContentEl()
      borders:          @createBordersEl()
      handlerContainer: @createHandlerContainerEl()
      dragbars:         @createDragbarsEl()
      handles:          @createHandlesEl()
      rotateHandle:     @createRotateHandleEl()
      tracker:          @createTrackerEl()

    @contains.display.$el.append @contains.content.el
    @contains.display.$el.append @contains.borders.el
    @contains.rotate.$el.append @contains.display.el

    @contains.handlerContainer.$el.append @contains.dragbars.el
    @contains.handlerContainer.$el.append @contains.handles.el
    @contains.handlerContainer.$el.append @contains.rotateHandle.el
    @contains.handlerContainer.$el.append @contains.tracker.el
    @contains.rotate.$el.append @contains.handlerContainer.el

  render: ->
    @$el.append @contains.rotate.el
    @

    beta = (Math.asin(normalized.y) + Math.PI / 2) * sign
    betaDeg = beta * 360 / (2 * Math.PI)
    # preparing and changing css
    @contains.$el.css @transformName, "rotate(#{betaDeg}deg)"

  # @todo event were attach on document
  endRotate:=>
