$(function() {
  $('<img />', { id: 'island', src: 'images/island.png' }).insertBefore('#slogan').load(function() {
    $(this).animate({ opacity: 1 }, 2000);
  });
  
  setTimeout(function() {
    $('<div />', { id: 'baloon' }).insertBefore('#slogan').css({
      'background-image': 'url(images/baloon.png)'
    }).animate({ opacity: 1, right: 10, top: 190 }, 3000).animate({
      right: 650,
      top: 200
    }, 100000, 'linear', function() {
      $(this).animate({
        right: 1000,
        top: -110
      }, 50000, 'linear');
    });
  }, 2000);
  
  $('<img />', { id: 'sky', src: 'images/sky.jpg' }).prependTo('#head_holder').load(function() {
    $(this).delay(2000).animate({ opacity: 1 }, 1500);
  });
  
  setTimeout(function() {
    $('#environment').css({
      'background-image': 'url(images/ground_bg.jpg)'
    });

    $('<div />', { id: 'ground' }).appendTo('#foot').css({
      'background-image': 'url(images/ground.jpg)'
    });

    $('<div />', { id: 'sushi' }).prependTo('#body').css({
      'background-image': 'url(images/sushi.png)'
    });
  }, 200);
  
  var sushiTop = 0;
  
  var startSushi = function() {
    var top = $(window).scrollTop();
    var width = $('body').width();
    var diff = ($('#body').width() - width) / 2;
    $('#sushi').stop().css({
      top: (top - 100) + 'px',
      right: (diff-130) + 'px'
    }).animate({ opacity: 1 }, 1000).animate({
      right: (width - 130) + 'px'
    }, 15000, 'swing', function() {
      $(this).css({ opacity: 0 });
    });
  };
  
  setInterval(startSushi, 22000);
  setTimeout(startSushi, 300);
  
  $(window).scroll(function() {
    var top = $(window).scrollTop();
    $('#navi').animate(
      { top: top + 'px' },
      { queue: false, duration: 500, easing: 'swing' }
    );
  });
  
  $('#navi a').click(function() {
    var pos = $(this.hash).offset();
    
    $('html, body').animate(
      { scrollTop: pos.top + 'px' },
      { queue: false, duration: 500, easing: 'swing' }
    );
    
    return false;
  });
  
  $('#contact_form').validate({
    submitHandler: function(form) {
      var self = $(form);
      
      $.ajax({
        type: 'post',
        url: 'contact.php',
        data: self.serialize(),
        success: function() {
          self.append('<div id="sent">Thank you for contacting us. We will be in touch soon!</div>');
          
          var pos = $('#sent').offset();
          
          $('html, body').animate({ scrollTop: pos.top + 'px' }, 200);
          
          setTimeout(function() {
            $('#sent').animate({ opacity: 0 }, 1000, function() {
              $(this).remove();
            });
          }, 10000);
        }
      });
      
      return false;
    }
  });
});