$(function() {
  var bee_elements = $('body').append('<div id="bee"><div id="bee-shad"></div></div>')
  var bee = $('#bee');
  var bee_shad = $('#bee-shad');
  var nav = $('#nav')
  
  bee.css('background', 'url(/images/bg_bee.png) no-repeat 0 0');
  bee.css('position', 'absolute');
  bee.width(39).height(43);
  bee.css('right', '10px').css('top', nav.position().top + (nav.height() - 30) + 'px');
  
  bee_shad.css('background', 'url(/images/bg_bee-shad.png) no-repeat 0 0');
  bee_shad.css('position', 'absolute');
  bee_shad.width(bee.width()).height(bee.height());
  bee_shad.css('left', '8px').css('top', '50px');
  
  var buzz = function(dy) {
    var position = bee.position();
    bee.animate({ top: (position.top + dy) + 'px' }, { 
      queue: 'buzz', duration: 700, easing: 'easeInOutQuad', complete: function() { buzz(-dy) }
    });
    bee_shad.animate({ top: (50 - dy) + 'px', }, { queue: 'buzz', duration: 700, easing: 'easeInOutQuad' });
  };
  
  $('#nav ul li').mouseover(function() {
    var element = $(this);
    var newRight = nav.width() - (element.position().left + element.width() + 22);
    bee.animate({ right: newRight + 'px' }, { queue: false, duration: 1200, easing: 'easeOutBack' });
  }).mouseout(function() {
    bee.animate({ right: '10px' }, { queue: false, duration: 1200, easing: 'easeInOutQuad' });
  });
  
  buzz(12);
  
  $('div.feature').css('background-image', 'none').css('position', 'relative').append('<div class="big-bee"></div>');
  var beeElements = $('.big-bee').css('position', 'absolute').css('bottom', '0').css('right', 0).css(
    'background', 'url(/images/bg_bee-large.png) no-repeat 0 0'
  ).width(146).height(139).css('opacity', 0);
  
  var beeFadeIn = function(element) {
    element.animate({ opacity: 1 }, { queue: 'big', easing: 'easeInSine', duration: 3000, complete: function() { 
      beeFadeOut(element)
    }}).animate({ opacity: 1 }, 2000);
  }
  var beeFadeOut = function(element) {
    element.animate({ opacity: 0 }, { queue: 'big', easing: 'easeOutSine', duration: 3000, complete: function() {
      beeFadeIn(element)
    }}).animate({ opacity: 0 }, 2000);
  }
  beeElements.each(function(i) {
    var querified = $(this);
    querified.animate({ opacity: 0 }, i * 4000);
    beeFadeIn(querified);
  });
});