var interval = null,
    downloads = 6,
    int = 0,
    contador = 0,
    reloadTela3 = false,
    current = 1,
    imagensGeradas = false,
    audio = document.getElementById('audio'),
    linkStory = [],
    functionSave = [],
    vinho = null,
    nav = {
        inicioTela1: function(){
            var _this = this;

            var presente = bodymovin.loadAnimation({
                container: document.getElementById('presente'),
                renderer: 'svg',
                loop: false,
                autoplay: false,
                path: './js/lottie/presente.json'
            });

            $('.cont-tela-1, .fundo-tela-1').addClass('active');

            tempo.inicia('tela-1', 8000);
            tempo.addEvento('tela-1', 500, function(){
                $('#presente').addClass('active');
            });
            tempo.addEvento('tela-1', 1500, function(){
                presente.play();
            });
            tempo.addEvento('tela-1', 2750, function(){
                $('#gosma-box').addClass('active');
                $('#gosmas .gosma-2').addClass('active');
            });
            tempo.addEvento('tela-1', 3000, function(){
                $('.cont-tela-1 .center-block').addClass('active');

                $(document).on('click', '#iniciar', function(){
                    _this.finalTela1();
                });
            });
            passador.init();
            vinho = {
                destroy: function(){}
            }
        },
        finalTela1: function(){
            var _this = this;

            $('#gosma-box').addClass('saindo');
            setTimeout(() => {
                $('.cont-tela-1 .center-block').addClass('saindo');
                $('#gosmas .gosma-2').addClass('saindo');
                $('.audio-control').addClass('disponivel');

                $(document).on('click', '.audio-control .mute', function(){
                    audio.pause();
                    $('.audio-control .mute').addClass('hidden');
                    $('.audio-control .unmute').removeClass('hidden');
                });
                $(document).on('click', '.audio-control .unmute', function(){
                    audio.play();
                    $('.audio-control .mute').removeClass('hidden');
                    $('.audio-control .unmute').addClass('hidden');
                });

                _this.inicioTela2();

                setTimeout(() => {
                    _this.aposTela1();
                }, 1000);
            }, 100);
        },
        aposTela1: function(){
            $('.cont-tela-1, .fundo-tela-1').removeClass('active');
            $('#presente').addClass('inativo').removeClass('active');
            $('#gosma-box').addClass('inativo').removeClass('saindo active');
            $('#gosmas .gosma-2').addClass('inativo').removeClass('saindo active');
            $('.cont-tela-1, .fundo-tela-1').addClass('inativo');
            $('.cont-tela-1 .center-block').removeClass('saindo active');
        },
        inicioTela2: function(){
            var _this = this;
            $('.body').removeClass('tela-1 tela-2 tela-3 tela-4 tela-5 tela-6 tela-7 tela-8');
            $('.body').addClass('tela-2');
            $('.logo').addClass('reduzido');
            
            timeline.show();
            timeline.goTo(2);
            current = 2;

            audio.play();

            passador.showRight();

            var cobrinha = bodymovin.loadAnimation({
                container: document.getElementById('cobrinha'),
                renderer: 'svg',
                loop: false,
                autoplay: true,
                path: './js/lottie/cobra.json'
            });

            tempo.inicia('tela-2', 10000);

            tempo.addEvento('tela-2', 1000, function(){
                $('.cont-tela-2, .fundo-tela-2').addClass('active');
                $('.cont-tela-2 .center-block').addClass('active');
                $('.fundo-tela-2 .bola').addClass('active');
                $('#cobrinha').addClass('active');
            });
            tempo.addEvento('tela-2', 9000, function(){
                _this.finalTela2();
            })
        },
        finalTela2: function(){
            var _this = this;

            $('.cont-tela-2 .center-block').addClass('saindo');

            setTimeout(() => {
                _this.inicioTela3();

                setTimeout(() => {
                   _this.aposTela2();
                }, 1000);
            }, 1000);
        },
        aposTela2: function(){
            $('.cont-tela-2, .fundo-tela-2').removeClass('active');
            $('#cobrinha').addClass('inativo').removeClass('active');
            $('.cont-tela-2, .fundo-tela-2').addClass('inativo');
            $('.cont-tela-2 .center-block').removeClass('saindo active');
        },
        inicioTela3: function(){
            var _this = this;
            $('.body').removeClass('tela-1 tela-2 tela-3 tela-4 tela-5 tela-6 tela-7 tela-8');
            $('.body').addClass('tela-3');
            timeline.goTo(3);
            passador.showBoth();
            current = 3;

            tempo.inicia('tela-3', 10000);
            tempo.addEvento('tela-3', 500, function(){
                $('.cont-tela-3, .fundo-tela-3').addClass('active');
                $('.cont-tela-3 .center-block').addClass('active');

                if(!reloadTela3){
                    $('.graos').text($('.graos').attr('data-graos'));
                    $({ Counter: 0 }).animate({
                        Counter: $('.graos').text()
                    }, {
                        duration: 1000,
                        easing: 'swing',
                        step: function() {
                        $('.graos').text(Math.ceil(this.Counter));
                        }
                    });

                    reloadTela3 = true;
                }
            });
            tempo.addEvento('tela-3', 1250, function(){
                $('.fundo-tela-3 .foto-fake').addClass('active');
            });

            tempo.addEvento('tela-3', 9500, function(){
                _this.finalTela3();
            });
        },
        finalTela3: function(){
            var _this = this;

            $('.fundo-tela-3 .foto-fake').addClass('saindo');

            tempo.addEvento('tela-3', 9750, function(){
                $('.cont-tela-3 .center-block').addClass('saindo');
                _this.inicioTela4();

                setTimeout(() => {
                    _this.aposTela3();
                }, 3000);
            });
        },
        aposTela3: function(){
            $('.cont-tela-3, .fundo-tela-3').removeClass('active');
            $('.fake-foto').addClass('inativo').removeClass('active');
            $('.cont-tela-3, .fundo-tela-3').addClass('inativo');
            $('.cont-tela-3 .center-block').removeClass('saindo active');
        },
        inicioTela4: function(){
            var _this = this;
            $('.body').removeClass('tela-1 tela-2 tela-3 tela-4 tela-5 tela-6 tela-7 tela-8');
            $('.body').addClass('tela-4');
            current = 4;
            passador.showBoth();

            timeline.goTo(4);
            tempo.inicia('tela-4', 10000);
            tempo.addEvento('tela-4', 1000, function(){
                $('.cont-tela-4, .fundo-tela-4').addClass('active');
                $('.cont-tela-4 .center-block').addClass('active');
            });

            var timeMundo = isIOS ? 1000 : 2000;
            tempo.addEvento('tela-4', timeMundo, function(){
                $('#mundo').addClass('active');
                if(isIOS){
                    $('#mundo').addClass('ios');
                }
                $('#mundo video').on('click', function(event) {
                    event.preventDefault();
                    $('#mundo video').get(0).play();
                });
                $('#mundo video').trigger('click');
            });
            _this.finalTela4();
        },
        finalTela4: function(){
            var _this = this;

            tempo.addEvento('tela-4', 5000, function(){
                $('#aviao').addClass('active');
                var aviao = bodymovin.loadAnimation({
                    container: document.getElementById('aviao'),
                    renderer: 'svg',
                    loop: false,
                    autoplay: true,
                    path: './js/lottie/aviao.json'
                });
            });
            tempo.addEvento('tela-4', 9500, function(){
                $('#mundo').addClass('saindo');
                $('.cont-tela-4 .center-block').addClass('saindo');
            });
            tempo.addEvento('tela-4', 10000, function(){
                _this.inicioTela5();
                
                setTimeout(() => {
                    _this.aposTela4();
                }, 1000);
            });
        },
        aposTela4: function(){
            $('#mundo').removeClass('active saindo').addClass('inativo');
            $('.cont-tela-4, .fundo-tela-4').removeClass('active').addClass('inativo');
            $('.cont-tela-4 .center-block').removeClass('active saindo').addClass('inativo');
            $('#aviao').removeClass('active').addClass('inativo');
        },
        inicioTela5: function(){
            var _this = this;
            $('.body').removeClass('tela-1 tela-2 tela-3 tela-4 tela-5 tela-6 tela-7 tela-8');
            $('.body').addClass('tela-5');
            current = 5;
            passador.showBoth();

            $('#aviao2').addClass('active');
            var aviao2 = bodymovin.loadAnimation({
                container: document.getElementById('aviao2'),
                renderer: 'svg',
                loop: false,
                autoplay: true,
                path: './js/lottie/aviao2.json'
            });

            timeline.goTo(5);
            tempo.inicia('tela-5', 10000);
            tempo.addEvento('tela-5', 1000, function(){
                $('.cont-tela-5, .fundo-tela-5').addClass('active');
                $('.cont-tela-5 .center-block').addClass('active');
                $('.ranking').addClass('active');
            });
            tempo.addEvento('tela-5', 2000, function(){
                $('.ranking').addClass('show');
            });
            tempo.addEvento('tela-5', 10000, function(){
                _this.finalTela5();
            });
        },
        finalTela5: function(){
            var _this = this;
            $('.cont-tela-5 .center-block').addClass('saindo');
            _this.inicioTela6();

            setTimeout(() => {
                _this.aposTela5();
            }, 1000);
        },
        aposTela5: function(){
            $('.cont-tela-5, .fundo-tela-5').removeClass('active').addClass('inativo');
            $('.cont-tela-5 .center-block').removeClass('active saindo').addClass('inativo');
            $('.ranking').removeClass('active show');
        },
        inicioTela6: function(){
            var _this = this;
            $('.body').removeClass('tela-1 tela-2 tela-3 tela-4 tela-5 tela-6 tela-7 tela-8');
            $('.body').addClass('tela-6');
            current = 6;
            passador.showBoth();

            timeline.goTo(6);
            tempo.inicia('tela-6', 10000);

            tempo.addEvento('tela-6', 1000, function(){
                $('.cont-tela-6, .fundo-tela-6').addClass('active');
                $('.cont-tela-6 .center-block').addClass('active');
                
                vinho.destroy();
                $('#vinho').addClass('active');
                vinho = bodymovin.loadAnimation({
                    container: document.getElementById('vinho'),
                    renderer: 'svg',
                    loop: false,
                    autoplay: true,
                    path: './js/lottie/vinho.json'
                });
            });

            tempo.addEvento('tela-6', 7500, function(){
                _this.finalTela6();
            });
        },
        finalTela6: function(){
            var _this = this;
            $('.fundo-tela-6 .fundo-vinho').addClass('etapa1');

            tempo.addEvento('tela-6', 9000, function(){
                $('.cont-tela-6 .center-block').addClass('saindo');
                $('#vinho').addClass('saindo');
            });
            tempo.addEvento('tela-6', 10000, function(){
                _this.inicioTela7();
            });

            setTimeout(() => {
                $('.fundo-tela-6 .fundo-vinho').addClass('etapa2').removeClass('etapa-1');

                setTimeout(() => {
                    _this.aposTela6();
                }, 1000);
            }, 1500);
        },
        aposTela6: function(){
            $('.cont-tela-6, .fundo-tela-6').removeClass('active').addClass('inativo');
            $('.cont-tela-6 .center-block').removeClass('active saindo').addClass('inativo');
            $('#vinho').removeClass('active saindo').addClass('inativo');
            $('#vinho').html('');
            vinho.destroy();
        },
        inicioTela7: function(){
            var _this = this;
            $('.body').removeClass('tela-1 tela-2 tela-3 tela-4 tela-5 tela-6 tela-7 tela-8');
            $('.body').addClass('tela-7');
            current = 7;
            passador.showBoth();

            timeline.goTo(7);
            tempo.inicia('tela-7', 10000);
            tempo.addEvento('tela-7', 1000, function(){
                $('.cont-tela-7, .fundo-tela-7').addClass('active');
                $('.cont-tela-7 .center-block').addClass('active');
                $('.fundo-tela-7 .fundo-moedas').addClass('active');
            });
            tempo.addEvento('tela-7', 9500, function(){
                _this.finalTela7();
            });
        },
        finalTela7: function(){
            var _this = this;
            $('.cont-tela-7 .center-block').addClass('saindo');
            $('.fundo-tela-7 .fundo-moedas').addClass('saindo');

            tempo.addEvento('tela-7', 10000, function(){
                _this.inicioTela8();

                setTimeout(() => {
                    _this.aposTela7();
                }, 1000);
            });
        },
        aposTela7: function(){
            $('.cont-tela-7, .fundo-tela-7').removeClass('active').addClass('inativo');
            $('.cont-tela-7 .center-block').removeClass('active saindo').addClass('inativo');
            $('.fundo-tela-7 .fundo-moedas').removeClass('active saindo').addClass('inativo');
        },
        inicioTela8: function(){
            var _this = this;
            $('.body').removeClass('tela-1 tela-2 tela-3 tela-4 tela-5 tela-6 tela-7 tela-8');
            $('.body').addClass('tela-8');
            passador.showLeft();
            current = 8;

            timeline.goTo(8);
            tempo.inicia('tela-8', 10000);
            tempo.addEvento('tela-8', 1000, function(){
                $('.cont-tela-8, .fundo-tela-8').addClass('active');

                $('#calendario').addClass('active');
                var calendario = bodymovin.loadAnimation({
                    container: document.getElementById('calendario'),
                    renderer: 'svg',
                    loop: false,
                    autoplay: true,
                    path: './js/lottie/calendario.json'
                });
            });
            tempo.addEvento('tela-8', 6250, function(){
                $('.cont-tela-8 .center-block').addClass('active');

                share.init();
            });
        }
    },
    timeline = {
        show: function(){
            $('.timeline').addClass('active');
        },
        goTo: function(numero){
            clearInterval(interval);

            $('.timeline').addClass('active');
            $('.timeline .etapa').removeClass('finalizado rodando');
            for(var i = 2; i < numero; i++){
                $('.timeline .tela-' + i).addClass('finalizado');
            }
            $('.timeline .tela-' + numero).addClass('rodando');
        }
    },
    tempo = {
        inicia: function(tela, tempo){
            var limit = tempo / 250;
            contador = 0;
            interval = null;
            interval = setInterval(function(){
                contador++;

                var evento = new CustomEvent(tela, {
                    detail: {
                        tempo: contador * 250
                    }
                });
                document.dispatchEvent(evento);

                $('.timeline .etapa.rodando span').css('width', ((100 / limit) * contador) + '%');

                if(contador >= limit){
                    clearInterval(interval);
                }
            }, 250);
        },
        addEvento: function(tela, tempo, evento){
            document.addEventListener(tela, function(e){
                if(e.detail.tempo == tempo){
                    evento();
                }
            })
        },
        finaliza: function(){
            clearInterval(interval);
        }
    },
    navigate = {
        next: function(){
            $('.inativo').removeClass('inativo');
            $('.active:not(.timeline)').removeClass('active');
            passador.hide();
            clearInterval(interval);

            setTimeout(() => {
                nav['inicioTela' + (current + 1)]();
            }, 1000);
            console.log('next');
        },
        prev: function(){
            $('.inativo').removeClass('inativo');
            $('.active:not(.timeline)').removeClass('active');
            passador.hide();
            clearInterval(interval);

            setTimeout(() => {
                nav['inicioTela' + (current - 1)]();
            }, 1000);
            console.log('prev');
        },
        first: function(){
            $('.inativo').removeClass('inativo');
            $('.active:not(.timeline)').removeClass('active');
            passador.hide();
            clearInterval(interval);

            setTimeout(() => {
                nav['inicioTela2']();
            }, 1000);
        }
    },
    share = {
        init: function(){
            $(document).on('click', '.compartilhar', function(){
                if(imagensGeradas){
                    $('body').addClass('modal-aberta');
                }else{
                    $('body').addClass('loading');

                    setTimeout(() => {
                        stories.generate(1);
                    }, 500);
                }
            });
            $(document).on('click', '.replay', function(){
                navigate.first();
            });
            $(document).on('click', '.close-share, .mask-share', function(){
                $('body').removeClass('modal-aberta');
            });
            $(document).on('click', '.modal-share .fotos .item', function(){
                if(isIOS){
                    $('.modal-share .fotos .item').removeClass('active');
                }
                $(this).toggleClass('active');
            });
            if(isIOS){
                $('.modal-share').addClass('ios');
                $('.modal-share > span').text('Selecione uma imagem, baixe e poste em seus stories.');
                $('#share-images span').text('Baixar imagem selecionada');
            }
        }
    },
    passador = {
        init: function(){
            $(document).on('click', '.passador.right', function(){
                navigate.next();
            });
            $(document).on('click', '.passador.left', function(){
                navigate.prev();
            });
        },
        showBoth: function(){
            $('.passador').removeClass('inativo');
        },
        showLeft: function(){
            $('.passador.right').addClass('inativo');
            $('.passador.left').removeClass('inativo');
        },
        showRight: function(){
            $('.passador.right').removeClass('inativo');
            $('.passador.left').addClass('inativo');
        },
        hide: function(){
            $('.passador').addClass('inativo');
        }
    },
    isIOS = /iPad|iPhone|iPod/.test(navigator.platform) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1),
    stories = {
        generate: function(a){
            int = a;
            html2canvas(document.querySelector("#story" + int)).then(canvas => {
                linkStory[int] = document.createElement("a");
                document.body.appendChild(linkStory[int]);
                $("#figure-story-" + int).append(canvas);
                linkStory[int].download = "vinumday-story" + int + ".png";
                linkStory[int].href = canvas.toDataURL('image/png');
                linkStory[int].target = "_blank";
                functionSave[int] = function(){
                    canvas.toBlob(function(blob) {
                        saveAs(blob, "story" + int + ".png");
                    });
                }

                if(int < downloads){
                    int++;
                    stories.generate(int);
                }else if(int == downloads){
                    $('body').removeClass('loading').addClass('modal-aberta');
                    imagensGeradas = true;

                    $(document).on('click', '#share-images', function(){

                        var itens = [];

                        $('.fotos .item.active').map(function(index, item){
                            var item = $(item).attr('data-story');
                            itens.push(item);
                            if(isIOS){
                                functionSave[item]();
                            }else{
                                linkStory[item].click();
                            }
                        });

                        $.ajax({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            url:'/save-aniversario-vinumday',
                            type:'POST',
                            data:{
                                itens: itens
                            },
                            success:function(data){
                                console.log(data);
                            }
                        });

                    });
                }
            });
        }
    };

// $('.logo').addClass('reduzido');
// timeline.show();
nav.inicioTela1();