jQuery.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
    jQuery("<img>").attr("src", arguments[i]);
  }
}

$().ready(function() {
  var timeoutID;  
  var heroListElems = $("ul#heroul li:not(.control)").get();
  
  // label each li with index
  for(i = 0; i < heroListElems.length ; i++) {
    $(heroListElems[i]).attr("ulindex", i.toString());
  }
  
  //setup play pause functional
  $("li.control a").click(function() {
    var action = $(this).html();
    if (action == "play") {
      timeoutID = play();
    }
    else {
      pause(timeoutID);
      timeoutID = null;
    }    
    return false;
  });
  
  
  // set initial highlight
  $("ul#heroul li:first").each(function() {
	    addHighlight(this);
  }); 

  //start the play
  $("li.control a").click();
  
  //attach hover callback
  $("ul#heroul li:not(.control)").hover(function() {
    //stop play if necessary
    if (timeoutID) {
      $("li.control a").click();
    }
    // remove all highlights
    $("ul#heroul li.blackbkg").each(function() {
	    removeHighlight(this);
	  });
	
    addHighlight(this);
  },
  function() {
    //removeHighlight(this);
  });
  
  
});

function play() {
  // Play sequence
  var playCount = 0;
  var timeoutID = setInterval(function() {
    switchHeroImage();
    playCount++;
    if (playCount == 8) {
      $("li.control a").click();
      playCount=0;
    }
    
  },4000);
  
  $("li.control a").removeClass("play");
  $("li.control a").addClass("pause");
  $("li.control a").html("pause");
  
  return timeoutID;
}

function pause(timeoutID) {
  // Pause sequence
  $("li.control a").removeClass("pause");
  $("li.control a").addClass("play");
  $("li.control a").html("play");
  clearInterval(timeoutID);
  // $("ul#heroul li.blackbkg").each(function() {
  //   removeHighlight(this);
  // });
  //console.log("paused");
}

function switchHeroImage() {
  //console.log("Playing");
  var currentListElem = $("ul#heroul li.blackbkg:first");
  var nextListElem;
  if (currentListElem.length > 0)
  {
    removeHighlight(currentListElem);
    if (currentListElem.attr("ulindex") != "3") {
      nextListElem = currentListElem.next();    
    }
    else {
      nextListElem = $("ul#heroul li:first");
    }
  }
  else
  {
    nextListElem = $("ul#heroul li:first");
  }
  
  addHighlight(nextListElem);
}

function addHighlight(elem) {
    // Change class to change bkg (this is for IE)
  $(elem).addClass("blackbkg");
  //replace image and link
  var imgHtml = $(elem).children(".heroimg").html();
  $(".herocontent").html(imgHtml);
  
  //change position of arrow
  var liElemIdx = parseInt($(elem).attr("ulindex"), 10);
  $("ul#heroul").addClass("item"+liElemIdx);
//  var shift = (liElemIdx * 55) + 10;
//  shift = shift + "px";
//  $("ul#heroul").css("background", "url(/images/hero/ulactive.gif) 190px " + shift + " no-repeat");
  
}

function removeHighlight(elem) {
  //remove arrow on moving out
//  $("ul#heroul").css("background", "none");
  $(elem).removeClass("blackbkg");
  // remove class of ul while moving out of focus
  var liElemIdx = parseInt($(elem).attr("ulindex"), 10);
  $("ul#heroul").removeClass("item"+liElemIdx);

}