(function(context,$) {

  "use strict";
  context.JK = context.JK || {};
  context.JK.BandHoverBubble = function(bandId, x, y) {
    var logger = context.JK.logger;
    var rest = context.JK.Rest();
    var hoverSelector = "#band-hover";

    this.showBubble = function() {
      var mouseLeft = x < (document.body.clientWidth / 2);
      var mouseTop = y < (document.body.clientHeight / 2);
      var css = {};
      if (mouseLeft)
          css.left = x + 20 + 'px';
      else
          css.left = x - (25 + $(hoverSelector).width()) + 'px';
      if (mouseTop)
          css.top = y + 10 + 'px';
      else
          css.top = y - (7 + $(hoverSelector).height()) + 'px';

      $(hoverSelector).css(css);
      $(hoverSelector).fadeIn(500);

      rest.getBand(bandId)
        .done(function(response) {
          $(hoverSelector).html('');

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

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

              instrumentHtml = '<td><div class="nowrap">';
              if (val.instruments) { // @FIXME: edge case for Test user that has no instruments?
                  $.each(val.instruments, function(index, instrument) {
                      instrumentHtml += '<img src="' + context.JK.getInstrumentIcon24(instrument.instrument_id) + '" width="24" height="24" />&nbsp;';
                  });
              }

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

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

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

          var genres = [];
          genres = $.map(response.genres, function(n, i) {
            return n.description;
          });

          var bandHtml = context.JK.fillTemplate(template, {
            bandId: response.id,
            avatar_url: context.JK.resolveBandAvatarUrl(response.photo_url),
            name: response.name,
            location: response.location,
            genres: genres.join(', '),
            musicians: musicianHtml,
            like_count: response.liker_count,
            follower_count: response.follower_count,
            recording_count: response.recording_count,
            session_count: response.session_count,
            biography: response.biography,
            followAction: response.is_following ? "removeBandFollowing" : "addBandFollowing",
            profile_url: "/client#/bandProfile/" + response.id
          });

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

    function configureActionButtons(band) {
      var btnFollowSelector = "#btnFollow";

      // if unauthenticated or authenticated user is viewing his own profile
      if (!context.JK.currentUserId) {
        $(btnFollowSelector, hoverSelector).hide();
      }
      else {
        if (band.is_following) {
          $(btnFollowSelector, hoverSelector).html('UNFOLLOW');
        }
      }
    }

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

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