/**
 * @name		Page Builder CK
 * @package		com_pagebuilderck
 * @copyright	Copyright (C) 2015. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 * @author		Cedric Keiflin - https://www.template-creator.com - https://www.joomlack.fr
 */

function pbckAnimnumberInit(numberName) {
	if (! numberName) return;

	var animnumber = jQuery('#'+numberName).find('> .inner').length ? jQuery('#'+numberName).find('> .inner') : jQuery('#'+numberName);

	if (animnumber.attr('data-running') == '1') {
		return;
		// clearInterval(animnumber.u); // needed to avoid problem on redraw
	}

	var opts = {};

	// pour cercle
	var disableCircle = parseFloat(animnumber.attr('data-disable-circle')) || 0;
	opts.pieDiameter = parseFloat(animnumber.attr('data-pieDiameter')) || 380;
	opts.pieThickness = parseFloat(animnumber.attr('data-pieThickness')) || 70;
	opts.piePadding = parseFloat(animnumber.attr('data-piePadding')) || 0;
	opts.pieColor = animnumber.attr('data-pieColor') || '#20B2AA';
	// pour cercle
	opts.startRadius = animnumber.attr('data-startRadius') || 0; // en %
	opts.endRadius = animnumber.attr('data-endRadius') || 100; // en %
	opts.offsetRadius = animnumber.attr('data-offsetRadius') || 0; // en %
	// pour texte
	opts.startValue = animnumber.attr('data-startValue') || 0;
	opts.startValue = parseFloat(opts.startValue.toString().replace(',', '.'));
	opts.endValue = animnumber.attr('data-endValue') || 100;
	opts.endValue = parseFloat(opts.endValue.toString().replace(',', '.'));
	opts.step = animnumber.attr('data-step') || 1;
	opts.step = parseFloat(opts.step.toString().replace(',', '.'));
	opts.time = parseFloat(animnumber.attr('data-time')) || 2000;
	opts.thousands = animnumber.attr('data-thousands') || '';
	opts.decimal = animnumber.attr('data-decimal') || '';
	opts.suffix = animnumber.attr('data-suffix') || '';
	pieID = numberName+'canvas';

	if (opts.pieThickness > opts.pieDiameter/3) {
		console.log('PAGE BUILDER CK - Animated Number Error : can not find the canvas in ');
		return;
	}
	var ctx;
	animnumber.find('canvas').remove();
	animnumber.find('.animnumberckpie').empty();
	var rad;
	var radNew;
	var radSum;
	radSum = 0.005;
	animnumber.attr('data-running', '1');

	if (! disableCircle) {
		animnumber.find('.animnumberckpie').append('<canvas id="'+pieID+'"></canvas>');
		var canvas = document.getElementById(pieID);
		canvas.setAttribute("width", opts.pieDiameter);
		canvas.setAttribute("height", opts.pieDiameter);
		canvas.style.position = "absolute";
		canvas.style.left = "50%";
		canvas.style.top = "50%";
		canvas.style.marginLeft =  -opts.pieDiameter/2 + 'px';
		canvas.style.marginTop = -opts.pieDiameter/2 + 'px';

		if (canvas && canvas.getContext) {
			ctx = canvas.getContext("2d");
			ctx.rotate(Math.PI*(3/2));
			ctx.translate(-opts.pieDiameter,0);
		} else {
			console.log('PAGE BUILDER CK - Animated Number Error : can not find the canvas in ' + numberName);
			return;
		}

		pbckAnimnumberResize(animnumber);
		rad = 0;
		ctx.clearRect(0,0,opts.pieDiameter,opts.pieDiameter);
		animnumber.u = setInterval(
			function(){
				radNew = rad;
				pbckAnimnumberDraw(ctx, opts, radNew);
				if(rad<=1.002){
					rad = (rad+radSum);
				} else 
					if (rad<=1){
					rad = rad;
				} else {
					rad = 1;
					clearInterval(animnumber.u);
					animnumber.attr('data-running', '0');
				}
				var number = parseFloat((opts.endValue - opts.startValue) * rad / opts.step) * opts.step + opts.startValue;
				var numbertext = pbckAnimnumberFormatNumber(number, opts.thousands, opts.decimal, opts.suffix);
				animnumber.find('.animnumberckvalue').text(numbertext).css('line-height', opts.pieDiameter +'px');
			},opts.time*radSum
		);
	} else {
		rad = 0;
		animnumber.u = setInterval(
			function(){
				radNew = rad;
				// pbckAnimnumberDraw(ctx, opts, radNew);
				if (rad<1){
					rad = (rad+radSum);
				} else if (rad<=1){
					rad = rad;
				} else {
					rad = 1;
					clearInterval(animnumber.u);
					animnumber.attr('data-running', '0');
				}

				var number = parseFloat((opts.endValue - opts.startValue) * rad / opts.step) * opts.step + opts.startValue;
				var numbertext = pbckAnimnumberFormatNumber(number, opts.thousands, opts.decimal, opts.suffix);
				animnumber.find('.animnumberckvalue').text(numbertext).css('line-height', '');
			},opts.time*radSum
		);
	}

	function pbckAnimnumberFormatNumber(num, thousands, decimal, suffix) {
		// searh if the decimal has been put in the number
		if (decimal && animnumber.attr('data-endValue').toString().split(decimal).length > 1) {
			numtmp = animnumber.attr('data-endValue').toString();
			nums = numtmp.split(decimal);

			if (nums[1]) {
				num = num.toFixed(nums[1].length).replace('.', decimal);
			}

			decimal = false;
		} else {
			if (decimal) {
				num = num.toFixed(2) // always two decimal digits
					.replace('.', decimal); // replace decimal point character with ,
			} 
			else {
				num = num.toFixed(0);
			}
		}
		if (thousands) {
			num = num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1' + thousands);
		}
		if (suffix) {
			num = num + suffix;
		}
		return num;
	}
}



function pbckAnimnumberDraw(ctx, opts, radNew) {
	ctx.clearRect(0,0,opts.pieDiameter,opts.pieDiameter);
	ctx.globalCompositeOperation = 'source-over';
	ctx.beginPath();
	var startrad = Math.PI*2 * parseFloat(opts.startRadius) / 100 + opts.offsetRadius * Math.PI*2 / 100;
	var endrad = startrad + radNew * Math.PI*2 * parseFloat(opts.endRadius - opts.startRadius) / 100;
	ctx.arc((opts.pieDiameter)/2, (opts.pieDiameter)/2, (opts.pieDiameter)/2-opts.pieThickness,startrad,endrad,false);
	ctx.lineWidth = opts.pieThickness-(opts.piePadding*2);
	ctx.strokeStyle = opts.pieColor;
	ctx.stroke();
	ctx.closePath();
}

// function to be called when the window is resized for reponsive behavior
function pbckAnimnumberResize($this){
	var canvas = $this.find('canvas');
	if (! canvas.length) return;
	canvas.css({'margin-left': -canvas.width()/2, 'margin-top': -canvas.height()/2});
}

// check the element position to animate the number when visbile on the screen
jQuery(document).ready(function($){
	jQuery('.cktype[data-type="animnumber"]').each(function() {
		var $this = jQuery(this);
		$window = jQuery(window);
		$this.removeClass('animatenumberck');

		// function to be called whenever the window is scrolled or resized
		function animnumberckupdate($this){
				var top = $this.offset().top;
				var pos = $window.scrollTop();
				var height = $this.height();
				var windowheight = $(window).height();

			// check if totally above or totally below viewport
			if (top + height < pos || top > pos + windowheight) {
				// if (! $this.hasClass('noreplayck')) $this.removeClass('animatenumberck');
				return;
			}
			// animate the content if found
			if (top < pos || top > pos + windowheight-30) {
				// is out of the screen
			} else {
				if (! $this.hasClass('animatenumberck')) {
					$this.addClass('animatenumberck');
					pbckAnimnumberInit($this.attr('id'));
					pbckAnimnumberResize($this);
				}
				
			}
		}

		animnumberckupdate($this);
		$window.scroll(function() { animnumberckupdate($this); });
		$window.resize(function() { pbckAnimnumberResize($this); });
	});
});