const rippleBtns = document.getElementsByClassName("ripple");

function createRipple(e) {
	let r = document.createElement("span"),
		t = e.clientX - e.target.getBoundingClientRect().left,
		l = e.clientY - e.target.getBoundingClientRect().top;
	r.style.left = t + "px", r.style.top = l + "px", e.target.appendChild(r);
	let n = setTimeout(() => {
		r.remove()
	}, 1e3);
	e.target.addEventListener("mouseout", function() {
		clearTimeout(n), r.remove()
	})
}
for(let i = 0; i < rippleBtns.length; i++) {
	let e = rippleBtns[i];
	e.addEventListener("mouseover", createRipple)
}! function() {
	var e = document.querySelector("#rangeSlider");
	if(e) {
		var r = e.querySelectorAll("input[type=range]"),
			t = e.querySelectorAll("input[type=number]");
		r.forEach(function(e) {
			e.oninput = function() {
				var e = parseFloat(r[0].value),
					l = parseFloat(r[1].value);
				e > l && ([e, l] = [l, e]), t[0].value = e, t[1].value = l
			}
		}), t.forEach(function(e) {
			e.oninput = function() {
				var e = parseFloat(t[0].value),
					l = parseFloat(t[1].value);
				e > l && (t[0].value = l, t[1].value = e), r[0].value = e, r[1].value = l
			}
		})
	}
}();
let progress = $("#progress1").LineProgressbar({
		percentage: 100
	}),
	progress2 = $("#progress2").LineProgressbar({
		percentage: 98
	}),
	progress3 = $("#progress3").LineProgressbar({
		percentage: 97
	});
if($(".reveal").length) {
	gsap.registerPlugin(ScrollTrigger);
	document.querySelectorAll(".reveal").forEach(e => {
		let r = e.querySelector("img"),
			t = gsap.timeline({
				scrollTrigger: {
					trigger: e,
					toggleActions: "play none none none"
				}
			});
			autoAlpha: 1
		}), t.from(e, 1.5, {
			xPercent: -100,
			ease: Power2.out
		}), t.from(r, 1.5, {
			xPercent: 100,
			scale: 1.3,
			delay: -1.5,
			ease: Power2.out
		})
}
var i, circlularProgress = document.querySelectorAll(".circularProgressMAF"),
	progressColor = ["#029eff", "#febe02", "#87D37C", "#F89406"],
	rad = Math.PI / 180,
	startArc = 270,
	fontSize = 22;
for(i = 0; i < circlularProgress.length; i++) {
	var r = circlularProgress[i].getContext("2d"),
		t = circlularProgress[i].parentElement.clientWidth;
	circlularProgress[i].width = circlularProgress[i].height = t;
	var l = circlularProgress[i].getAttribute("data-progress-value"),
		n = l / 100 * 360;
	r.arc(t / 2, t / 2, t / 6, startArc * rad, (startArc + n) * rad, !1), r.strokeStyle = progressColor[i], r.lineWidth = 5, r.textAlign = "center", r.font = fontSize + "px arial", r.fillText(l + "%", t / 2, (fontSize + t) / 2), r.stroke()
}

function openNav() {
	document.getElementById("sidebar").style.right = "0px", document.getElementById("overlay").style.width = "100%"
}

function closeNav() {
	document.getElementById("sidebar").style.right = "-460px", document.getElementById("overlay").style.width = "0"
}