From bca7f334002c53c83096d36315c0eb31a3e903eb Mon Sep 17 00:00:00 2001
From: Brian Smith <briansmith@jamkazam.com>
Date: Mon, 10 Feb 2014 23:08:40 -0500
Subject: [PATCH] VRFS-1028 hover bubble work

---
 web/app/assets/javascripts/findMusician.js  |   3 +
 web/app/assets/javascripts/hoverMusician.js |  18 +-
 web/app/assets/javascripts/utils.js         |  75 +++++++
 web/app/views/clients/_bandProfile.html.erb |   2 +-
 web/app/views/clients/_hoverBubble.html.erb | 229 --------------------
 web/app/views/clients/_musicians.html.erb   |   8 +-
 web/app/views/clients/index.html.erb        |   7 +
 7 files changed, 102 insertions(+), 240 deletions(-)

diff --git a/web/app/assets/javascripts/findMusician.js b/web/app/assets/javascripts/findMusician.js
index 9293852c9..bc0b4b2a8 100644
--- a/web/app/assets/javascripts/findMusician.js
+++ b/web/app/assets/javascripts/findMusician.js
@@ -105,6 +105,7 @@
                 for (var jj=0, ilen=mm['followings'].length; jj<ilen; jj++) {
                     aFollow = mm['followings'][jj];
                     followVals = {
+                        user_id: aFollow.user_id,
                         musician_name:  aFollow.name,
                         profile_url: '/client#/profile/' + aFollow.user_id,
                         avatar_url:  context.JK.resolveAvatarUrl(aFollow.photo_url),
@@ -144,6 +145,8 @@
 
             $('.search-m-friend').on('click', friendMusician);
             $('.search-m-follow').on('click', followMusician);
+
+            context.JK.bindHoverEvents();
         }
 
         function beforeShow(data) {
diff --git a/web/app/assets/javascripts/hoverMusician.js b/web/app/assets/javascripts/hoverMusician.js
index 168eae817..46c3c0500 100644
--- a/web/app/assets/javascripts/hoverMusician.js
+++ b/web/app/assets/javascripts/hoverMusician.js
@@ -2,15 +2,21 @@
 
     "use strict";
     context.JK = context.JK || {};
-    context.JK.MusicianHoverBubble = function(app, user, position) {
+    context.JK.MusicianHoverBubble = function(userId, position) {
       var logger = context.JK.logger;
       var rest = context.JK.Rest();
 
-      function showBubble() {
-        $("#musician-hover").css({left: position.left; top: position.top});
-      }
+      this.showBubble = function() {
+        $("#musician-hover").css({left: position.left, top: position.top});
+        $("#musician-hover").fadeIn(500);
+      };
 
-      this.initialize = initialize;
-      this.showBubble = showBubble;
+      this.hideBubble = function() {
+        $("#musician-hover").hide();
+      };
+
+      this.id = function() {
+        return "#musician-hover";
+      };
     }
 })(window,jQuery);
\ No newline at end of file
diff --git a/web/app/assets/javascripts/utils.js b/web/app/assets/javascripts/utils.js
index 804f3e03b..da03f2d73 100644
--- a/web/app/assets/javascripts/utils.js
+++ b/web/app/assets/javascripts/utils.js
@@ -142,6 +142,81 @@
         $element.bt(text, options);
     }
 
+    context.JK.bindHoverEvents = function() {
+
+        function showBubble(bubble, $hoverElement) {
+            $hoverElement.attr("bubble-id", bubble.id);
+            bubble.showBubble();
+        }
+
+        function hideBubble($hoverElement) {
+            var bubbleSelector = $hoverElement.attr("bubble-id");
+            $(bubbleSelector).hover(
+                function() {
+                    // do nothing when entering the bubble (this should never happen)
+                },
+                function() {
+                    $(this).fadeOut(500);
+                }
+            );
+        }
+
+        // MUSICIAN
+        $("[hoveraction='musician']").hover(
+            function() {
+                var bubble = new JK.MusicianHoverBubble($(this).attr('user-id'), $(this).position());
+                showBubble(bubble, $(this));
+            },
+            function() { // this registers for leaving the hoverable element
+                hideBubble($(this));
+            }
+        );
+
+        // FAN
+        $("[hoveraction='fan']").hover(
+            function() {
+                var bubble = new JK.FanHoverBubble($(this).attr('user-id'), $(this).position());
+                showBubble(bubble, $(this));
+            },
+            function() { // this registers for leaving the hoverable element
+                hideBubble($(this));
+            }
+        );
+
+        // BAND
+        $("[hoveraction='band']").hover(
+            function() {
+                var bubble = new JK.BandHoverBubble($(this).attr('band-id'), $(this).position());
+                showBubble(bubble, $(this));
+            },
+            function() { // this registers for leaving the hoverable element
+                hideBubble($(this));
+            }
+        );
+
+        // SESSION
+        $("[hoveraction='session']").hover(
+            function() {
+                var bubble = new JK.BandHoverBubble($(this).attr('session-id'), $(this).position());
+                showBubble(bubble, $(this));
+            },
+            function() { // this registers for leaving the hoverable element
+                hideBubble($(this));
+            }
+        );
+
+        // RECORDING
+        $("[hoveraction='recording']").hover(
+            function() {
+                var bubble = new JK.BandHoverBubble($(this).attr('recording-id'), $(this).position());
+                showBubble(bubble, $(this));
+            },
+            function() { // this registers for leaving the hoverable element
+                hideBubble($(this));
+            }
+        );
+    }
+
     // Uber-simple templating
     // var template = "Hey {name}";
     // var vals = { name: "Jon" };
diff --git a/web/app/views/clients/_bandProfile.html.erb b/web/app/views/clients/_bandProfile.html.erb
index affb37669..c137b14d2 100644
--- a/web/app/views/clients/_bandProfile.html.erb
+++ b/web/app/views/clients/_bandProfile.html.erb
@@ -1,4 +1,4 @@
-<!-- Profile -->
+<!-- Band Profile -->
 <div layout="screen" layout-id="bandProfile" layout-arg="id" class="screen secondary">
     <div class="content-head">
         <div class="content-icon">
diff --git a/web/app/views/clients/_hoverBubble.html.erb b/web/app/views/clients/_hoverBubble.html.erb
index 4ef9c6edc..6fb92a38e 100644
--- a/web/app/views/clients/_hoverBubble.html.erb
+++ b/web/app/views/clients/_hoverBubble.html.erb
@@ -1,232 +1,3 @@
-<!-- band hover -->
-<div id="band-detail-1" class="hidden bubble">
-<h2>Band Detail</h2>
-<div class="bubble-inner">
-<a href="#" class="avatar_large left mr20"><img src="images/content/avatar_band3.jpg" /></a>
-<div class="left"><h3>Fox Force Five</h3>
-<small>Richmond, VA<br />
-<strong>Jazz</strong></small><br />
-
-12 <img src="images/content/icon_like.png" width="12" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;4 <img src="images/content/icon_followers.png" width="22" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;17 <img src="images/content/icon_recordings.png" width="12" height="13" align="absmiddle" />&nbsp;&nbsp;&nbsp;64 <img src="images/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" />
-</div>
-<br clear="all" /><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>
-  <table class="musicians" cellpadding="0" cellspacing="5">
-                <tr>
-                <td width="24"><a href="#" class="avatar-tiny" id="musician1"><img src="images/shared/avatar_david.jpg" /></a></td>
-                <td><a href="#">John Doe</a></td>
-                <td><div class="nowrap"><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" />&nbsp;<img src="images/content/icon_instrument_vocal24.png" width="24" height="24" /></div></td>
-                </tr>
-                <tr>
-                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_creepyeye.jpg" /></a></td>
-                <td><a href="#">Cassandra Defrenza</a></td>
-                <td><img src="images/content/icon_instrument_keyboard24.png" width="24" height="24" /></td>
-                </tr>
-                <tr>
-                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_silverfox.jpg" /></a></td>
-                <td><a href="#">Jimmy Stratham</a></td>
-                <td><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" /></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">LIKE</a></div>
-<div class="left"><a href="#" class="button-orange">FOLLOW</a></div>
-</div>
-<br /><br />
-
-
-</div>
-
-
-</div>
-
-<!-- musician hover -->
-<div id="musician-detail-1" class="hidden bubble">
-<h2>Musician Detail</h2>
-<div class="bubble-inner">
-<a href="#" class="avatar_large left mr20"><img src="images/shared/avatar_david.jpg" /></a>
-<div class="left ib"><h3>John Doe</h3>
-<small>Austin, TX</small><br /><br />
-
-<div class="left mr10 mb"><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" /></div>
-<div class="left mr10"><img src="images/content/icon_instrument_vocal24.png" width="24" height="24" /></div>
-<div class="left mr10"><img src="images/content/icon_instrument_keyboard24.png" width="24" height="24" /></div>
-<br clear="all" />
-
-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" />&nbsp;&nbsp;&nbsp;17 <img src="images/content/icon_recordings.png" width="12" height="13" align="absmiddle" />&nbsp;&nbsp;&nbsp;64 <img src="images/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" /></div><br clear="all" /><br />
-<div class="f12"><strong>IN SESSION &mdash; <a href="#">Click to Join</a></strong></div>
-
-
-<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/content/avatar_band1.jpg" /></a></td>
-                <td><a href="#"><strong>Tammany Hall</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">LIKE</a></div>
-<div class="left"><a href="#" class="button-orange">FRIEND</a></div>
-<div class="left"><a href="#" class="button-orange">FOLLOW</a></div>
-</div>
-<br /><br />
-
-
-</div>
-
-</div>
-
-<!-- fan hover -->
-<div id="fan-detail-1" class="hidden bubble">
-<h2>Fan Detail</h2>
-<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>
-
-<!-- session hover -->
-<div id="session-detail-1" class="hidden bubble">
-<h2>Session Detail</h2>
-<div class="bubble-inner">
-<div class="small left">JAZZ</div>
-<div class="small right">01/25/14 - 11:23 pm</div>
-<br clear="all" />
-<div class="f11 mt5 mb5">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>
-<div class="small">12 <img src="images/content/icon_arrow.png" width="7" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;4 <img src="images/content/icon_comment.png" width="13" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;17 <img src="images/content/icon_like.png" width="12" height="12" align="absmiddle" /></div><br />
-
-MUSICIANS:
-<!-- sub-table of musicians -->
-                <table class="musicians" cellpadding="0" cellspacing="5">
-                <tr>
-                <td width="24"><a href="#" class="avatar-tiny" id="musician1"><img src="images/shared/avatar_david.jpg" /></a></td>
-                <td><a href="#">John Doe</a></td>
-                <td><div class="nowrap"><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" />&nbsp;<img src="images/content/icon_instrument_vocal24.png" width="24" height="24" /></div></td>
-                </tr>
-                <tr>
-                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_creepyeye.jpg" /></a></td>
-                <td><a href="#">Cassandra Defrenza</a></td>
-                <td><img src="images/content/icon_instrument_keyboard24.png" width="24" height="24" /></td>
-                </tr>
-                <tr>
-                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_silverfox.jpg" /></a></td>
-                <td><a href="#">Jimmy Stratham</a></td>
-                <td><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" /></td>
-                </tr>
-                </table><br /><br />
-
-                <div align="center">
-<div class="left"><a href="#" class="button-orange">LIKE</a></div>
-<div class="left"><a href="#" class="button-orange">COMMENT</a></div>
-<div class="left"><a href="#" class="button-orange">SHARE</a></div>
-</div>
-<br /><br />
-
-
-</div>
-
-</div>
-
-<!-- recording hover -->
-<div id="recording-detail-1" class="hidden bubble">
-<h2>Recording Detail</h2>
-<div class="bubble-inner">
-<h3>Twelve Weeks</h3>
-<div class="small left">JAZZ</div>
-<div class="small right">01/25/14 - 11:23 pm</div>
-<br clear="all" />
-<div class="f11 mt5 mb5">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>
-<div class="small">12 <img src="images/content/icon_arrow.png" width="7" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;4 <img src="images/content/icon_comment.png" width="13" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;17 <img src="images/content/icon_like.png" width="12" height="12" align="absmiddle" /><br />
-<br />
-<a href="#" class="avatar_large left mr20"><img src="images/content/avatar_band3.jpg" /></a>
-<div class="left"><h3>Fox Force Five</h3>
-<small>Richmond, VA</small></div>
-<br clear="all" /><br />
-MUSICIANS:
-<!-- sub-table of musicians -->
-                <table class="musicians" cellpadding="0" cellspacing="5">
-                <tr>
-                <td width="24"><a href="#" class="avatar-tiny" id="musician1"><img src="images/shared/avatar_david.jpg" /></a></td>
-                <td><a href="#">John Doe</a></td>
-                <td><div class="nowrap"><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" />&nbsp;<img src="images/content/icon_instrument_vocal24.png" width="24" height="24" /></div></td>
-                </tr>
-                <tr>
-                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_creepyeye.jpg" /></a></td>
-                <td><a href="#">Cassandra Defrenza</a></td>
-                <td><img src="images/content/icon_instrument_keyboard24.png" width="24" height="24" /></td>
-                </tr>
-                <tr>
-                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_silverfox.jpg" /></a></td>
-                <td><a href="#">Jimmy Stratham</a></td>
-                <td><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" /></td>
-                </tr>
-                </table><br /><br />
-
-                <div align="center">
-<div class="left"><a href="#" class="button-orange">LIKE</a></div>
-<div class="left"><a href="#" class="button-orange">COMMENT</a></div>
-<div class="left"><a href="#" class="button-orange">SHARE</a></div>
-</div>
-<br /><br />
-
-
-</div>
-
-</div>
-
-</div>
-
-
 <script type="text/template" id="template-hover-bubble">
   <div class="hover-bubble">
 
diff --git a/web/app/views/clients/_musicians.html.erb b/web/app/views/clients/_musicians.html.erb
index c06ad294c..617c68f17 100644
--- a/web/app/views/clients/_musicians.html.erb
+++ b/web/app/views/clients/_musicians.html.erb
@@ -20,7 +20,7 @@
 <% end -%>
 
 <!-- Session Row Template -->
-<script type="text/template" id="template-find-musician-row"><!-- -->
+<script type="text/template" id="template-find-musician-row">
   <div class="profile-band-list-result musician-list-result">
     <div class="f11" data-hint="container">
       <div class="left" style="width:63px;margin-top:-12px;">
@@ -31,7 +31,7 @@
         <div class="bold">FOLLOWING:</div>
         <table class="musicians" cellpadding="0" cellspacing="5">{musician_follow_template}</table>
       </div>
-      <div class="" style="margin-left: 63px; margin-right: 130px;margin-top: 12px;"">
+      <div class="" style="margin-left: 63px; margin-right: 130px;margin-top: 12px;">
         <div class="first-row" data-hint="top-row">
           <div class="lcol left">
             <!-- name & location -->
@@ -74,10 +74,10 @@
 <script type="text/template" id="template-musician-follow-info">
   <tr>
     <td width="32">
-      <a href="{profile_url}" class="avatar-tiny"><img src="{avatar_url}" /></a>
+      <a user-id="{user_id}" hoveraction="musician" href="{profile_url}" class="avatar-tiny"><img src="{avatar_url}" /></a>
     </td>
     <td>
-      <a href="{profile_url}"><strong>{musician_name}</strong></a>
+      <a user-id="{user_id}" hoveraction="musician" href="{profile_url}"><strong>{musician_name}</strong></a>
     </td>
   </tr>
 </script>
diff --git a/web/app/views/clients/index.html.erb b/web/app/views/clients/index.html.erb
index 3ff305987..222afd70f 100644
--- a/web/app/views/clients/index.html.erb
+++ b/web/app/views/clients/index.html.erb
@@ -36,6 +36,11 @@
 <%= render "account_audio_profile" %>
 <%= render "invitationDialog" %>
 <%= render "inviteMusicians" %>
+<%= render "hoverBand" %>
+<%= render "hoverFan" %>
+<%= render "hoverMusician" %>
+<%= render "hoverRecording" %>
+<%= render "hoverSession" %>
 <%= render "whatsNextDialog" %>
 <%= render "recordingFinishedDialog" %>
 <%= render "localRecordingsDialog" %>
@@ -242,6 +247,8 @@
             }
             testConnected();
         }
+        
+        JK.bindHoverEvents();
     })
 </script>