//console.trace();
$(document).ready(function () {

    $('#top-promos').cycle({
        fx: 'fade',
        delay: 1000,
        speed: 5000,
        pause: 1,
        pager: '#promospager',
        pagerAnchorBuilder: function (idx, slide) {
            return '<li><a href="#"><img src="' + $('#promoImg' + idx).html() + '" width="172" height="79" /></a></li>';
        }
    });

    //pauses the scroll function if the thumbs are rolled over
    $('ul#promospager').mouseover(function () {
        $('#top-promos').cycle('pause');
    });

    $('ul#promospager').mouseout(function () {
        $('#top-promos').cycle('resume');
    });

    $('.upBtn').bind("mouseenter", function () {
        $('#promospagerWrap').stop().animate({ bottom: 2 }, { duration: 1000, easing: 'easeOutQuint', complete: function () { $('.upBtn').css({ backgroundPosition: "0px -27px" }); } });
    });

    $('#promospagerWrap').bind("mouseleave", function () {
        $('#promospagerWrap').stop().animate({ bottom: -94 }, { duration: 1000, easing: 'easeOutQuint', complete: function () { $('.upBtn').css({ backgroundPosition: "0px 0px" }); } });
    });

    $('.mid-scroll').fadeIn('slow', function () {
        // Animation complete
    });

    $('.mid-scroll').cycle({
        fx: 'fade',
        delay: 500,
        speed: 2000,
        pause: true,
        after: function (curr, next, opts) { midAfterChanged(curr, next, opts); isAnimating = false; },
        before: function (curr, next, opts) { midBeforeChanged(curr, next, opts); isAnimating = true; },
        pager: '#scrollpager',
        requeueOnImageNotLoaded: true
    });

    var promoAnimating = false;
    var heroSpeed = 800;

    $('.promo-1-off-map').bind("mouseenter mousemove", function () {
        if ($(".top-promos").is(":animated")) return;
        stopHeros();
        open1();
        close2();
        close3();
    });

    $('.promo-2-off-map').bind("mouseenter mousemove", function () {
        if ($(".top-promos").is(":animated")) return;
        stopHeros();
        open2();
    });

    $('.promo-3-off-map').bind("mouseenter mousemove", function () {
        if ($(".top-promos").is(":animated")) return;
        stopHeros();
        open3();
        $('.promo-2').animate({ left: 148 }, { duration: heroSpeed, easing: 'easeOutQuint' }, function () {
        });
        $('.promo-1-off').fadeIn(heroSpeed);
        $('.promo-2-off').fadeIn(heroSpeed);
    });

    function open1() {
        $('.promo-1-on').fadeIn(heroSpeed);
        $('.promo-1-off').fadeOut(heroSpeed);
    }

    function open2() {
        $('.promo-1-off').fadeIn(heroSpeed);
        $('.promo-2').animate({ left: 148 }, { duration: heroSpeed, easing: 'easeOutQuint' }, function () {
        });
        $('.promo-2-off').fadeOut(heroSpeed);
        close3();
    }

    function close2() {
        promoAnimating = true;
        $('.promo-2').animate({ left: 638 }, { duration: heroSpeed, easing: 'easeOutQuint' }, function () {
        });
        $('.promo-2-off').fadeIn(heroSpeed);
    }

    function open3() {
        $('.promo-3').animate({ left: 310 }, { duration: heroSpeed, easing: 'easeOutQuint' }, function () {
        });

        $('.promo-3-on').css({ 'display': 'block' });
        $('.promo-3-off').fadeOut(heroSpeed);
    }

    function close3() {
        $('.promo-3').animate({ left: 788 }, { duration: heroSpeed, easing: 'easeOutQuint' }, function () {
        });
        $('.promo-3-off').fadeIn(heroSpeed);
    }

    function stopHeros() {
        $(".promo-1").stop();
        $(".promo-2").stop();
        $(".promo-3").stop();
    }
});

function mycarousel_initCallback(carousel) {
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function () {
        carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function () {
        carousel.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function () {
        carousel.stopAuto();
    }, function () {
        carousel.startAuto();
    });
};
