// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
	// wait until window, stylesheets, images, links, and other media assets are loaded
	window.onload = function() {
		
		var main_tl = new TimelineLite( {onComplete:loop} ),
			dur = 0.3,
			hold = 1,
			h = -250;
		

		main_tl
			.add('heroIn')
			.from(hero, dur*5, {yPercent:h, ease: Back.easeOut.config(0.85)}, "heroIn")
			.add(limbIn(armLeft, "left", 15), "heroIn+=0.1")
			.add(limbIn(armRight, "right", 15), "heroIn+=0.1")
			.add('cape', "heroIn")
			.add(limbIn(capeLeft, "left"), "cape")
			.add(capeDeform('clothLeftP', "M0 0 L25 0 Q50 120, 32 160 Q10 100, -40 100 Z"), "cape")
			.add(limbIn(capeRight, "right"), "cape")
			.add(capeDeform('clothRightP', "M50 0 L90 100 Q40 100, 18 160 Q0 120, 25 0 Z"), "cape")

		// Wait a little
			.add("heroOut", "+="+hold)
			.add(limbOut(armLeft, "left", 25, dur*1.5), "heroOut")
			.add(limbOut(armRight, "right", 25, dur*1.5), "heroOut")
			.to(hero, dur*3, {yPercent:h, ease:Back.easeIn.config(2.5)}, "heroOut+=0.15")
			.add(limbOut(capeLeft, "left", 10, dur*1.5), "heroOut+=0.2")
			.add(capeDeform('clothLeftP', "M0 0 L25 0 Q50 120, 32 160 Q10 150, -20 150 Z", dur), "heroOut+=0.2")
			.add(limbOut(capeRight, "right", 10, dur*1.5), "heroOut+=0.2")
			.add(capeDeform('clothRightP', "M50 0 L70 150 Q40 150, 18 160 Q0 120, 25 0 Z", dur), "heroOut+=0.2");



		function loop() {
			TweenMax.delayedCall(1, function() { main_tl.play(0); } );
		}


		function limbIn (target, side, amount, dur) {
				var tl = new TimelineLite();
				var amount = amount || 20;
				var dur = dur || 1;

				var orientation = checkSide(side);

				tl.add("start")
						.to(target, dur, {rotation:"+="+(orientation[0]*amount), transformOrigin:orientation[1], ease:Power1.easeOut}, "start")
						.to(target, dur*0.35, {rotation:"-="+(orientation[0]*(amount*0.5)), transformOrigin:orientation[1], ease:Power1.easeIn})
						.to(target, dur, {rotation:0, transformOrigin:orientation[1], ease:Back.easeOut.config(4)})

				return tl;
		}


		function limbOut(target, side, amount, dur) {
				var tl = new TimelineLite();
				var amount = amount || 20;
				var dur = dur || 1;

				var orientation = checkSide(side)

				tl.add("start")
						.to(target, dur, {rotation:"+="+(orientation[0]*amount), transformOrigin:orientation[1], ease:Power1.easeInOut})
						.to(target, dur*2, {rotation:"-="+(orientation[0]*amount), transformOrigin:orientation[1], ease:Back.easeOut.config(5)})

				return tl;
		}



		function checkSide(side) {
				var dir, origin;

				if(side === "left") {
						dir = -1;
						origin = "15% 5%";
				} else {
						dir = 1;
						origin = "75% 5%";
				}

				return [dir, origin];
		}



		/* *********
				Credit where credit is due:
				capeDeform(), update() and parsePath()
				originally by BlakeBowen
				https://codepen.io/osublake/pen/RPKdQz
				
				I modified Blake's original code so it would work in this example. I needed to be able to have it affect several different elements with the same id to illustrate my point in the blog post.
		************* */
		function capeDeform(element, path, dur) {
				var dur = dur || 1;

			var cloth = document.getElementById(element);
				var path1 = cloth.getAttribute("d"); // The original path
				var path2 = path; // The new path to deform into
				var path3 = path1 // The original path - to deform back into original shape

				path1 = parsePath(path1);
				path2 = parsePath(path2);
				path3 = parsePath(path3);

				var tl = new TimelineLite();

				tl.to(path1, dur, { endArray: path2, onUpdate: update, onUpdateParams: [element, path1], ease:Power1.easeOut })
						.to(path2, dur, { endArray: path3, onUpdate: update, onUpdateParams: [element, path2] }, "+=0.1")

				return tl;
		}

		function update(element, path) {
			TweenMax.set("#"+element, {attr:{d:path.string()}})
		}

		function parsePath(string) {

				// Split the string into path commands and points
				var pathExp = /[achlmrqstvz]|(-?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/ig;
				var path = string.match(pathExp).map(function(n) { return isNaN(+n) ? n : +n; });

				// The first element needs to be a number, so remove if it's not
				// Calling the string method will return the path with the removed element
				path.prefix = isNaN(path[0]) ? path.shift() : "";
				path.string = function() { return path.prefix + path.join(" "); };

				return path;
		}
	}
});