hovercards cache both dropdown and person responses

public/javascripts/widgets/hovercard.js

@@ -2,20 +2,26 @@
   var HoverCard = function() {
     var self = this;
 
+    self.jXHRs = [];
+
     this.start = function() {
-      this.hoverCard = {
+      self.personCache = new this.Cache();
+      self.dropdownCache = new this.Cache();
+  
+      self.hoverCard = {
         tip: $("#hovercard"),
+        dropdownContainer: $("#hovercard_dropdown_container"),
         offset: {
-          left: 00,
+          left: -80,
-          top: 20
+          top: -15
         },
         personLink: $("#hovercard").find("a.person"),
         avatar: $("#hovercard").find(".avatar"),
         dropdown: $("#hovercard").find(".dropdown_list")
       };
 
-      $(document.body).delegate("a.author", "hover", this.handleHoverEvent);
+      $(document.body).delegate("a.author", "hover", self.handleHoverEvent);
-      this.hoverCard.tip.hover(this.hoverCardHover, this.clearTimeout);
+      self.hoverCard.tip.hover(self.hoverCardHover, self.clearTimeout);
     };
 
     this.handleHoverEvent = function(evt) {
@@ -33,58 +39,49 @@
       if(!self.hoverCardTimeout) {
         self.clearTimeout(false);
       }
-      self.timeout = setTimeout(self.showHoverCard, 100);
+      self.timeout = setTimeout(self.showHoverCard, 600);
     };
 
     this.showHoverCard = function() {
-      self.hoverCard.tip.fadeOut('fast');
+      self.hoverCard.tip.hide();
       self.hoverCard.tip.prependTo(self.target.parent());
 
-      $.getJSON(self.target.attr("href"), function(person) {
+      self.personCache.get(self.target.attr("href") + ".json", function(person) {
-        var position = self.target.position();
+        self.populateHovercard(person);
-        self.hoverCard.tip.css({
-          left: position.left + self.hoverCard.offset.left,
-          top: position.top + self.hoverCard.offset.top
-        });
-
-        self.hoverCard.avatar.attr("src", person.avatar);
-        self.hoverCard.personLink.attr("href", person.url);
-        self.hoverCard.personLink.text(person.name);
-        self.hoverCard.dropdown.attr("data-person-id", person.id);
-
-        self.hoverCard.tip.fadeIn('fast');
-      });
-
-      $.get(self.target.attr('href')+'/aspect_membership_button',function(data){
-        self.hoverCard.tip.find('#hovercard_dropdown_container').html(data);
       });
     };
 
-    this.populateDropdown = function(aspect_ids){
+    this.populateHovercard = function(person) {
-      var dropdown = this.hoverCard.tip.find('.dropdown_list'),
+      var position = self.target.position();
-          listElements = dropdown.children('li'),
+      self.hoverCard.tip.css({
-          inAspects = false;
+        left: position.left + self.hoverCard.offset.left,
-
+        top: position.top + self.hoverCard.offset.top
-      // check-off aspects
-      $.each(listElements, function(idx,el){
-        var element = $(el);
-        if( aspect_ids.indexOf(element.attr('data-aspect_id')) !== -1 ){
-          element.addClass('selected');
-          inAspects = true;
-        }
       });
 
-      // make button green
+      self.hoverCard.avatar.attr("src", person.avatar);
+      self.hoverCard.personLink.attr("href", person.url);
+      self.hoverCard.personLink.text(person.name);
+      self.hoverCard.dropdown.attr("data-person-id", person.id);
+
+      self.dropdownCache.get(self.target.attr("href") + "/aspect_membership_button", function(dropdown) {
+        self.hoverCard.dropdownContainer.html(dropdown);
+        self.hoverCard.tip.fadeIn('fast');
+      });
     };
 
     this.clearTimeout = function(delayed) {
+      self.personCache.clearjXHRs();
+      self.dropdownCache.clearjXHRs();
+
       function callback() {
           self.timeout = clearTimeout(self.timeout);
-          self.hoverCard.tip.hide();
+          self.hoverCard.tip.fadeOut("fast", function(){
+            self.hoverCard.dropdownContainer.html("");
+          });
       };
 
       if((typeof delayed === "boolean" && delayed) || (typeof delayed === "object" && delayed.type === "mouseleave")) {
-        self.hoverCardTimeout = setTimeout(callback, 400);
+        self.hoverCardTimeout = setTimeout(callback, 200);
       }
       else {
         callback();
@@ -94,6 +91,32 @@
     this.hoverCardHover = function() {
       self.hoverCardTimeout = clearTimeout(self.hoverCardTimeout);
     };
+
+    this.Cache = function() {
+      var self = this;
+      this.cache = {};
+      this.jXHRs = [];
+
+      this.get = function(key, callback) {
+        if(typeof self.cache[key] === "undefined") {
+          self.jXHRs.push($.get(key, function(response) {
+            self.cache[key] = response;
+            callback(response);
+            self.jXHRs.shift();
+          }));
+        }
+        else {
+          callback(self.cache[key]);
+        }
+      };
+
+      this.clearjXHRs = function() {
+        $.each(self.jXHRs, function(index, jXHR) {
+          jXHR.abort();
+        });
+        self.jXHRs = [];
+      };
+    };
   };
 
   Diaspora.widgets.add("hoverCard", HoverCard);

public/stylesheets/sass/application.sass

@@ -3074,6 +3074,8 @@ ul.left_nav
   @include border-radius(2px)
   @include dropdown-shadow
 
+  @include box-shadow(0,0,12px,#444)
+
   .avatar
     :position relative
     :height 70px
@@ -3088,7 +3090,7 @@ ul.left_nav
   :padding 5px
     :bottom 25px
 
-  :border 1px solid #ddd
+  :border 1px solid #999
 
   :width 240px