$(function(){

  var shouldRotate = true;
  var selected = 0;
  var countHeros = $('div.hero a').length;
  var speed = 800;

  var rotate = setInterval(function(){
    rotateImages();
  }, 3000);

  function rotateImages(){

    if(shouldRotate){
      var selected = parseInt($('ul.hero-list li.selected a').attr('rel').substr(4,1));
      var next = (selected+1);

      if(selected == countHeros){
        next = 1;
      }

      $('a.hero' + next).removeClass('hidden').hide().stop().fadeIn(speed, function(){
        $('a.hero' + next).removeClass('hidden');
      });

      $('a.hero' + selected).stop().fadeOut(speed, function(){
        $('a.hero' + selected).addClass('hidden');
      });
      

      $('ul.hero-list li.selected').removeClass('selected');
      $('ul.hero-list li').each(function(){
        if($(this).find('a').attr('rel') == ('hero' + next)){
          $(this).addClass('selected');
        }
      });
    }

  }

  $('ul.hero-list li a').live('hover', function(){

    shouldRotate = false;
    clearInterval(rotate);

    var rel = $(this).attr('rel');

    $('div.hero a').each(function(){
      if(!$(this).hasClass('hidden')){
        $(this).stop().addClass('hidden').hide();
      }
    });

    $('a.' + rel).stop().removeClass('hidden').show();

    $('ul.hero-list li.selected').removeClass('selected');

    $(this).closest('li').addClass('selected');
  });
});