(function($) {
    $(window).on('elementor/frontend/init', function () {
        elementorFrontend.hooks.addAction('frontend/element_ready/ignition-flipclock.default', function($scope) {
            var $flipclock = $($scope).find('.ignition-flipclock-container');

            $flipclock.each(function() {
                var $this = $(this);
                var $clock = $this.find('.clock');
                var message = $this.find('.message');
                var message_text = $this.data('end-text');
                var clockface = $this.data('clockface');
                var seconds = $this.data('seconds');
                var show_seconds = 'yes' === seconds;
                var countdown = $this.data('time');
    
                var clock = $clock.FlipClock(countdown, {
                    clockFace: clockface,
                    autoStart: false,
                    showSeconds: show_seconds,
                    callbacks: {
                        stop: function() {
                            message.html(message_text)
                        },
                    }
                });
    
                clock.setCountdown(true);
                clock.start();
    
                if ($clock.hasClass('no-label')) {
                    return;
                }
    
                // Center the labels above the digits.
                var $dividers = $clock.find('.flip-clock-divider');
                $dividers.each(function () {
                    var $this = $(this);
                    var $label = $this.find('.flip-clock-label');
                    var $flips = $this.nextUntil('.flip-clock-divider');
                    var totalWidth = 0;
                    var totalPadding = $flips.length * 10;
                    $flips.each(function () {
                        totalWidth += $(this).outerWidth();
                    });
                    $label.css('left', (totalWidth / 2) + totalPadding + 10 + 'px');
                });
            });

        });
    });
})( jQuery );