(function(context, $) {

  "use strict";

  context.JK = context.JK || {};


  // creates an iconic/graphical instrument selector. useful when there is minimal real-estate

  $.fn.muteSelector = function(options) {

    return this.each(function(index) {

      function close() {
        $parent.btOff();
        $parent.focus();
      }

      var $parent = $(this);

      function onMuteOptionSelected() {
        var $li = $(this);
        var muteOption = $li.attr('data-mute-option');

        close();
        $parent.triggerHandler(context.JK.EVENTS.MUTE_SELECTED, {muteOption: muteOption});
        return false;
      };

      // if the user goes into the bubble, remove
      function waitForBubbleHover($bubble) {
        $bubble.hoverIntent({
          over: function() {
            if(timeout) {
              clearTimeout(timeout);
              timeout = null;
            }
          },
          out: function() {
            $parent.btOff();
          }});
      }

      var timeout = null;

      context.JK.hoverBubble($parent, $('#template-mute-select').html(), {
        trigger:'none',
        cssClass: 'mute-selector-popup',
        spikeGirth:0,
        spikeLength:0,
        width:220,
        closeWhenOthersOpen: true,
        offsetParent: $parent.offsetParent(),
        positions:['bottom'],
        preShow: function() {
        },
        postShow:function(container) {
          $(container).find('li').click(onMuteOptionSelected)
          if(timeout) {
            clearTimeout(timeout);
            timeout = null;
          }
          waitForBubbleHover($(container))
          timeout = setTimeout(function() {$parent.btOff()}, 3000)
        }
      });
    });
  }


})(window, jQuery);