$(document).ready(function() {
  $("body").addClass("javascript");
  
  var images = ["hand.jpg", "truck.jpg", "smiling.jpg", "i-has-a-pen.jpg"];
  var headers = [];
  var wrapper = $("#wrapper");
  
  for (var i=0; i < images.length; i++) {
    var header = $('<img class="header-panel" src="/images/headers/' + images[i] + '" />');
    if (i != 0) header.css({opacity: 0});
    wrapper.prepend(header);
    headers.push(header);
  };
  
  // Add a non-floated element to fix IE6's idiot behaviour with adjacent 
  // floats and absolutely positioned elements
  $("#header").after('<div id="ie6-fix">&nbsp;</div>');
  
  // Cycle through the headers using a timeout
  var current = 0;
  var next = null;
  var length = headers.length - 1;
  var cycle = function() {
    next = (current < length ? current + 1 : 0);
    headers[next].css({"z-index": 2}).animate({opacity: 1}, 2000, cleanUp);
  };
  
  var cleanUp = function() {
    headers[next].css({"z-index": 1});
    headers[current].css({opacity: 0});
    current = next;
    window.setTimeout(cycle, 6000);
  };
  
  $(window).load(function() {
    window.setTimeout(cycle, 6000);
    
    // Apply the PNG fix if IE we're in IE
    if (DD_belatedPNG) DD_belatedPNG.fix('#header');
  });
});