/*!
 * Copyright 2013 Apereo Foundation (AF) Licensed under the
 * Educational Community License, Version 2.0 (the "License"); you may
 * not use this file except in compliance with the License. You may
 * obtain a copy of the License at
 *
 *     http://opensource.org/licenses/ECL-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an "AS IS"
 * BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */

define(['jquery', 'oae.core'], function($, oae) {

    // When this widget is loaded, the content profile object representing the collaborative document
    // that needs to be rendered will be passed in as the widgetData
    return function(uid, showSettings, contentObj) {

        // The widget container
        var $rootel = $('#' + uid);

        /**
         * When the current user is a manager of the collaborative document, we join the document. This
         * returns a URL that can be used to create the iFrame that will contain the Etherpad UI.
         */
        var showEditMode = function() {
            $.ajax({
                'url': '/api/content/' + contentObj.id + '/join',
                'type': 'POST',
                'success': function(data) {
                    // We construct an iFrame with the provided URL
                    oae.api.util.template().render($('#etherpad-template', $rootel), data, $('#etherpad-container', $rootel));
                },
                'error': function() {
                    oae.api.util.notification(
                        oae.api.i18n.translate('__MSG__CANNOT_EDIT__', 'etherpad'),
                        oae.api.i18n.translate('__MSG__CANNOT_EDIT_THIS_DOCUMENT__', 'etherpad'),
                        'error');
                }
            });
        };

        /**
         * When the current user is not a manager of the collaborative document, we show the document's
         * latest published content in view mode.
         */
        var showViewMode = function() {
            var etherpadHTML = contentObj.latestRevision.etherpadHtml || '';
            if (etherpadHTML.replace(/(<br>|&nbsp;)/g, '')) {
                $('#etherpad-container', $rootel).html(etherpadHTML);
            // If there's no content to show, show the default message
            } else {
                oae.api.util.template().render($('#etherpad-no-content-template', $rootel), null, $('#etherpad-container', $rootel));
            }
        };

        /**
         * When the user leaves the page, we automatically publish the pad's content to make sure that the
         * published version is up-to-date with the pad content. This needs to happen synchronously to avoid
         * the page unloading before the request is completed.
         */
        var publish = function() {
            // The Etherpad iFrame is hidden to avoid the 'Reconnecting Pad' message showing up. Rather than using `hide`,
            // `invisible` is being used to avoid the comments jumping to the top of the page.
            $('#etherpad-editor').addClass('invisible');
            // Publish the pad's content
            $.ajax({
                'url': '/api/content/' + contentObj.id + '/publish',
                'type': 'POST',
                'async': false
            });
        };

        /**
         * Set up the etherpad widget. Managers of the document will be shown the Etherpad UI (edit mode) and
         * viewers of the document will be shown the document's content in view mode.
         */
        var setUpEtherpad = function() {
            if (contentObj.isManager) {
                showEditMode();
                // Automatically publish the document when the user leaves the page
                $(window).on('beforeunload', publish);
            } else {
                showViewMode();
            }
        };

        setUpEtherpad();

    };
});

@@ -3211,16 +3211,25 @@
 -editor'
+, $rootel
 ).addCla

Use $rootel in etherpad.js