Qsupplier.App.SectionTableView = Ember.View.extend DragNDrop.Draggable,
  templateName: 'section_table'
  classNames: ['section-table']
  attributeBindings: ['style']
  classNameBindings: [
    'content.active_list.active:occupied',
    'controller.editmode:draggable',
    'content.active_list.needs_help:needs_help',
    'content.active_list.needs_payment:needs_payment',
    'content.active_list.has_active_orders:active_order',
    'uniqueClass'
  ]
  uniqueClass: (->
    "section-table-#{@get('content.id')}"
  ).property('content.id')
  offsetX: (->
    return 0 unless section_width = @get('content.section.width')
    (@content.get('position_x') || 0) * @containerWidth() / section_width
  ).property('content.section.width', 'content.position_x')
  offsetY: (->
    return 0 unless section_height = @get('content.section.height')
    (@content.get('position_y') || 0) * @containerHeight() / section_height
  ).property('content.section.height', 'content.position_y')

  style: (->
    "position:absolute;width:83px;height:48px;left:#{@get('offsetX')}px;top:#{@get('offsetY')}px"
  ).property('offsetX', 'offsetY')

  draggable: (->  if @get('controller.editmode') then 'true' else 'false' ).property('controller.editmode')
  placeInSection: ->
    @$el.css 'left', @offsetX()
    @$el.css 'top', @offsetY()
  positionChange: (position)->
    #@$el.css 'left', position.left
    #@$el.css 'top', position.top
    @content.setProperties
      position_x: position.left*@content.get('section').get('width') / @containerWidth()
      position_y: position.top *@content.get('section').get('height') / @containerHeight()
    #@content.get('transaction').commit()
    @content.save()
  containerWidth: ->
    $(@get('parentView.element')).width()
  containerHeight: ->
    $(@get('parentView.element')).height()
  #click: ->
    #@$('.table-actions').show()
  didInsertElement: ->
    @$el = @$()
    #@$('.table-actions').hide()
    #title = @$('.table-actions .title').clone()
    @$('.table-actions').hide()
    #@$('.table-actions .title').remove()
    @$el.on 'click', =>
      # duplication of .table-actions because variable gets unshadowed
      @$('.table-actions').toggle() if @$el.hasClass('occupied') and not @get('controller.editmode')
    #@$el.qtip
      #content:
        #text: content
        #title: title.html()
      #style:
        #classes: 'qtip-wiki qtip-light qtip-shadow'
      #show: 'click'
      #hide:
        #fixed: true
        #delay: 500
      #prerender: true
