define(function (require, exports, module) {

  const UserView = require('plug/views/users/UserView');
  const Events = require('plug/core/Events');
  const MenuView = require('./MenuView');
  const ProfileView = require('./ProfileView');
  const HistoryView = require('./HistoryView');

  const UserProfileView = UserView.extend({
    id: 'extplug-user-profiles',

    initialize() {
      this.resizeBind = this.onResize.bind(this);
      this.showBind = this.onShow.bind(this);
      this.hideBind = this.onHide.bind(this);
      this.showing = false;
    },

    render() {
      this.$el.empty();
      this.menu = new MenuView({ model: this.model });
      this.menu.render();
      this.menu.on('change:section', this.change, this);
      this.$el.append(this.menu.$el);
      return this;
    },

    change(section) {
      this.clear();
      this.section = section;
      if (section === 'profile') {
        this.view = new ProfileView({ model: this.model });
      }
      else if (section === 'played') {
        this.view = new HistoryView({ model: this.model });
      }
      this.$el.append(this.view.$el);
      this.view.render();
    },

    onShow() {
      $('#footer-user').addClass('showing');
      Events.once('hide:user', this.hide, this);
      this._super();
    },
    onHide() {
      $('#footer-user').removeClass('showing');
      this._super();
    }

  });

  module.exports = UserProfileView;

});

@@ -138,24 +138,89 @@
 e/Events');%0A
+  const getUserClasses = require('extplug/util/getUserClasses');%0A
   const Menu
@@ -241,32 +241,32 @@
 ('./MenuView');%0A
-
   const ProfileV
@@ -344,16 +344,47 @@
 yView');
+%0A  const $ = require('jquery');
 %0A%0A  cons
@@ -663,24 +663,24 @@
  render() %7B%0A
-
       this.$
@@ -689,16 +689,135 @@
 .empty()
+%0A        .removeClass()%0A        .addClass('app-left')%0A        .addClass(getUserClasses(this.model.get('id')).join(' '))
 ;%0A      

add user id and role classes to user profile view