App.SectionTabHeaderComponent= Ember.Component.extend
  layoutName: 'section/tab-header'
  classNameBindings: ['section_header_class', 'section_active:active']
  classNames: ['section-tab-header']
  click: (e)->
    @set 'globals.active_section', @get('section')
    @get('targetObject').transitionToRoute 'section', @get('section.id')

  section_header_class: (-> "section-tab-header-#{@get('section.id')}").property()
  #dragEntered: (view)->
    #@$().addClass('table-hover')
    #return false
    # Changing the route for now is too difficult. Just do a move
    #if view.constructor.toString().match(/SectionTableView$/)
      #@get('controller').transitionToRoute 'section', @get('section')
  #dragLeft: -> @$().removeClass('table-hover')
  #dropped: (view)->
    #if view.constructor.toString().match(/SectionTableView$/)
      #table = view.get('section')
      #section =  @get('section')
      #if section isnt table.get('section')
        #section.get('tables').addObject table
        #table.save()
        #@get('controller').transitionToRoute 'section', section.get('id')
  #didInsertElement: ->
    #@$el = $ @get('element')

  section_active: (->
    current_section = @get('targetObject.model.id')
    view_section = @get('section.id')
    current_section == view_section
  ).property('targetObject.model.id')
