(async () => {

let queue = [];

let isPlaying = false;

document.addEventListener("onLoad", onGoalLoad);
document.addEventListener("onEventReceived", onGoalEvent);

const goalCurrent = document.querySelector("#goal-current");

const topText = document.querySelector("#topText");
const botText = document.querySelector("#botText");
const rightText = document.querySelector("#rightText");
const leftText = document.querySelector("#leftText");
let currentAmount = 0;
const alertVolume = 0 * 0.01;
const delayTime = 0;
const colorOne = "#04edfe";
const colorTwo = "#00b2ff";

const resources = await BoostedLoader.load([

"https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie_light.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js",
"https://ext-assets.streamlabs.com/users/140067/SplitText-3-5-1.min.js",
{ name: "goalTimeline", url:
"https://assets.codepen.io/3256958/circle.json" }
]);

gsap.registerPlugin(SplitText);

const goalTimeline = lottie.loadAnimation({

container: document.querySelector("#goal-timeline"),
renderer: "svg",
loop: false,
autoplay: false,
animationData: resources.goalTimeline
});

const gradientColors = [{ offset: '0%', color: colorOne }, { offset: '100%',

color: colorTwo }];
runUpdateSvgFilterGradient('gradientfill', gradientColors);

function runUpdateSvgFilterGradient(className, colors) {

const gradients = document.getElementsByClassName(className);

for (let i = 0; i < gradients.length; i++) {

let el = gradients[i];

const fill = getComputedStyle(el).getPropertyValue('fill');

const stroke = getComputedStyle(el).getPropertyValue('stroke');

let defFillId = fill.match(/url\("#(.*)"\)/i) || [];

let defStrokeId = stroke.match(/url\("#(.*)"\)/i) || [];
let defIds = defFillId;

if (defStrokeId.length) {
defIds = defStrokeId;
}
 if (defIds.length) {
const def = defIds[1];
const svgDefinition = document.getElementById(def);

const gradient = colors.map(color => {

let stopColor = color.color;
let stopOpacity = color.hasOwnProperty('opacity') ? color.opacity : 1;
return `<stop offset="${color.offset}" stop-color="${stopColor}" stop-
opacity="${stopOpacity}"/>`;
});

svgDefinition.innerHTML = gradient.join('');

colors.forEach(function(color, index) {
let stopColor = color.color;
let stopOpacity = color.hasOwnProperty('opacity') ? color.opacity : 1;
svgDefinition.children[index].setAttribute('style', `stop-color: $
{stopColor}`);
svgDefinition.children[index].setAttribute('style', `stop-opacity: $
{stopOpacity}`);
});
}
}
}

const proxy = {
frame: goalTimeline.firstFrame
};

//let seconds = {time} * 60;

const timelineAnimation = gsap.to(proxy, seconds,{
frame: goalTimeline.firstFrame + goalTimeline.totalFrames - 1,
onComplete: hideAmount,
onUpdate() {goalTimeline.goToAndStop(proxy.frame, true);}
});

function hideAmount() {
const hide = gsap.timeline({});
var mainImg = document.getElementById('mainImg');
hide.to("#goal-current", {duration: 1, opacity: 0})
hide.fromTo("#mainImg", {duration: 2, scale: 1}, {ease: "power4.inOut",
scale: 0})
hide.to("#mainImg", {ease: "power4.inOut", scale: 1})
hide.add( function(){mainImg.src=fieldData.image1.value;}, "-=.5")
currentAmount = 0;
}

gsap.set("#goal-widget", {
opacity: 1
});

const parseQueue = () => {

if (isPlaying) return;
if (!queue.length) return;
isPlaying=true;
const data = queue.shift();
alertQueue(data);
}
function onGoalLoad(e) {
console.log(e);
$('#goal-current').css('opacity', "0");
fieldData = e.detail.custom_json;
seconds = 30 * 60;
$('circle').css("stroke-opacity", "1");
goalCurrent.textContent = currentAmount;
var mainImg = document.getElementById('mainImg');
mainImg.src = fieldData.image1.value;
}

function onGoalEvent(e) {
let event = e.detail;
var str = event.tag;
var giftedevent = str.includes("gifted