define([
    'Global',
    'headerView',
    'footerView',
    'Text!../html/templates/main.html'
],
    function (Global, headerView, FooterView, mainTemplate ) {
        return Backbone.View.extend({
            id: 'main',
            className: 'type-interior',
            attributes: {'data-role': 'page'},
            initialize: function () {
                this.mainTemplate = _.template(mainTemplate);
            },
            render: function () {
                this.$el
                    .html(this.mainTemplate())
                    .find(":jqmData(role='header')")
                        .append(headerView.render())
                        .end()
                    .find(":jqmData(role='footer')")
                        .append(new FooterView().render());
                return this.$el;
            },
            events: {

            }
        });
    }
);
