App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});


App.IndexController = Ember.ObjectController.extend(Ember.Evented, {
  isExpanded: false,

  expanded: function(){
    return '' + this.get('isExpanded');
  }.property('isExpanded'),

  buttonLabel: function() {
    return (this.get('isExpanded'))? 'Hide Details' : 'Show Details';
  }.property('isExpanded'),

  actions: {
    toggle: function() {
      var eventName = 'groupExpanded';
      this.toggleProperty('isExpanded');
      if(!this.get('isExpanded')) {
        eventName = 'groupHidden';
      }
      this.trigger(eventName);
      return false;
    }
  }

});

App.IndexView = Ember.View.extend({
  didInsertElement: function(){
    this.get('controller').on('groupExpanded', this, this.focusDetails);
    this.get('controller').on('groupHidden', this, this.focusHeader);
  },
  willDestroyElement: function() {
    this.get('controller').off('groupExpanded', this, this.focusDetails);
    this.get('controller').off('groupHidden', this, this.focusHeader);
  },

  focusDetails: function() {
    Ember.run.scheduleOnce('afterRender', this, function() {
      this.$('#group-detail').focus();
    });
  },

  focusHeader: function() {
    Ember.run.scheduleOnce('afterRender', this, function() {
      this.$('.group-header button').focus();
    });
  }
});