<script type="text/javascript">
	let content = jQuery("#code_content");

	content.append("<div id='ball'> </div>");

	let ball = jQuery("#ball"),
		fall = false,
		fallSpeed = 0.5,
		fallRepetition = 1,
		fallTick = 0,
		falling = null,
		bouncing = null,
		bounceSpeed = 0.5,
		bounceRepetition = 1,
		bounceTick = 0,
		bounceTarget = 0,
		bounceStep = 0,
		targetHeight = 0,
		startingHeight = 0,
		inertia = 0,
		inertiaSide = 1,
		inertiaTick = 0,
		verticalInertia = 0,
		verticalInertiaTick = 0,
		oldMovement = 0,
		oldYMovement = 0,
		moving = null,
		yMoving = null,
		rotation = 0,
		floating = 0;

	ball.css({
		'background-color': '#fafafa',
		'height': '4rem',
		'width': '4rem',
		'border-radius': '100%',
		'position': 'absolute',
		'bottom': '0',
		'left': '25%',
		'background-image': 'url("https://www.servizitrepuntozero.com/wp-content/uploads/2022/03/cropped-loghetto.png")',
		'background-position': 'center',
		'background-size': '90%',
		'background-repeat': 'no-repeat',
		'transform': 'rotate(0deg)',
	});

	content.css({
		'background': '#2c3e50',
		'height': '35rem',
		'width': '100%',
		'position': 'relative',
	});

	function moveBall(e) {
		let parentOffset = ball.parent().offset();
		let pageX = 0;
		let pageY = 0;

		if(e.pageX !== undefined) {
			pageX = e.pageX;
			pageY = e.pageY;
		} else {
			pageX = e.touches[0].pageX;
			pageY = e.touches[0].pageY;
		}

		let relX = pageX - parentOffset.left - (ball.width()/2);
		let relY = pageY - parentOffset.top - (ball.height()/2);

		let rightBoundary = pageX - parentOffset.left + (ball.width()/2);
		let bottomBoundary = pageY - parentOffset.top + (ball.height()/2);

		e.preventDefault();

		if(relX > 0 && rightBoundary < ball.parent().width()) {
			ball.css('left', relX);

			if(oldMovement !== 0) {
				inertia = (relX - oldMovement);
				if(inertia > 0) {
					inertiaSide = 1;
				} else {
					inertiaSide = -1;
				}
				inertia = Math.abs(inertia);
			}
			oldMovement = relX;
		}

		if(relY > 0 && bottomBoundary < ball.parent().height()) {
			ball.css('top', relY);
			if(oldYMovement !== 0) {
				verticalInertia = parseInt((relY - oldYMovement) * 0.5);
			}
			oldYMovement = relY;
		}

		fall = true;
		startingHeight = ball.parent().height() - ball.css('top').substring(0, ball.css('top').length - 2);
	}

	function inertiaBall() {
		inertiaTick++;
		let target = 5+inertia;
		if(inertia <= 2) {
			target *= 1;
		} else if(inertia < 5) {
			target *= 6;
		} else if(inertia < 10) {
			target *= 4;
		}
		if(inertiaTick >= target && (inertia > 5 || (inertia <= 5 && falling === null && bouncing == null)))
		{
			inertiaTick = 0;
			if(inertia > 19) {
				inertia -= parseInt(inertia/10);
			} else {
				inertia--;
			}
			console.log(inertia);
		}

		if(inertia === 0) {
			console.log('fermi');
			clearInterval(moving);
			moving = null;
		} else {
			let left = parseInt(ball.css('left').substring(0, ball.css('left').length - 2));
			let rightLimit = ball.parent().width() - ball.width();
			let distance = 0.45;
			let boundary = ball.parent().height() - ball.height() - 1;
			let height = parseInt(ball.css('top').substring(0, ball.css('top').length - 2));

			for(let i = 0; i < inertia; i++) {

				if(inertia <= 2) {
					distance = 0.2;
				}

				if((left + (distance * inertiaSide)) > rightLimit || (left + (distance * inertiaSide)) < 0) {
					console.log('rimabalza');
					if((left + (distance * inertiaSide)) > rightLimit) {
						ball.css('left', rightLimit - ball.width() + 'px');
					} else {
						ball.css('left', '1px');
					}
					inertiaSide *= -1;
				}
				left += (distance * inertiaSide);

				if(inertia <= 2) {
					rotation += (0 * inertiaSide);
				} else {
					rotation += (1 * inertiaSide);
				}

				ball.css('transform', 'rotate(' + rotation + 'deg)');
				ball.css('left', left + 'px');
			}
		}
	}

	function verticalInertiaBall() {
		verticalInertiaTick++;
		if(verticalInertiaTick == 3) {
			verticalInertiaTick = 0;
			verticalInertia++;
		}

		if(verticalInertia >= 0) {
			clearInterval(yMoving);
			falling = setInterval(fallBall, 1);
		}

		let height = parseInt(ball.css('top').substring(0, ball.css('top').length - 2));

		if(height - (0.5 * Math.abs(verticalInertia)) < 0) {
			ball.css('top', 0 + 'px');
			verticalInertia *= -1;
			clearInterval(yMoving);
			falling = setInterval(fallBall, 1);
		} else {
			for(let i = 0; i <= Math.abs(verticalInertia); i++) {
				height -= 0.5;
				ball.css('top', height + 'px');
			}
		}
	}

	function fallBall() {
		fallTick++;
		if(fallTick === 15) {
			fallTick = 0;
			fallRepetition++;
			if(verticalInertia > 0) {
				verticalInertia--;
			}
		}

		let height = parseInt(ball.css('top').substring(0, ball.css('top').length - 2));
		let boundary = ball.parent().height() - ball.height() - 1;
		if(height + (fallSpeed * fallRepetition) > boundary) {
			ball.css('top', boundary + 'px');
			fall = false;
			clearInterval(falling);
			falling = null;
			targetHeight = parseFloat(parseFloat(startingHeight*0.8 + verticalInertia*10).toFixed(2));
			bounceRepetition = bounceStep = fallRepetition;
			bounceStep += verticalInertia;
			bounceTarget = 1;
			fallRepetition = 1;
			bouncing = setInterval(fallBounceBall, 1);
		} else {
			for(let i = 0; i <= (fallRepetition + verticalInertia); i++) {
				height += fallSpeed;
				ball.css('top', height + 'px');
			}
		}
	}

	function fallBounceBall() {
		let height = parseInt(ball.css('top').substring(0, ball.css('top').length - 2));
		if(height <= 1) {
			clearInterval(bouncing);
			bouncing = null;
			falling = setInterval(fallBall, 1);
			startingHeight = targetHeight;
		} else {
			if((ball.parent().height() - height) < targetHeight) {
				for(let i = 0; i <= (bounceRepetition + verticalInertia); i++) {
					height -= bounceSpeed;
					if((ball.parent().height() - height) > ((targetHeight/bounceStep) * bounceTarget)) {
						bounceTarget++;
						if(bounceRepetition > 1) {
							bounceRepetition--;
						}
						if(verticalInertia > 0) {
							verticalInertia--;
						}
					}
					ball.css('top',height + 'px');
				}
			} else {
				startingHeight = targetHeight;
				clearInterval(bouncing);
				bouncing = null;
				if(targetHeight > ball.height()) {
					falling = setInterval(fallBall, 1);
				}
			}
		}
	}

	function ballCatch() {
		targetHeight = 0;
		verticalInertia = 0;
		inertia = 0;
		clearInterval(falling);
		clearInterval(yMoving);
		clearInterval(moving);
		clearInterval(bouncing)
		bouncing = null;
		falling = null;
		moving = null;
		console.log('ciaooo');
		content[0].addEventListener('touchmove', moveBall);
		content.on('mousemove', moveBall);
	}

	function ballRelease() {
		content[0].removeEventListener('touchmove', moveBall);
		content.off('mousemove', moveBall);
		if(fall) {
			if(verticalInertia < 0) {
				yMoving = setInterval(verticalInertiaBall, 1);
			} else {
				if(falling === null) {
					falling = setInterval(fallBall, 1);
				}
			}
			if(inertia !== 0 && moving === null) {
				moving = setInterval(inertiaBall, 1);
			}
		}
	}

	ball[0].addEventListener('touchstart', ballCatch);
	ball.mousedown(ballCatch);

	document.addEventListener('touchend', ballRelease);
	document.addEventListener('touchcancel', ballRelease);
	jQuery(document).mouseup(ballRelease);
</script>