$(document).ready(function() {
  $('#featuredProduct').load('featuredproduct.aspx');
  $('#divWeAreAquavitae').load('home_weareaquavitae.aspx');
  $('#divWaterwise').load('Home_WaterWise.aspx');

  var Idx = 1;
  var IntervalKey;
  var ChangeImage = function() {
    //if (idx == 0) {
    //    $("#lnkbanner").attr("href", "softwaterguide.aspx");
    //} else if (idx == 1) {
    //    $("#lnkbanner").attr("href", "purewaterguide.aspx");
    //} else if (idx == 2) {
    //    $("#lnkbanner").attr("href", "boilingwaterguide.aspx");
    //}

    //If the image still animating, stop it and start the new one
    $("#MainImage").ImageStop(true, true);
    $("#MainImage").ImageSwitch({ NewImage: $(".TnImage").eq(Idx).attr("src").replace("tn-", "med-").replace(".jpg", ".png") });
    //Mark which thumbnail is displaying
    $(".TnImage").css("opacity", "0.5");
    $(".TnImage").eq(Idx).css("opacity", "1");
    //Set the next image will be display
    Idx++;
    if (Idx == 3) {
      Idx = 0;
    }
    //Start preload the next image
    $.ImagePreload($(".TnImage").eq(Idx).attr("src").replace("tn-", "med-"));
  };

  //When a thumbnail's clicked
  $(".TnImage").click(function() {
    Idx = $(".TnImage").index(this);
    ChangeImage();
  });

  IntervalKey = setInterval(ChangeImage, 3000);
})