$(document).ready(function () {
    var
        menuTl = new TimelineMax(),
        bgLines = $(".bgLines div"),
        svgbrainLine = $(".brief__text svg> line"),
        brainPoint = $(".brief__text svg> g> circle"),
        controller = new ScrollMagic.Controller(),
        IntroDiagramParent = $(".introDiagram"),
        introDiagram = $("#introDiagram"),
        runningIcon = $(".runningDays .circleMenu__icon"),
        totalIcon = $(".totalDeposit .circleMenu__icon"),
        activeIcon = $(".activeAccount .circleMenu__icon"),
        currentlyIcon = $(".currentlyOnline .circleMenu__icon"),
        brainLine = $(".brainLine");
    var aboutIntroTl = new TimelineMax();
    aboutIntroTl
        .fromTo(introDiagram, 2.5, {
            drawSVG: "100% 100%"
        }, {
            drawSVG: "0% 100%",
            autoAlpha: 1
        })
        .to(IntroDiagramParent, 0.5, {
            opacity: 0.3
        })
        .to(bgLines, 2, {
            height: "100%"
        }, '-=2.5');

    var aboutTl = new TimelineMax();
    aboutTl
        .staggerFromTo(brainLine, 1, {
            drawSVG: "100% 100%"
        }, {
            drawSVG: "0% 100%",
            autoAlpha: 1
        }, 0.2, "=-1.5")
        .staggerFromTo(svgbrainLine, 1, {
            drawSVG: "100% 100%"
        }, {
            drawSVG: "0% 100%",
            autoAlpha: 0.1
        }, 0.2, "=-3.5")
        .staggerFromTo(brainPoint, .01, {
            drawSVG: "100% 100%"
        }, {
            drawSVG: "0% 100%",
            autoAlpha: 1
        }, 0.02, "=-2.5");

    menuTl

        .to(".circleMenu__title", 2, {
            autoAlpha: 1
        }, '-=1')
        .to(".runningDays .circleMenu__text", 0.5, {
            autoAlpha: 1
        }, '-=1')
        .fromTo(".runningDays .circleMenu__text span", 0.5, {
            y: 100,
            autoAlpha: 0
        }, {
            y: 0,
            autoAlpha: 1
        })
        .to(runningIcon, 1, {
            autoAlpha: 1
        }, '-=0.6')
        .to(".totalDeposit .circleMenu__text", 1, {
            autoAlpha: 1
        }, '-=1')
        .to(totalIcon, 1, {
            autoAlpha: 1
        }, 1.5)
        .fromTo(".totalDeposit .circleMenu__text span", 1, {
            x: 300,
            autoAlpha: 0
        }, {
            x: 0,
            autoAlpha: 1
        })
        .to(".activeAccount .circleMenu__text", 1, {
            autoAlpha: 1
        }, '-=1.2')
        .to(activeIcon, 1, {
            autoAlpha: 1
        }, 2)
        .fromTo(".activeAccount .circleMenu__text span", 0.5, {
            y: -100,
            autoAlpha: 0
        }, {
            y: 0,
            autoAlpha: 1
        })
        .to(".currentlyOnline .circleMenu__text", 1, {
            autoAlpha: 1
        }, '-=1.5')
        .to(currentlyIcon, 1, {
            autoAlpha: 1
        }, 2.5)
        .fromTo(".currentlyOnline .circleMenu__text span", 1, {
            x: -500,
            autoAlpha: 0
        }, {
            x: 0,
            autoAlpha: 1
        });

    var scroolScence = new ScrollMagic.Scene({
            triggerElement: '#aboutBrief',
            offset: -300,
            reverse: false

        })
        .setTween(aboutTl)
        .addTo(controller);

    $("#aboutFeatureCarousel").owlCarousel({
        loop: true,
        dots: false,
        autoplay: true,
        autoplayTimeout: 4000,
        smartSpeed: 650,
        stagePadding: 50,
        responsive: {
            0: {
                items: 1,
                stagePadding: 0,
                dots: false
            },
            730: {
                items: 2,
                stagePadding: 0,
            },
            1199: {
                items: 3
            }
        }
    });


})