<!DOCTYPE html>
<html lang="en">

<!--

    (C) 2020 tuomo@smartpx.fi (MIT License)
	Demo template for SPX-GC. See SPXGCTemplateDefinition -object below for data field descriptions.
	
	A simple color bumper. This template has an out mode of "none" which means the animation can only
	be started and the play indicator is never "lit" in GC. There is also a "timed out" method 
	available. Just give a numeric value to "out" parameter, such as 5000 (= 5 seconds).

	Need custom templates?
	Let me know 😀

-->
  <html>
    <head>
			<title>SmartPX Bumper Demo</title>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
			<script type="text/javascript" src="js/gsap3.2.6.min.js"></script>
			<script type="text/javascript" src="js/webcg-framework.umd.js"></script>
			<script type="text/javascript" src="js/spx_cmdhandler.1.2.js"></script>

			<script>
				// Scripts strictly effecting only THIS template are 
				// stored within this file. Common scripts are in 
				// external js-files.
				function runAnimationIN() {
					console.log('Runn IN');
					let dur = 0.3;
					gsap.to(".GROW",      { opacity: "1" },                { delay: 0.0, duration: 0.5});
					gsap.fromTo(".GROW",  { width:                 "0%" }, { delay: 0.0, duration: 0.6, width:              "100%",  ease: "Power2.easeIn"});
					gsap.fromTo(".GROW",  { borderRightWidth:     "0px" }, { delay: 0.0, duration: 0.6, borderRightWidth:  "200px",  ease: "Power2.easeIn"});
					gsap.fromTo(".GROW",  { borderRightWidth:   "200px" }, { delay: 0.7, duration: 0.6, borderRightWidth:    "0px",  ease: "Power1.easeIn"});
					gsap.fromTo(".SHRI",  { width:               "100%" }, { delay: 0.7, duration: 0.5, width:                "0%",  ease: "Power1.easeIn"});
					gsap.fromTo(".GROW",  { opacity:                "1" }, { delay: 1.1, duration: 0.3, opacity:              "0"});
				}
			</script>
			

			<script type="text/javascript">
				window.SPXGCTemplateDefinition = {
					"defversion": "1",
					"description": "Bumper",
					"playserver": "OVERLAY",
					"playchannel": "1",
					"playlayer": "18",
					"webplayout": "18",
					"out": "none",
					"uicolor": "7",
					"DataFields": [
						{
							"field" : "f0",
							"ftype" : "caption",
							"title" : "",
							"value" : "A simple color wipe"
						}
					]
				};
			</script>

			<link rel="stylesheet" type="text/css" href="css/spx_layout.css" />
			<link rel="stylesheet" type="text/css" href="css/spx_fonts.css" />
			<link rel="stylesheet" type="text/css" href="customize.css" />
			<style type="text/css">
				.GROW
					{
						position: absolute;
						width: 10%;
						height: 100%;
						border: 0px solid yellow;
						border-right: 0px solid var(--spx-bgcol3-color);
						bottom: 0px;
						top: 0px;
						opacity:0;
					}

				.SHRI
					{
						position: absolute;
						width: 100%;
						height: 100%;
						border: 0px solid green;
						right: 0px;
						border-left: 0px solid var(--spx-bgcol1-color);
					}


				.COLOR
					{
						background-color: var(--spx-accent-color);
						width: 100%;
						height: 100%;
					}
			
			</style>
</head>
	
	
	<!-- can put this into body for testing onload="setTimeout(play(),100);" -->
    <body>
		<div class="GROW">
			<div class="SHRI">
				<div class="COLOR"></div>
			</div>
		</div>

		<script>
			runAnimationIN()
		</script>


  	</body>
  </html>