<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        body, html{
            background-color:#ccc;
            margin: 0px;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
        }

        #lottie{
            background-color:#000;
            width:960px;
            height:540px;
            /*width:360px;
            height:640px;*/
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            margin: auto;
            /*display:none;*/
        }

        .botas_loop_3,.botas_loop_2{
            display:none
        }

    </style>
    <!-- build:js lottie.js -->
     <script src="js/main.js"></script>
    <script src="js/utils/common.js"></script>
    <script src="js/utils/BaseEvent.js"></script>
    <script src="js/utils/helpers/arrays.js"></script>
    <script src="js/utils/helpers/svg_elements.js"></script>
    <script src="js/utils/helpers/html_elements.js"></script>
    <script src="js/3rd_party/transformation-matrix.js"></script>
    <script src="js/3rd_party/seedrandom.js"></script>
    <script src="js/3rd_party/BezierEaser.js"></script>
    <script src="js/utils/animationFramePolyFill.js"></script>
    <script src="js/utils/functionExtensions.js"></script>
    <script src="js/utils/bez.js"></script>
    <script src="js/utils/DataManager.js"></script>
    <script src="js/utils/FontManager.js"></script>
    <script src="js/utils/PropertyFactory.js"></script>
    <script src="js/utils/TransformProperty.js"></script>
    <script src="js/utils/shapes/ShapePath.js"></script>
    <script src="js/utils/shapes/ShapeProperty.js"></script>
    <script src="js/utils/shapes/ShapeModifiers.js"></script>
    <script src="js/utils/shapes/TrimModifier.js"></script>
    <script src="js/utils/shapes/RoundCornersModifier.js"></script>
    <script src="js/utils/shapes/RepeaterModifier.js"></script>
    <script src="js/utils/shapes/ShapeCollection.js"></script>
    <script src="js/utils/shapes/DashProperty.js"></script>
    <script src="js/utils/shapes/GradientProperty.js"></script>
    <script src="js/utils/imagePreloader.js"></script>
    <script src="js/utils/featureSupport.js"></script>
    <script src="js/utils/filters.js"></script>
    <script src="js/utils/text/TextAnimatorProperty.js"></script>
    <script src="js/utils/text/TextAnimatorDataProperty.js"></script>
    <script src="js/utils/text/LetterProps.js"></script>
    <script src="js/utils/text/TextProperty.js"></script>
    <script src="js/utils/text/TextSelectorProperty.js"></script>
    <script src="js/utils/pooling/pool_factory.js"></script>
    <script src="js/utils/pooling/pooling.js"></script>
    <script src="js/utils/pooling/point_pool.js"></script>
    <script src="js/utils/pooling/shape_pool.js"></script>
    <script src="js/utils/pooling/shapeCollection_pool.js"></script>
    <script src="js/utils/pooling/segments_length_pool.js"></script>
    <script src="js/utils/pooling/bezier_length_pool.js"></script>
    <script src="js/renderers/BaseRenderer.js"></script>
    <script src="js/renderers/SVGRenderer.js"></script>
    <script src="js/renderers/CanvasRenderer.js" data-light-skip="true"></script>
    <script src="js/renderers/HybridRenderer.js" data-light-skip="true"></script>
    <script src="js/mask.js"></script>
    <script src="js/elements/helpers/HierarchyElement.js"></script>
    <script src="js/elements/helpers/FrameElement.js"></script>
    <script src="js/elements/helpers/TransformElement.js"></script>
    <script src="js/elements/helpers/RenderableElement.js"></script>
    <script src="js/elements/helpers/RenderableDOMElement.js"></script>
    <script src="js/elements/helpers/shapes/ProcessedElement.js"></script>
    <script src="js/elements/helpers/shapes/SVGStyleData.js"></script>
    <script src="js/elements/helpers/shapes/SVGShapeData.js"></script>
    <script src="js/elements/helpers/shapes/SVGTransformData.js"></script>
    <script src="js/elements/helpers/shapes/SVGStrokeStyleData.js"></script>
    <script src="js/elements/helpers/shapes/SVGFillStyleData.js"></script>
    <script src="js/elements/helpers/shapes/SVGGradientFillStyleData.js"></script>
    <script src="js/elements/helpers/shapes/SVGGradientStrokeStyleData.js"></script>
    <script src="js/elements/helpers/shapes/ShapeGroupData.js"></script>
    <script src="js/elements/BaseElement.js"></script>
    <script src="js/elements/NullElement.js"></script>
    <script src="js/elements/svgElements/SVGBaseElement.js"></script>
    <script src="js/elements/ShapeElement.js"></script>
    <script src="js/elements/TextElement.js"></script>
    <script src="js/elements/CompElement.js"></script>
    <script src="js/elements/ImageElement.js"></script>
    <script src="js/elements/SolidElement.js"></script>
    <script src="js/elements/svgElements/SVGCompElement.js"></script>
    <script src="js/elements/svgElements/SVGTextElement.js"></script>
    <script src="js/elements/svgElements/SVGShapeElement.js"></script>
    <script src="js/elements/svgElements/effects/SVGTintEffect.js"></script>
    <script src="js/elements/svgElements/effects/SVGFillFilter.js"></script>
    <script src="js/elements/svgElements/effects/SVGStrokeEffect.js"></script>
    <script src="js/elements/svgElements/effects/SVGTritoneFilter.js"></script>
    <script src="js/elements/svgElements/effects/SVGProLevelsFilter.js"></script>
    <script src="js/elements/svgElements/effects/SVGDropShadowEffect.js"></script>
    <script src="js/elements/svgElements/effects/SVGMatte3Effect.js"></script>
    <script src="js/elements/svgElements/SVGEffects.js"></script>
    <script src="js/elements/canvasElements/CVContextData.js" data-light-skip="true"></script>
    <script src="js/elements/canvasElements/CVBaseElement.js" data-light-skip="true"></script>
    <script src="js/elements/canvasElements/CVImageElement.js" data-light-skip="true"></script>
    <script src="js/elements/canvasElements/CVCompElement.js" data-light-skip="true"></script>
    <script src="js/elements/canvasElements/CVMaskElement.js" data-light-skip="true"></script>
    <script src="js/elements/canvasElements/CVShapeElement.js" data-light-skip="true"></script>
    <script src="js/elements/canvasElements/CVSolidElement.js" data-light-skip="true"></script>
    <script src="js/elements/canvasElements/CVTextElement.js" data-light-skip="true"></script>
    <script src="js/elements/canvasElements/CVEffects.js" data-light-skip="true"></script>
    <script src="js/elements/htmlElements/HBaseElement.js" data-light-skip="true"></script>
    <script src="js/elements/htmlElements/HSolidElement.js" data-light-skip="true"></script>
    <script src="js/elements/htmlElements/HCompElement.js" data-light-skip="true"></script>
    <script src="js/elements/htmlElements/HShapeElement.js" data-light-skip="true"></script>
    <script src="js/elements/htmlElements/HTextElement.js" data-light-skip="true"></script>
    <script src="js/elements/htmlElements/HImageElement.js" data-light-skip="true"></script>
    <script src="js/elements/htmlElements/HCameraElement.js" data-light-skip="true"></script>
    <script src="js/elements/htmlElements/HEffects.js" data-light-skip="true"></script>
    <script src="js/animation/AnimationManager.js"></script>
    <script src="js/animation/AnimationItem.js"></script>
    <!-- Expressions -->
    <script src="js/utils/expressions/Expressions.js" data-light-skip="true"></script>
    <script src="js/utils/expressions/ExpressionManager.js" data-light-skip="true"></script>
    <script src="js/utils/expressions/ExpressionPropertyDecorator.js" data-light-skip="true"></script>
    <script src="js/utils/expressions/ExpressionTextPropertyDecorator.js" data-light-skip="true"></script>
    <script src="js/utils/expressions/ShapeInterface.js" data-light-skip="true"></script>
    <script src="js/utils/expressions/TextInterface.js" data-light-skip="true"></script>
    <script src="js/utils/expressions/LayerInterface.js" data-light-skip="true"></script>
    <script src="js/utils/expressions/CompInterface.js" data-light-skip="true"></script>
    <script src="js/utils/expressions/TransformInterface.js" data-light-skip="true"></script>
    <script src="js/utils/expressions/ProjectInterface.js" data-light-skip="true"></script>
    <script src="js/utils/expressions/EffectInterface.js" data-light-skip="true"></script>
    <script src="js/utils/expressions/MaskInterface.js" data-light-skip="true"></script>
    <script src="js/utils/expressions/ExpressionValue.js" data-light-skip="true"></script>
    <script src="js/effects/SliderEffect.js" data-light-skip="true"></script>
    <script src="js/EffectsManager.js" data-light-skip="true"></script>
    <!-- end Expressions -->
    <!-- endbuild -->
    <script src="js/module.js" data-skip="true"></script>
    <!-- <script src="lottie.js"></script> -->
    <!-- <script src="bodymovin_light.js"></script> -->

</head>
<body>
<div id="lottie"></div>
<div id="lottie2"></div>
<div id="lottie3"></div>

<script>
    'use strict';
    var anim,anim2, anim3;
    var elem = document.getElementById('lottie')
    //var elem = createNS('aa')
    var animData = {
        container: elem,
        renderer: 'svg',
        loop: 5,
        autoplay: true,
        rendererSettings: {
            progressiveLoad:false,
        },
        path: 'exports/catrim/data.json'
    };
    anim = lottie.loadAnimation(animData);
    anim.addEventListener('DOMLoaded', function() {
        //anim.setSubframe(false);
         anim.setSpeed(4);
        //setTimeout(function(){anim.play()}, 2000);
    })
    var eventListener = anim.addEventListener('enterFrame', function(ev){
        if(ev.currentTime >= 50) {
            //anim.playSegments([0,25], true);
            //console.log('TI<ME')
            //anim.setSpeed(-4);
            eventListener();
        }
    })
    var eventListener2 = anim.addEventListener('loopComplete', function(ev) {
        //console.log('COMPLETE')
        //anim.playSegments([0,20], true);
        if (ev.currentLoop === 3) {
            anim.setSpeed(-4);
            anim.play();
            eventListener2();
        }
        // eventListener2();
    })
    var eventListener3 = anim.addEventListener('complete', function() {
        //console.log('COMPLETE')
        /*setTimeout(function(){
            anim.playSegments([0,24], true);
        },1000)*/
        //anim.playSegments([24,0]);
        //anim.playSegments([0,24], true);
        eventListener3();
    })
    window.addEventListener('resize', function(){
        anim.resize();
    })
   /* setTimeout(function(){
        anim.resetSegments();
    },4000)*/
    /*anim2 = lottie.loadAnimation({
        container: document.getElementById('lottie2'),
        renderer: 'svg',
        loop: true,
        autoplay: false,
        rendererSettings: {
            progressiveLoad:false
        },
        path: 'exports/bm/data.json'
    });
    anim3 = lottie.loadAnimation({
        container: document.getElementById('lottie3'),
        renderer: 'svg',
        loop: true,
        autoplay: false,
        rendererSettings: {
            progressiveLoad:false
        },
        path: 'exports/catrim/data.json'
    });
    //anim = bodymovin.loadAnimation(animData);
    var count = 0, debug_print;
    setTimeout(function(){
        anim.addEventListener('DOMLoaded', function() {
            anim.play();
            anim.setSpeed(-20);
            anim2.play();
            anim2.setSpeed(-20);
            anim3.play();
            anim3.setSpeed(20);
            //anim.playSegments([50,52], true)
            function retry() {
                setTimeout(function(){
                    //%OptimizeFunctionOnNextCall(AnimationItem.prototype.setCurrentRawFrameValue);
                }, 2000)
                setTimeout(function(){
                    //%DebugPrint(AnimationItem.prototype.setCurrentRawFrameValue);
                    //var status = printStatus(AnimationItem.prototype.setCurrentRawFrameValue);
                    if(count < 4) {
                        anim.setSpeed(-Math.random()*10);
                        anim2.setSpeed(Math.random()*10);
                        anim3.setSpeed(-Math.random()*10);
                        count += 1;
                        retry();
                    } else {
                        anim.stop();
                        anim2.stop();
                        anim3.stop();
                    }
                }, 4000)
            }

            retry();
            
        })
        //Check
        // document.getElementById("bodymovin").style['background-color'] = 'darkblue';
    }, 0)

    function printStatus(fn) {
        var status = %GetOptimizationStatus(fn);
        if (status & 1) console.log("function is function");
        if (status & 2) console.log("function is never optimized");
        if (status & 4) console.log("function is always optimized");
        if (status & 8) console.log("function is maybe deoptimized");
        if (status & 16) console.log("function is optimized");
        if (status & 32) console.log("function is optimized by TurboFan");
        if (status & 64) console.log("function is interpreted");
        return status;
    }*/

</script>
</body>
</html>