define(function(require) {

  var BaseView = require('shared/views/BaseView');

  var template = '\
<div class="title">Click Me</div>\
<div class="js-explanation hidden">\
  <p>An explanation</p>\
</div>';

  return BaseView.extend({
    template: template,
    events: {
      'click .title': 'toggleExplanation'
    },

    toggleExplanation: function () {
      var explainDiv = this.$('.js-explanation');
      if (explainDiv.is('.hidden')) {
        this._show(explainDiv);
      } else {
        this._hide(explainDiv);
      }
    },

    _show: function (el) {
      el.slideDown(350, function() {
        el.removeClass('hidden');
        el.animate({opacity: 1}, 250);
      });
    },

    _hide: function (el) {
      el.animate({opacity: 0}, 300, function() {
        el.slideUp(400, function () {
          el.addClass('hidden');
        });
      });
    }

  });
});

//==================================================
//Test Code

describe('toggleExplanation', function () {

  // THIS WILL SUCCEED
  it('is called when a user clicks the subtitle', function () {
    var view = new Summary({
      state: new StateMachine(),
      collection: Mock.Uptime.createCollection()
    });
    spyOn(view, '_show');
    view.render();
    view.$('.title').click();
    expect(view._show).toHaveBeenCalled();
  });

  // THIS WILL FAIL
  it('is called when a user clicks the subtitle', function () {
    var view = new Summary({
      state: new StateMachine(),
      collection: Mock.Uptime.createCollection()
    });
    spyOn(view, 'toggleExplanation');
    view.render();
    view.$('.title').click();
    expect(view.toggleExplanation).toHaveBeenCalled();
  });

  it('shows the explanation text when its hidden', function () {
    var view = new Summary({
      state: new StateMachine(),
      collection: Mock.Uptime.createCollection()
    });
    view.render();
    spyOn(view, '_show');
    view.toggleExplanation();
    expect(view._show).toHaveBeenCalled();
  });

  it('hides the explanation text when its shown', function () {
    var view = new Summary({
      state: new StateMachine(),
      collection: Mock.Uptime.createCollection()
    });
    spyOn(view, '_hide');
    view.render();
    view.$('.js-explanation').removeClass('hidden');
    view.toggleExplanation();
    expect(view._hide).toHaveBeenCalled();
  });

});

describe('_hide', function () {

  it('hides the explanation text', function () {
    var view = new Summary({
      state: new StateMachine(),
      collection: Mock.Uptime.createCollection()
    });
    view.render();
    var div = view.$('.js-explanation');
    spyOn(div, 'animate');
    view._hide(div);
    expect(div.animate).toHaveBeenCalled();
  });

});

describe('_show', function () {

  it('hides the explanation text', function () {
    var view = new Summary({
      state: new StateMachine(),
      collection: Mock.Uptime.createCollection()
    });
    view.render();
    var div = view.$('.js-explanation');
    spyOn(div, 'slideDown');
    view._show(div);
    expect(div.slideDown).toHaveBeenCalled();
  });

});