var imgContainer = $("#imgContainer"),
	progressBar = $("#progressBar"),
	
	btn1 = $("#btn1"),
	btn2 = $("#btn2"),
	
	//images variables
	imagesAmount = 6,//total images being loaded
	loadedCount = 0,//current number of images loaded
	currentImages,//images already present in the container

	//we get the full width of the progress bar it depens on display width
	progBarWidth = progressBar.outerWidth(),
	//how much progress every image means
	progressUnit = 1 / imagesAmount,
	currentProgress,//the current progress of the total images being downloaded
	percentageLoaded;//total percent of images already loaded

/*
---------------------------------------------------------------------
		ADD IMAGES CODE
---------------------------------------------------------------------
*/
var getWidth = gsap.utils.random(100, 150, 5, true);
function addImages() {
	//show the percentage loaded text
	gsap.to([percentageContainer,percentageLoad], {
    scale:1,
    opacity:1
  });
	
	for(var i = 0; i < imagesAmount; i++) {
		//this vars are for getting random images
		//for real case scenario this is not needed. different approach for that type
    var imgUrl = "https://source.unsplash.com/random/300x300&" + i + "/?forest";
    var imgString = `<img src=${imgUrl} height="100" />`;
		//add the image at the beggining of the container
		imgContainer.prepend(imgString);
	}
	imgContainer.imagesLoaded()//we set up the images loaded instance to work in the image container
		.progress(loadProgress);//we add the deferred call to the images loaded function
}
//------ADD IMAGES CODE END----------------------------------------//

/*
---------------------------------------------------------------------
		CANVAS CIRCLE CODE
---------------------------------------------------------------------
*/
var canvas = document.getElementById('canvas'),
	ctx = canvas.getContext('2d'),//circle context
	segmentObj = {seg:0},
	totalSegments = 150;//number of circle segments, more segments smoother animation

//canvas initial set up
ctx.strokeStyle = 'rgb(0,0,200)';
ctx.lineWidth = 5;
ctx.lineCap = 'round';

//canvas works with radians, but we're feeding degrees so they need to be converted before they're used
function getRadians(degreesValue) {
	var radiansValue = (Math.PI / 180) * degreesValue;
	return radiansValue;
}

//function to draw the arc/circle
//the params are start angle, end angle and boolean for clokwise or counter clockwise
function manualCircle(start, end, clock) {

	ctx.clearRect(0,0,220,220);//we have to clear the canvas otherwise the line looks horrible
	ctx.beginPath();
	ctx.arc(110, 110, 100, start, end, clock);
	ctx.stroke();
}

//update arc/circle drawing
function circleUpdate() {
	//degrees of the arc, could be less, in this case we create a full circle
	var amplitude = 360,
		step = amplitude / totalSegments,
		endAngle = (step  * (segmentObj.seg + 1));//the new angle for the next step in the arc
	
	//draw the new arc 
	manualCircle(-getRadians(0), -getRadians(endAngle), true);
}
//------CANVAS CIRCLE CODE END-------------------------------------//

/*
---------------------------------------------------------------------
		PROGRESS CODE
---------------------------------------------------------------------
*/
//this function executes everytime an image is complete
function loadProgress(imgLoad, image) {
	//one more image has been loaded. this counts even for the images already loaded
	loadedCount++;
	//we put the image in correct position
	gsap.to(image.img, { top: 0 });
	
	//since there could be other images in the container we check that
	//with this the progress bar and percentage loaded are updated by the 
	//number of images being loaded and not the total in the container
	if( (loadedCount - currentImages.length) > 0 ) {
		currentProgress = progressUnit * (loadedCount - currentImages.length);
		gsap.to(progressTl, {
      duration: 0.7,
      progress: currentProgress,
      ease: "none"
    });
	}
}

//progress animation instance. the instance's time is irrelevant, can be anything but 0 to void  immediate render
var progressTl = gsap.timeline({
  paused:true,
  onUpdate:progressUpdate,
  onComplete:loadComplete,
  defaults: {
    duration: 1,
    ease: "none",
  },
});

progressTl
	//tween the progress bar width
	.to(progressBar, { width:progBarWidth, })
	//tween the amount of circle segments to set the cricle new angle
	.to(segmentObj,  { seg:totalSegments, snap:'seg', }, 0);

//as the progress bar witdh updates and grows we put the precentage loaded in the screen
function progressUpdate() {
	//the percentage loaded based on the tween's progress
	percentageLoaded = Math.round(progressTl.progress() * 100);
	//we put the percentage in the screen
	$("#percentageLoad").html(percentageLoaded + ' %');
	
	circleUpdate();
}

//this function resets progress bar width, set progress and percentage loaded to 0
function resetProgress() {
	//set the progress bar to width 0, no progress
	gsap.set(progressBar, { width:0 });
	progressTl.progress(0);
	percentageLoaded = 0;
	loadedCount = 0;
}
//------PROGRESS CODE END------------------------------------------//

/*
---------------------------------------------------------------------
		BUTTONS EVENTS
---------------------------------------------------------------------
*/
btn1.click(function() {
	resetProgress();//reset the progress
	currentImages = imgContainer.find("img");//how many images there are
	addImages();//run the function to add the images
	setupSipnner();//play the spinner line
});

btn2.click(function() {
	resetProgress();//reset the progress
	imgContainer.empty();//remove the images from the container
});
//------BUTTONS EVENTS END-----------------------------------------//

/*
---------------------------------------------------------------------
		SPINNER CODE
---------------------------------------------------------------------
*/
//spinner variables
var spinContainer = $("#spinnerContainer"),
	spinElements = $(".spinDot"),
	spinAngleSet = 360 / spinElements.length,
	spinSpeed = 0.055,//smaller the number faster the spin
	spinLine = gsap.timeline({ paused:true, repeat:-1, delay:.55 }); 

gsap.set(spinContainer, { perspective:300 });

function setupSipnner() {
	gsap.set(spinElements, {opacity:1});
	$.each(spinElements, function(index, element) {
		var alpha = (0.1 * index) + .3;
			 
		gsap.to(element, {
      rotationY: (( index + 1 ) * spinAngleSet),
      transformOrigin: '50% 50% -100px',
      autoAlpha: alpha,
    });
			 
		spinLine.set(spinElements, {
      rotationY:('+=' + spinAngleSet),
      transformOrigin:'50% 50% -100px',
      ease: "none",
      delay: spinSpeed,
    });
	});
	
	spinLine.play();//play the spinner line
}
//------SPINNER CODE END-------------------------------------------//

/*
---------------------------------------------------------------------
		LOAD COMPLETE CODE
---------------------------------------------------------------------
*/
//load completes
function loadComplete() {
	spinLine.pause();
	gsap.to(spinElements, { rotationY: 0 });
	gsap.to(spinElements, { opacity: 0, delay: 0.5, duration: 0.25});
	spinLine.seek(0);
	
	gsap.to([percentageContainer,percentageLoad], {
    scale:0, opacity:0, delay:.5
  });
}
//------LOAD COMPLETE CODE END-------------------------------------//