​

  var MsgBox = {

    appendMsg: function(msg) {

      $('#msgBox').text($('#msgBox').text() + ';  ' + msg);

    }

  };

​

  var Table = function(tableConfig){

    var _self = this;

    var _options = $.extend({tableDiv: 'standardTable'},tableConfig);

​

    this.onRowClicked = function() {

      MsgBox.appendMsg('row clicked');

      if (_options.rowClickCallback){

        _options.rowClickCallback();

      }

    };

​

    var init = function() {

      $('#'+_options.tableDiv).click(_self.onRowClicked);

    };

​

    init();

  };

​

  var BasicPage = function(pageConfig){

    var _self = this;

    var _table;

​

    var _options = pageConfig || {};

​

    this.getTable = function() { return _table; };

​

    var _onRowClickedHandler = function() {

      _self.onRowClicked();

    };

​

    this.onRowClicked = function() {

      MsgBox.appendMsg('BasicPage onRowClicked');

    };

​

    var init = function() {

      var defaultTableConfig = {

        tableDiv: 'basicPageTable',

        rowClickCallback: _onRowClickedHandler

      };

      var tableConfig;

      if (_options.tableConfig) {

        tableConfig = $.extend(true, {}, defaultTableConfig, _options.tableConfig);

      } else {

        tableConfig = defaultTableConfig;

      }

      _table = new Table(tableConfig);

    };

​

    init();

  };

​

​

​

  /** @extends BasicPage **/

  var PageWithSections = function(pageConfig){

    var _self = this;

    BasicPage.call(this, pageConfig);

​

    /** @override **/

    this.onRowClicked = function() {

      MsgBox.appendMsg('PageWithSections onRowClicked');

    };

​

  };

​

  var basicTable = new Table();

  var basicPage = new BasicPage();

  var pageWithSections = new PageWithSections({tableConfig:{tableDiv:'pageWithSectionsTable'}});