$(document).ready(function() {
  var images = $('#top_stories img');
  var links = $('#top_stories li a');

  // position the images so they can fade properly
  images.addClass('fader');

  // and hide all but the first one
  images.not(':first').fadeOut(0);

  // add hover actions for story titles
  links.hover(
    function(event) {
      // mouseover actions
      // figure out index of selected anchor
      var index = $('#top_stories li').index($(this).parent());

      // swap selected text states
      $('#top_stories li a.selected').removeClass('selected');
      $(this).addClass('selected');

      // animate indicator arrow
      $('#newsbox #indicator').stop(true,false).animate({
        top: ( $(this).position().top + 13 ) + 'px'
      }, {
        duration: 500,
        complete: function() {
          // after the indicator animation fade images
          var selected_img = images.eq(index);
          images.stop(true,true);
          selected_img.fadeIn(500);
          images.not(selected_img).fadeOut(500);
        }
      });
    },

    function(event) {
      // don't currently do anything on mouseout
    }
  );
});

