(function(context, $) {

  "use strict";

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


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

  $.fn.manageVsts = function(options) {

    return this.each(function(index) {

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

      var $parent = $(this);

      function onManageVstSelected() {
        var $li = $(this);
        var vstOperation = $li.attr('data-manage-vst-option');

        close();
        $parent.triggerHandler(context.JK.EVENTS.VST_OPERATION_SELECTED, {vstOperation: vstOperation});
        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-manage-vsts').html(), {
        trigger:'none',
        cssClass: 'manage-vsts-popup',
        spikeGirth:0,
        spikeLength:0,
        width:250,
        closeWhenOthersOpen: true,
        offsetParent: $parent.closest('.dialog'),
        positions:['bottom'],
        preShow: function() {
        },
        postShow:function(container) {
          $(container).find('li').click(onManageVstSelected)
          if(timeout) {
            clearTimeout(timeout);
            timeout = null;
          }
          waitForBubbleHover($(container))
          timeout = setTimeout(function() {$parent.btOff()}, 3000)
        }
      });
    });
  }


})(window, jQuery);