//options for the bubbles
var options = {
  idPrefix: 'popup',    //prefix of the ID attribute
  className: 'popup',   //css to be applied to the bubble
  distance: 3      //distance from trigger element
};

//function called to show/hide bubbles
function toggleBubble($elem, $bubble){
  
  //get position for bubble
  pos = $elem.offset();
  posLeft = pos.left + ($elem.outerWidth()/2) - ($bubble.outerWidth()/2);
  posTop = pos.top - options.distance - $bubble.outerHeight() - 15;
  
  if(!$elem.data('hovered')){
    
    $elem.data('hovered', true);
    
    $bubble.stop().animate({
      left: posLeft + 'px',
      top: posTop + 15 + 'px',
      opacity: 1
    }, 'fast');
    
  } else {
    
    $elem.data('hovered', false);
    
    $bubble.stop().animate({
      left: posLeft + 'px',
      top: posTop + 'px',
      opacity: 0
    }, 'fast');

  }
  
}

//function to create bubble elements
function createBubbles(elems){
  
  var content = '';
  var markup = '';
  var i = 0;
  var pos = [];
  var left = 0;
  var right = 0;
  
  //loop through elements to create bubbles for
  elems.each(function(i){
    var $elem = {};
    var $bubble = {};
   
    $elem = $(elems[i]);
   
    content = $elem.text();
    markup = '';
  
    //bubble markup
    markup +=  '<div id="'+options.idPrefix+'_'+i+'" class="bubble">';
    markup +=    '<p>'+content+'</p>';
    markup +=  '</div>';

    //create bubble
    $(markup).css('position','absolute').appendTo('body');
    
    //cache bubble object
    $bubble = $('#'+options.idPrefix+'_'+i);

    //get bubble position values ready for styles
    pos = $elem.offset();
    posLeft = pos.left + ($elem.outerWidth()/2) - ($bubble.outerWidth()/2);
    posTop = pos.top - options.distance - $bubble.outerHeight() - 15;
    
    //position bubble with CSS
    $bubble.css({
      left: posLeft + 'px',
      top: posTop + 'px',
      opacity: 0
    });
    
    //add initial hovered state
    $elem.removeData().data('hovered',false);
    
    //bind event handler to element to toggle bubble
    $elem.hover(
      function(){
        toggleBubble($(this), $bubble);
      },
      function(){
        toggleBubble($(this), $bubble);
      }
    );
    
  });
  
}

$(window).resize(function() {
  
  $('header nav a').each(function(i){
    
    $elem = $(this);
    $bubble = $('#'+options.idPrefix+'_'+i);
    
    pos = $elem.offset();
    posLeft = pos.left + ($elem.outerWidth()/2) - ($bubble.outerWidth()/2);
    posTop = pos.top - options.distance - $bubble.outerHeight() - 15;
    
    $bubble.css({
      left: posLeft + 'px',
      top: posTop + 'px',
      opacity: 0
    });
  
  });
  
});

//stuff to do when the page laods
jQuery(document).ready(function($) {
  
  createBubbles($('header nav a'));
  
});