;(function (define, undefined) {
'use strict';
define([
    'gettext', 'underscore', 'backbone'
], function (gettext, _, Backbone) {
    var GroupView, ChapterView;

    GroupView = Backbone.View.extend({
        tagName: 'section',
        id: function () {
            return 'note-section-' + _.uniqueId();
        },

        initialize: function (options) {
            this.options = _.extend({}, options);
            this.template = _.template(this.options.template);
            this.className = this.options.className;
        },

        render: function () {
            this.$el.prepend(this.template({
                displayName: this.options.displayName
            }));

            return this;
        },

        addChild: function (child) {
            this.$el.append(child);
        }
    });

    ChapterView = Backbone.View.extend({
        tagName: 'section',
        className: 'note-group',
        id: function () {
            return 'note-group-' + _.uniqueId();
        },
        template: _.template('<h3 class="course-title"><%- chapterName %></h3>'),

        initialize: function (options) {
            this.children = [];
            this.options = _.extend({}, options);
        },

        render: function () {
            var container = document.createDocumentFragment();
            this.$el.html(this.template({
                chapterName: this.options.chapter.display_name || ''
            }));
            _.each(this.children, function (section) {
                container.appendChild(section.render().el);
            });
            this.$el.append(container);

            return this;
        },

        addChild: function (sectionInfo) {
            var section = new GroupView(
                {
                    displayName: sectionInfo.display_name,
                    template: '<h4 class="course-subtitle"><%- displayName %></h4>',
                    className: "note-section"
                }
            );
            this.children.push(section);
            return section;
        },

        remove: function () {
            _.invoke(this.children, 'remove');
            this.children = null;
            Backbone.View.prototype.remove.call(this);
            return this;
        }
    });

    return {GroupView: GroupView, ChapterView: ChapterView};
});
}).call(this, define || RequireJS.define);
