jQuery(document).ready(function ($) {
  var currentHero = $(".herorotator img").first();
  var heroFadingIn;
  var heroTimer;
  var radioButtons = $(".controlbuttons a");
  var arrImagesForPreload = [];
  var secondstodisplay = parseInt($(".herorotator").attr("data-secondstodisplay"));
  if (secondstodisplay < 1 || secondstodisplay > 60) {
    secondstodisplay = 10;
  } 
  function checkRadioButton(o) {
    o.css("backgroundPosition", "bottom left");
  }
  function uncheckRadioButton(o) {
    o.css("backgroundPosition", "top left");
  }
  function getRadioButtonForHero(hero) {
    return $(".controlbuttons a[data-heroid='" + hero.attr("id") + "']");
  }
  function setNextHeroTimeout() {
    clearNextHeroTimeout();
    heroTimer = setTimeout(nextHero, secondstodisplay*1000);
  }
  function clearNextHeroTimeout() {
    clearTimeout(heroTimer);
  }
  function nextHero() {
    var radioButton = getRadioButtonForHero(currentHero);
    var radioButtonNext = radioButton.next();
    if (radioButtonNext.length == 0) {
      radioButtonNext = radioButton.siblings().first();
    }
    radioButtonNext.click();
  }
  // So that the image transitions are smooth.
  function preloadDynamicImages() {
    function loadImage(src) {
      arrImagesForPreload[inx] = new Image();
      arrImagesForPreload[inx++].src = src;
    }
    var inx = 0;
    $(".herorotator img").each(function () {
      loadImage($(this).attr("src"));
    });
  }
  radioButtons.click(function () {
    var self = $(this);
    var newHeroId = self.attr("data-heroid");
    var newHero;
    var currentHeroTemp;
    if (newHeroId == currentHero.attr("id")) {
      setNextHeroTimeout(); // reset the timer
      return;
    }
    if (heroFadingIn != null) {
      heroFadingIn.newHero.stop().css("opacity", "");
      heroFadingIn.finishedFadeIn();
    }
    uncheckRadioButton(getRadioButtonForHero(currentHero));
    checkRadioButton(self);
    newHero = $("#" + newHeroId);
    newHero.css("z-index", 2);
    currentHeroTemp = currentHero; // put this in the closure
    function finishedFadeIn() {
      currentHeroTemp.css("display", "");
      newHero.css("z-index", "");
      heroFadingIn = null;
      setNextHeroTimeout();
    }
    newHero.fadeIn(600, finishedFadeIn);  // If the img is too big, the fadein won't work in Chrome.  Make sure your image is sized properly.
    heroFadingIn = { finishedFadeIn: finishedFadeIn, newHero: newHero };
    currentHero = newHero;
    clearNextHeroTimeout();
  });
  $("div.herocontrol").css("display", "block"); // we hide the control and then show it using JavaScript.  That way if the user doesn't have JavaScript they won't see the control and won't know what they are missing.
  checkRadioButton(getRadioButtonForHero(currentHero));
  preloadDynamicImages();
  if (radioButtons.length > 1) {
    // Don't allow image rotation while hovering over a link - that would be annoying if the link rotated out just as you were about to click.
    $(".herorotator a").hover(clearNextHeroTimeout, setNextHeroTimeout);
    setNextHeroTimeout();
  }
});