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

<script type="text/javascript">
  var rest = JK.Rest();

  function addFanFollowing(userId) {
    rest.addFollowing({user_id: userId})
      .done(function(response) {
        adjustFanFollowingCount(1);

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

  function removeFanFollowing(userId) {
    rest.removeFollowing(userId)
      .done(function(response) {
        adjustFanFollowingCount(-1);

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

  function adjustFanFollowingCount(value) {
    $("#spnFollowCount", "#fan-hover").text(parseInt($("#spnFollowCount", "#fan-hover").text()) + value);
  }

  function sendFanFriendRequest(userId) {
    rest.sendFriendRequest(JK.app, userId);
    $("#btnFriend", "#fan-hover").hide();
  }

  function removeFanFriend(userId) {
    rest.removeFriend({friend_id: userId})
      .done(function() {
        var $btnFriendSelector = $("#btnFriend", "#fan-hover");
        $btnFriendSelector.unbind("click");
        $btnFriendSelector.attr('onclick', '');
        $btnFriendSelector.html("CONNECT");
        $btnFriendSelector.click(function() {
          sendFanFriendRequest(userId);
        });
      });
  }

</script>

<script type="text/template" id="template-hover-fan">
  <div class="bubble-inner">
    <a href="#" class="avatar_large left mr20"><img src="{avatar_url}" /></a>
    <div class="left ib">
      <h3>{name}</h3>
      <small>{location}</small><br /><br />
      <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>
    </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 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>
    <br /><br />
  </div>
</script>