JqueryMobile.MPage = SC.View.extend({

  // render a div with data-role-attribute = page
  render: function(context, firstTime) {
    context.begin('div');
    context.attr('data-role', 'page');

    // call renderers of childViews
    if(firstTime) {
      this.renderChildViews(context, firstTime);
    }
  },

  // if the view did append to the DOM, call jQuery mobile to do the styling
  didAppendToDocument: function() {
    $("#" + this.get('layerId')).page();
    $("#" + this.get('layerId')).show();
  }
});

JqueryMobile.MHeader = SC.View.extend({
  // render a div with data-role-attribute = header
  render: function(context, firstTime) {
    context.begin('div');
    context.attr('data-role', 'header');
    context.push('Page Title');
  }
});

JqueryMobile.MContent = SC.View.extend({
  // render a div with data-role-attribute = content
  render: function(context, firstTime) {
    context.begin('div');
    context.attr('data-role', 'content');
    context.push('Page content goes here.');
  }
});

JqueryMobile.MFooter = SC.View.extend({
  // render a div with data-role-attribute = footer
  render: function(context, firstTime) {
    context.begin('div');
    context.attr('data-role', 'footer');
    context.push('Page Footer');
  }
});


// MAIN PAGE
JqueryMobile.mainPage = SC.Page.design({

  mainPane: SC.MainPane.design({
    childViews: 'foo'.w(),

    // show one jQuery mobile page with header, content and footer
    foo: JqueryMobile.MPage.design({
      childViews: 'header content footer'.w(),
      pageName: 'foo',

      header: JqueryMobile.MHeader.design({

      }),

      content: JqueryMobile.MContent.design({

      }),

      footer: JqueryMobile.MFooter.design({

      })
    })
  })

});