$(document).ready(function () {
    var move = "-150px"
    if (window.innerWidth <= 1199 && window.innerWidth > 991) {
        var move = "-130px"
    }
    else if (window.innerWidth <= 991 && window.innerWidth > 768) {
        var move = "-100px"
    }
    else if (window.innerWidth <= 768) {
        var move = "-50px"
    }

    var tl = new TimelineMax();

    tl.fromTo('.page-title', 1, { autoAlpha: 0, x: -50 }, { autoAlpha: 1, x: 0 })
        .fromTo('.page-desc', 1, { autoAlpha: 0, y: -50 }, { autoAlpha: 1, y: 0 }, "-=.2")
        .fromTo('.investConcept h2 , .investConcept p', 1, { autoAlpha: 0, y: -50 }, { autoAlpha: 1, y: 0 }, "-=.5")
        .fromTo('.welcome', 1, { autoAlpha: 0, y: -50 }, { autoAlpha: 1, y: 0 }, "-=.5")
        .fromTo('.btn--twoPart', 1, { autoAlpha: 0, y: 50 }, { autoAlpha: 1, y: 0 }, "-=.7")
        .to($('.home-tree'), 7, { webkitMaskPositionY: move }, "-=3")

    var tl1 = new TimelineMax({ paused: true });
    tl1.staggerFromTo(".investSteps-item", .6, { autoAlpha: 0, y: -80 }, { autoAlpha: 1, y: 0 }, .1)
        .fromTo(".get-started", 1, { autoAlpha: 0, x: -50 }, { autoAlpha: 1, x: 0 }, "+=.4")

    var tl2 = new TimelineMax({ paused: true });
    tl2.fromTo(".rex-video .btn", .7, { autoAlpha: 0, scale: 0 }, { autoAlpha: 1, scale: 1 })
        .fromTo(".rex-video span", .8, { autoAlpha: 0, y: 50 }, { autoAlpha: 1, y: 0 }, "+=.2")
        .fromTo(".rex-video h3", .8, { autoAlpha: 0, y: 50 }, { autoAlpha: 1, y: 0 }, "-=.1")

    var tl3 = new TimelineMax({ paused: true });
    tl3.staggerFromTo(".props-item", 1, { autoAlpha: 0, y: -200 }, { autoAlpha: 1, y: 0 }, .2)
        .fromTo(".advantage-desc", 1, { autoAlpha: 0, y: 200 }, { autoAlpha: 1, y: 0 }, "-=1");
    var scrollMagicControl = new ScrollMagic.Controller();
    var scene1 = new ScrollMagic.Scene({ triggerElement: ".investConcept", reverse: false, offset: -100 })
        .on("enter", function () { tl1.play(); })
    var scene2 = new ScrollMagic.Scene({ triggerElement: ".rex-video", reverse: false, offset: -100 })
        .on("enter", function () { tl2.play(); })
    var scene3 = new ScrollMagic.Scene({ triggerElement: ".advantage", reverse: false, offset: -150 })
        .on("enter", function () { tl3.play(); })
    scrollMagicControl.addScene([scene1, scene2, scene3]);
    //**********************machine***** */
    // Rex Machine

    // Define Timelines
    TweenLite.defaultEase = Linear.easeNone;
    var outsideInvestorTl = new TimelineMax({ repeat: -1, repeatDelay: 9 }),
        insideInvestorTl = new TimelineMax({ repeat: -1 }),
        outsideDirtyMoneyTl = new TimelineMax({ repeat: -1, repeatDelay: 9 }),
        insideDirtyMoneyTl = new TimelineMax({ repeat: -1 }),
        profitTl = new TimelineMax({ repeat: -1 }),
        cleanMoneyTl = new TimelineMax({ repeat: -1 });

    // Define Inner and Outside Inputs
    var dollarCoinOut = $("#DollarOutside"),
        perfectCoinOut = $("#PerfectMoneyOutside"),
        bitcoinCoinOut = $("#BitcoinOutside"),
        okCoinOut = $("#OkPayOutside"),
        payeerCoinOut = $("#PayeerOutside"),
        dollarCoinIn = $("#DollarInside"),
        perfectCoinIn = $("#PerfectMoneyInside"),
        bitcoinCoinIn = $("#BitcoinInside"),
        okCoinIn = $("#OkPayInside"),
        payeerCoinIn = $("#PayeerInside"),
        investorCoinPath1 = MorphSVGPlugin.pathDataToBezier("#InvestorP1", { align: "relative", offsetX: 150, offsetY: 160 }),
        investorCoinPath2 = MorphSVGPlugin.pathDataToBezier("#InvestorP2", { align: "relative", offsetX: 150, offsetY: -100 }),
        dirtyCoinOut1 = $("#DirtyCoinOut1"),
        dirtyCoinOut2 = $("#DirtyCoinOut2"),
        dirtyCoinOut3 = $("#DirtyCoinOut3"),
        dirtyCoinOut4 = $("#DirtyCoinOut4"),
        dirtyCoinOut5 = $("#DirtyCoinOut5"),
        dirtyCoinIn1 = $("#DirectCoinIn1"),
        dirtyCoinIn2 = $("#DirectCoinIn2"),
        dirtyCoinIn3 = $("#DirectCoinIn3"),
        dirtyCoinIn4 = $("#DirectCoinIn4"),
        dirtyCoinIn5 = $("#DirectCoinIn5"),
        dirtyCoinPath1 = MorphSVGPlugin.pathDataToBezier("#DirtyMoneyP1", { align: "relative", offsetX: 0, offsetY: -150 }),
        dirtyCoinPath2 = MorphSVGPlugin.pathDataToBezier("#DirtyMoneyP2", { align: "relative", offsetX: 0, offsetY: 230 });

    // Define Outputs
    var cleanOutTop1 = $("#CleanOutTop1"),
        cleanOutTop2 = $("#CleanOutTop2"),
        cleanOutMiddle1 = $("#CleanOutMiddle1"),
        cleanOutMiddle2 = $("#CleanOutMiddle2"),
        cleanOutBottom1 = $("#CleanOutBottom1"),
        cleanOutBottom2 = $("#CleanOutBottom2"),
        profitOutTop1 = $("#ProfitOutTop1"),
        profitOutTop2 = $("#ProfitOutTop2"),
        profitOutMiddle1 = $("#ProfitOutMiddle1"),
        profitOutMiddle2 = $("#ProfitOutMiddle2"),
        profitOutBottom1 = $("#ProfitOutBottom1"),
        profitOutBottom2 = $("#ProfitOutBottom2");

    // Input Timlines
    outsideInvestorTl
        .fromTo(dollarCoinOut, 1, { autoAlpha: 0, x: 100 }, { x: -300, autoAlpha: 1 })
        .fromTo(perfectCoinOut, 1, { autoAlpha: 0, x: 100 }, { x: -300, autoAlpha: 1 })
        .fromTo(bitcoinCoinOut, 1, { autoAlpha: 0, x: 100 }, { x: -300, autoAlpha: 1 })
        .fromTo(okCoinOut, 1, { autoAlpha: 0, x: 100 }, { x: -300, autoAlpha: 1 })
        .fromTo(payeerCoinOut, 1, { autoAlpha: 0, x: 100 }, { x: -300, autoAlpha: 1 });

    insideInvestorTl
        .to(dollarCoinIn, 10, { transformOrigin: "50% 50%", bezier: { values: investorCoinPath1, type: "cubic" } }, 0.1)
        .to(perfectCoinIn, 10, { transformOrigin: "50% 50%", bezier: { values: investorCoinPath2, type: "cubic" } }, 1.9)
        .to(bitcoinCoinIn, 10, { transformOrigin: "50% 50%", bezier: { values: investorCoinPath1, type: "cubic" } }, 2.9)
        .to(okCoinIn, 10, { transformOrigin: "50% 50%", bezier: { values: investorCoinPath2, type: "cubic" } }, 3.9)
        .to(payeerCoinIn, 10, { transformOrigin: "50% 50%", bezier: { values: investorCoinPath1, type: "cubic" } }, 4.9);

    TweenMax.to([dollarCoinIn, perfectCoinIn, bitcoinCoinIn, okCoinIn, payeerCoinIn], 2, {
        rotation: "-360",
        transformOrigin: "50% 50%",
        repeat: -1
    });
    outsideDirtyMoneyTl
        .fromTo(dirtyCoinOut1, 1, { autoAlpha: 0, x: -100 }, { x: 300, autoAlpha: 1 })
        .fromTo(dirtyCoinOut2, 1, { autoAlpha: 0, x: -100 }, { x: 300, autoAlpha: 1 })
        .fromTo(dirtyCoinOut3, 1, { autoAlpha: 0, x: -100 }, { x: 300, autoAlpha: 1 })
        .fromTo(dirtyCoinOut4, 1, { autoAlpha: 0, x: -100 }, { x: 300, autoAlpha: 1 })
        .fromTo(dirtyCoinOut5, 1, { autoAlpha: 0, x: -100 }, { x: 300, autoAlpha: 1 });

    insideDirtyMoneyTl
        .to(dirtyCoinIn1, 5, { transformOrigin: "50% 50%", bezier: { values: dirtyCoinPath1, type: "cubic" } }, 0.1)
        .to(dirtyCoinIn2, 10, { transformOrigin: "50% 50%", bezier: { values: dirtyCoinPath2, type: "cubic" } }, 1.9)
        .to(dirtyCoinIn3, 5, { transformOrigin: "50% 50%", bezier: { values: dirtyCoinPath1, type: "cubic" } }, 2.9)
        .to(dirtyCoinIn4, 10, { transformOrigin: "50% 50%", bezier: { values: dirtyCoinPath2, type: "cubic" } }, 3.9)
        .to(dirtyCoinIn5, 5, { transformOrigin: "50% 50%", bezier: { values: dirtyCoinPath1, type: "cubic" } }, 4.9);

    TweenMax.to([dirtyCoinIn1, dirtyCoinIn2, dirtyCoinIn3, dirtyCoinIn4, dirtyCoinIn5], 1.5, {
        rotation: "-360",
        transformOrigin: "50% 50%",
        repeat: -1
    });
    var overlapTime = "-=1.2",
        outputDuration = 1.5;

    // Output Timlines
    cleanMoneyTl
        .fromTo(
            cleanOutTop1,
            outputDuration,
            { transformOrigin: "50% 50%", scale: 0 },
            {
                ease: Expo.easeOut,
                scale: 1.5,
                x: -1 * (Math.floor(Math.random() * 300) + 200),
                y: Math.floor(Math.random() * 90) + 40
            },
            overlapTime
        )
        .to(cleanOutTop1, 0.1, { autoAlpha: 0 }, "-=0.7")
        .fromTo(
            cleanOutMiddle1,
            outputDuration,
            { transformOrigin: "50% 50%", scale: 0 },
            {
                ease: Expo.easeOut,
                scale: 1.5,
                x: -1 * (Math.floor(Math.random() * 300) + 200),
                y: (Math.floor(Math.random() * 1) - 1) * (Math.floor(Math.random() * 20) + 10)
            },
            overlapTime
        )
        .to(cleanOutMiddle1, 0.1, { autoAlpha: 0 }, "-=0.7")
        .fromTo(
            cleanOutBottom1,
            outputDuration,
            { transformOrigin: "50% 50%", scale: 0 },
            {
                ease: Expo.easeOut,
                scale: 1.5,
                x: -1 * (Math.floor(Math.random() * 300) + 200),
                y: (Math.floor(Math.random() * 1) - 1) * (Math.floor(Math.random() * 90) + 75)
            },
            overlapTime
        )
        .to(cleanOutBottom1, 0.1, { autoAlpha: 0 }, "-=0.7")
        .fromTo(
            cleanOutTop2,
            outputDuration,
            { transformOrigin: "50% 50%", scale: 0 },
            {
                ease: Expo.easeOut,
                scale: 1.5,
                x: -1 * (Math.floor(Math.random() * 300) + 200),
                y: (Math.floor(Math.random() * 1) - 1) * (Math.floor(Math.random() * 90) + 75)
            },
            overlapTime
        )
        .to(cleanOutTop2, 0.1, { autoAlpha: 0 }, "-=0.7")
        .fromTo(
            cleanOutBottom2,
            outputDuration,
            { transformOrigin: "50% 50%", scale: 0 },
            {
                ease: Expo.easeOut,
                scale: 1.5,
                x: -1 * (Math.floor(Math.random() * 300) + 200),
                y: (Math.floor(Math.random() * 1) - 1) * (Math.floor(Math.random() * 90) + 75)
            },
            overlapTime
        )
        .to(cleanOutBottom2, 0.1, { autoAlpha: 0 }, "-=0.7")
        .fromTo(
            cleanOutMiddle2,
            outputDuration,
            { transformOrigin: "50% 50%", scale: 0 },
            {
                ease: Expo.easeOut,
                scale: 1.5,
                x: -1 * (Math.floor(Math.random() * 300) + 200),
                y: (Math.floor(Math.random() * 1) - 1) * (Math.floor(Math.random() * 90) + 75)
            },
            overlapTime
        )
        .to(cleanOutMiddle2, 0.1, { autoAlpha: 0 }, "-=0.7");

    profitTl
        .fromTo(
            profitOutTop1,
            outputDuration,
            { transformOrigin: "50% 50%", scale: 0 },
            {
                ease: Expo.easeOut,
                scale: 2,
                x: Math.floor(Math.random() * 300) + 200,
                y: Math.floor(Math.random() * 90) + 40
            }
        )
        .to(profitOutTop1, 0.1, { autoAlpha: 0 }, "-=0.7")
        .fromTo(
            profitOutMiddle1,
            outputDuration,
            { transformOrigin: "50% 50%", scale: 0 },
            {
                ease: Expo.easeOut,
                scale: 2,
                x: Math.floor(Math.random() * 300) + 200,
                y: (Math.floor(Math.random() * 1) - 1) * (Math.floor(Math.random() * 20) + 10)
            },
            overlapTime
        )
        .to(profitOutMiddle1, 0.1, { autoAlpha: 0 }, "-=0.7")
        .fromTo(
            profitOutBottom1,
            outputDuration,
            { transformOrigin: "50% 50%", scale: 0 },
            {
                ease: Expo.easeOut,
                scale: 2,
                x: Math.floor(Math.random() * 300) + 200,
                y: (Math.floor(Math.random() * 1) - 1) * (Math.floor(Math.random() * 90) + 75)
            },
            overlapTime
        )
        .to(profitOutBottom1, 0.1, { autoAlpha: 0 }, "-=0.7")
        .fromTo(
            profitOutTop2,
            outputDuration,
            { transformOrigin: "50% 50%", scale: 0 },
            {
                ease: Expo.easeOut,
                scale: 2,
                x: Math.floor(Math.random() * 300) + 200,
                y: (Math.floor(Math.random() * 1) - 1) * (Math.floor(Math.random() * 90) + 75)
            },
            overlapTime
        )
        .to(profitOutTop2, 0.1, { autoAlpha: 0 }, "-=0.7")
        .fromTo(
            profitOutBottom2,
            outputDuration,
            { transformOrigin: "50% 50%", scale: 0 },
            {
                ease: Expo.easeOut,
                scale: 2,
                x: Math.floor(Math.random() * 300) + 200,
                y: (Math.floor(Math.random() * 1) - 1) * (Math.floor(Math.random() * 90) + 75)
            },
            overlapTime
        )
        .to(profitOutBottom2, 0.1, { autoAlpha: 0 }, "-=0.7")
        .fromTo(
            profitOutMiddle2,
            outputDuration,
            { transformOrigin: "50% 50%", scale: 0 },
            {
                ease: Expo.easeOut,
                scale: 2,
                x: Math.floor(Math.random() * 300) + 200,
                y: (Math.floor(Math.random() * 1) - 1) * (Math.floor(Math.random() * 90) + 75)
            },
            overlapTime
        )
        .to(profitOutMiddle2, 0.1, { autoAlpha: 0 }, "-=0.7");

    // Machine Spinner
    TweenMax.to("#spinner-fan", 2, { rotation: "-360", transformOrigin: "center", repeat: -1 });


    $('#play-video').click(function () {
        openModal("video");
        setTimeout(function () {
            $("#video").vimeo("play");
        }, 500)
    });

})