var FLBuilderNumber;

(function(undefined) {

	/**
	 * Class for Number Counter Module
	 *
	 * @since 1.6.1
	 */
	FLBuilderNumber = function( settings ) {
		// set params
		this.nodeClass    = '.fl-node-' + settings.id;
		this.wrapperClass = this.nodeClass + ' .fl-number';
		this.layout       = settings.layout;
		this.type         = settings.type;
		this.number       = settings.number;
		this.max          = settings.max;
		this.speed        = settings.speed;

		this.wrapper = document.querySelector( this.wrapperClass );

		if ( this.wrapper ) {
			this.wrapper.FLBuilderNumber = this;

			// initialize the number
			this._initNumber();
		}
	};

	FLBuilderNumber.addCommas = function( n ) {
		var rgx = /(\d+)(\d{3})/;

		n += '';
		x  = n.split( '.' );
		x1 = x[0];
		x2 = x.length > 1 ? '.' + x[1] : '';

		while (rgx.test( x1 )) {
			x1 = x1.replace( rgx, '$1' + ',' + '$2' );
		}

		return x1 + x2;
	};

	if ( 'IntersectionObserver' in window ) {
		FLBuilderNumber.intersectionObserver = new IntersectionObserver( function( entries ) {
			entries.forEach( function( entry ) {
				if ( entry.intersectionRatio >= 1 ) {
					entry.target.FLBuilderNumber._initCount();
					FLBuilderNumber.intersectionObserver.unobserve( entry.target );
				}
			} );
		}, {
			threshold: [1]
		} );
	}

	FLBuilderNumber.prototype = {
		nodeClass               : '',
		wrapperClass            : '',
		layout 	                : '',
		type 	                : '',
		number 	                : 0,
		max 	                : 0,
		speed 					: 0,

		_initNumber: function() {
			var self = this;

			var numString = this.wrapper.querySelector( '.fl-number-int' );

			if ( numString ) {
				numString.innerHTML = '0';
			}

			if ( FLBuilderNumber.intersectionObserver ) {
				FLBuilderNumber.intersectionObserver.observe( this.wrapper );
			} else {
				self._initCount();
			}
		},

		_initCount: function() {
			if ( this.layout == 'circle' ) {
				this._triggerCircle();
			} else if ( this.layout == 'bars' ) {
				this._triggerBar();
			}

			this._countNumber();
		},

		_countNumber: function() {
			this._numberElement = this.wrapper.querySelector( '.fl-number-string .fl-number-int' );

			requestAnimationFrame( this._countNumberStep.bind( this ) );
		},

		_countNumberStep: function( now ) {
			if ( ! this._numberStart ) {
				this._numberStart = now;
			}

			var progress = ( now - this._numberStart ) / this.speed;

			this._numberElement.innerHTML = FLBuilderNumber.addCommas( Math.ceil( this.number * progress ) )

			if ( progress <= 1 ) {
				requestAnimationFrame( this._countNumberStep.bind( this ) );
			} else {
				this._numberElement.innerHTML = FLBuilderNumber.addCommas( this.number );
			}
		},

		_triggerCircle: function() {
			var bar    = this.wrapper.querySelector( '.fl-bar' ),
				r      = parseInt( bar.getAttribute( 'r' ), 10 ),
				circle = Math.PI * (r * 2),
				max    = this.type == 'percent' ? 100 : this.max,
				val    = Math.max( 0, Math.min( this.number, max ) );

			if ( this.type == 'percent' ) {
				var pct = ( ( 100 - val ) / 100) * circle;
			} else {
				var pct = ( 1 - ( val / max ) ) * circle;
			}

			requestAnimationFrame( function() {
				bar.style.transitionDuration = this.speed + 'ms';
				bar.style.strokeDashoffset   = pct;
			}.bind( this ) );
		},

		_triggerBar: function() {
			var bar = this.wrapper.querySelector( '.fl-number-bar' );

			if ( this.type == 'percent' ) {
				var number = this.number > 100 ? 100 : this.number;
			} else {
				var number = Math.ceil( ( this.number / this.max ) * 100 );
			}

			requestAnimationFrame( function() {
				bar.style.transitionDuration = this.speed + 'ms';
				bar.style.transform          = 'scaleX( 1 )';
			}.bind( this ) );
		}

	};

})();