var msie = false;

if (window.navigator.userAgent.indexOf("MSIE ") > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))
	msie = true;

function msieLottie(el) {
	var svg = el.find("svg");

	var w = svg.attr('width').replace('px', '');
	var h = svg.attr('height').replace('px', '');
	var ratio = parseFloat(w) / parseFloat(h);
	var height = el.width() / ratio;

	svg.attr({'height': height}).css("height","").css("max-height","100%").data('ratio',ratio);
	svg.data('ratio',ratio);

}

function renderLottie(el) {
	var loop = false;
	var $el = $(el);

	if ($el.data('loop') === undefined)
		loop = true;

	var params = {
		container: el,
		renderer: 'svg',
		loop: loop,
		autoplay: true,
		path : "/json/"+$el.data('json')+".json"
	};

	lottie.setLocationHref(document.location.href);
	lottie.loadAnimation(params);

	if (msie) {
		setTimeout(msieLottie.bind(this, $el), 100);
	}
}

$('.lottie:not([data-lottie])').each(function() {
	renderLottie(this);
});

$('[data-lottie]').waypoint(function() {
	var element = this.element;
	if (element === undefined) 
		$element = $(this);
	else
		$element = $(element);
	$element.removeProp('data-lottie');

	if ($element.hasClass('execute')) return;

	$element.addClass("execute");

	renderLottie($element[0]);

}, {
  	offset: '80%'
});

$(window).on('resize', function() {
	if (msie) {
		$('.lottie svg').each(function() {
			var svg = $(this);
			svg.attr({'height': svg.parent().width() / svg.data("ratio")});
		});
	}
});