App.SectionAreaComponent = Ember.Component.extend DragNDrop.Draggable,
  layoutName: 'section/area'
  classNames: ['section-area-container']
  attributeBindings: ['style']
  classNameBindings: ['vertical', 'right_half:right-half', 'section_area.rounded:rounded']
  pixelWidth: Ember.computed 'section_area.width', 'dpm', -> @get('dpm') * @get('section_area.width')
  pixelHeight: Ember.computed 'section_area.height', 'dpm', -> @get('dpm') * @get('section_area.height')
  offsetX: Ember.computed.product 'dpm', 'section_area.position_x'
  offsetY: Ember.computed.product 'dpm', 'section_area.position_y'
  vertical: Ember.computed 'section_area.width', 'section_area.height', 'section.editmode', ->
    not @get('section.editmode') and @get('section_area.height') > @get('section_area.width')
  right_half: Ember.computed 'section_area.position_x', 'section_area.width', 'section_area.section.width', ->
    @get('section_area.position_x') + (@get('section_area.width') / 2) > (@get('section_area.section.width') / 2)
  style: Ember.computed  'offsetX', 'offsetY', 'pixelWidth', 'pixelHeight', 'section_area.color', ->
    background_color = @get('section_area.color')
    color = if App.CssObject.isColorDark(background_color) then 'white' else 'black'
    App.CssObject.create(
      width: @get('pixelWidth')
      height: @get('pixelHeight')
      left: @get('offsetX')
      top: @get('offsetY')
      "background-color": background_color
      color: color
      "line-height": @get('pixelHeight')
    ).toString()
  draggable: (->  if @get('section.editmode') then true else false ).property('section.editmode')
  positionChange: (position)->
    dpm = @get('dpm')
    return if !dpm or parseFloat(dpm) is 0
    @get('section_area').setProperties
      position_x: position.left / dpm
      position_y: position.top / dpm
  click: ->
    return unless @get('section.editmode')
    @modal 'section_area',
      title_path: 'section_area.modal.title'
      model: @get('section_area')
