VRFS-1028 add hover bubbles throughout app

2014-02-12 23:40:41 -05:00 · 2014-02-12 23:40:41 -05:00 · 0a94f73d08
parent aac29c3547
commit 0a94f73d08
17 changed files with 1465 additions and 1357 deletions
--- a/web/app/assets/javascripts/hoverBand.js
+++ b/web/app/assets/javascripts/hoverBand.js
@ -10,7 +10,7 @@
    var hoverSelector = "#band-hover";

    this.showBubble = function() {
-      $(hoverSelector).css({left: position.left, top: position.top+200});
+      $(hoverSelector).css({left: position.left-100, top: position.top});
      $(hoverSelector).fadeIn(500);

      rest.getBand(bandId)
--- a/web/app/assets/javascripts/hoverFan.js
+++ b/web/app/assets/javascripts/hoverFan.js
@ -1,14 +1,76 @@
 (function(context,$) {

-    "use strict";
-    context.JK = context.JK || {};
-    context.JK.FanHoverBubble = function(app) {
+  "use strict";
+  context.JK = context.JK || {};
+  context.JK.FanHoverBubble = function(userId, position) {

-      function initialize() {
+    var logger = context.JK.logger;
+    var rest = context.JK.Rest();
+    var instrumentLogoMap = context.JK.getInstrumentIconMap24();
+    var hoverSelector = "#fan-hover";

-      }
-      
-      this.initialize = initialize;
-      this.showBubble = showBubble;
-    }
+    this.showBubble = function() {
+      $(hoverSelector).css({left: position.left-100, top: position.top});
+      $(hoverSelector).fadeIn(500);
+
+      rest.getUserDetail({id: userId})
+        .done(function(response) {
+          $(hoverSelector).html('');
+
+          // followings
+          var followingHtml = '';
+          $.each(response.followings, function(index, val) {
+            if (index < 4) { // display max of 4 followings (NOTE: this only displays USER followings, not BAND followings)
+              if (index % 2 === 0) { 
+                followingHtml += '<tr>';
+              }
+
+              followingHtml += '<td width="24"><a href="#" class="avatar-tiny"><img src="' + context.JK.resolveAvatarUrl(val.photo_url) + '" /></a></td>';
+              followingHtml += '<td><a href="/client#/profile/' + val.id + '"><strong>' + val.name + '</strong></a></td>';
+
+              if (index % 2 > 0) {
+                followingHtml += '</tr>';
+              }
+            }
+          });
+
+          var template = $('#template-hover-fan').html();
+          if (response.biography == null) {
+            response.biography = 'No Biography Available';
+          }
+
+          var fanHtml = context.JK.fillTemplate(template, {
+              avatar_url: context.JK.resolveAvatarUrl(response.photo_url),
+              name: response.name,
+              location: response.location,
+              friend_count: response.friend_count,
+              follower_count: response.follower_count,
+              biography: response.biography,
+              followings: response.followings && response.followings.length > 0 ? followingHtml : "<tr><td>N/A</td></tr>",
+              profile_url: "/client#/profile/" + response.id
+          });
+
+          $(hoverSelector).append('<h2>Fan Detail</h2>' + fanHtml);
+        })
+        .fail(function(xhr) {
+          if(xhr.status >= 500) {
+              context.JK.fetchUserNetworkOrServerFailure();
+          }
+          else if(xhr.status == 404) {
+              context.JK.entityNotFound("User");
+          }
+          else {
+              context.JK.app.ajaxError(arguments);
+          }
+        });
+    };
+
+    this.hideBubble = function() {
+      $(hoverSelector).hide();
+    };
+
+    this.id = function() {
+      return hoverSelector;
+    };
+  }
 })(window,jQuery);
--- a/web/app/assets/javascripts/hoverMusician.js
+++ b/web/app/assets/javascripts/hoverMusician.js
@ -1,94 +1,95 @@
 (function(context,$) {

-    "use strict";
-    context.JK = context.JK || {};
-    context.JK.MusicianHoverBubble = function(userId, position) {
+  "use strict";
+  context.JK = context.JK || {};
+  context.JK.MusicianHoverBubble = function(userId, position) {

-      var logger = context.JK.logger;
-      var rest = context.JK.Rest();
-      var instrumentLogoMap = context.JK.getInstrumentIconMap24();
-      var hoverSelector = "#musician-hover";
+    var logger = context.JK.logger;
+    var rest = context.JK.Rest();
+    var instrumentLogoMap = context.JK.getInstrumentIconMap24();
+    var hoverSelector = "#musician-hover";

-      this.showBubble = function() {
-        $(hoverSelector).css({left: position.left, top: position.top+200});
-        $(hoverSelector).fadeIn(500);
+    this.showBubble = function() {
+      $(hoverSelector).css({left: position.left-100, top: position.top});
+      $(hoverSelector).fadeIn(500);

-        rest.getUserDetail({id: userId})
-          .done(function(response) {
-            $(hoverSelector).html('');
+      rest.getUserDetail({id: userId})
+        .done(function(response) {
+          $(hoverSelector).html('');

-            // instruments
-            var instrumentHtml = '';
-            $.each(response.instruments, function(index, val) {
-              instrumentHtml += '<div class="left mr10 mb"><img src="' + instrumentLogoMap[val.instrument_id] + '" width="24" height="24" /></div>';
-            });
+          // instruments
+          var instrumentHtml = '';
+          $.each(response.instruments, function(index, val) {
+            instrumentHtml += '<div class="left mr10 mb"><img src="' + instrumentLogoMap[val.instrument_id] + '" width="24" height="24" /></div>';
+          });

-            // followings
-            var followingHtml = '';
-            $.each(response.followings, function(index, val) {
-              if (index < 4) { // display max of 4 followings (NOTE: this only displays USER followings, not BAND followings)
-                if (index % 2 === 0) { 
-                  followingHtml += '<tr>';
-                }
-
-                followingHtml += '<td width="24"><a href="#" class="avatar-tiny"><img src="' + context.JK.resolveAvatarUrl(val.photo_url) + '" /></a></td>';
-                followingHtml += '<td><a href="/client#/profile/' + val.id + '"><strong>' + val.name + '</strong></a></td>';
-
-                if (index % 2 > 0) {
-                  followingHtml += '</tr>';
-                }
+          // followings
+          var followingHtml = '';
+          $.each(response.followings, function(index, val) {
+            if (index < 4) { // display max of 4 followings (NOTE: this only displays USER followings, not BAND followings)
+              if (index % 2 === 0) { 
+                followingHtml += '<tr>';
              }
-            });

-            var template = $('#template-hover-musician').html();
-            if (response.biography == null) {
-              response.biography = 'No Biography Available';
-            }
+              followingHtml += '<td width="24"><a href="#" class="avatar-tiny"><img src="' + context.JK.resolveAvatarUrl(val.photo_url) + '" /></a></td>';
+              followingHtml += '<td><a href="/client#/profile/' + val.id + '"><strong>' + val.name + '</strong></a></td>';

-            var sessionDisplayStyle = 'none';
-            var sessionId = '';
-            if (response.sessions !== undefined && response.sessions.length > 0) {
-              sessionDisplayStyle = 'block';
-              sessionId = response.sessions[0].id;
-            }
-
-            var musicianHtml = context.JK.fillTemplate(template, {
-                avatar_url: context.JK.resolveAvatarUrl(response.photo_url),
-                name: response.name,
-                location: response.location,
-                instruments: instrumentHtml,
-                friend_count: response.friend_count,
-                follower_count: response.follower_count,
-                recording_count: response.recording_count,
-                session_count: response.session_count,
-                session_display: sessionDisplayStyle,
-                session_id: sessionId,
-                biography: response.biography,
-                followings: followingHtml,
-                profile_url: "/client#/profile/" + response.id
-            });
-
-            $(hoverSelector).append('<h2>Musician Detail</h2>' + musicianHtml);
-          })
-          .fail(function(xhr) {
-            if(xhr.status >= 500) {
-                context.JK.fetchUserNetworkOrServerFailure();
-            }
-            else if(xhr.status == 404) {
-                context.JK.entityNotFound("User");
-            }
-            else {
-                context.JK.app.ajaxError(arguments);
+              if (index % 2 > 0) {
+                followingHtml += '</tr>';
+              }
            }
          });
-      };

-      this.hideBubble = function() {
-        $(hoverSelector).hide();
-      };
+          var template = $('#template-hover-musician').html();
+          if (response.biography == null) {
+            response.biography = 'No Biography Available';
+          }

-      this.id = function() {
-        return hoverSelector;
-      };
-    }
+          var sessionDisplayStyle = 'none';
+          var sessionId = '';
+          console.log("here");
+          if (response.sessions !== undefined && response.sessions.length > 0) {
+            sessionDisplayStyle = 'block';
+            sessionId = response.sessions[0].id;
+          }
+
+          var musicianHtml = context.JK.fillTemplate(template, {
+              avatar_url: context.JK.resolveAvatarUrl(response.photo_url),
+              name: response.name,
+              location: response.location,
+              instruments: instrumentHtml,
+              friend_count: response.friend_count,
+              follower_count: response.follower_count,
+              recording_count: response.recording_count,
+              session_count: response.session_count,
+              session_display: sessionDisplayStyle,
+              session_id: sessionId,
+              biography: response.biography,
+              followings: response.followings && response.followings.length > 0 ? followingHtml : "<tr><td>N/A</td></tr>",
+              profile_url: "/client#/profile/" + response.id
+          });
+
+          $(hoverSelector).append('<h2>Musician Detail</h2>' + musicianHtml);
+        })
+        .fail(function(xhr) {
+          if(xhr.status >= 500) {
+              context.JK.fetchUserNetworkOrServerFailure();
+          }
+          else if(xhr.status == 404) {
+              context.JK.entityNotFound("User");
+          }
+          else {
+              context.JK.app.ajaxError(arguments);
+          }
+        });
+    };
+
+    this.hideBubble = function() {
+      $(hoverSelector).hide();
+    };
+
+    this.id = function() {
+      return hoverSelector;
+    };
+  }
 })(window,jQuery);
--- a/web/app/assets/javascripts/searchResults.js
+++ b/web/app/assets/javascripts/searchResults.js
@ -1,236 +1,254 @@
 (function(context,$) {

-    "use strict";
+  "use strict";

-    context.JK = context.JK || {};
-    context.JK.SearchResultScreen = function(app) {
-        var logger = context.JK.logger;
+  context.JK = context.JK || {};
+  context.JK.SearchResultScreen = function(app) {
+    var logger = context.JK.logger;
+    var instrument_logo_map = context.JK.getInstrumentIconMap24();

-        var instrument_logo_map = context.JK.getInstrumentIconMap24();
+    function initializeSearchNavLinks() {
+      $('.search-nav').click(function() {
+        $('.search-nav.active').removeClass('active');
+        $(this).addClass('active');
+        setTimeout(search, 100);
+        context.JK.Sidebar.searchTypeSelection($(this).data('search_text_type'));
+      });
+    }

-	function initializeSearchNavLinks() {
-	    $('.search-nav').click(function() {
-		$('.search-nav.active').removeClass('active');
-		$(this).addClass('active');
-		setTimeout(search, 100);
-		context.JK.Sidebar.searchTypeSelection($(this).data('search_text_type'));
-	    });
-	}
+    context.JK.SearchResultScreen.searchTypeSelection = function(typeSelection) {
+      $('.search-nav.active').removeClass('active');
+      $('.search-result-header a[data-search_text_type='+typeSelection+']').addClass('active');
+    }

-	context.JK.SearchResultScreen.searchTypeSelection = function(typeSelection) {
-	    $('.search-nav.active').removeClass('active');
-	    $('.search-result-header a[data-search_text_type='+typeSelection+']').addClass('active');
-	}
+    function beforeShow(data) {
+      var query = data.query;
+    }

-        function beforeShow(data) {
-            var query = data.query;
-        }
+    function afterShow(data) {
+    }

-        function afterShow(data) {
-        }
+    function selectedSearchType() {
+      var srchtype = $('.search-nav.active').data('search_text_type');
+      if (srchtype === undefined) {
+        srchtype = $('#search_text_type').val();
+      }
+      return srchtype;
+    }

-	function selectedSearchType() {
-	    var srchtype = $('.search-nav.active').data('search_text_type');
-	    if (srchtype === undefined) {
-		srchtype = $('#search_text_type').val();
-	    }
-	    return srchtype;
-	}
+    function search(evt) {
+      if (evt) {
+        evt.stopPropagation();
+      }
+      
+      $('#search-results').empty();
+      
+      var query = $('#search-input').val();
+      if (query) {
+        context.location = '/client#/searchResults/:' + query;
+      }
+      else {
+        query = $('#query').html();
+      }

-        function search(evt) {
-	    if (evt) {
-		evt.stopPropagation();
-	    }
-            $('#search-results').empty();
-            var query = $('#search-input').val();
-	    if (query) {
-		context.location = '/client#/searchResults/:' + query;
-	    } else {
-		query = $('#query').html();
-	    }
+      if (query !== '') {
+        $('#query').html(query);
+        query += '&search_text_type='+selectedSearchType();
+        context.JK.search(query, app, context.JK.SearchResultScreen.onSearchSuccess);
+      }
+      else {
+        $('#result-count').html('');
+        $('#query').html('');
+      }

-            if (query !== '') {
-                $('#query').html(query);
-		query += '&search_text_type='+selectedSearchType();
-                context.JK.search(query, app, context.JK.SearchResultScreen.onSearchSuccess);
-            } else {
-                $('#result-count').html('');
-                $('#query').html('');
+      return false;
+    }
+
+    function resultDivVisibility(val, isSidebar) {
+      if (isSidebar) {
+        $('div[layout=sidebar user-id=' + val.id + '].sidebar-search-connected').hide();
+        $('div[layout=sidebar user-id=' + val.id + '].sidebar-search-result').show();
+      }
+      else {
+        $('div[user-id=' + val.id + '].search-connected').hide();
+        $('div[user-id=' + val.id + '].search-result').show();
+      }
+    }
+
+    context.JK.SearchResultScreen.onSearchSuccess = function(response) {
+      searchResults(response, true);
+      searchResults(response, false);
+      context.JK.bindHoverEvents();
+    }
+
+    function searchResults(response, isSidebar) {
+      var resultCount=0;
+      var selector, template_name;
+      selector = isSidebar ? '#sidebar-search-results' : '#search-results';
+      $(selector).html('');
+
+      if (response.search_type === 'musicians') {
+        resultCount = response.musicians.length;
+        // TODO: generalize this for each search result type (band, musician, et. al.)
+        template_name = isSidebar ? "#template-musicians-sidebar-search-result" : "#template-musicians-search-result";
+        
+        $.each(response.musicians, function(index, val) {
+          // fill in template for Connect pre-click
+          var args = {
+            userId: val.id, 
+            avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
+            profile_url: "/client#/profile/" + val.id,
+            userName: val.name,
+            location: val.location,
+            instruments: getInstrumentHtml(val.instruments)
+          };
+          selector = isSidebar ? '#sidebar-search-results' : '#search-results';
+          $(selector).append(context.JK.fillTemplate($(template_name).html(), args));
+
+          // fill in template for Connect post-click
+          selector = isSidebar ? '#template-sidebar-invitation-sent' : '#template-invitation-sent';
+          var invitationSentHtml = context.JK.fillTemplate($(selector).html(), {
+            userId: val.id,
+            first_name: val.first_name,
+            profile_url: "/client#/profile/" + val.id
+          });
+
+          selector = isSidebar ? '#sidebar-search-results' : '#search-results';
+          $(selector).append(invitationSentHtml);
+
+          // wire up button click handler if search result is not a friend or the current use
+          if (isSidebar) {
+            var $sidebar = $('div[layout=sidebar] div[user-id=' + val.id + ']');
+            if (!val.is_friend && val.id !== context.JK.currentUserId) {
+              $sidebar.find('.btn-connect-friend').click(sendFriendRequest);
            }
-
-            return false;
-        }
-
-	function resultDivVisibility(val, isSidebar) {
-	    if (isSidebar) {
-		$('div[layout=sidebar user-id=' + val.id + '].sidebar-search-connected').hide();
-		$('div[layout=sidebar user-id=' + val.id + '].sidebar-search-result').show();
-	    } else {
-		$('div[user-id=' + val.id + '].search-connected').hide();
-		$('div[user-id=' + val.id + '].search-result').show();
-	    }
-	}
-
-        context.JK.SearchResultScreen.onSearchSuccess = function(response) {
-	    searchResults(response, true);
-	    searchResults(response, false);
-        }
-
-	function searchResults(response, isSidebar) {
-            var resultCount=0;
-	    var selector, template_name;
-	    selector = isSidebar ? '#sidebar-search-results' : '#search-results';
-            $(selector).html('');
-
-	    if (response.search_type === 'musicians') {
-		resultCount = response.musicians.length;
-		// TODO: generalize this for each search result type (band, musician, et. al.)
-		template_name = isSidebar ? "#template-musicians-sidebar-search-result" : "#template-musicians-search-result";
-		$.each(response.musicians, function(index, val) {
-                    // fill in template for Connect pre-click
-		    var args = {
-			userId: val.id, 
-			avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
-			profile_url: "/client#/profile/" + val.id,
-			userName: val.name,
-			location: val.location,
-			instruments: getInstrumentHtml(val.instruments)
-		    };
-		    selector = isSidebar ? '#sidebar-search-results' : '#search-results';
-                    $(selector).append(context.JK.fillTemplate($(template_name).html(), args));
-
-                    // fill in template for Connect post-click
-		    selector = isSidebar ? '#template-sidebar-invitation-sent' : '#template-invitation-sent';
-                    var invitationSentHtml = context.JK.fillTemplate($(selector).html(), {
-			userId: val.id,
-			first_name: val.first_name,
-			profile_url: "/client#/profile/" + val.id
-                    });
-
-		    selector = isSidebar ? '#sidebar-search-results' : '#search-results';
-                    $(selector).append(invitationSentHtml);
-
-                    // wire up button click handler if search result is not a friend or the current use
-		    if (isSidebar) {
-			var $sidebar = $('div[layout=sidebar] div[user-id=' + val.id + ']');
-			if (!val.is_friend && val.id !== context.JK.currentUserId) {
-			    $sidebar.find('.btn-connect-friend').click(sendFriendRequest);
-			} else {
-			    // hide the button if the search result is already a friend
-			    $sidebar.find('.btn-connect-friend').hide();
-			}
-		    } else {
-			if (!val.is_friend &&  val.id !== context.JK.currentUserId) {
-			    $('div[user-id=' + val.id + ']').find('.btn-connect-friend').click(sendFriendRequest);
-			} else {
-			    $('div[user-id=' + val.id + ']').find('.btn-connect-friend').hide();
-			}
-		    }
-		    resultDivVisibility(val, isSidebar);
-		});
-
-	    } else if (response.search_type === 'bands') {
-		resultCount = response.bands.length;
-		template_name = isSidebar ? "#template-bands-sidebar-search-result" : "#template-bands-search-result";
-		$.each(response.bands, function(index, val) {
-                    // fill in template for Connect pre-click
-                    var searchResultHtml = context.JK.fillTemplate($(template_name).html(), {
-			bandId: val.id, 
-			avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
-			band_url: val.website,
-			bandName: val.name,
-			location: val.location
-                    });
-		    selector = isSidebar ? '#sidebar-search-results' : '#search-results';
-                    $(selector).append(searchResultHtml);
-		    resultDivVisibility(val, isSidebar);
-		});
-
-	    } else if (response.search_type === 'fans') {
-		resultCount = response.fans.length;
-		template_name = isSidebar ? "#template-fans-sidebar-search-result" : "#template-fans-search-result";
-		$.each(response.fans, function(index, val) {
-                    // fill in template for Connect pre-click
-                    var searchResultHtml = context.JK.fillTemplate($(template_name).html(), {
-			userId: val.id, 
-			avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
-			profile_url: "/client#/profile/" + val.id,
-			userName: val.name,
-			location: val.location
-                    });
-		    selector = isSidebar ? '#sidebar-search-results' : '#search-results';
-                    $(selector).append(searchResultHtml);
-		    resultDivVisibility(val, isSidebar);
-		});
+            else {
+            // hide the button if the search result is already a friend
+            $sidebar.find('.btn-connect-friend').hide();
            }
-	    if (isSidebar) {
-		// show header
-		$('#sidebar-search-header').show();
-		// hide panels
-		$('[layout-panel="contents"]').hide();
-		$('[layout-panel="contents"]').css({"height": "1px"});
-		// resize search results area
-		$('#sidebar-search-results').height(context.JK.Sidebar.getHeight() + 'px');
-	    } else {
-		$('#result-count').html(resultCount);
-		if (resultCount === 1) {
-		    $('#result-count').append(" Result for: ");
-		} else {
-		    $('#result-count').append(" Results for: ");
-		}
-	    }
-	};
-
-	function friendRequestCallbackSidebar(userId) {
-	    // toggle the pre-click and post-click divs
-	    $('div[layout=sidebar] div[user-id=' + userId + '].sidebar-search-connected').show();
-	    $('div[layout=sidebar] div[user-id=' + userId + '].sidebar-search-result').hide();
-	}
-
-	function friendRequestCallbackSearchResults(userId) {
-	    // toggle the pre-click and post-click divs
-	    $('div[user-id=' + userId + '].search-connected').show();
-	    $('div[user-id=' + userId + '].search-result').hide();
-	}
-
-	function sendFriendRequest(evt) {
-            evt.stopPropagation();
-            var userId = $(this).parent().attr('user-id');
-	    if ($(this).closest('#sidebar-search-results')) {
-		context.JK.sendFriendRequest(app, userId, friendRequestCallbackSidebar);
-	    } else {
-		context.JK.sendFriendRequest(app, userId, friendRequestCallbackSearchResults);
-	    }
-	}
-
-        function getInstrumentHtml(instruments) {
-            var instrumentLogoHtml = '';
-            if (instruments !== undefined) {
-                for (var i=0; i < instruments.length; i++) {
-                    var inst = '../assets/content/icon_instrument_default24.png';
-                    if (instruments[i].instrument_id in instrument_logo_map) {
-                        inst = instrument_logo_map[instruments[i].instrument_id];
-                        instrumentLogoHtml += '<img src="' + inst + '" width="24" height="24" />&nbsp;';
-                    }
-                }
+          }
+          else {
+            if (!val.is_friend &&  val.id !== context.JK.currentUserId) {
+              $('div[user-id=' + val.id + ']').find('.btn-connect-friend').click(sendFriendRequest);
            }
-            return instrumentLogoHtml;
+            else {
+              $('div[user-id=' + val.id + ']').find('.btn-connect-friend').hide();
+            }
+          }
+          resultDivVisibility(val, isSidebar);
+        });
+      }
+
+      else if (response.search_type === 'bands') {
+        resultCount = response.bands.length;
+        template_name = isSidebar ? "#template-bands-sidebar-search-result" : "#template-bands-search-result";
+
+        $.each(response.bands, function(index, val) {
+          // fill in template for Connect pre-click
+          var searchResultHtml = context.JK.fillTemplate($(template_name).html(), {
+            bandId: val.id, 
+            avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
+            band_url: val.website,
+            bandName: val.name,
+            location: val.location
+          });
+
+          selector = isSidebar ? '#sidebar-search-results' : '#search-results';
+          $(selector).append(searchResultHtml);
+          resultDivVisibility(val, isSidebar);
+        });
+      }
+
+      else if (response.search_type === 'fans') {
+        resultCount = response.fans.length;
+        template_name = isSidebar ? "#template-fans-sidebar-search-result" : "#template-fans-search-result";
+
+        $.each(response.fans, function(index, val) {
+            // fill in template for Connect pre-click
+            var searchResultHtml = context.JK.fillTemplate($(template_name).html(), {
+            userId: val.id, 
+            avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
+            profile_url: "/client#/profile/" + val.id,
+            userName: val.name,
+            location: val.location
+            });
+            selector = isSidebar ? '#sidebar-search-results' : '#search-results';
+            $(selector).append(searchResultHtml);
+            resultDivVisibility(val, isSidebar);
+        });
+      }
+
+      if (isSidebar) {
+        // show header
+        $('#sidebar-search-header').show();
+        // hide panels
+        $('[layout-panel="contents"]').hide();
+        $('[layout-panel="contents"]').css({"height": "1px"});
+        // resize search results area
+        $('#sidebar-search-results').height(context.JK.Sidebar.getHeight() + 'px');
+      }
+      else {
+        $('#result-count').html(resultCount);
+        if (resultCount === 1) {
+        $('#result-count').append(" Result for: ");
        }
-
-        function events() {
-            $('#searchForm').submit(search);
+        else {
+          $('#result-count').append(" Results for: ");
        }
+      }
+    }

-        this.initialize = function() {
-            var screenBindings = {
-                'beforeShow': beforeShow,
-                'afterShow': afterShow
-            };
-            app.bindScreen('searchResults', screenBindings);
-            events();
-	    initializeSearchNavLinks();
-        };
+    function friendRequestCallbackSidebar(userId) {
+      // toggle the pre-click and post-click divs
+      $('div[layout=sidebar] div[user-id=' + userId + '].sidebar-search-connected').show();
+      $('div[layout=sidebar] div[user-id=' + userId + '].sidebar-search-result').hide();
+    }

+    function friendRequestCallbackSearchResults(userId) {
+      // toggle the pre-click and post-click divs
+      $('div[user-id=' + userId + '].search-connected').show();
+      $('div[user-id=' + userId + '].search-result').hide();
+    }
+
+    function sendFriendRequest(evt) {
+      evt.stopPropagation();
+      var userId = $(this).parent().attr('user-id');
+
+      if ($(this).closest('#sidebar-search-results')) {
+        context.JK.sendFriendRequest(app, userId, friendRequestCallbackSidebar);
+      }
+      else {
+        context.JK.sendFriendRequest(app, userId, friendRequestCallbackSearchResults);
+      }
+    }
+
+    function getInstrumentHtml(instruments) {
+      var instrumentLogoHtml = '';
+      if (instruments !== undefined) {
+        for (var i=0; i < instruments.length; i++) {
+          var inst = '../assets/content/icon_instrument_default24.png';
+          if (instruments[i].instrument_id in instrument_logo_map) {
+            inst = instrument_logo_map[instruments[i].instrument_id];
+            instrumentLogoHtml += '<img src="' + inst + '" width="24" height="24" />&nbsp;';
+          }
+        }
+      }
+      return instrumentLogoHtml;
+    }
+
+    function events() {
+      $('#searchForm').submit(search);
+    }
+
+    this.initialize = function() {
+      var screenBindings = {
+        'beforeShow': beforeShow,
+        'afterShow': afterShow
+      };
+
+      app.bindScreen('searchResults', screenBindings);
+      events();
+      initializeSearchNavLinks();
    };
-
+  }
 })(window,jQuery);
--- a/web/app/assets/javascripts/sidebar.js
+++ b/web/app/assets/javascripts/sidebar.js
--- a/web/app/assets/javascripts/utils.js
+++ b/web/app/assets/javascripts/utils.js
@ -164,7 +164,7 @@
        // MUSICIAN
        $("[hoveraction='musician']").hoverIntent({
            over: function() {
-                var bubble = new JK.MusicianHoverBubble($(this).attr('user-id'), $(this).position());
+                var bubble = new JK.MusicianHoverBubble($(this).attr('user-id'), $(this).offset());
                showBubble(bubble, $(this));
            },
            out: function() { // this registers for leaving the hoverable element
@ -176,7 +176,7 @@
        // FAN
        $("[hoveraction='fan']").hover(
            function() {
-                var bubble = new JK.FanHoverBubble($(this).attr('user-id'), $(this).position());
+                var bubble = new JK.FanHoverBubble($(this).attr('user-id'), $(this).offset());
                showBubble(bubble, $(this));
            },
            function() { // this registers for leaving the hoverable element
@ -187,7 +187,7 @@
        // BAND
        $("[hoveraction='band']").hoverIntent({
            over: function() {
-                var bubble = new JK.BandHoverBubble($(this).attr('band-id'), $(this).position());
+                var bubble = new JK.BandHoverBubble($(this).attr('band-id'), $(this).offset());
                showBubble(bubble, $(this));
            },
            out: function() { // this registers for leaving the hoverable element
@ -199,7 +199,7 @@
        // SESSION
        $("[hoveraction='session']").hover(
            function() {
-                var bubble = new JK.SessionHoverBubble($(this).attr('session-id'), $(this).position());
+                var bubble = new JK.SessionHoverBubble($(this).attr('session-id'), $(this).offset());
                showBubble(bubble, $(this));
            },
            function() { // this registers for leaving the hoverable element
@ -210,7 +210,7 @@
        // RECORDING
        $("[hoveraction='recording']").hover(
            function() {
-                var bubble = new JK.RecordingHoverBubble($(this).attr('recording-id'), $(this).position());
+                var bubble = new JK.RecordingHoverBubble($(this).attr('recording-id'), $(this).offset());
                showBubble(bubble, $(this));
            },
            function() { // this registers for leaving the hoverable element
--- a/web/app/assets/javascripts/web/web.js
+++ b/web/app/assets/javascripts/web/web.js
@ -11,6 +11,11 @@
 //= require web/signupDialog
 //= require web/signinDialog
 //= require invitationDialog
+//= require hoverMusician
+//= require hoverFan
+//= require hoverBand
+//= require hoverSession
+//= require hoverRecording
 //= require shareDialog
 //= require layout
 //= require user_dropdown
--- a/web/app/assets/stylesheets/client/hoverBubble.css.scss
+++ b/web/app/assets/stylesheets/client/hoverBubble.css.scss
@ -50,4 +50,23 @@ strong {
 .musicians a {
  color:#fff;
  text-decoration:none;
+}
+
+.avatar-tiny {
+    float:left;
+    padding:1px;
+    width:24px;
+    height:24px;
+    background-color:#ed3618;
+    -webkit-border-radius:12px;
+    -moz-border-radius:12px;
+    border-radius:12px;
+}
+
+.avatar-tiny img {
+    width: 24px;
+    height: 24px;
+    -webkit-border-radius:12px;
+    -moz-border-radius:12px;
+    border-radius:12px;
 }
--- a/web/app/views/api_users/friend_index.rabl
+++ b/web/app/views/api_users/friend_index.rabl
@ -1,3 +1,3 @@
 object @user.friends

-attributes :id, :first_name, :last_name, :name, :location, :city, :state, :country, :email, :online, :photo_url
+attributes :id, :first_name, :last_name, :name, :location, :city, :state, :country, :musician, :email, :online, :photo_url
--- a/web/app/views/api_users/show.rabl
+++ b/web/app/views/api_users/show.rabl
@ -21,37 +21,27 @@ elsif current_user
  end
 end

-unless @user.friends.blank?
-  child :friends => :friends do
-    attributes :id, :first_name, :last_name, :name, :online, :photo_url
+child :friends => :friends do
+  attributes :id, :first_name, :last_name, :name, :online, :photo_url
+end
+
+child :followings => :followings do
+  attributes :id, :first_name, :last_name, :name, :online, :photo_url
+end
+
+child :band_musicians => :bands do
+  attributes :id, :name, :admin, :photo_url, :logo_url
+
+  child :genres => :genres do
+    attributes :id, :description
+    #partial('api_genres/index', :object => @user.bands.genres)
  end
 end

-unless @user.followings.blank?
-  child :followings => :followings do
-    attributes :id, :first_name, :last_name, :name, :online, :photo_url
-  end
+child :musician_instruments => :instruments do
+  attributes :description, :proficiency_level, :priority, :instrument_id
 end

-unless @user.bands.blank?
-  child :band_musicians => :bands do
-    attributes :id, :name, :admin, :photo_url, :logo_url
-
-    child :genres => :genres do
-      attributes :id, :description
-      #partial('api_genres/index', :object => @user.bands.genres)
-    end
-  end
-end
-
-unless @user.instruments.blank?
-  child :musician_instruments => :instruments do
-    attributes :description, :proficiency_level, :priority, :instrument_id
-  end
-end
-
-unless @user.music_sessions.blank?
-  child :music_sessions => :sessions do
-    attributes :id, :description, :musician_access, :approval_required, :fan_access
-  end
+child :music_sessions => :sessions do
+  attributes :id, :description, :musician_access, :approval_required, :fan_access
 end
--- a/web/app/views/clients/_bands.html.erb
+++ b/web/app/views/clients/_bands.html.erb
@ -25,7 +25,7 @@
    <div class="f11">
      <div class="left" style="width:63px;margin-top:-12px;">
        <!-- avatar -->
-        <div class="avatar-small" band-id="{band_id}" hoveraction="band"><img src="{avatar_url}" /></div>
+        <div class="avatar-small"><img src="{avatar_url}" /></div>
      </div>
      <div class="right mband-players" style="width:250px;margin-top:-10px;">
        <table class="musicians" cellpadding="0" cellspacing="5">{band_player_template}</table>
--- a/web/app/views/clients/_hoverFan.html.erb
+++ b/web/app/views/clients/_hoverFan.html.erb
@ -1,46 +1,27 @@
-<!-- fan hover -->
-<div id="fan-detail-1" class="hidden bubble">
-<h2>Fan Detail</h2>
+<div id="fan-hover" class="hidden bubble">
+  
+</div>
+
+<script type="text/template" id="template-hover-fan">
 <div class="bubble-inner">
-<a href="#" class="avatar_large left mr20"><img src="images/shared/avatar_creepyeye.jpg" /></a>
-<div class="left ib"><h3>Tomas Jones</h3>
-<small>Austin, TX</small><br /><br />
-
-122 <img src="images/content/icon_friend.png" align="absmiddle" />&nbsp;&nbsp;&nbsp;4 <img src="images/content/icon_followers.png" width="22" height="12" align="absmiddle" /></div><br clear="all" /><br />
-<br />
-
-<div class="f11">Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</div><br />
-
-<small><strong>FOLLOWING:</strong></small>
-  <table class="musicians" cellpadding="0" cellspacing="5">
-                <tr>
-                <td width="24"><a href="#" class="avatar-tiny"><img src="images/content/avatar_band3.jpg" /></a></td>
-                <td><a href="#"><strong>Fox Force Five</strong></a></td>
-               <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_silverfox.jpg" /></a></td>
-                <td><a href="#"><strong>Bob Scrothers</strong></a></td>
-                </tr>
-                <tr>
-                <td width="24"><a href="#" class="avatar-tiny"><img src="images/content/avatar_band2.jpg" /></a></td>
-                <td><a href="#"><strong>Bethany Grey</strong></a></td>
-                <td></td>
-                <td></td>
-                </tr>
-               
-                </table><br />
-
-                <div align="center">
-<div class="left"><a href="#" class="button-orange">PROFILE</a></div>
-<div class="left"><a href="#" class="button-orange">FOLLOW</a></div>
-</div>
-<br /><br />
-
-
-</div>
-
-</div>
-
-<script type="text/template" id="template-hover-bubble">
-  <div class="hover-bubble">
-
+    <a href="#" class="avatar_large left mr20"><img src="{avatar_url}" /></a>
+    <div class="left ib">
+      <h3>{name}</h3>
+      <small>{location}</small><br /><br />
+      {friend_count} <img src="/assets/content/icon_friend.png" align="absmiddle" />&nbsp;&nbsp;&nbsp;
+      {follower_count} <img src="/assets/content/icon_followers.png" width="22" height="12" align="absmiddle" />
+    </div>
+    <br clear="all" /><br />
+    <div class="f11">{biography}</div><br />
+    <small><strong>FOLLOWING:</strong></small><br /><br />
+    <table class="musicians" cellpadding="0" cellspacing="5">
+      {followings}
+    </table>
+    <br />
+    <div align="center">
+      <div class="left"><a href="{profile_url}" class="button-orange">PROFILE</a></div>
+      <div class="left"><a class="button-orange">FOLLOW</a></div>
+    </div>
+    <br /><br />
  </div>
 </script>
--- a/web/app/views/clients/_searchResults.html.erb
+++ b/web/app/views/clients/_searchResults.html.erb
@ -25,8 +25,11 @@

 <script type="text/template" id="template-musicians-search-result">
    <div user-id="{userId}" class="search-result">          
-        <a href="#" class="avatar-small"><img src="{avatar_url}" /></a>
-        <div class="search-result-name"><a href="{profile_url}">{userName}</a><br />
+        <a href="#" user-id="{userId}" hoveraction="musician" class="avatar-small">
+            <img src="{avatar_url}" />
+        </a>
+        <div class="search-result-name">
+            <a user-id="{userId}" hoveraction="musician" href="{profile_url}">{userName}</a><br />
            <span class="search-result-location">{location}</span>
        </div>
        <br clear="left" />
@ -37,6 +40,32 @@
    </div>
 </script>

+<script type="text/template" id="template-fans-search-result">
+    <div user-id="{userId}" class="search-result">          
+        <a user-id="{userId}" hoveraction="fan" href="#" class="avatar-small">
+            <img src="{avatar_url}" />
+        </a>
+        <div class="search-result-name">
+            <a user-id="{userId}" hoveraction="fan" href="{profile_url}">{userName}</a><br />
+            <span class="search-result-location">{location}</span>
+        </div>
+        <br clear="left" />
+    </div>
+</script>
+
+<script type="text/template" id="template-bands-search-result">
+    <div user-id="{bandId}" class="search-result">          
+        <a band-id="{bandId}" hoveraction="band" href="#" class="avatar-small">
+            <img src="{avatar_url}" />
+        </a>
+        <div class="search-result-name">
+            <a band-id="{bandId}" hoveraction="band" href="{band_url}">{bandName}</a><br />
+            <span class="search-result-location">{location}</span>
+        </div>
+        <br clear="left" />
+    </div>
+</script>
+
 <script type="text/template" id="template-invitation-sent">
    <div user-id="{userId}" class="search-connected">
        <div style="margin-top:10px;">
@ -49,23 +78,3 @@
    </div>
 </script>

-<script type="text/template" id="template-bands-search-result">
-    <div user-id="{bandId}" class="search-result">          
-        <a href="#" class="avatar-small"><img src="{avatar_url}" /></a>
-        <div class="search-result-name"><a href="{band_url}">{bandName}</a><br />
-            <span class="search-result-location">{location}</span>
-        </div>
-        <br clear="left" />
-    </div>
-</script>
-
-<script type="text/template" id="template-fans-search-result">
-    <div user-id="{userId}" class="search-result">          
-        <a href="#" class="avatar-small"><img src="{avatar_url}" /></a>
-        <div class="search-result-name"><a href="{profile_url}">{userName}</a><br />
-            <span class="search-result-location">{location}</span>
-        </div>
-        <br clear="left" />
-    </div>
-</script>
-
--- a/web/app/views/clients/_sidebar.html.erb
+++ b/web/app/views/clients/_sidebar.html.erb
@ -134,26 +134,37 @@
 <!-- Search result template -->
 <script type="text/template" id="template-musicians-sidebar-search-result">
  <div user-id="{userId}" class="sidebar-search-result">
-    <a class="avatar-small"><img src="{avatar_url}" /></a>
-    <div class="result-name"><a href="{profile_url}">{userName}</a><br />
+    <a user-id="{userId}" hoveraction="musician" class="avatar-small">
+      <img src="{avatar_url}" />
+    </a>
+    <div class="result-name">
+      <a user-id="{userId}" hoveraction="musician" href="{profile_url}">{userName}</a><br />
      <span class="result-location">{location}</span>
    </div><br />
    <a class="btn-connect-friend button-orange smallbutton right">CONNECT</a>
    <br clear="all" />
  </div>
 </script>
+
 <script type="text/template" id="template-bands-sidebar-search-result">
  <div band-id="{bandId}" class="sidebar-search-result">
-    <a class="avatar-small"><img src="{avatar_url}" /></a>
-    <div class="result-name"><a href="{band_url}">{bandName}</a><br />
+    <a band-id="{bandId}" hoveraction="band" class="avatar-small">
+      <img src="{avatar_url}" />
+    </a>
+    <div class="result-name">
+      <a band-id="{bandId}" hoveraction="band" href="{band_url}">{bandName}</a><br />
      <span class="result-location">{location}</span>
    </div><br />
  </div>
 </script>
+
 <script type="text/template" id="template-fans-sidebar-search-result">
  <div user-id="{userId}" class="sidebar-search-result">
-    <a class="avatar-small"><img src="{avatar_url}" /></a>
-    <div class="result-name"><a href="{profile_url}">{userName}</a><br />
+    <a user-id="{userId}" hoveraction="fan" class="avatar-small">
+      <img src="{avatar_url}" />
+    </a>
+    <div class="result-name">
+      <a user-id="{userId}" hoveraction="fan" href="{profile_url}">{userName}</a><br />
      <span class="result-location">{location}</span>
    </div><br />
    <br clear="all" />
@ -162,7 +173,7 @@

 <!-- Friend panel template -->
 <script type="text/template" id="template-friend-panel">
-  <li class="{cssClass}">
+  <li class="{cssClass}" user-id="{userId}" hoveraction="{hoverAction}" >
    <div class="avatar-small"><img src="{avatar_url}" /></div>
    <div class="friend-name">
      {userName}<br/>
--- a/web/app/views/layouts/web.erb
+++ b/web/app/views/layouts/web.erb
@ -57,6 +57,12 @@
    <%= render "users/signupDialog" %>
    <%= render "users/signinDialog" %>
    <%= render "clients/notify" %>
+    <%= render "clients/hoverMusician" %>
+    <%= render "clients/hoverFan" %>
+    <%= render "clients/hoverBand" %>
+    <%= render "clients/hoverSession" %>
+    <%= render "clients/hoverRecording" %>
+    
    <%= yield(:extra_dialogs) %>

    <script type="text/javascript">
@ -94,6 +100,8 @@

            var signinDialog = new JK.SigninDialog(JK.app);
            signinDialog.initialize();
+
+            JK.bindHoverEvents();
        })
    </script>

--- a/web/app/views/shared/_comments.html.erb
+++ b/web/app/views/shared/_comments.html.erb
@ -10,7 +10,8 @@
        
  <div class="landing-comment-scroller">
    <% comments.each do |c| %>
-      <div class="avatar-small mr10">
+      <% hoverAction = c.user.musician ? "musician" : "fan" %>
+      <div user-id="<%= c.user.id %>" hoveraction="<%= hoverAction %>" class="avatar-small mr10">
        <% unless c.user.photo_url.blank? %>
          <%= image_tag "#{c.user.photo_url}", {:alt => ""} %>
        <% else %>
@ -18,7 +19,7 @@
        <% end %>
      </div>
      <div class="w80 left p10 lightgrey mt10">
-        <a href="#"><%= c.user.name %></a>&nbsp;<%= c.comment %>
+        <a user-id="<%= c.user.id %>" hoveraction="<%= hoverAction %>" href="#"><%= c.user.name %></a>&nbsp;<%= c.comment %>
        <br />
        <div class="f12 grey mt5"><%= c.created_at.strftime("%b %e %Y, %l:%M %p") %></div>
      </div>
--- a/web/app/views/shared/_track_details.html.erb
+++ b/web/app/views/shared/_track_details.html.erb
@ -8,7 +8,7 @@
      <table>
        <tr>
          <td>        
-            <div class="avatar-small m0">
+            <div user-id="<%= track.musician.id %>" hoveraction="musician" class="avatar-small m0">
              <% unless track.musician.photo_url.blank? %>
                <%= image_tag "#{track.musician.photo_url}", {:alt => ""} %>
              <% else %>
@ -16,7 +16,7 @@
              <% end %>
            </div>
          </td>
-          <td style="width:150px;"><div class="lightgrey f15 ml10"><%= track.musician.name %></div></td>
+          <td style="width:150px;"><div user-id="<%= track.musician.id %>" hoveraction="musician" class="lightgrey f15 ml10"><%= track.musician.name %></div></td>
          <td class="p10">
            <div class="ml10">
              <%= image_tag "content/icon_instrument_#{track.instrument_id.tr(" ", "_")}45.png", {:width => 32, :alt => "", :title => "#{track.instrument_id}"} %>