(function(context,$) {

  "use strict";
  context.JK = context.JK || {};
  context.JK.SessionHoverBubble = function(sessionId, position) {

    var logger = context.JK.logger;
    var rest = context.JK.Rest();
    var instrumentLogoMap = context.JK.getInstrumentIconMap24();
    var hoverSelector = "#session-hover";

    this.showBubble = function() {
      $(hoverSelector).css({left: position.left-100, top: position.top+10});
      $(hoverSelector).fadeIn(500);

      rest.getSessionHistory(sessionId)
        .done(function(response) {
          $(hoverSelector).html('');

          // musicians
          var musicianHtml = '';
          $.each(response.users, function(index, val) {
              var instrumentHtml = '';

              musicianHtml += '<tr><td width="50"><a href="#" class="avatar-tiny"><img src="' + context.JK.resolveAvatarUrl(val.user.photo_url) + '" /></a></td>';
              musicianHtml += '<td width="75"><a href="#">' + val.user.name + '</a></td>';

              instrumentHtml = '<td><div class="nowrap">';
              var instruments = val.instruments.split("|");
              $.each(instruments, function(index, instrument) {
                instrumentHtml += '<img src="' + instrumentLogoMap[instrument] + '" width="24" height="24" />&nbsp;';
              });

              instrumentHtml += '</div></td>';

              musicianHtml += instrumentHtml;
              musicianHtml += '</tr>';
          });

          var template = $('#template-hover-session').html();

          var sessionHtml = context.JK.fillTemplate(template, {
            musicSessionId: response.id,
            description: response.description,
            genre: response.genres.toUpperCase(),
            comment_count: response.comment_count,
            like_count: response.like_count,
            created_at: context.JK.formatDateTime(response.created_at),
            musicians: musicianHtml
          });

          $(hoverSelector).append('<h2>Session Detail</h2>' + sessionHtml);
        })
        .fail(function(xhr) {
          if(xhr.status >= 500) {
              context.JK.fetchUserNetworkOrServerFailure();
          }
          else if(xhr.status == 404) {
              context.JK.entityNotFound("Session");
          }
          else {
              context.JK.app.ajaxError(arguments);
          }
        });
    };

    this.hideBubble = function() {
      $(hoverSelector).hide();
    };

    this.id = function() {
      return hoverSelector;
    };
  }
})(window,jQuery);