$(document).ready(function () {
  setTimeout("FadeAdsIn(1, 0.1)", 500);
});

function FadeAdsIn(myClass, percent){
  var fadeDuration = 0;
  $(".sliderAd" + myClass + " img").fadeTo(fadeDuration, percent);
  
  if (percent < 1) {
    setTimeout("FadeAdsIn(" + myClass + ", " + (percent + 0.1) + ")", 50);
  }
  else if (myClass < 5) {
    $(".sliderAd" + myClass + " img").css("filter", "");
    setTimeout("FadeAdsIn(" + (myClass + 1) + ", 0.1)", 100);
  }
  else {
    $(".sliderAd" + myClass + " img").css("filter", "");

    //setup hover effects
    $(".sliderAd1").hover(function () { ShowAd("sliderAd1"); }, function () { ShowAll(); });
    $(".sliderAd2").hover(function () { ShowAd("sliderAd2"); }, function () { ShowAll(); });
    $(".sliderAd3").hover(function () { ShowAd("sliderAd3"); }, function () { ShowAll(); });
    $(".sliderAd4").hover(function () { ShowAd("sliderAd4"); }, function () { ShowAll(); });
    $(".sliderAd5").hover(function () { ShowAd("sliderAd5"); }, function () { ShowAll(); });
  }  
}

function ShowAd(ad) {
    var aniDuration = 700;

    if (ad == "sliderAd1") {
        $(function () {
            $(".sliderAd1").stop().animate({ width: "715px" }, aniDuration);
            $(".sliderAd2").stop().animate({ width: "58.25px", left: "715px" }, aniDuration);
            $(".sliderAd3").stop().animate({ width: "58.25px", left: "773.25px" }, aniDuration);
            $(".sliderAd4").stop().animate({ width: "58.25px", left: "831.5px" }, aniDuration);
            $(".sliderAd5").stop().animate({ width: "58.25px", left: "889.75px" }, aniDuration);
        });
    }
    else if (ad == "sliderAd2") {
        $(function () {
            $(".sliderAd1").stop().animate({ width: "58.25px" }, aniDuration);
            $(".sliderAd2").stop().animate({ width: "715px", left: "58.25px" }, aniDuration);
            $(".sliderAd3").stop().animate({ width: "58.25px", left: "773.25px" }, aniDuration);
            $(".sliderAd4").stop().animate({ width: "58.25px", left: "831.5px" }, aniDuration);
            $(".sliderAd5").stop().animate({ width: "58.25px", left: "889.75px" }, aniDuration);
        });
    }
    else if (ad == "sliderAd3") {
        $(function () {
            $(".sliderAd1").stop().animate({ width: "58.25px" }, aniDuration);
            $(".sliderAd2").stop().animate({ width: "58.25px", left: "58.25px" }, aniDuration);
            $(".sliderAd3").stop().animate({ width: "715px", left: "116.5px" }, aniDuration);
            $(".sliderAd4").stop().animate({ width: "58.25px", left: "831.5px" }, aniDuration);
            $(".sliderAd5").stop().animate({ width: "58.25px", left: "889.75px" }, aniDuration);
        });
    }
    else if (ad == "sliderAd4") {
        $(function () {
            $(".sliderAd1").stop().animate({ width: "58.25px" }, aniDuration);
            $(".sliderAd2").stop().animate({ width: "58.25px", left: "58.25px" }, aniDuration);
            $(".sliderAd3").stop().animate({ width: "58.25px", left: "116.5px" }, aniDuration);
            $(".sliderAd4").stop().animate({ width: "715px", left: "174.75px" }, aniDuration);
            $(".sliderAd5").stop().animate({ width: "58.25px", left: "889.75px" }, aniDuration);
        });
    }
    else if (ad == "sliderAd5") {
        $(function () {
            $(".sliderAd1").stop().animate({ width: "58.25px" }, aniDuration);
            $(".sliderAd2").stop().animate({ width: "58.25px", left: "58.25px" }, aniDuration);
            $(".sliderAd3").stop().animate({ width: "58.25px", left: "116.5px" }, aniDuration);
            $(".sliderAd4").stop().animate({ width: "58.25px", left: "174.75px" }, aniDuration);
            $(".sliderAd5").stop().animate({ width: "715px", left: "233px" }, aniDuration);
        });
    }
}

function ShowAll() {
    var aniDuration = 700;
    $(function () {
        $(".sliderAd1").stop().animate({ width: "190px" }, aniDuration);
        $(".sliderAd2").stop().animate({ width: "190px", left: "189.6px" }, aniDuration);
        $(".sliderAd3").stop().animate({ width: "190px", left: "379.2px" }, aniDuration);
        $(".sliderAd4").stop().animate({ width: "190px", left: "568.8px" }, aniDuration);
        $(".sliderAd5").stop().animate({ width: "190px", left: "758.4px" }, aniDuration);
    })
}