$(document).ready(function() {

  var $applicationFields = $("#applicationfields");
  var $currentField = $("li.current", $applicationFields);
  var $topicHeader = $("h2", $applicationFields);
  var $topicImage = $("img", $applicationFields);
  var $subHeader = $(".subheader", $applicationFields);
  var $subHeaderLink = $("a", $subHeader);
  
  setInterval(function() {
  
    $currentField.removeClass("current");
    
    $currentField = $currentField.next();
    
    if ($currentField.length == 0) {
  
      $currentField = $("li", $applicationFields).slice(0, 1);
    }
    
    var imageURL = $currentField.attr("data-image-url");
    
    if (!imageURL) {
    
      imageURL = "img/applicationfields/_blank.png";
    }
    
    $topicImage.fadeOut()
               .queue(function() {
               
      var $this = $(this);
      
      $this.attr("src", imageURL);
      $this.fadeIn();
      $this.dequeue();
      
      // Preload next image if possible
      var nextImageURL = $currentField.next().attr("data-image-url");
      
      if (nextImageURL) {
      
        (new Image()).src = nextImageURL;
      }
    });
    
    /* 
     * Internet Explorer drops anti-aliasing of the text,
     * enlarges the items slightly vertically and renders
     * them as inline as soon as fading happens. Thus disabled
     * via comments inserted via Conditional Compilation.
     */
    /*@cc_on // @*/$currentField.fadeOut()
    $currentField.queue(function() {
    
      $(this).toggleClass("current");
      $(this).dequeue();
    });
    /*@cc_on // @*/$currentField.fadeIn();
    
    var $currentLink = $("a", $currentField);
    
    $topicHeader.fadeOut();
    $topicHeader.queue(function() {
    
      $(this).text($currentLink.text());
      $(this).dequeue();
    });
    $topicHeader.fadeIn();
    
    $subHeader.fadeOut();
    $subHeader.queue(function() {
    
      $subHeaderLink.text($currentLink.attr("title"));
      $subHeaderLink.attr("href", $currentLink.attr("href"));
      $(this).dequeue();
    });
    $subHeader.fadeIn();
  }, 5000);
});