Use blurred version of avatar as user card background

ember/Brocfile.js

@@ -3,9 +3,9 @@
 var EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
 var app = new EmberApp({
-	vendorFiles: {
-		'handlebars.js': null
-	}
+  vendorFiles: {
+    'handlebars.js': null
+  }
 });
 
 app.import('bower_components/ember/ember-template-compiler.js');
@@ -15,6 +15,7 @@ app.import('bower_components/spin.js/spin.js');
 app.import('bower_components/spin.js/jquery.spin.js');
 app.import('bower_components/moment/moment.js');
 app.import('bower_components/jquery.hotkeys/jquery.hotkeys.js');
+app.import('bower_components/blurjs/dist/jquery.blur.js');
 
 app.import('bower_components/font-awesome/fonts/fontawesome-webfont.eot');
 app.import('bower_components/font-awesome/fonts/fontawesome-webfont.svg');

ember/app/components/user/user-card.js

@@ -13,6 +13,48 @@ export default Ember.Component.extend(HasItemLists, {
     return 'background-color: '+this.get('user.color');
   }),
 
+  avatarUrlDidChange: Ember.observer('user.avatarUrl', function() {
+    this.refreshOverlay(true);
+  }),
+
+  didInsertElement: function() {
+    this.refreshOverlay();
+  },
+
+  refreshOverlay: function(animate) {
+    var component = this;
+    var $overlay = component.$('.darken-overlay');
+    var $newOverlay = $overlay.clone().removeAttr('style').insertBefore($overlay);
+    var avatarUrl = component.get('user.avatarUrl');
+    var hideOverlay = function() {
+      if (animate) {
+        $overlay.fadeOut('slow');
+      }
+      $overlay.promise().done(function() {
+        $(this).remove();
+      });
+    };
+
+    if (avatarUrl) {
+      $('<img>').attr('src', avatarUrl).on('load', function() {
+        component.$().css('background-image', 'url('+avatarUrl+')');
+        $newOverlay.blurjs({
+          source: component.$(),
+          radius: 50,
+          overlay: 'rgba(0, 0, 0, .2)',
+          useCss: false
+        });
+        component.$().css('background-image', '');
+        if (animate) {
+          $newOverlay.hide().fadeIn('slow');
+        }
+        hideOverlay();
+      });
+    } else {
+      hideOverlay();
+    }
+  },
+
   populateControls: function(items) {
     this.addActionItem(items, 'edit', 'Edit', 'pencil');
     this.addActionItem(items, 'delete', 'Delete', 'times');

ember/app/styles/flarum/user.less

@@ -1,5 +1,6 @@
 .user-card {
   .drawer-components();
+  background-size: 100% 100%;
 
   &, & .container {
     position: relative;

ember/bower.json

@@ -18,7 +18,8 @@
     "pace": "~0.7.1",
     "moment": "~2.8.4",
     "ember-simple-auth": "0.7.2",
-    "jquery.hotkeys": "jeresig/jquery.hotkeys#0.2.0"
+    "jquery.hotkeys": "jeresig/jquery.hotkeys#0.2.0",
+    "blurjs": ""
   },
   "resolutions": {
     "ember-cli-test-loader": "0.1.3",