App.SectionElementComponent = Ember.Component.extend DragNDrop.Draggable,
  layoutName: 'section/element'
  classNames: ['section-element-container']
  attributeBindings: ['style']
  show_handles: false
  spinning: false
  classNameBindings: ['uniqueClass', 'spinning:spin-rotate']
  uniqueClass: Ember.computed 'section_element.id', -> "section-element-#{@get('section_element.id')}"
  draggable: Ember.computed.alias 'section.editmode'
  offsetX: (->
    (@get('dpm') || 0) * (@get('section_element.position_x') || 0)
  ).property('dpm', 'section_element.position_x')
  offsetY: (->
    return 0 unless dpm = @get('dpm')
    dpm * (@get('section_element.position_y') || 0)
  ).property('dpm', 'section_element.position_y', 'section_element.rotation')
  #myHeight: (-> (@get('dpm') || 0 ) * @get('section_element.height')).property('dpm', 'section_element.height')
  #myWidth: (-> (@get('dpm') || 0 ) * @get('section_element.width')).property('dpm', 'section_element.width')

  # box size in dots [d]
  box_size: (-> (@get('dpm') || 0 ) * @get('section_element.box_size')).property('dpm', 'section_element.box_size')
  style: Ember.computed 'offsetX', 'offsetY', 'box_size', 'section_element.rotation', ->
    "position:absolute;width:#{@get('box_size')}px;height:#{@get('box_size')}px;left:#{@get('offsetX')}px;top:#{@get('offsetY')}px".htmlSafe()
  positionChange: (position)->
    dpm = @get('dpm')
    return if !dpm or parseFloat(dpm) is 0
    @get('section_element').setProperties
      position_x: position.left / dpm
      position_y: position.top / dpm
  click: ->
    if @get('section.editmode')
      @toggleProperty('show_handles')
    else
      @set 'spinning', true
      Ember.run.later (=> @set('spinning', false)), 2000
  showHandles: Ember.computed.and 'show_handles', 'section.editmode'
  actions:
    rotateLeft: ->
      @get('section_element').invoke "rotateLeft"
    rotateRight: ->
      @get('section_element').invoke "rotateRight"
    removeSectionElement: -> @get('section_element').destroyRecord()
