App.SectionTablesComponent = Ember.Component.extend DragNDrop.Droppable,
  classNames: ['well', 'section-tables-container', 'section-tables-active']
  classNameBindings: ['section.editmode:editing']
  layoutName: 'section/tables'
  dpm: 1
  dropped: (component, position)->
    component.positionChange(position, @get('section.tables'))
  handleDimensionChange: ->
    return unless @get('element')
    @$el = $(@get('element'))
    viewport_width = $(window).width()
    viewport_height = $(window).height() - 52
    section_width = @get('section.width')
    section_height = @get('section.height')
    dpm = viewport_width / section_width # try to fill the width
    if dpm * section_height > viewport_height
      # Height goes of the window, not what we want, adjust to fit height
      dpm = viewport_height / section_height
    @$el.css 'width', dpm * section_width
    @$el.css 'height', dpm * section_height
    console.log "dpm: #{dpm}"
    @set 'dpm', dpm
  observeSectionDimensions: (->
    @handleDimensionChange()
  ).observes('section.height', 'section.width')
  didInsertElement: ->
    # the first observable event is triggered without the container having its dimensions
    @get('section').notifyPropertyChange('width') #.notifyPropertyChange('height')
    that = this
    $(window).on 'orientationchange resize', -> Ember.run( -> that.handleDimensionChange())
