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

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

  function addBandFollowing(bandId) {
    rest.addFollowing({band_id: bandId})
      .done(function(response) {
        adjustBandFollowingCount(1);

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

  function removeBandFollowing(bandId) {
    rest.removeFollowing(bandId)
      .done(function(response) {
        adjustBandFollowingCount(-1);

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

  function adjustBandFollowingCount(value) {
    $("#spnFollowCount", "#band-hover").text(parseInt($("#spnFollowCount", "#band-hover").text()) + value);
  }
</script>

<script type="text/template" id="template-hover-band">
  <div class="bubble-inner">
    <a href="{profile_url}" class="avatar_large left mr20"><img src="{avatar_url}" /></a>
    <div class="left">
      <h3>{name}</h3>
      <small>{location}<br /><strong>{genres}</strong></small><br />
      <br clear="all" />
      <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 />
    <br />
    <div class="f11">{biography}</div><br />
    <table class="musicians" cellpadding="0" cellspacing="5">
      {musicians}
    </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 class="button-orange">LIKE</a></div>
      <div class="left"><a id="btnFollow" onclick="{followAction}('{bandId}');" class="button-orange">FOLLOW</a></div>
    </div>
    <br /><br />
  </div>
</script>