$(function() {

  /**
   * The nutshell on the front page
   */
  $('div.nutshell').hide().parent()
    .append($('<p class="noshell"><em>click here</em> to see how a very \
              basic Werkzeug application could look like.</p>')
      .click(function() {
        $(this).fadeOut('fast');
        $('div.nutshell').slideDown(1000);
      }));

  /**
   * Do the fancy "under the hood" stuff
  var underTheHood = false;
  $('div.footer').append($('<a>')
    .click(function() {
      !underTheHood ? openHood() : closeHood();
      return false;
    })
    .attr('href', '#')
    .addClass('underthehood')
    .text('look under the hood'));

  $('div.header h1').click(function() {
    if ($('body').is('.invert'))
      showCredits();
  });

  function openHood() {
    var sourceURL = document.location.href.split('#')[0];
    sourceURL += (sourceURL.indexOf('?') < 0 ? '?' : '&') + 'underthehood=yes';
    $.scrollTo(0, 'slow');
    $('body').addClass('invert').animate({
      backgroundColor:  '#444444'
    }, 'slow');
    $('div.header p').fadeIn('slow');
    $('div.header h1 a').slideUp(1000);
    $('div.body div.contents').slideUp('slow');
    $('div.body div.aside').animate({
      width:  'hide',
      height: 'hide'
    }, 'slow');
    $('<div class="underthehood">')
      .hide()
      .text('let\'s have a look what\'s behind the scenes...')
      .appendTo('div.body')
      .fadeIn('slow')
      .load(sourceURL);
    underTheHood = true;
  }

  closeHood = function() {
    $.scrollTo(0, 'slow');
    $('div.header h1 a').slideDown(300, function() {
      $('body').removeClass('invert').animate({
        backgroundColor:  '#afc1c4'
      }, 'slow');
      $('div.header p').fadeOut('fast');
      $('div.body div.contents').slideDown('fast');
      $('div.body div.aside').slideDown('fast');
      $('div.underthehood').animate({
        height:   'hide',
        opacity:  'hide'
      }, 'slow', function() {
        $(this).remove();
      });
      underTheHood = false;
    });
  }

  function showCredits() {
    $('body').append($('<div class="wzinfobox">')
      .css('opacity', '0')
      .animate({'opacity': '0.92'}, 'slow', function() {
        $('<div class="wzinfo">')
          .load(WZ_URL_ROOT + '_werkzeug/credits')
          .fadeIn('slow')
          .appendTo('body');
      }));
  }

  hideCredits = function() {
    $('div.wzinfobox').fadeOut(2000, function() {
      $(this).remove();
      $('div.wzinfo').remove();
    });
    $('div.wzinfo').fadeOut(1000);
  } */
});