import Ember from 'ember';
import layout from './template';

const {
  computed
} = Ember;

export default Ember.Component.extend({
  layout: layout,
  tagName: 'th',
  classNameBindings: ['sortType', 'isSortable:sortable', 'isActiveColumn:active'],
  isSortable: false,

  bindSort: function () {
    var sort = this.get('sort'),
        component = this;

    if (sort) {
      this.set('isSortable', true);
      this.$().bind('click', function () {
        component.toggleOrderBy();
      });
    }

    // Initial Sort
    if (this.get('sortType')) {
      this.send('sortBy');
    }
  }.on('didInsertElement'),

  unBindSort: function () {
    this.$().unbind('click');
  }.on('willDestroyElement'),

  // Computed Properties
  isActiveColumn: computed('parentView.activeColumn', {
    get: function () {
      return this.get('parentView.activeColumn') === this;
    }
  }),

  toggleOrderBy: function () {
    var sortType = this.get('sortType') || 'asc';
    this.set('sortType', (sortType === 'asc') ? 'desc' : 'asc');
    this.send('sortBy');
  },

  // Actions
  actions:{
    sortBy: function () {
      this.get('parentView').send('onSort', this);
    }
  }
});

@@ -125,16 +125,61 @@
 xtend(%7B%0A
+  attributeBindings: %5B'rowspan', 'colspan'%5D,%0A
   layout

Add rowspan and colspan attribute bindings