$(document).ready(function () {
    $("#main-promo")
        .before("<div id='slideNav'>")
        .cycle({
            fx: "fade",
            timeout: 9000,
            after: breakSlide,
            pager: "#slideNav"
        });

    $(".pause-play").click(function () {
        var isPlaying = $(this).children().attr("alt");
        if (isPlaying == "Pause") {
            $("#main-promo").cycle("pause");
            cancelTimer();
            $(this).html('<img src="/Content/images/play.png" alt="Play" />');
        }
        else {
            $("#main-promo").cycle("resume");
            closeSlide();
            $(this).html('<img src="/Content/images/pause.png" alt="Pause" />');
        }
    });

    $("#slideNav a").each(function () { $(this).html("<img src='/Content/images/blank.png' height='20' width='20' alt='' />"); })
    $("#slideNav a").click(function () {
        cancelTimer();
        closeSlide();
    });

    var closeSlides;

    function breakSlide() {

        $("#main-promo").find(".left-slide").delay(500).animate({ left: '-100px' }, 500);
        $("#main-promo").find(".right-slide").delay(500).animate({ right: '-195px' }, 500);
        closeSlides = 0;
        var isPlaying = $(".pause-play").children().attr("alt");
        if (isPlaying == "Pause") {
            setTimer();
        }
    }

    function closeSlide() {
        $("#main-promo").find(".left-slide").animate({ left: '0px' }, 500);
        $("#main-promo").find(".right-slide").animate({ right: '0px' }, 500);
    }

    function setTimer() {
        if (!closeSlides) {
            closeSlides = setTimeout(closeSlide, 7500);
        }
    }

    function cancelTimer() {
        clearTimeout(closeSlides);
        closeSlides = 0;
    }
});