var $animation_elements = $("#prank-desc, #activite-desc, #chasse-desc, #notice-espion");
var $window = $(window)

function check_if_in_view() {
    var window_height = $window.height();
    var window_top_position = $window.scrollTop();
    var window_bottom_position = (window_top_position + window_height);
  
    $.each($animation_elements, function() {
        var $element = $(this);
        var element_height = $element.outerHeight();
        var element_top_position = $element.offset().top;
        var element_bottom_position = (element_top_position + element_height);
    
        //check to see if this current container is within viewport
        if ((element_bottom_position >= window_top_position) &&
            (element_top_position <= window_bottom_position) && $element.is(':visible')) {
            if(!$element.hasClass('animated')) {
                $element.addClass('animated');
                var a = new TypeIt('#' + $element.attr('id'), {
                    speed: 30,
                    lifeLike: true,
                })
                .go();
                $element.click(function () {
                    a.
                    a.options({speed: 20, lifeLike: false});
                });
            }
        }
    });
  }

$(window).on("load", function() {

    /*let type = new TypeIt("#typed-data", {
        speed: 10,
        startDelay: 0,
        cursor: true
    })
    .go();

    $(document).on("click", function() {
        type.options({speed: 1});
    });*/
    $(window).on("scroll resize", check_if_in_view);
    $(window).trigger("scroll");

    $("#prank-button").hover(function () { $('.hover-circle').fadeIn(100) }, function(){ $('.hover-circle').fadeOut(100) });
});