<div id="recording-hover" class="hidden bubble">

</div>

<script type="text/javascript">
  var rest = JK.Rest();
  
  function addRecordingLike(recordingId) {
    rest.addRecordingLike(recordingId, JK.currentUserId)
        .done(function(response) {
            $("#spnLikeCount", "#recording-hover").html(parseInt($("#spnLikeCount", "#recording-hover").text()) + 1);
            $("#btnLike", "#recording-hover").unbind("click");
        });
  }
</script>

<script type="text/template" id="template-hover-recording">
  <div class="bubble-inner">
    <h3>{name}</h3>
    <div class="small left">{genre}</div>
    <div class="small right">{created_at}</div>
    <br clear="all" />
    <div class="f11 mt5 mb5">{description}</div>
    <div class="small">
      <span id="spnPlayCount">{play_count}</span> <img src="/assets/content/icon_arrow.png" title="plays" width="7" height="12" align="absmiddle" style="vertical-align:middle; margin-right:4px;" />
      <span id="spnCommentCount">{comment_count}</span> <img src="/assets/content/icon_comment.png" title="comments" width="13" height="12" align="absmiddle" style="vertical-align:middle; margin-right:4px;" />
      <span id="spnLikeCount">{like_count}</span> <img src="/assets/content/icon_like.png" title="likes" width="12" height="12" align="absmiddle" style="vertical-align:middle; margin-right:4px;" />
    </div>
    <br /><br />
    <a href="#" class="avatar_large left mr20"><img src="{creator_avatar_url}" /></a>
    <div class="left">
      <h3>{creator_name}</h3>
      <small>{location}</small>
    </div>
    <br clear="all" /><br />
    MUSICIANS:<br /><br />
    <table class="musicians" cellpadding="0" cellspacing="5">
      {musicians}
    </table><br />
    <div align="center">
      <div class="left"><a id="btnLike" onclick="addRecordingLike('{recordingId}', '{claimedRecordingId}');" class="button-orange">LIKE</a></div>
      <div style="display:none;" class="left"><a id="btnComment" class="button-orange">COMMENT</a></div>
      <div class="left"><a id="btnShare" layout-link="share-dialog" class="button-orange">SHARE</a></div>
      <div class="left"><a href="/recordings/{claimedRecordingId}" class="button-orange" rel="external" target="_blank">WEB PAGE</a></div>
    </div>
    <br /><br />
  </div>
</script>