$(document).ready(function () {
    var Idx = 1;
    var IntervalKey;

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

    var StartSlideShow = function () {
        IntervalKey = setInterval(ChangeImage, 10000);
    };

   

    StartSlideShow();
});