$(document).ready(function() {
  
  // Setups
  var timer = {};
  var delay = {};
  var initialDelay = {};
  var countries = ['africa', 'asia', 'europe', 'middleeast', 'namerica', 'samerica', 'seasia'];
  var countriesCount = 0;
  var hasHovered = 0;
  
  // Setup Content (Do your Ajax magic here) this is static for demo
  
  var posts = countries;
  posts['africa'] = $('#map_africa').val();
  posts['asia'] = $('#map_asia').val();
  posts['europe'] = $('#map_europe').val();
  posts['middleeast'] = $('#map_middleeast').val();
  posts['namerica'] = $('#map_namerica').val();
  posts['samerica'] = $('#map_samerica').val();
  posts['seasia'] = $('#map_seasia').val();
  
  // Initial Launching of the Rotation
  $('.hovers a span').fadeTo(0, 0);
  
  
  // Initial Launching of the Rotation
  initialDelay = $.delay(500, function(){ countryOn() }); 
  
  // Launch Rotator
  timer = $().everyTime(11000, function(){
    countryOn();
  });
  
  // CountryOn fades everything In and waits 3 seconds before launching CountryOff
  function countryOn(){
    var postContentPosition = posts[countriesCount];
    var postContent = posts[postContentPosition];
        
    $('#textBubble p').html(postContent);
    $('#' + countries[countriesCount] + ' span').animate({opacity: 1}, 300);
    $('#textBubble').addClass(countries[countriesCount]);
    $('#textBubble').animate({opacity: 1, bottom:'5px'}, 300);
    delay = $.delay(10000, function(){ countryOff() });
  }
  
  // CountryOff Fades everything out and cleans out the textbox class AFTER animation finishes
  // Then checks to see where the count is, and whether to reset the count or not
  function countryOff() {
    $('#' + countries[countriesCount] + ' span').animate({opacity: 0}, 300);
    $('#textBubble').animate({opacity: 0, bottom: '10px'}, 300, '', function(){ $('#textBubble').attr('class', ''); });
    if(countriesCount < 6) {
      countriesCount++;
    } else {
      countriesCount = 0;
    }
  }
  

  // Hovering Stops all animation and the timer, and then rewinds the animations to fade out
  
  $('.hovers').hover(
    function(){
      if(hasHovered == 0) {
        // Stop Timer
        $().stopTime();
      
        // Stop Animations
        $('#' + countries[countriesCount] + ' span').stop().animate({opacity: 0}, 300);
        $('#textBubble').stop().animate({opacity: 0, bottom: '10px'}, 300, '', function(){ $('#textBubble').attr('class', '').hide(); });
                
        // Set hover state
        hasHovered = 1;
		
      }
    },
    
    function() {
    
    }
  )
  
  $('.hovers a').each(function(){
    $(this).click(function(){      
      // Grab what we're clicking
      var id = $(this).attr('id');
      
      // Kill anything visible
      $('.hovers a span').stop().animate({opacity: 0}, 300);
      $('#textBubble').stop().animate(
        {opacity: 0, bottom: '10px'}, 
        300, 
        '', 
        
        function(){ 
          $('#textBubble').attr('class', '').hide();
          $('#textBubble p').html(posts[id]);
          $('.hovers #'+id+' span').css('opacity', '1');
          $('#textBubble').css('display', 'block');
          $('#textBubble').addClass(id).animate({opacity: 1, bottom: '5px'});
        }
      );                  
      return false;
    }); 
	
  });
  
  $('.hovers').click(function(){
      $('.hovers a span').stop().animate({opacity: 0}, 300);
      $('#textBubble').stop().animate( {opacity: 0, bottom: '10px'}, 300, '', function(){ $('#textBubble').attr('class', '').hide(); }); 
  });
  
});