jam-cloud/web/app/views/clients/_hoverMusician.html.erb

<div id="musician-hover" class="hidden bubble musician-bubble">
  
</div>

<script type="text/javascript">
  var rest = JK.Rest();
  var logger = JK.logger;
  var sessionUtils = JK.SessionUtils;
  
  // function addLike(userId) {
  //   rest.addLike({user_id: userId})
  //     .done(function(response) {
  //         $("#spnLikeCount", "#musician-hover").text(parseInt($("#spnLikeCount", "#musician-hover").text()) + 1);
  //         var $btnLikeSelector = $("#btnLike", "#musician-hover");
  //         $btnLikeSelector.unbind("click");
  //         $btnLikeSelector.html("LIKED");
  //     });
  // }

  function joinClick(sessionId) {
    sessionUtils.joinSession(sessionId); 
  }

  function addMusicianFollowing(userId) {
    rest.addFollowing({user_id: userId})
      .done(function(response) {
        adjustMusicianFollowingCount(1);

        var $btnFollowSelector = $("#btnFollow", "#musician-hover");
        $btnFollowSelector.unbind('click');
        $btnFollowSelector.attr('onclick', '');
        $btnFollowSelector.click(function() {
          removeMusicianFollowing(userId);
        });
        $btnFollowSelector.html("UNFOLLOW");
      });
  }

  function removeMusicianFollowing(userId) {
    rest.removeFollowing(userId)
      .done(function(response) {
        adjustMusicianFollowingCount(-1);

        var $btnFollowSelector = $("#btnFollow", "#musician-hover");
        $btnFollowSelector.unbind('click');
        $btnFollowSelector.attr('onclick', '');
        $btnFollowSelector.click(function() {
          addMusicianFollowing(userId);
        });
        $btnFollowSelector.html("FOLLOW");
      });
  }

  function messageMusician(userId) {
    if(JK.TextMessageDialogInstance) {
      JK.app.layout.showDialog('text-message', {d1: userId})
    }
    else {
      var goto = $('<span>We are sorry, but you can\'t message from this page.</span>');
      JK.app.notify(
          {
            title: "Unable to Message From Here",
            text: goto
          },
          null,
          true);
    }

    return false;
  }

  function adjustMusicianFollowingCount(value) {
    $("#spnFollowCount", "#musician-hover").html(parseInt($("#spnFollowCount", "#musician-hover").html()) + value);
  }

  function sendMusicianFriendRequest(userId) {
    rest.sendFriendRequest(JK.app, userId);
    //$("#btnFriend", "#musician-hover").hide();
    $("#btnFriend").html('REQUEST SENT');
    $("#btnFriend").addClass('disabled');
  }

  function removeMusicianFriend(userId) {
    rest.removeFriend({friend_id: userId})
      .done(function() {
        var $btnFriendSelector = $("#btnFriend", "#musician-hover");
        $btnFriendSelector.unbind("click");
        $btnFriendSelector.attr('onclick', '');
        $btnFriendSelector.html("CONNECT");
        $btnFriendSelector.click(function() {
          sendMusicianFriendRequest(userId);
        });
      });
  }
</script>

<script type="text/template" id="template-hover-musician">
  <div class="bubble-inner">
    <a href="{profile_url}" class="avatar_large left mr20"><img src="{avatar_url}" /></a>
    <div class="left ib">
      <h3>{name}</h3>
      <small>{location}</small><br /><br />
      {instruments}
      {genres}
      <br clear="all" />
      <span class="friend-count" title="friends">{friend_count} <img src="/assets/content/icon_friend.png" align="absmiddle" style="margin-right:4px;" /></span>
      <span class="follower-count" title="followers"><span id="spnFollowCount">{follower_count}</span> <img src="/assets/content/icon_followers.png" width="22" height="12" align="absmiddle" style="margin-right:4px;" /></span>
      <span class="recording-count" title="recordings">{recording_count} <img src="/assets/content/icon_recordings.png" width="12" height="13" align="absmiddle" style="margin-right:4px;" /></span>
      <span class="session-count" title="sessions">{session_count} <img src="/assets/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" style="margin-right:4px;" /></span>
    </div>
    <br clear="all" /><br />
    <div style="display:{session_display}" class="f12">
      <strong>IN SESSION <span style="display:{join_display}">&mdash;</span>
        <a id="btnJoinSession" onclick="joinClick('{sessionId}');" style="display:{join_display}">Click to Join</a>
      </strong>
    </div>
    <br />
    <div class="f11">{biography}</div><br />
    <div class="left f11 musician-latency">
      Your latency to {first_name} is:&nbsp;&nbsp;{latency_badge}
    </div>
    <br clear="both"/>
    <br clear="both"/>
    <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" style="display:none;"><a id="btnLike" onclick="addLike('{userId}');" class="button-orange">LIKE</a></div>
      <div class="left"><a id="btnFriend" onclick="{friendAction}('{userId}');" class="button-orange">CONNECT</a></div>
      <div class="left"><a id="btnFollow" onclick="{followAction}('{userId}');" class="button-orange">FOLLOW</a></div>
      <div class="left"><a id="btnMessage" onclick="messageMusician('{userId}');" class="button-orange">MESSAGE</a></div>
    </div>
    <br /><br />
  </div>
</script>