{% extends '@nucleus/partials/particle.html.twig' %}

{% block particle %}

<div class="{{ particle.class|e }}">

    {% if particle.title %}<h2 class="g-title">{{ particle.title|raw }}</h2>{% endif %}

	<div class="g-gridstatistic">
		{% if particle.desc %}<div class="g-gridstatistic-desc">{{ particle.desc|raw }}</div>{% endif %}
		{% if particle.readmore %}<a href="{{ particle.readmorelink|e }}" class="button {{ particle.readmoreclass|e }}">{{ particle.readmore|raw }}</a>{% endif %}

		<div class="g-gridstatistic-wrapper {{ particle.cols|e }}">
			{% for gridstatisticitem in particle.gridstatisticitems %}
			    <div class="g-gridstatistic-item">
			    	<div class="g-gridstatistic-item-wrapper">
			        	<div class="g-gridstatistic-item-text1 odometer" data-odometer-value="{{ gridstatisticitem.text1|e }}"></div>
			        	<div class="g-gridstatistic-item-text2">{{ gridstatisticitem.text2|e }}</div>
			    	</div>
			    </div>
			{% endfor %}
		</div>

        {% if particle.footerdesc %}<div class="g-gridstatistic-footerdesc">{{ particle.footerdesc|raw }}</div>{% endif %}

	</div>
</div>
{% endblock %}

{% block javascript_footer %}
<script src="{{ url('gantry-theme://js/odometer.js') }}"></script>
<script>
;((function(){

var isElementInViewport = function(el, delta) {
    var rect = el.getBoundingClientRect();
    delta = delta || 0;
    return (
        rect.top >= -delta &&
        rect.left >= -delta &&
        rect.bottom <= (delta + (window.innerHeight || document.documentElement.clientHeight)) &&
        rect.right <= (delta + (window.innerWidth || document.documentElement.clientWidth))
    );
}

window.addEvents({
    scroll: function(){
        var odometers = document.getElements('.odometer'), value, instances = {};
        odometers.forEach(function(odometer, idx){
            odometer = document.id(odometer);
            if (!instances['o-' + idx] && isElementInViewport(odometer, 100)) {
                value = odometer.getProperty('data-odometer-value');
                instances['o-' + idx] = { i: new Odometer({el: odometer}), v: value };
                setTimeout(function(){
                    instances['o-' + idx].i.update(instances['o-' + idx].v || 0);
                }, 100);
            }
        });
    },
    domready: function(){
        this.fireEvent('scroll');
    }
});

})());
</script>
{% endblock %}
