     @$dragbars = []
     for str, i in cards.slice(0, 4)
       e = $('<div></div>',{
-        style:"position:absolute;"
+        style:'position:absolute;'
       })
       style = {}
-      style.cursor = str + "-resize"
-      style["z-index"] = 370 + i
-      className = "ord-" + str + " jcrop-dragbar"
+      style.cursor = str + '-resize'
+      style['z-index'] = 370 + i
+      className = 'ord-' + str + ' jcrop-dragbar'
       e.css(style)
       e.addClass(className)
       e.addClass('dragbar')

    # hCt: Handler container that will hold all the handlers
    #
    @$hCt = $('<div></div>',{
      style:"width: 100%; height: 85%; bottom: 0px; position: absolute; z-index: 320; display: block;"
    })
    @hCt = @$hCt[0]
    @$selectR.append(@hCt)

class @BlockView extends Backbone.View
  
  events:
    'mousedown .tracker' : 'handlerDispatcher'
    'mousedown .handleR' : 'handlerDispatcher'
    'mousedown .dragbar' : 'handlerDispatcher'
    'mousedown .handle' : 'handlerDispatcher'

  initialize: ->
    @page = @options.page
    @$page = $(@page)

    # We check what the rotation transformation name is
    # in the browser
    @transformName = null
    for b in ['transform', 'webkitTransform', "MozTransform", 'msTransform', "OTransform"] when @el.style[b]?
      @transformName = b


    #predefining a style for the el, adapted to the image for
    #the moment
    @$el.css(
      position: 'absolute',
      'z-index': 600,
      width: '256px',
      # 175 + 25px for the rotation handler
      height: '175px',
      top: '116px',
      left: '166px'
    )
    @render()

  handlerDispatcher: (e) ->
    origine =
      x: e.pageX
      y: e.pageY

    #if $(e.currentTarget).hasClass('tracker')

    if $(e.currentTarget).hasClass('handleR')
      offset = @$el.offset()
      center =
        x: offset.left + @$el.width()/2
        y: offset.top  + @$el.height()/2 # dh=25px
      console.log(center)
      @$page.on('mouseup', center, @endRotate)
      @$page.on('mouseleave', center, @endRotate)
      return @$page.on('mousemove', center, @rotate)

    #if $(e.currentTarget).hasClass('dragbar')

    #if $(e.currentTarget).hasClass('handle')

  # NB: here we need to bind, because we haven't use the delegate
  # event method of backbone...
  move: (e)=>
    v =
      x:e.pageX - e.data.x
      y:e.pageY - e.data.y

  endmove: (e)=>
    @$page.off('mouseup',@endmove)
    @$page.off('mouseleave',@endmove)
    @$page.off('mousemove',@move)

  rotate: (e)=>
    # v is the vector from the center of the content to
    # the pointer of the mouse
    v =
      x:e.pageX - e.data.x
      y:e.pageY - e.data.y
    #norm of v
    n = Math.sqrt(v.x*v.x + v.y*v.y)
    # vn is v normalized
    vn =
      x: v.x/n
      y: v.y/n
    # "sign" is the sign of v.x
    sign = v.x/Math.abs(v.x)
    # beta is the angle between v and the vector (0,-1)
    beta = (Math.asin(vn.y) + Math.PI/2) * sign
    betaDeg = beta * 360 /(2*Math.PI)
    # preparing and changing css
    style = {}
    style[@transformName] = "rotate(#{betaDeg}deg)"
    @$selectR.css(style)

  endRotate:=>
    @$page.off('mouseup',@endRotate)
    @$page.off('mouseleave',@endRotate)
    @$page.off('mousemove',@rotate)

  render: ->
    #cardinals that will be used throughout the rendering (maybe in other
    # functions too?)
    cards = ['n', 's', 'e', 'w', 'nw', 'ne', 'se', 'sw']
    # global subcontainer to which rotations will be applied
    @$selectR = $('<div></div>',{
      style:'width: 100%; height: 100%; z-index: 600; position: absolute;'
    })
    @selectR = @$selectR[0]
    @$el.append(@selectR)
