(function($) {
  var Members = function(element, options) {
    
    var el = $(element);
    var obj = this;
    var settings = $.extend({}, options || {});
    
    var containers = {}, 
        states = { current: null, old: null},
        queue = new Array(),
        queueRunning = false,
        cssClasses = 'jos hans john all',
        members = ['jos', 'hans', 'john'],
        timeoutId, timeoutId2;
    
    var initialize = function() {
      $(window).load(onLoad);
      el.find('area').mouseenter(onMouseEnter).mouseleave(onMouseLeave).click(onClick);
      $.each(members, function(index, name) { initQtip(name); });
      containers.back  = el.parent();
      containers.front = el.prev();
    }
    
    // preload images
    var onLoad = function() {
      var l = document.location
      var domain = l.protocol + '//' + l.host;
      var images = new Array();
      for (var i = 0; i < members.length; i++) {
        images[i] = new Image();
        images[i].src = domain + '/wp-content/themes/spot/images/bg_member_'+members[i]+'.jpg';
      }
    }
    
    var onClick = function(event) {
      event.preventDefault();
    }
    
    var onMouseEnter = function(event) {
      clearTimeout(timeoutId);
      addToQueue( $(this).attr('href').replace('#', '') );
    }
    
    var onMouseLeave = function(event) {
      clearTimeout(timeoutId);
      clearTimeout(timeoutId2);
      timeoutId = setTimeout(restore, 1000);
    }
    
    var restore = function() {
      addToQueue( 'all' );
    }
    
    var setState = function(state) {
      queueRunning = true;
      states.old = states.current, states.current = state;
      if (states.old == states.current) {
        setStateEnd();
        return
      }
      if (states.old) {
        containers.back.removeClass( cssClasses ).addClass( states.old );
        if (states.old != 'all') $('#'+states.old).qtip('toggle', false);
      }
      containers.front.css('opacity', 0).removeClass( cssClasses ).addClass( states.current ).fadeTo('normal', 1, setStateEnd);
    }
    
    var setStateEnd = function() {
      clearTimeout(timeoutId2);
      if (queue.length) {
        setState(queue.shift());
      } else {
        if (states.current != 'all')
          timeoutId2 = setTimeout(function() { $('#'+states.current).qtip('toggle', true); }, 400);
        queueRunning = false;
      }
    }
    
    var addToQueue = function(state) {
      queue.push(state);
      if (queue.length > 2) queue = [queue[0], queue[queue.length - 1]];
      if (!queueRunning) setState(queue.shift());
    }
    
    var initQtip = function(name) {
      $('area.' + name).qtip({
        content: {
          title: function() {
            return $(this).attr('alt') + ':';
          },
          text: "Ahum..."//,
          // ajax: {
          //   url: "?page_id=78&member=" + name
          // }
        },
        position: {
          my: 'top center',
          at: 'center',
          target: $('#' + name)
        },
        style: {
          classes: 'ui-tooltip-shadow ui-tooltip-youtube'
        },
        show: {
          effect: function() { $(this).fadeIn('fast'); }
        },
        hide: {
          effect: function() { $(this).fadeOut('fast'); }
        },
        events: {
          render: function(event, api) {
            $(this).mouseenter(function() {
              api.elements.target.trigger('mouseenter');
            }).mouseleave(onMouseLeave)
          },
          show: function(event, api) {
            var tip = $(this);
            if (!tip.data('loading')) {
              tip.data('loading', true);
              $.get("?page_id=78&member=" + name, function(data) {
                tip.data('loading', false);
                api.set('content.text', data);
              })
            }
          },
          hide: function(event, api) {
            setTimeout(function() {
              api.set('content.text', 'Ahum...');
            }, 200);
          }
        }
      }).qtip('disable', true);
    }
    
    initialize();
  }
  
  $.fn.members = function(options) {
    return this.each(function() {
      var element = $(this);
      
      // Return early if this element already has a plugin instance
      if (element.data('members')) return;
      
      // pass options to plugin constructor
      var members = new Members(this, options);
      
      // Store plugin object in this element's data
      element.data('members', members);
    })
  }
  
})(jQuery);