App.SectionTableComponent = Ember.Component.extend DragNDrop.Draggable,
  layoutName: 'section/table'
  classNames: ['section-table']
  attributeBindings: ['style']

  # required bindings
  dpm: 1
  section: null
  table: null

  classNameBindings: [
    'table.active_list.active:occupied',
    'section.editmode:draggable',
    'table.active_list.needs_help:needs_help',
    'table.active_list.needs_payment:needs_payment',
    'table.active_list.has_active_orders:active_order',
    'right_half:right-half',
    'uniqueClass'
  ]
  uniqueClass: (->
    "section-table-#{@get('table.id')}"
  ).property('table.id')
  right_half: Ember.computed 'table.position_x', 'table.width', 'table.section.width', ->
    @get('table.position_x') + (@get('table.width') / 2) > (@get('table.section.width') / 2)
  offsetX: (->
    (@get('dpm') || 0) * (@get('table.position_x') || 0)
  ).property('dpm', 'table.position_x')
  offsetY: (->
    (@get('dpm') || 0) * (@get('table.position_y') || 0)
  ).property('dpm', 'table.position_y')

  myHeight: (-> Math.max((@get('dpm') || 0 ) * @get('table.height'), 60)).property('dpm', 'table.height')
  myWidth: (-> Math.max((@get('dpm') || 0 ) * @get('table.width'), 60)).property('dpm', 'table.width')
  #style: (->
    #"position:absolute;width:83px;height:48px;left:#{@get('offsetX')}px;top:#{@get('offsetY')}px"
  #).property('offsetX', 'offsetY')
  style: Ember.computed 'offsetX', 'offsetY', 'myWidth', 'myHeight', ->
    "position:absolute;width:#{@get('myWidth')}px;height:#{@get('myHeight')}px;left:#{@get('offsetX')}px;top:#{@get('offsetY')}px".htmlSafe()

  draggable: Ember.computed.alias 'section.editmode'
  positionChange: (position)->
    dpm = @get('dpm')
    return if !dpm or parseFloat(dpm) is 0

    @get('table').setProperties
      position_x: position.left / dpm
      position_y: position.top / dpm
    #@get('table').save()
  click: (evt)->
    evt.preventDefault()
    if @get('section.editmode')
      table = @get('table')
      @modal 'table_edit',
        model: table
        close: -> table.rollbackAttributes()
    else
      @$('.table-actions').toggle() if @$el.hasClass('occupied')
    false
  didInsertElement: ->
    @$el = @$()
    @$('.table-actions').hide()
