if (!Date.now) {
    // get time in UTC
    Date.now = function() { return new Date().getTime(); }
    
}
//convert to seconds
window.timeNow = Math.floor(Date.now() / 1000);

// seconds * minutes * hours * days * weeks
var cookieTime = window.timeNow + 60 * 60 * 24 * 7 * 2;


// this is for toggling Autoplay using cookies.
// remembering if a user muted the video is tracked within the video event listeners
// this function probably should be coded for re-usability
window.run_cookie_condition = function() {

    //console.log("run_cookie_condition started");
    // if cookie exists and still has time left
    if (Cookies.get('NO_AUTOPLAY') && (Cookies.get('NO_AUTOPLAY') > window.timeNow)) {

        // do nothing

        //jQuery('.mobile-alert').text('if (Cookies.get("NO_AUTOPLAY") && (Cookies.get("NO_AUTOPLAY") > window.timeNow))');
        //jQuery('body *').removeClass('wow');

       //console.log("wow removed.");
    }
    else {

        //jQuery('.mobile-alert').text('if (Cookies.get("NO_AUTOPLAY") ... else');

        // we purposesly do not use the built in expiration because it calculates by days.
        // this method allows seconds.
        
        Cookies.set('NO_AUTOPLAY', cookieTime);

        //console.log("cookie set.");
    }

    return true;



}



jQuery( "#jqueryui-tabs" ).tabs();
jQuery( "#jqueryui-tabs > ul:first-child" ).show();



jQuery(document).ready(function( $ ) {

    




    //====================================
    // Bootstrap feature triggers

    $('*[data-toggle="tooltip"]').tooltip({'html':true});

    //console.log('loading Premium functions...');

    // load and replace monthly/annually prices and links
    $('#monthly').click(function(){
    updatePrice('month');
    });
    $('#annually').click(function(){
        updatePrice('annual');
    });

    updatePrice('annual');
        

    function updatePrice(frequency){
        $('.gfield .ptp-pricing-table').each(function(index){
                index++;
                $(this).children('.ptp-col').each(function(subIndex){
                subIndex++;
                var plan = $(this).children('.ptp-item-container').children('.ptp-plan').text();
                //console.log(index + '-' + subIndex + ': ' + plan);
                var realPrice = $('.price-'+frequency+' ul.gfield_radio li input[value^="'+plan+'"]').val().split('|')[1];      
                $(this).children('.ptp-item-container').children('.ptp-price').text('$' + realPrice + '/mon');
                var radioID = $('.price-'+frequency+' ul.gfield_radio li input[value^="'+plan+'"]').attr('id');
                $(this).children('.ptp-item-container').children('.ptp-cta').children('.ptp-button').attr('href', 'javascript:document.getElementById("'+radioID+'").click();');
            });
        });
    }
    $('.ptp-button').click(function updateConfirmation(){
        setTimeout(function() {
            var selectedPlan = $('.price-annual input:checked, .price-month input:checked').siblings('label').text();
            var selectedUnit = $('.price-annual input:checked, .price-month input:checked').val().split('|')[1];
            var selectedFrequency = $('.frequency input:checked').siblings('label').text();

            //console.log('selectedPlan: '+selectedPlan+', selectedUnit: '+selectedUnit+', selectedFrequency: '+selectedFrequency);

            if(selectedFrequency == 'annually'){
                var selectedQuantity = $('.quantity-annual input').val();
                var monthlyUnit = $('.price-month input[value^="'+selectedPlan+'"]').val().split('|')[1];
                var savings = (monthlyUnit - selectedUnit) * 12;
            }else{
                var selectedQuantity = 1;
                var annuallyUnit = $('.price-annual input[value^="'+selectedPlan+'"]').val().split('|')[1];
                var savings = (selectedUnit - annuallyUnit) * 12;
            }
            $('.confirmation #selectedPlan').html(selectedPlan);
            $('.confirmation #selectedUnit').html('$'+selectedUnit+'/mon');
            $('.confirmation #selectedQuantity').html(selectedQuantity);
            $('.confirmation #selectedFrequency').html(selectedFrequency);
            if(selectedFrequency == 'annually'){
                $('.confirmation #savings').html('You\'ll be saving <strong>$'+savings+'</strong> each year!');
            }else{
                $('.confirmation #savings').html('<em>Wish you could save <strong>$'+savings+'</strong> each year?</em>  Select annual billing option.');           
            }
        }, 100);
    });
    //custom accordion functions
    $('.ptp-button').click(function (){
        $('.step-1-fields').hide('drop', {direction: 'up'}, 300);
        $('.billing-freq-buttons, .ptp-pricing-table').hide('drop', {direction: 'up'}, 300);
        if (   $('.auth input').is(':checked') 
            && $('.name input').length() 
            && $('.businessname input').length() 
            && $('.email input').length() 
            && $('.phone input').length()
            && $('.domain input').length() ){
            $('.step-4-fields, .gform_image_button').show('drop', {direction: 'up'}, 300);
        }else{
            $('.step-4-fields, .gform_image_button').hide('drop', {direction: 'up'}, 300);
        }
        $('.step-1').css('cursor','pointer');   
        $('.step-2').css('cursor','pointer');   
        $('.step-3').css('cursor','default');
    });
    $('.auth input').click(function(){
        if ($(this).is(':checked')) {
            // do something when the checkbox is checked
            $('.step-3-fields').hide('drop', {direction: 'up'}, 300);
            $('.step-3').css('cursor','pointer');  
            $('.step-4').css('cursor','default');    
        }   
    });
    $('.step-1').click(function (){
        $('.step-1-fields').show('drop', {direction: 'up'}, 300);
        // must use these classes rather than .step-2-fields 
        $('.billing-freq-buttons, .ptp-pricing-table').hide('drop', {direction: 'up'}, 300);
        $('.step-3-fields').hide('drop', {direction: 'up'}, 300);
        $('.step-4-fields, .gform_image_button').hide('drop', {direction: 'up'}, 300);
        $('.step-1').css('cursor','default');   
        $('.step-2').css('cursor','pointer');   
        $('.step-3').css('cursor','pointer');   
        $('.step-4').css('cursor','pointer');   
    });
    $('.step-2').click(function (){
        $('.step-1-fields').show('drop', {direction: 'up'}, 300);
        $('.billing-freq-buttons, .ptp-pricing-table').show('drop', {direction: 'up'}, 300);
        $('.step-3-fields').hide('drop', {direction: 'up'}, 300);
        $('.step-4-fields, .gform_image_button').hide('drop', {direction: 'up'}, 300);
        $('.step-1').css('cursor','pointer');   
        $('.step-2').css('cursor','default');   
        $('.step-3').css('cursor','pointer');   
        $('.step-4').css('cursor','pointer');   
    });
    $('.step-3').click(function (){
        $('.step-1-fields').hide('drop', {direction: 'up'}, 300);
        $('.billing-freq-buttons, .ptp-pricing-table').hide('drop', {direction: 'up'}, 300);    
        $('.step-3-fields').show('drop', {direction: 'up'}, 300);
        if ($('.auth input').is(':checked')){
            $('.step-4-fields, .gform_image_button').show('drop', {direction: 'up'}, 300);
        }else{
            $('.step-4-fields, .gform_image_button').hide('drop', {direction: 'up'}, 300);
        }
        $('.step-1').css('cursor','pointer');   
        $('.step-2').css('cursor','pointer');   
        $('.step-3').css('cursor','default');   
        $('.step-4').css('cursor','pointer');   
    });
    $('.step-4').click(function (){
        $('.step-1-fields').hide('drop', {direction: 'up'}, 300);
        $('.billing-freq-buttons, .ptp-pricing-table').hide('drop', {direction: 'up'}, 300);    
        $('.step-3-fields').hide('drop', {direction: 'up'}, 300);
        $('.step-4-fields, .gform_image_button').show('drop', {direction: 'up'}, 300);
        $('.step-1').css('cursor','pointer');   
        $('.step-2').css('cursor','pointer');   
        $('.step-3').css('cursor','pointer');   
        $('.step-4').css('cursor','default');   
    });
    $('.service-buttons').click(function (){
        $('.billing-freq-buttons, .ptp-pricing-table').show('drop', {direction: 'up'}, 300);
        $('.step-1').css('cursor','pointer');
        setTimeout(function(){
            $('.gform_image_button').hide('drop', {direction: 'up'}, 300);  
        },50);
    });
    $(".billing-freq-buttons a").click(function(){
        setTimeout(function(){
            $('.step-3').show('drop', {direction: 'up'}, 300);
            $('.gform_image_button').hide('drop', {direction: 'up'}, 0);    
        },50);
    });
    // service buttons
    $(".service-buttons a").click(function(){
        $(".service-buttons a").removeClass('btn-inverse');
        $(".service-buttons a").addClass('btn');
        $(this).addClass('btn-inverse');
    });
    
    //billing frequency buttons
    $(".billing-freq-buttons a").click(function(){
        $(".billing-freq-buttons a").removeClass('btn-warning');
        $(".billing-freq-buttons a").addClass('btn-white');
        $(this).removeClass('btn-white');
        $(this).addClass('btn-warning');
    }); 
    
    //console.log('finished.');




    // Animate skills bar from newest alterna pull


    /*function skillsAnimationRun() {
        (function( $ ) {

            $(".skills").each(function() {

                console.log('.skills exists');

                if ($(this).hasClass('skill-animation-complete')) {
                    
                    console.log('hasClass .skill-animation-complete');

                    //return;
                }
                if ($(this).find('.skill-element').length == $(this).find('.skill-animation-run').length) {

                    console.log('found .skill-element');

                    $(this).addClass('skill-animation-complete');
                    $(this).find('.skill-animation-run').removeClass('skill-animation-run');
                    //return;
                }
                var items = $(this).find('.skill-element');
                var count = 0;
                for (var i = 0; i < items.length; i++) {
                    if ($(items[i]).find('.skill-bg').hasClass('.skill-animation-run')) {

                        console.log('found .skill-animation-run');

                        continue;
                    }
                    var pos = $(this).offset().top;
                    var topOfWindow = $(window).scrollTop();
                    var heightOfWindow = $(window).height();
                    if (pos < topOfWindow + heightOfWindow - 60) {

                        console.log('inside pos < topOfWindow');

                        $(items[i]).find('.skill-bg').addClass('skill-animation-run').animate({
                            width: $(items[i]).find('.skill-bg').attr('data-percent')
                        }, {
                            duration: (400 * count + 500)
                        });

                    }
                    count++;

                }


            });

            console.log('skills finished.');


        })( jQuery );

    }*/





    // newsletter button move

    jQuery("#wpmchimpas-trig").appendTo("#newsletter-target");
    jQuery("#wpmchimpas-trig").addClass("relative");






    // Replaces all SVG images with inline SVG
    // https://jsfiddle.net/wuSF7/462/
    // works only with http not https images

/*
    $(function(){
        jQuery('img.svg').each(function(){
            var $img = jQuery(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');
        
            jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');
        
                // Add replaced image's ID to the new SVG
                if(typeof imgID !== 'undefined') {
                    $svg = $svg.attr('id', imgID);
                }
                // Add replaced image's classes to the new SVG
                if(typeof imgClass !== 'undefined') {
                    $svg = $svg.attr('class', imgClass+' replaced-svg');
                }
        
                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');
                
                // Check if the viewport is set, else we gonna set it if we can.
                if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
                    $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
                }
        
                // Replace image with new SVG
                $img.replaceWith($svg);
        
            }, 'xml');
        
        });
    });
*/





    //=====================================
    // ellipse animation
    //
    setTimeout(function() {
        $('.ellipse1-1').animate({'margin-left':['0px','easeOutElastic']},1000,function() {

        });
    },2000);

    //=====================================
    // spin animation
    //

    /*** temporarily disabled 


    if($("body").hasClass("home")){
        header = $(".home h1");
        //alert('header: ' + header.html());
        var words = header.html().split(' ');
        //alert('words: ' + words);
        header.empty();
        //alert('header: ' + header.html() );               
        var j = 0;
        $.each(words,function(i){
            j = i;
            j++;
            //alert('words[' + i + ']:' + words[i] );
            header.append('<span class="anim head trigger spin1-'+j+'">'+words[i]+'</span>');
        }); 

         setTimeout(function() {
            $(".anim.head").removeClass("trigger");
            $('.spin1-1').animate({'right':['50%','easeOutElastic']},0,function() {

            });
            $('.spin1-3').animate({'left':['50%','easeOutElastic']},0,function() {

            });                    
        },2000); 
     }

     ***/





    jQuery(".product-addon .woocommerce-Price-amount").append("/month").prepend("+");
    jQuery("dd p").prepend('<i class="fa fa-check"></i> &nbsp;&nbsp;');





window.updateSize = updateSize;

function updateSize(source, element) {   // don't need this for images, since background-size: cover + background-position: center will do the trick
       
       console.log('updateSize()');                             
    
    var defaults = {
        // If you want to use a single mp4 source, set as true
        useFlashForFirefox:true,
        // If you are doing a playlist, the video won't play the first time
        // on a touchscreen unless the play event is attached to a user click
        forceAutoplay:false,
        controls:false,
        doLoop:false,
        container:$('body'),
        shrinkable:false
    };

    var BigVideo        = this,
        player,
        vidEl           = 'video',
        wrap            = $('<div id="video-wrap"></div>'),
        video           = $(''),
        mediaAspect     = 16/9,
        vidDur          = 0,
        defaultVolume   = 0.8,
        isInitialized   = false,
        isSeeking       = false,
        isPlaying       = false,
        isQueued        = false,
        isAmbient       = false,
        playlist        = [],
        currMediaIndex,
        currMediaType   = source;   // only accepts 'video', or else

    var settings = $.extend({}, defaults);
    var windowW = $(window).width();
    var windowH = $(window).height();
    var windowAspect = windowW/windowH;


    $('.video-viewport')
        .width(windowW)
        .height(windowH);

    // taller
    if (windowAspect < mediaAspect) {
        console.log('(portrait)');
        
        if (currMediaType === 'video') {
            

            $(vidEl)
                .width(windowH*mediaAspect)
                .height(windowH);

                console.log('video width is ' + $(vidEl).width());

            if (!settings.shrinkable) { // if false

                $(vidEl)
                    .css('top',0)
                    .css('left',-(windowH*mediaAspect-windowW)/2)
                    .css('height',windowH);

            } else {

                $(vidEl)
                    .css('top',-(windowW/mediaAspect-windowH)/2)
                    .css('left',0)
                    .css('height',windowW/mediaAspect);
            }

            $(vidEl+'_html5_api')
                .css('width',windowH*mediaAspect)
                .css('height',windowH);

            $(vidEl+'_flash_api')
                .css('width',windowH*mediaAspect)
                .css('height',windowH);

        } 
        else if (currMediaType === 'image') {
            // is image
            $('#image')
                .css({
                    width: windowW,
                    height: windowH,
                    top:0,
                    left:-(windowH*mediaAspect-windowW)/2
            }); 
        }
        else {
            // some element
            $(element)
                .width(windowH*mediaAspect)
                .height(windowH);

                console.log('video width is ' + $(element).width());

            if (!settings.shrinkable) { // if false

                $(element)
                    .css('top',0)
                    .css('left',-(windowH*mediaAspect-windowW)/2)
                    .css('height',windowH);

            } else {

                $(element)
                    .css('top',-(windowW/mediaAspect-windowH)/2)
                    .css('left',0)
                    .css('height',windowW/mediaAspect);
            }
           

            console.log('else, width is ' + $(element).width());                

        }
    

    // wider
    } else {

       console.log('(landscape)');

        if (currMediaType === 'video') {

            $(vidEl)
                .width(windowW)
                .height(windowW/mediaAspect);                

            $(vidEl)
                .css('top',-(windowW/mediaAspect-windowH)/2)
                .css('left',0)
                .css('height',windowW/mediaAspect);

            $(vidEl+'_html5_api')
                .css('width',$(vidEl+'_html5_api').parent().width()+"px")
                .css('height','auto');

            $(vidEl+'_flash_api')
                .css('width',windowW)
                .css('height',windowW/mediaAspect);
        }
        else if (currMediaType === 'image') {
            // is image
            $('#image')
                .css({
                    width: windowW,
                    height: 'auto',
                    top:-(windowW/mediaAspect-windowH)/2,
                    left:0
            });
        }
        else {


          // some element
            $(element)
                .width(windowW)
                .height(windowW/mediaAspect);                

            $(element)
                .css('top',-(windowW/mediaAspect-windowH)/2)
                .css('left',0)
                .css('height',windowW/mediaAspect);

            console.log('else, width is ' + $(element).width());                
        }
    }
}




// video line up by section #
var sec1  =         [ "wp-content/themes/firelite_v3-child/videos/1e-export4.mp4",    "wp-content/themes/firelite_v3-child/videos/1e-export4.webm",     "wp-content/themes/firelite_v3-child/imgs/mobile-screenshot-video-background-image-video1c.jpg",    "#430068" ]
,   sec2  =         [ "wp-content/themes/firelite_v3-child/videos/2.mp4",    "wp-content/themes/firelite_v3-child/videos/2.webm",     "wp-content/themes/firelite_v3-child/imgs/2.jpg",    "#8c0052" ]
,   sec3  = sec2
;
var last = 3;


// updates video and color layer
function updateVideoSource(index, target, element) {

    console.log('updateVideoSource ('+ index + ', ' + target + ', ' + element + ')');

    //$('.mobile-alert').text('updateVideoSource('+ index + ', ' + target + ', ' + element + ')');

    var video = $(element);

    video.attr("cover",eval("sec" + target)[2]);



    // if (bowser.mobile && bowser.ios) {    // detect mobile first: iPhone 3+, Android 2.0+
    //      $('.mobile-alert').text('bowser.mobile && bower.ios -> swap w/ image ');
    //      video.children("img").attr("src",eval("sec" + target)[2]);
         
    // }

    if (Modernizr.video && Modernizr.video.webm) {           // Chrome, FF, IE 9+, Opera, Android 2.3+

        //$('.mobile-alert').text('else if (Modernizr.video && Modernizr.video.webm) ');

        video.attr("src",eval("sec" + target)[1]);
        video.children("source.webm").attr("src",eval("sec" + target)[1]);

    } else if (Modernizr.video && Modernizr.video.h264) {    // Safari, Chrome, IE 9+, iPhone 3+, Android 2.0+

        //$('.mobile-alert').text('else if (Modernizr.video && Modernizr.video.h264)  ');

        video.attr("src",eval("sec" + target)[0]);
        video.children("source.mp4").attr("src",eval("sec" + target)[0]);

    } else {

        video.children("img").attr("src",eval("sec" + target)[2]);

    }

    var classList = document.documentElement.className.split(/\s+/);
    
    for (var i = 0; i < classList.length; i++) {
        if (classList[i] === 'someClass') {
            //do something
        }
    }

// $('.mobile-alert').text(classList);

// if (bowser.mobile){

//     $('.mobile-alert').text('mobile');
// }
// else if (bowser.tablet){

//     $('.mobile-alert').text('tablet');
// }
// else {
//     $('.mobile-alert').text('bowser, else');   
// }
    video = video[0];
    

    // background image fall-back of fall-back for players that cannot play/pause 
    // like Safari5.1 on Windows/OS X Lion 
    
    if(!bowser.chrome){

        if (video.play()){    

            console.log('if video.play() true');

            //video.play();
        }
        // else if (!video.pause()) {
         
        //     console.log('else if (!video.pause()) true');
        //     //video.css("background","url(" + eval("sec" +target)[2] + ")");
        // }
        else {

            console.log('if video.play() false, else');

            video.load();

        }   
    }

    
    // Is this a version of Safari?
// requires unminimized detect.js... forget it. 
// Browsers = new WhichBrowser();



    //$('#blank').append(version);

    //changeColorLayer(target);
    



}

function disableVideo(index, target, element) {
    //$(element).replaceWith('<div class="bg-image" id="a" style="background-image:url(' + eval("sec" + target)[2] + ');"></div>');
    $(element).remove();
}

// updates div's image background  and color layer
function updateImageBackground(index, target, element) {

    console.log('updateImageBackground('+ index + ', ' + target + ', ' + element + ')');
    //$('.mobile-alert').text('updateImageBackground('+ index + ', ' + target + ', ' + element + ')');

    var image = element;

    $(image).css("background-image","url(" + eval("sec" + target)[2] + ")");

    //changeColorLayer(target);
    
}

function addImageBackgroundToVideoViewport(index, target, element) {

    //$('.mobile-alert').text('addImageBackgroundToVideoViewport('+ index + ', ' + target + ', ' + element + ')');

    console.log('addImageBackgroundToVideoPort('+ index + ', ' + target + ', ' + element + ')');

    $(element).css("background-image","url(" + eval("sec" + target)[2] + ")");
    $(element).attr("poster", eval("sec" + target)[2] );

}


function crossFadeLayers(index, nextIndex){

    console.log('crossFadeLayers()');

    // check if next section has different video.  if so, update video source and cross-fade them.
    if( eval("sec" + index) != eval("sec" + nextIndex) ){

        var target = nextIndex;

        // higher than (oddly it doesn't consider negatives)
        if( $("#a").css('z-index') < $("#b").css('z-index') ){

            var newElement = "#b";
            var oldElement = "#a";

        }
        // lower than (oddly it doesn't consider negatives)
        else {

            var newElement = "#a";
            var oldElement = "#b";
    
        }

        if(bowser.mobile){

            if(bowser.ios){
/*
                $('div.bg-image').css({             
                                        '-webkit-transition':'none',
                                           '-moz-transition':'none',
                                             '-o-transition':'none',
                                                'transition':'none' 
                });
                $('div.bg-image').css({             
                                        '-webkit-transition':'opacity 5000ms ease-out 5000ms',
                                           '-moz-transition':'opacity 5000ms ease-out 5000ms',
                                             '-o-transition':'opacity 5000ms ease-out 5000ms',
                                                'transition':'opacity 5000ms ease-out 5000ms'   
                });             
                $('div.bg-image').css({             
                                        '-webkit-transition':'opacity 2000ms ease-out 2000ms',
                                           '-moz-transition':'opacity 2000ms ease-out 2000ms',
                                             '-o-transition':'opacity 2000ms ease-out 2000ms',
                                                'transition':'opacity 2000ms ease-out 2000ms'   
                });             
                */
                updateImageBackground(index,target,newElement); 
/*
                $('div.bg-image').css({             
                                        '-webkit-transition':'opacity 2000ms ease-out',
                                           '-moz-transition':'opacity 2000ms ease-out',
                                             '-o-transition':'opacity 2000ms ease-out',
                                                'transition':'opacity 2000ms ease-out'  
                });             
                */
            }
            else {
                updateImageBackground(index,target,newElement); 
            }
            
        }
        else {
            updateVideoSource(index,target,newElement);

            changeVideoBgImg(newElement,target);
        }
    
        crossFadeElements(oldElement,newElement);

    } 
}


function switchVideoImageLayers() {

    console.log('switchVideoImageLayers()');


    if(bowser.mobile){

        //$('.mobile-alert').text('switchVideoImageLayers() bowser.mobile');

        $('video#a').replaceWith('<div class="bg-image" id="a" style="background-image:url(assets/imgs/1.jpg);"></div>');
        $('video#b').replaceWith('<div class="bg-image" id="b" style="background-image:url(assets/imgs/2.jpg);"></div>');
    }
    else{

        //$('.mobile-alert').text('switchVideoImageLayers() else');

        $('div.bg-image#a').replaceWith('\
            <video id="a" cover="" preload="auto" loop muted src="assets/videos/1.mp4">\
                <source class="mp4" src="" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">\
                <source class="webm" src="" type="video/webm; codecs=vp8,vorbis">\
                <img src="">\
            </video>\
        ');
        $('div.bg-image#b').replaceWith('\
            <video id="b" cover="" preload="auto" loop muted src="assets/videos/2.mp4">\
                <source class="mp4" src="" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">\
                <source class="webm" src="" type="video/webm; codecs=vp8,vorbis">\
                <img src="">\
            </video>\
        ');
    }

    // make sure the image can be resized... so we might have to use bg image instead
}



var video = jQuery('video#a');

if (video.html()) {

    video.css('opacity',0);
    console.log('initial video hide.');

    video.on("loadedmetadata", function() {
        console.log('loadedmetadata.');        
    });


    document.getElementById('a').addEventListener('loadedmetadata', function() {
        //this.currentTime = 50;
          console.log('loadedmetadata js.');        

    }, false);

    var canplayCount = 1;

    video.on("canplay", function() {

        //$('.mobile-alert').text('video.on("canplay",...) ' + canplayCount);


        if(canplayCount == 1) {

            console.log('1st canplay event fired');

            resizeJob();    
                 

            setTimeout(function() { 
                //video.show();    
                video.css('opacity',1);

            },0);

            
            video[0].play();


        }
        else {

            console.log('canplay event fired thereafter.');



          //   setTimeout(function() { 
          //       //video.hide();    
          //       video.css('opacity',0);
          //       console.log('canplay else fadeOut.');
          //   },0);

          // setTimeout(function() { 
          //       //video.show(); 
          //       video.css('opacity',1);
          //       console.log('canplay else fadeIn.');
          //   },3000);
        }

        canplayCount++;

    });


    var playCount = 1;

    video.on("play", function() {

        //$('.mobile-alert').text('video.on("play",...) ' + playCount);

        console.log('playCount ' + playCount );

        $('.repeat-control').hide();                
        $('.volume-control').show();

        video.css('opacity',1);
        $('.video-background-color-fade').css('opacity',0);
        
        $('.home #page-header *').not('.home #page-header nav *, .repeat-control, .volume-control').hide();
     
        //$('.home h1, .home h2, .home .page-header-content .btn.callout').addClass('white');
        //$('.home #page-header').addClass('white');


        if(playCount == 1) {

            //console.log('currentTime ' + currentTime );
            

        } 
        else if (playCount == 3) {




        } else {

      

        }
        if (!bowser.android)
            setTimeout(function() { 

                $('.home #page-header *').not('.home #page-header nav *, .repeat-control, .volume-control').show();

            },0);


        playCount++;

        
     
    });

    video.on("ended", function() {
        

        //$('.mobile-alert').text('video.on("ended",...) ');


        //video.css('opacity',0);
        video.css('opacity',0);
        $('.video-background-color-fade').css('opacity',1);

        //$('video').attr("poster","/wp-content/themes/firelite_v3-child/imgs/grey.png");
        
        //$('.home #page-header').removeClass('white');
        //$('.home h1, .home h2, .home .page-header-content .btn.callout').removeClass('white');

        //console.log('ended event fadeOut.');

        if (bowser.android)
            setTimeout(function() { 

                $('.home #page-header *').not('.home #page-header nav *, .repeat-control, .volume-control').show();

            },0);


        if (!(playCount % 2 === 1)) {

            setTimeout(function() { 

                //video.show(); 
              
                // loops starts at...
                document.getElementById("a").currentTime = 4.6;

                console.log('loops set to start at ' + document.getElementById("a").currentTime );    

                video[0].play();

                
            },5000);
        
        } else {
            console.log('loop stopped after every 3rd play');

            $('.volume-control').hide();
            $('.repeat-control').show();

            

        }
    });

    function muteVideo() {
            
        ///$('.mobile-alert').text('muteVideo()');

        video.prop('muted', true); //mute 

        $('.volume-control').removeClass('fa-volume-up');
        $('.volume-control').addClass('fa-volume-off');
        
        Cookies.set('MUTE', cookieTime);
    }
    
    function unmuteVideo() {

        ///$('.mobile-alert').text('unmuteVideo()');

        video.prop('muted', false); //unmute 

        $('.volume-control').removeClass('fa-volume-off');
        $('.volume-control').addClass('fa-volume-up');

        Cookies.remove('MUTE');
    }


    $('.volume-control').click(function(){ 

        if (video.prop('muted') == false) {

            muteVideo();
            
        } else {
            
            unmuteVideo();
        }


    });

    $('.repeat-control').click(function(){ 

        unmuteVideo();

        video[0].play();

    });



    $('.video-viewport').on('tap',function(){ 

        console.log('tapped'); 

        //video[0].play(); 

    });

    $('.touchevent').on('tap',function(){ 

        $('body').prepend('<h1>touchevent</h1>');

    });

    $('.no-touchevent').on('tap',function(){ 

        $('body').prepend('<h1>no-touchevent</h1>');

    });

}// end if video.html()




function adjustContentWrapHeight() {
    

    if (bowser.safari){
        $('.home #page-header').height($(window).height()+20);
    }
    else {
        $('.home #page-header').height($(window).height()+50);
    }
}    
function updateHeaderWrap() {
    $('.home .header-wrap').stick_in_parent({'offset_top':0,'bottoming':false,'parent':'body'});
}



    // Sticky-Kit works... don't use Affix shipped with Bootstrap
    
    // screens other than mobile phone
    if ($(window).width() > 480) {
    //if ($(window).width()) {

        setTimeout(function(){
            $('.product').height($('.summary').height());
            $('.images').stick_in_parent();
        },1000);



        updateHeaderWrap();
        adjustContentWrapHeight()

    

    }
function resizeJob() {

    console.log('resizeJob()');

    updateSize('video');
    updateSize(null,'.bg-image');
    updateSize(null,'.video-background-color-fade');
    updateSize(null,'.video-canvas');
    adjustContentWrapHeight()
    updateHeaderWrap();
    $('.video-viewport').show();
    //$('.home #page-header, .home video#a').height($(window).height());


}

$(window).on('resize', function() {

    console.log('resize event fired');

    resizeJob();

});


    //====================================
    // trigger css transitions
    
    $("body").removeClass("css-transition-preload");
    

 
    /*
    if(jQuery('h1').length) {
        var header1 = jQuery('h1').html();

        
        // if cookie exists and still has time left
        if (Cookies.get('NO_AUTOPLAY') && (Cookies.get('NO_AUTOPLAY') > window.timeNow)) {
            var newheaderfont = header1.replace('for Shops &amp; Studios','</h1><h2>for Shops <span class="semibold">&amp;</span> Studios</h2>');
        }
        else {
            var newheaderfont = header1.replace('for Shops &amp; Studios','</h1><h2 class="animated wow fadeInLeft" data-wow-delay="100ms">for Shops <span class="semibold">&amp;</span> Studios</h2>');
        }

        jQuery('h1').html(newheaderfont);
    }
    */


    if(!(bowser.mobile)) {
        $('.home #page-header *').not('.home #page-header nav *, .repeat-control, .volume-control').hide();
    }


    

    skillsAnimationRun();


    if(bowser.mobile) {

        $('.home #page-header .page-header-content *').switchClass('fadeIn','fadeInLeft').switchClass('fadeInUp','fadeInLeft');

        $('.home #page-header .page-header-content h1:first-child span').attr('data-wow-delay', '1.0s');
        $('.home #page-header .page-header-content h1:nth-child(2) span').attr('data-wow-delay', '1.1s');
        $('.home #page-header .page-header-content h2:first-of-type').attr('data-wow-delay', '1.2s');
        $('.home #page-header .page-header-content h2:last-of-type').attr('data-wow-delay', '1.3s');
        $('.home #page-header .page-header-content a').attr('data-wow-delay', '1.4s');

        


        // see top of misc.js for mobile animation replacements



        //console.log('Run first action for mobile');

        
        // function not dependent on condition. it has mobile detection within as well.
        //switchVideoImageLayers();
        if (video.html()) {

            //console.log('last: if (video.html())')
                       
            

            if(bowser.ios) {

                //$('.mobile-alert').text('is ios, new CanbasVideoPlayer');

                //var videoOff = true;
                
                //addImageBackgroundToVideoViewport(1, 1, 'video');

                //updateVideoSource(1, 1, 'video#a');

                setTimeout(function() {

                    disableVideo(1, 1, 'video#a');
                    $('.repeat-control').hide();                
                    $('.volume-control').hide();
                    
                    resizeJob();

                },1000);

              
            } else {


                addImageBackgroundToVideoViewport(1, 1, 'video');

                //updateImageBackground(1, 1, "div#a");

                updateVideoSource(1, 1, 'video#a');

                // for slow loading browsers
                setTimeout(function() {

                    $('.repeat-control').show();                
                    $('.volume-control').hide();
                    $('.repeat-control').switchClass('fa-repeat','fa-play');

                    resizeJob();    

                },1000);


            }
        }
    }
    else {

        //testing


        //updateImageBackground(1, 1, "div#a");

        if (video.html()) {
    
            //addImageBackgroundToVideoViewport(1, 1, 'video');

            //console.log('last: if (video.html())');

            updateVideoSource(1, 1, 'video#a');


                // var canvasVideo = new CanvasVideoPlayer({
                //     videoSelector: '.js-video',
                //     canvasSelector: '.js-canvas',
                //     timelineSelector: '.js-timeline',
                //     framesPerSecond: 30,
                //     hideVideo: false, // should script hide the video element
                //     autoplay: true,
                //     // IMPORTANT On iOS can't be used together with autoplay, autoplay will be disabled
                //     audio: true, // can be true/false (it will use video file for audio), or selector for a separate audio file
                //     resetOnLastFrame: true, // should video reset back to the first frame after it finishes playing
                //     loop: false
                // });


            // for slow loading browsers
            setTimeout(function() {

                $('.repeat-control').hide();                
                $('.volume-control').show();

                resizeJob();    

            },1000);
            
            //updateSize(null,'#page-header');

            // fakes mobile touch event to autoplay video
        
            //video.trigger('tap');
        }
    }


    if ( (Cookies.get('MUTE') && Cookies.get('MUTE') > window.timeNow) || (bowser.safari) || (bowser.chrome)) {

        if (typeof muteVideo == 'function') { 

            muteVideo();
        }

    } else {

        ///$('.mobile-alert').text('else -> (Cookies.get(\'MUTE\'))');
    }

    


});