(function(context,$) {

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

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

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

      rest.getUserDetail({id: userId})
        .done(function(response) {
          $(hoverSelector).html('');

          // followings
          var followingHtml = '';
          $.each(response.followings, function(index, val) {
            if (index < 4) { // display max of 4 followings (NOTE: this only displays USER followings, not BAND followings)
              if (index % 2 === 0) { 
                followingHtml += '<tr>';
              }

              var avatarUrl, profilePath;

              if (val.type === "band") {
                avatarUrl = context.JK.resolveBandAvatarUrl(val.photo_url);
                profilePath = "bandProfile";
              }
              else {
                avatarUrl = context.JK.resolveAvatarUrl(val.photo_url);
                profilePath = "profile";
              }

              followingHtml += '<td width="24"><a href="#" class="avatar-tiny"><img src="' + avatarUrl + '" /></a></td>';
              followingHtml += '<td><a href="/client#/' + profilePath + '/' + val.id + '"><strong>' + val.name + '</strong></a></td>';

              if (index % 2 > 0) {
                followingHtml += '</tr>';
              }
            }
          });

          var template = $('#template-hover-fan').html();
          if (response.biography == null) {
            response.biography = 'No Biography Available';
          }

          var fanHtml = context.JK.fillTemplate(template, {
              avatar_url: context.JK.resolveAvatarUrl(response.photo_url),
              name: response.name,
              location: response.location,
              friend_count: response.friend_count,
              follower_count: response.follower_count,
              friendAction: response.is_friend ? "removeFanFriend" : (response.pending_friend_request ? "" : "sendFanFriendRequest"),
              followAction: response.is_following ? "removeFanFollowing" : "addFanFollowing",
              biography: response.biography,
              followings: response.followings && response.followings.length > 0 ? followingHtml : "<tr><td>N/A</td></tr>",
              profile_url: "/client#/profile/" + response.id
          });

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

    function configureActionButtons(user) {
      var btnFriendSelector = "#btnFriend";
      var btnFollowSelector = "#btnFollow";

      if (!context.JK.currentUserId || context.JK.currentUserId === user.id) {
        $(btnFriendSelector, hoverSelector).hide();
        $(btnFollowSelector, hoverSelector).hide();
      }
      else {
        if (user.is_friend) {
          $(btnFriendSelector, hoverSelector).html('DISCONNECT');
        }

        if (user.is_following) {
          $(btnFollowSelector, hoverSelector).html('UNFOLLOW');

          $(btnFollowSelector, hoverSelector).click(function(evt) {
            rest.removeFollowing(user.id);
          });
        }

        if (user.pending_friend_request) {
          $(btnFriendSelector, hoverSelector).hide();
        }
      }
    }

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

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