var isMobile = false;
var isTablet = false;
// footer animation
var aniPlayed_1    = false;
// bring to life animation
var aniPlayed_2    = false;
document.addEventListener('DOMContentLoaded', function() {
   if ( qs('#hero_vid') != null ) {
       fader('hero_vid', 0, 1, 750, new Date().getTime());
   }
   if ( window.location.href.indexOf('caseview') > -1 ) { // disable page-swipe lock on caseviews having actual size ad overflows
        if ( isMobile && ! isTablet ) {
             qsa('.gwd-case-ad-bg')[0].style.display='none';
        }
        if ( isTablet ) {
            document.body.style.overflowX='auto';
            document.getElementsByTagName('html')[0].style.overflowX='auto';
        }
   }
});

function gwdStop(v) {
    isPlaying = false;
    v = '#'+v;
    qs(v).pause();
    qs(v).currentTime = 0;
    qs(v).load();
}

function gwdEnded(v) {

    isPlaying = false;
    _sect = v.split('')[0];

    if ( isMobile ) {
        $('#' + _sect + 'Vid-mobile').get(0).webkitExitFullscreen(); // close ios native overlay
        qs('#feat-vid-'+_sect).click();    // close modal
    }
    // clicks next paginate button in feat carousel (carousel_car.*.jinja)
    qs(v).click();
}

function gwdPlay( v, isModal, modalPlay ) {
    if (!isModal) {
        isModal = false;
    }

    if (!modalPlay) {
        modalPlay = false;
    }

    if (qs(v) === undefined ) return;
    if ( isModal && ! modalPlay || v === null ) return;

    var _promise, _v;
    if ( v.id != null ) { // passed via 'this'
        _promise = qs(v.id).play();
        _v = document.getElementById(v.id);
    } else if ( v != null ) { // else passed by id
        _v = document.getElementById(v);
        _promise = _v.play();
    }


    _v.addEventListener('webkitendfullscreen',
        function() {closefs(_v);}, false);

    isPlaying = true;
    if ( _promise !== undefined ) {}
}

function closefs( v ) {

    if ( ! ( document.fullScreenElement || document.webkitIsFullScreen == true || document.mozFullScreen || document.msFullscreenElement ) ) {
         $('#' + v.id).get(0).webkitExitFullscreen(); // close ios modal
        Object.keys(qsa('.glue-c-modal__close')).forEach(function(e) {
            qsa('.glue-c-modal__close')[e].click();
        });
    }
}
var legalAccepted = false;
function openLegal(lang_pref) {
    // var language = lang_pref.match(/\/intl\/([A-Za-z-]+)/);
    // if ( language )
    //     qs('legal-iframe').src='https://www.google.com/policies/terms/embedded/?hl='+ language[1];
    // else 
    //     qs('legal-iframe').src='https://www.google.com/policies/terms/embedded/';
        
    qsa('.gweb-lightbox-bg')[0].style.display = 'block';
    qsa('.gweb-lightbox')[0].style.display    = 'block';
    $('html, body').animate({scrollTop: 0}, 'slow');
}
function closeLegal() {
    qsa('.gweb-lightbox-bg')[0].style.display = 'none';
    qsa('.gweb-lightbox')[0].style.display    = 'none';
}

var feat_videos = {
    //
    // prefix semantics - i: interaction, f: flexible, a: animation, w: workflow
    //
    'i0': 'https://storage.googleapis.com/bracket-web-designer.appspot.com/Design_Interactive_Ads_Events_SCREEN.mp4?2|Events.png',
    'i1': 'https://storage.googleapis.com/bracket-web-designer.appspot.com/Design_Interactive_Ads_Components_SCREEN.mp4?2|Components.png',
    'i2': 'https://storage.googleapis.com/bracket-web-designer.appspot.com/Design_Interactive_Ads_Pages_SCREEN.mp4?2|Pages.png',
    'f0': 'https://storage.googleapis.com/bracket-web-designer.appspot.com/Build_Responsive_Ads_Responsive_SCREEN.mp4?2|Responsive.png',
    'f1': 'https://storage.googleapis.com/bracket-web-designer.appspot.com/Build_Responsive_Ads_Dynamic_SCREEN.mp4?2|Dynamic.png',
    'a0': 'https://storage.googleapis.com/bracket-web-designer.appspot.com/Robust_Animation_Tools_Mode_SCREEN.mp4?2|timeline.png',
    'a1': 'https://storage.googleapis.com/bracket-web-designer.appspot.com/Robust_Animation_Tools_3D_SCREEN.mp4?2|3D.png',
    'w0': 'https://storage.googleapis.com/bracket-web-designer.appspot.com/Easy_Intuitive_Workflow_CCT_SCREEN.mp4?2|CCT.png',
    'w1': 'https://storage.googleapis.com/bracket-web-designer.appspot.com/Easy_Intuitive_Workflow_SGI_SCREEN.mp4?2|SGI.png',
    't0': 'https://storage.googleapis.com/bracket-web-designer.appspot.com/GWD-TempGlly-Video.mp4?2|template-gallery.png',
    't1': 'https://storage.googleapis.com/bracket-web-designer.appspot.com/GWD-EasyMode-Video.mp4?2|easy-mode.png',
};

/*
     vC: videoChanger (mobile thumb too)

     video qs('#wVid').play();
     compare current vid src to li's assigned source
     and current section (cs) if different then
     reassign current vid to new src

     then animate between <ele>_next and <ele>_live
     then swap classes and push next video in section
     onto <ele>_next
*/
var _fids = ['a', 'w', 't', 'f', 'i'];
var isPlaying = false;
function vC( cs, isModal, jump ) {

    if (!isModal) {
      isModal = false;
    }

    if (!jump) {
      jump = false;
    }

    if ( isPlaying && ! jump ) return;  
    if ( isMobile ) {
        setTimeout(cb, 1); // pause to allow glue animation to complete
        function cb() {
            Object.keys(feat_videos).forEach(function(e) {
                var es = e.split('')[0]; // element section
                if ( qs(e) != null && ( ! qs(e).hasAttribute('aria-hidden')) && cs.valueOf() == e.split('')[0].valueOf() ) {
                    debounce( mobChange(), 1000 );
                }
                function mobChange() {

                    if ( qs(cs+'Vid-mobile').src === feat_videos[e].split('|')[0] ) return;
                        var  _idx =_fids.indexOf(cs);
                        var  _em  = qsa('.feat-vid-mobile')[_idx];                            
                            if ( qs(cs+'Vid-mobile').src != feat_videos[e].split('|')[0] )
                                 qs(cs+'Vid-mobile').src = feat_videos[e].split('|')[0];
                            _em.innerHTML = '<div class="gwd-play">\
                                            <img src="/static/gwd/play_circle.png" class="gwd-play_button"></div>\
                                            <img src="/static/gwd/feat_thumbs/' + feat_videos[e].split('|')[1] + '" id="' + _fids[_idx] + 'Vid-img" style="z-index:9;">';
                            if ( qs(_fids[_idx] + 'Vid-img').style.opacity != 1 )
                                 qs(_fids[_idx] + 'Vid-img').style.opacity=1;                 
                }
                
            });
            return; // return or not mobile and run cb() below
        }
    }
    setTimeout(cb, 1100); // pause to allow glue animation to complete
    function cb() {
        Object.keys(feat_videos).forEach(function(e) {
            var es = e.split('')[0]; // element section
            var ep = e.split('')[1]; // element position

            if ( $('#'+e).is(':visible') &&  cs.valueOf() == e.split('')[0].valueOf() &&
              ( ! qs( es +'Vid').classList.contains('gwd-fadein') || ! qs( es +'Vid').classList.contains('gwd-fadeout') ) ) {
                if ( feat_videos[e].valueOf().split('|')[0] != qs( es +'Vid').src.valueOf() ) {
                        if ( feat_videos[e].valueOf().split('|')[0] != qs( es +'Vid').src ) {
                            qs( es +'Vid').classList.add('gwd-fadeout');
                           
                            setTimeout( function() { 
                                qs( es +'Vid').src = feat_videos[e].valueOf().split('|')[0];
                                qs( es +'Vid').classList.remove('gwd-fadeout');
                                qs( es +'Vid').classList.add('gwd-fadein');
                            }, 1000);
                        }          
                }
            }
        });
    }
}

function fader(eid, initOp, finalOp, TimeToFade, time ) {

    if ( initOp == 0 )      qs(eid).style.visibility='visible';
    var  curTick      =     new Date().getTime();
    var  elapsedTicks =     curTick - time;
    var  newOp        =     initOp  + ( finalOp-initOp ) * elapsedTicks / TimeToFade;
    if  ( Math.abs( newOp - initOp ) > Math.abs( finalOp-initOp ) ) {
                            qs(eid).style.opacity    = finalOp;
        if ( finalOp <= 0 ) qs(eid).style.visibility = 'hidden';

        return false;
    }
    qs(eid).style.opacity=newOp;
    setTimeout('fader( \'' + eid + '\',' + initOp + ',' + finalOp + ',' + TimeToFade + ',' + time + ')', TimeToFade/100);

    return true;
}

var _iL;
var _iL2;
var _div;
var _div2;
var _div3;

function zoomIn( eid ) {
    _eid = qs(eid);
    _eid.classList.add('gwd-focusZoom');
    _eid.style.opacity=1;
    function scalez() {
        if ( window.innerWidth < 951 ) 
            qs('#gwd-focus-img').style.top=(950-window.innerWidth)/1.90+'px';
        if ( window.innerWidth < 501 ) 
            qs('#gwd-focus-img').style.top=-94+'px';
        else 
            qs('#gwd-focus-img').style.top=0+'px';
    }
    window.addEventListener('resize', function() {
        scalez();
    });
    scalez();
}

/* getParameterByName: util for debugging -- delete later */
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

function qs( e ) {
    if ( typeof(e) === 'object') return e;
    if ( e.indexOf('#') < 0 ) e = '#'+e;
    return document.querySelector(e);
}
function qsa( e ) {
    return document.querySelectorAll(e);
}

var platform_type;
$(document).ready( function() {
    sd();
    if (isMobileDevice()) {
           isMobile = true; //(getParameterByName('mobile')) === 'true' ? getParameterByName('mobile') : false;
    }
    if ( getParameterByName('mobile') === 'true' ) { isMobile=true; }
    makeFeatTags();
    // formatsMode();

    function isMobileDevice() { 
        if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            if (navigator.userAgent.match(/Tablet|iPad/i))
                 isTablet = true;
            return true;
        } else {
            return false;
        }
    }
    function sd() {
          function isMacintosh() {
            if (navigator.platform.indexOf('Mac') > -1 ) platform_type='mac';
            return navigator.userAgent.indexOf('Mac') > -1
          }
          function isWindows() {
            if (navigator.platform.indexOf('Win') > -1 ) platform_type='win';
            return navigator.userAgent.indexOf('Win') > -1
          }
          function isLinux() {
              if (navigator.platform.indexOf('Linux') > -1 && !navigator.platform.match(/Android/i)) { 
                    platform_type='lin';
              }
              console.log('ptye: ' + platform_type)
              return navigator.userAgent.indexOf('Linux') > -1
          }

        isMacintosh();
        isWindows();
        isLinux();

        if (platform_type === 'win' || platform_type === 'mac') {
            [].slice.call(document.querySelectorAll('.linux-selection')).forEach(function(el) { el.style.display = 'none' });
        }

        return ( isMacintosh() || isWindows() || isLinux() );
    }

    qs('#hamburger_cta').style.display = isMobile ? 'none' : 'initial';
    if ( isMobile ) qsa('.h-c-header__drawer-cta')[0].style.boxShadow = 'none';
    if ( qs('#gwd-footer-cta') && isMobile ) {
         qs('#gwd-footer-cta').style.display  = 'none';
    }

    if ( qs('#gwd-cta-1') ) {
         qs('#gwd-footer-cta').style.display = isMobile ? 'none' : 'initial';
         qs('#gwd-cta-1').disabled = isMobile ? true : false;
         qs('#gwd-cta-1').innerHTML = isMobile ?  document.getElementById("dyndl").getAttribute("button-var-false") : document.getElementById("dyndl").getAttribute("button-var-true");
         qsa('.gwd-requirements')[0].style.display = isMobile ? 'none' : '';
         qsa('.gwd-requirements')[0].style.opacity = qs('#gwd-cta-1').style.opacity=1;
    }

    if ( qs('#gwd-header_cta_1') ) {
         qs('#gwd-header_cta_1').style.display =  sd() ? 'block !important' : 'none !important';
         qs('#gwd-header_cta_2').style.display =  sd() ? 'block !important' : 'none !important';
    }

    function makeFeatTags() {
        Object.keys( qsa('.feat-vid') ).forEach(function(e) {
            var   _e = qsa('.feat-vid')[e];
            var  _em = qsa('.feat-vid-mobile')[e];
            if ( ! isMobile ) {

                _e.innerHTML = '<div class="feat-vid-chrome"><img src="/static/gwd/laptop_mask.png"></div>\
                                <video src="' + feat_videos[_fids[e].valueOf().split('|')[0] +'0'].split('|')[0]+'" id="'+_fids[e]+'Vid" width="100%" height="100%" muted onloadeddata="this.pause(); runBoundaryTests()" onended="gwdEnded(\''+_fids[e]+'B\')"></video>';
            }
            else {               
                _e.style.display = 'none';
                _em.style.display = 'flex';
                _em.innerHTML     = '<div class="gwd-play">\
                                     <img src="/static/gwd/play_circle.png" class="gwd-play_button"></div>\
                                     <img src="/static/gwd/feat_thumbs/' + feat_videos[_fids[e].valueOf().split('|')[0] +'0'].valueOf().split('|')[1] + '" id="' + _fids[e] + 'Vid-img" style="z-index:9;">';
                Object.keys( qsa('.gwd-car-row-desk') ).forEach(function(f) {

                    var _f = qsa('.gwd-car-row-desk')[f];
                        _f.classList.add('gwd-car-row-mobile')
                        _f.classList.remove('gwd-car-row-desktop');
                });
            }
        });
    }

    function formatsMode() {
        if ( isMobile ) {
            qs('#carDesk').style.display = 'none';
            qs('#carMobile').style.display = 'flex';
        } else {
            qs('#carDesk').style.display = 'grid';
            qs('#carMobile').style.display = 'none';
        }
    }

}); // end of document ready


function isInViewport(e) {

    if ( e === null || $(e).offset() === null ) return;
    var et = $(e).offset().top;
    var eb = et + $(e).outerHeight();
    var vt = $(window).scrollTop();
    var vb = vt + $(window).height();
    var _test = eb > vt && et < vb;

    return _test;
  };

$(window).scroll(function() {

    runBoundaryTests();
});

// var aniPlayed_3;
function runBoundaryTests() {

    Object.keys(feat_videos).forEach(function(e) {
        var es = e.split('')[0]; // element section
        if ( qs(es+'Vid') === null ) return;
        if ( isInViewport( '#' + es + 'Vid') ) {

            gwdPlay( es + 'Vid', false, false);
            qs( es +'Vid').classList.add('gwd-fadein');
        } else {
            if ( qs( es +'Vid') != null ) qs( es +'Vid').pause();
        }
    });
    // ideas to life (upper) animation
    if ( qs('#bound_test_1') ) {
        _div2 = qs('#bound_test_1')
        var bounding = _div2.getBoundingClientRect();

        if (
            isInViewport(_div2)
        ) {

            if ( ! aniPlayed_2 )  { 
                // window.clearInterval( _iL2 );
                aniPlayed_2 = true;
                setTimeout(function() {
                    fader('gwd-life_bg', 0, 1, 600, new Date().getTime());
                }, 1000);
                setTimeout(function() {
                    fader('gwd-life_fg', 0, 1, 1000, new Date().getTime());
                }, 600);                        
            }
        } else {
        
        }
    }

    // footer focus design/develop animation
    if ( qs('#gwd-focus-img') ) {
            _div = qs('#gwd-focus-img') 
            var bounding = _div.getBoundingClientRect();
            if (
                isInViewport(_div)
            ) {
                if ( ! aniPlayed_1 )  {
                    aniPlayed_1 = true;
                    setTimeout(function() {
                        fader('gwd-focus_bg', 0, 1, 600, new Date().getTime());
                    }, 1000);                        
                    setTimeout(function() {
                        fader('gwd-focus_codes', 0, 1, 600, new Date().getTime());
                    }, 1000);
                    setTimeout(function() {                            
                        fader('gwd-focus_mrec', 0, 1, 1000, new Date().getTime());
                    }, 600);
                    
                }
            } else {
            
            }
    }
}