App.SectionTablesView = Ember.View.extend DragNDrop.Droppable,
  classNames: ['well', 'section-tables-container', 'section-tables-active']
  templateName: 'section_tables'
  element_width: 0
  element_height: 0
  didInsertElement: ->
    @$el = $(@get('element'))
    height = @$el.width() * @get('controller.model.height') / @get('controller.model.width')
    @$el.css('height', height)
  dropped: (view, position)->
    view.positionChange(position, @content)
  observeSectionDimensions: (->
    return unless @get('element')
    @$el = $(@get('element'))
    width = @$el.width()
    height =  width * @get('controller.model.height') / @get('controller.model.width')
    @set 'element_width', width
    @set 'element_height', height
    @$el.css('height', height)
  ).observes('controller.model.height', 'controller.model.width')
  tables: (->@get('content')).property('content')
  didInsertElement: ->
    # the first observable event is triggered without the container having its dimensions
    @get('controller.model').notifyPropertyChange('width').notifyPropertyChange('height')
