var interleaveOffset = 0.1;
var interleaveOffset2 = 0.3;
var swiper2 = new Swiper('.swiper2', {
    direction: 'vertical',
    mousewheel: { eventsTarged: '.cursor-box'},
    watchSlidesProgress: true,
    observer: true,
    observeParents: true,
    followFinger: false,
    speed: 800,
    pagination: {
        el: '.swiper1-pagination',
        clickable: false,
    },
    on: {
        slideChange: function () {
            var index = this.activeIndex;
            swiper1.slideTo(index);
        },
        transitionStart: function () {
            $(".content-wrap .slide-content").find("p").stop(0);
            var index = this.activeIndex;
            if (activeIndex < index) {
                $(".content-wrap .slide-content").eq(activeIndex).find("p").each(function (i) {
                    TweenMax.fromTo($(this), .5, { opacity: 1, y: "0" }, { opacity: 0, y: "-100px", delay: i * 0.1 });
                });
                $(".content-wrap .slide-content").eq(index).find("p").each(function (i) {
                    TweenMax.fromTo($(this), .5, { opacity: 0, y: "50px" }, { opacity: 1, y: "0", delay: i * 0.1 + 0.6 });
                });
            } else {
                $(".content-wrap .slide-content").eq(activeIndex).find("p").each(function (i) {
                    TweenMax.fromTo($(this), .3, { opacity: 1, y: "0" }, { opacity: 0, y: "100px", delay: (1 - i) * 0.1 });
                });
                $(".content-wrap .slide-content").eq(index).find("p").each(function (i) {
                    TweenMax.fromTo($(this), .3, { opacity: 0, y: "-50px" }, { opacity: 1, y: "0", delay: (1 - i) * 0.1 + 0.6 });
                });
            }
            slide = this.slides.eq(this.activeIndex);
            $(".slide-content").eq(index).addClass("active").siblings().removeClass("active");
            activeIndex = index;
        },
        transitionEnd: function () {
            $(".slide-content").not("active").find("p").css("opacity", 0);

        },
        progress: function () {
            var swiper = this;
            for (var i = 0; i < swiper.slides.length; i++) {
                var slideProgress = swiper.slides[i].progress;
                var innerOffset = swiper.height * interleaveOffset2;
                var innerTranslate = slideProgress * innerOffset;
                swiper.slides[i].querySelector(".swiper_box").style.transform =
                    "translate3d( 0," + innerTranslate + "px, 0)";
                //zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                //swiper.slides.eq(i).css({ "zIndex": zIndex });
                //if (slideProgress == 0) {
                //    TweenMax.to($(swiper.slides.eq(i)), 0, { opacity: 1, delay:0.1 });
                //} else {
                //    TweenMax.to($(swiper.slides.eq(i)), 0, { opacity: 0, delay:0.5 });
                //}
            }

        },
        touchStart: function () {
            var swiper = this;
            for (var i = 0; i < swiper.slides.length; i++) {
                swiper.slides[i].style.transition = "";
            }
        },
        setTransition: function (speed) {
            var swiper = this;
            for (var i = 0; i < swiper.slides.length; i++) {
                swiper.slides[i].style.transition = speed + "ms";
                swiper.slides[i].querySelector(".swiper_box").style.transitionDuration = speed + "ms";
            }
        }
    }
});
$(".cursor-box").bind("mousemove mouseenter",function (e) {
    $("html").css({ "cursor": "none" });
    TweenMax.to($(".cursor"), 0.1, { x: e.pageX, y: e.pageY, "opacity": 1 });
});

$(".cursor-box").bind("mouseout mouseleave", function () {
    $("html").css({ "cursor": "default" });
    TweenMax.to($(".cursor"), 0.1, { "opacity": 0 });
});
var activeIndex = swiper2.activeIndex;

var swiper1 = new Swiper('.swiper1', {
    direction: 'vertical',
    followFinger: false,
    speed: 500,
    effect: 'fade',
    watchSlidesProgress: true,
    mousewheel: true,
    pagination: {
        el: '.swiper1-pagination',
        clickable: false,
    },
    on: {
        slideChange: function () {
            var index = this.activeIndex;
            swiper2.slideTo(index);
        },
        progress: function () {
            var swiper = this;
            for (var i = 0; i < swiper.slides.length; i++) {
                var slideProgress = swiper.slides[i].progress;
                var innerOffset = swiper.height * interleaveOffset;
                var innerTranslate = slideProgress * innerOffset;
                swiper.slides[i].querySelector(".bg").style.transform =
                    "translate3d( 0," + innerTranslate + "px, 0)";
            }
        },
        touchStart: function () {
            var swiper = this;
            for (var i = 0; i < swiper.slides.length; i++) {
                swiper.slides[i].style.transition = "";
            }
        },
        setTransition: function (speed) {
            var swiper = this;
            for (var i = 0; i < swiper.slides.length; i++) {
                swiper.slides[i].style.transition = speed + "ms";
                swiper.slides[i].querySelector(".bg").style.transition = speed + "ms";
            }
        }
    }
});
$(".page,.content-wrap").mousewheel(function (event) {
    if (event.deltaY < 0) {
        pageTween(true);
    }
});
$(".more-explore").click(function () {
    pageTween(true);
});
function pageTween(result) {
    if (result && !TweenMax.isTweening($(".page"))) {
        swiper1.mousewheel.enable();
        swiper2.mousewheel.enable();
        TweenMax.to($(".page"), 1, { scale: .5, x: "-50%", y: "-50%", ease: Quint.easeOut })
        TweenMax.to($(".page .bg"), .7, { scale: 2 });
        $(".page").delay(1000).hide(0);
        $(".more-explore").delay(500).hide(0);
        $(".cursor-box").delay(1000).show(0);
    }
}
$(".swiper2,.swiper1,.cursor-box").mousewheel(function (event) {
    if (event.deltaY > 0 && activeIndex == 0 && !TweenMax.isTweening($(".page")) && !TweenMax.isTweening($(".swiper-wrapper"))) {
        swiper1.mousewheel.disable();
        swiper2.mousewheel.disable();
        setTimeout(function () {
            $(".page").show();
            $(".cursor-box").hide();
            TweenMax.to($(".page"), .7, { scale: 1, x: "-50%", y: "-50%", ease: Quint.easeOut });
            TweenMax.to($(".page .bg"), .7, { scale: 1 });
            $(".more-explore").delay(500).show(0);
        }, 500);
    }
});
$(".cursor-box").click(function (e) {
    if (activeIndex > 0 ) {
        var url = $(".swiper2 .swiper-slide").eq(activeIndex).attr('data-url');
        history.pushState(null, null, url);
        $(".page,.content-wrap").unbind("mousewheel");
        $(".page").show();
        $(".cursor-box").hide();
        TweenMax.to($(".page"), 1, { scale: 1, ease: Circ.easeOut });
        TweenMax.to($(".page .bg"), .7, { scale: 1 });
        $(".page .item").eq(activeIndex).addClass("active").siblings().removeClass("active");
        //$(".page").show(0).css({ "width": "100%", "height": "100vh" })
        //$(".more-explore").show(500);
        $(".slide-content.active").children(".desc").delay(500).show(1000);
        $(".process-bar").show();
        TweenMax.fromTo($(".process-bar"), 1, { "width": "0%" }, { "width": "100%", delay: 1 });
        setTimeout(function () {
            $.ajax({
                url: "/brandajax/ShowDetail",
                data: { "pageIndex": activeIndex },
                dataType: "html",
                async: false,
                type: "post",
                beforeSend: function (XMLHttpRequest) {

                },
                success: function (data) {

                    $("#main").html(data);
                    var fHeight = $("footer").outerHeight();
                    //$(".wrap").css({ marginBottom: fHeight })
                    $(".process-bar").hide();
                    $('html, body').animate({ scrollTop: 100 }, 300);


                },
                complete: function (XMLHttpRequest, textStatus) {


                },
                error: function () {
                    alert("系统繁忙，请稍后重试哦~");
                }

            });
        }, 2000);
    };
});

$(document).keydown(function (event) {
    var scrollTop = $(window).scrollTop();
    var key_code = event.keyCode || event.which;
    $(".series").each(function () {

        var top = $(this).offset().top;
        var height = $(this).height();
        var leftTxt = $(this).find(".show-from-left");
        var rightTxt = $(this).find(".show-from-right");
        var bottomTxt = $(this).find(".show-from-bottom");
        var topTxt = $(this).find(".show-from-top");
        var fadeinTxt = $(this).find(".show-fade-in");

        var leftdelayTxt = $(this).find(".show-delay-from-left");
        var rightdelayTxt = $(this).find(".show-delay-from-right");
        var bottomdelayTxt = $(this).find(".show-delay-from-bottom");
        var topdelayTxt = $(this).find(".show-delay-from-top");
        var fadeindelayTxt = $(this).find(".show-delay-fade-in");

        if (top < $(window).height() + scrollTop && key_code == 40) {
            $(leftTxt).removeClass('fade-out-left').addClass('animated fade-in-left');
            $(rightTxt).removeClass('fade-out-right').addClass('animated fade-in-right');
            $(bottomTxt).removeClass('fade-out-down').addClass("animated fade-in-up");
            $(topTxt).removeClass('fade-out-up').addClass("animated fade-in-down");
            $(fadeinTxt).removeClass('fade-out').addClass("animated fade-in");

            $(leftdelayTxt).removeClass('fade-out-left').addClass('animated animated-delay-1s fade-in-left');
            $(rightdelayTxt).removeClass('fade-out-right').addClass('animated animated-delay-1s fade-in-right');
            $(bottomdelayTxt).removeClass('fade-out-down').addClass("animated animated-delay-1s fade-in-up");
            $(topdelayTxt).removeClass('fade-out-up').addClass("animated animated-delay-1s  fade-in-down");
            $(fadeindelayTxt).removeClass('fade-out').addClass("animated animated-delay-1s fade-in");
        }
        if (top - $(window).height() * 2 / 3 > scrollTop && key_code == 38) {
            $(leftTxt).removeClass('fade-in-left').addClass('animated fade-out-left');
            $(rightTxt).removeClass('fade-in-right').addClass('animated fade-out-right');
            $(bottomTxt).removeClass('fade-in-up').addClass("animated fade-out-down");
            $(topTxt).removeClass('fade-in-down').addClass("animated fade-out-up");
            $(fadeinTxt).removeClass('fade-in').addClass("animated fade-out");

            $(leftdelayTxt).removeClass('animated-delay-1s fade-in-left').addClass('animated fade-out-left');
            $(rightdelayTxt).removeClass('animated-delay-1s fade-in-right').addClass('animated fade-out-right');
            $(bottomdelayTxt).removeClass('animated-delay-1s fade-in-up').addClass("animated fade-out-down");
            $(topdelayTxt).removeClass('animated-delay-1s  fade-in-down').addClass("animated fade-out-up");
            $(fadeindelayTxt).removeClass('fade-in animated-delay-1s').addClass("animated fade-out");

        }

    });
});
$(window).bind("mousewheel", function (event, delta) {

    var scrollTop = $(window).scrollTop();
    $(".series").each(function () {
        var top = $(this).offset().top;
        var height = $(this).height();
        var leftTxt = $(this).find(".show-from-left");
        var rightTxt = $(this).find(".show-from-right");
        var bottomTxt = $(this).find(".show-from-bottom");
        var topTxt = $(this).find(".show-from-top");
        var fadeinTxt = $(this).find(".show-fade-in");

        var leftdelayTxt = $(this).find(".show-delay-from-left");
        var rightdelayTxt = $(this).find(".show-delay-from-right");
        var bottomdelayTxt = $(this).find(".show-delay-from-bottom");
        var topdelayTxt = $(this).find(".show-delay-from-top");
        var fadeindelayTxt = $(this).find(".show-delay-fade-in");

        if (top < $(window).height() + scrollTop && delta < 0) {
            $(leftTxt).removeClass('fade-out-left').addClass('animated fade-in-left');
            $(rightTxt).removeClass('fade-out-right').addClass('animated fade-in-right');
            $(bottomTxt).removeClass('fade-out-down').addClass("animated fade-in-up");
            $(topTxt).removeClass('fade-out-up').addClass("animated fade-in-down");
            $(fadeinTxt).removeClass('fade-out').addClass("animated fade-in");

            $(leftdelayTxt).removeClass('fade-out-left').addClass('animated animated-delay-1s fade-in-left');
            $(rightdelayTxt).removeClass('fade-out-right').addClass('animated animated-delay-1s fade-in-right');
            $(bottomdelayTxt).removeClass('fade-out-down').addClass("animated animated-delay-1s fade-in-up");
            $(topdelayTxt).removeClass('fade-out-up').addClass("animated animated-delay-1s  fade-in-down");
            $(fadeindelayTxt).removeClass('fade-out').addClass("animated animated-delay-1s fade-in");
        }
        if (top - $(window).height() * 2 / 3 > scrollTop && delta > 0) {
            $(leftTxt).removeClass('fade-in-left').addClass('animated fade-out-left');
            $(rightTxt).removeClass('fade-in-right').addClass('animated fade-out-right');
            $(bottomTxt).removeClass('fade-in-up').addClass("animated fade-out-down");
            $(topTxt).removeClass('fade-in-down').addClass("animated fade-out-up");
            $(fadeinTxt).removeClass('fade-in').addClass("animated fade-out");

            $(leftdelayTxt).removeClass('animated-delay-1s fade-in-left').addClass('animated fade-out-left');
            $(rightdelayTxt).removeClass('animated-delay-1s fade-in-right').addClass('animated fade-out-right');
            $(bottomdelayTxt).removeClass('animated-delay-1s fade-in-up').addClass("animated fade-out-down");
            $(topdelayTxt).removeClass('animated-delay-1s  fade-in-down').addClass("animated fade-out-up");
            $(fadeindelayTxt).removeClass('fade-in animated-delay-1s').addClass("animated fade-out");
        }
    });

});