<head>
	<style type="text/css">
	#mc_content_lc::before { content: ""; width: 50%; height: 100%; float: left; shape-margin: 4%; shape-outside:
		polygon(0 0, 100% 0, 50% 6%, 23.4% 17.3%, 6% 32.6%, 0 50%, 6% 65.6%, 23.4% 82.7%, 50% 94%, 100% 100%, 0 100%)}
	#mc_content_rc::before { content: ""; width: 50%; height: 100%; float: right; shape-margin: 4%; shape-outside:
		polygon(0% 0%, 100% 0%, 100% 100%, 2% 100%, 50% 94%, 76.6% 82.7%, 94% 65.6%, 100% 50%, 94% 32.6%, 76.6% 17.3%, 50% 6%)}
	#mc_content_llc::before { content: ""; width: 50%; height: 50%; float: left; shape-margin: 4%; shape-outside: polygon(0 0%, 6% 31.2%, 23.4% 65.4%, 50% 88%, 100% 100%, 0 100%)}
	#mc_content_rlc::before { content: ""; width: 50%; height: 50%; float: right; shape-margin: 4%; shape-outside: polygon(100% 100%, 2% 100%, 50% 88%, 76.6% 65.4%, 94% 31.2%, 100% 0%)}
	#mc_content_lr::before { content: ""; width: 50%; height: 100%; float: left; shape-margin: 4%; shape-outside: polygon(0 0, 100% 0, 100% 100%, 0% 100%)}
	#mc_content_rr::before { content: ""; width: 50%; height: 100%; float: right; shape-margin: 4%; shape-outside: polygon(0 0, 100% 0, 100% 100%, 0% 100%)}
	.page_h { font: bold 50px Verdana; position: absolute; width: 100%; text-align: center; margin-top: 64px; color: #404080 }
	.categories { border: 5px solid; border-collapse: collapse; border-color: #202040 }
	.categories td, .categories tr { border: 3px solid; width: auto; font: bold 30px Verdana; border-collapse: collapse; border-color: #202040 }
	</style>
</head>
<body style="margin: 0px; font: 20px Verdana; text-align: justify; color: #202040">
	<canvas id="screen" style="position: fixed"></canvas>
	<div style="width: 1600px; height: 900px; margin-left: auto; margin-right: auto">
		<canvas id="main_bg" style="position: absolute; width: 1600px; height: 900px" width="1600" height="900"></canvas>
		<svg id="main_svg" style="width: 1600px; height: 900px; display: none; position: absolute">
			<style>.buttonText { font: bold 30px Verdana; text-shadow: 2px 2px 2px #000; fill: #FFFFFF }</style>
			<a href="#" onclick="ChangePage($(&quot;page_about&quot;))" id="button0">
				<path fill="#004080" d="M570,200 l-350,0 c-40,0,-80,80,-80,100 l400,0 z"/>
				<path fill="#8080F0" d="M570,200 l-350,0 c-30,0,-50,30,-50,40 c10,-10,0,-10,100,-10 l300,0 z"/>
				<path stroke="#002040" stroke-width="10" fill="none" d="M570,200 l-350,0 c-40,0,-80,80,-80,100 l400,0 z"/>
				<text x="190" y="260" class="buttonText">O AKCI</text>
			</a>
			<a href="#" onclick="ChangePage($(&quot;page_info&quot;))" id="button1">
				<path fill="#004080" d="M490,300 l-350,0 c-10,0,-40,80,-40,100 l400,0 z"/>
				<path fill="#8080F0" d="M490,300 l-350,0 c-10,0,-20,30,-20,40 c10,-10,0,-10,100,-10 l300,0 z"/>
				<path stroke="#002040" stroke-width="10" fill="none" d="M490,300 l-350,0 c-10,0,-40,80,-40,100 l400,0 z"/>
				<text x="140" y="360" class="buttonText">INFORMACE</text>
			</a>
			<a href="#" onclick="ChangePage($(&quot;page_register&quot;))" id="button2">
				<path fill="#004080" d="M450,400 l-350,0 c-10,20,-10,80,0,100 l400,0 z"/>
				<path fill="#8080F0" d="M450,400 l-350,0 c-5,0,-5,30,-5,40 c10,-10,0,-10,100,-10 l300,0 z"/>
				<path stroke="#002040" stroke-width="10" fill="none" d="M450,400 l-350,0 c-10,20,-10,80,0,100 l400,0 z"/>
				<text x="120" y="460" class="buttonText">REGISTRACE</text>
			</a>
			<a href="#" onclick="ChangePage($(&quot;page_category&quot;))" id="button3">
				<path fill="#004080" d="M450,500 l-350,0 c0,20,30,100,40,100 l400,0 z"/>
				<path fill="#8080F0" d="M450,500 l-350,0 c0,30,50,30,100,30 l300,0 z"/>
				<path stroke="#002040" stroke-width="10" fill="none" d="M450,500 l-350,0 c0,20,30,100,40,100 l400,0 z"/>
				<text x="140" y="560" class="buttonText">KATEGORIE</text>
			</a>
			<a href="#" onclick="ChangePage($(&quot;page_contact&quot;))" id="button4">
				<path fill="#004080" d="M490,600 l-350,0 c0,20,40,100,80,100 l400,0 z"/>
				<path fill="#8080F0" d="M490,600 l-350,0 c0,30,50,30,100,30 l300,0 z"/>
				<path stroke="#002040" stroke-width="10" fill="none" d="M490,600 l-350,0 c0,20,40,100,80,100 l400,0 z"/>
				<text x="190" y="660" class="buttonText">KONTAKTY</text>
			</a>
			<path fill="#002040" d="M750,50 a400,400,0,1,0,1,0 z"/>
		</svg>
		<div id="main_circle" style="background: radial-gradient(circle, #FFF 65%, #BBB 75%); width: 800px; height: 800px; margin-left: 350px; margin-top: 50px; position: absolute">
			<div id="page_main" style="display: initial">
				<img src="logo.png" style="text-align: center; width: auto; height: 450px; position: absolute; margin: auto; left: 0; right: 0;"/>
				<div id="mc_content_lc"><div id="mc_content_rc">
					<div style="padding-top: 500px; font-size: 25px">
					<b><center>Největší mládežnický softballový festival v Evropě, jehož cílem je, aby došlo k navázání přátelství hráček a hráčů na mezinárodní úrovni,
					aby si každý zahrál plus minus stejně, jako jeho spoluhráči v týmu, a aby na tuto akci v dobrém všichni vzpomínali.</b></center>
					
				</div></div></div>
			</div>
			<div id="page_about" style="display: none">
				<div class="page_h">O AKCI</div>
				<div id="pacBottom" style="position: absolute; margin: auto; margin-top: 700px; width: 100%; text-align: center">Strana 1 ze 4</div>
				<svg style="width: 900px; height: 100%; position: absolute">
					<style>.pal_EISF { font: 150px Impact; text-shadow: 4px 4px 2px #000; fill: #444444 }</style>
					<text x="260" y="260" textLength="280">
					<a href="#" onclick="ChangeEISF(0)" class="pal_EISF"><tspan id="pal0" fill="#0164BA">E</tspan></a>
					<a href="#" onclick="ChangeEISF(1)" class="pal_EISF"><tspan id="pal1">I</tspan></a>
					<a href="#" onclick="ChangeEISF(2)" class="pal_EISF"><tspan id="pal2">S</tspan></a>
					<a href="#" onclick="ChangeEISF(3)" class="pal_EISF"><tspan id="pal3">F</tspan></a></text>
					<a href="#" onclick="ChangeEISF((currentEISF + 3) % 4)"><path fill="#EEE" stroke="#DDD" stroke-width="5" d="M305,660 l-50,50 l50,50 l20,0 l-50,-50 l50,-50 z"/></a>
					<a href="#" onclick="ChangeEISF((currentEISF + 1) % 4)"><path fill="#EEE" stroke="#DDD" stroke-width="5" d="M475,660 l50,50 l-50,50 l20,0 l50,-50 l-50,-50 z"/></a>
				</svg>
				<div id="mc_content_lc"><div id="mc_content_rc"><div style="padding-top: 300px">
					<div id="pac0" style="display: initial">První ročník EISF se bude konat v České republice v Praze v areálu pražských Joudrs, ale našim cílem je, aby akce byla tzv. rotující,
					kdy se postupem času mohou měnit města v rámci České republiky, ale i v rámci Evropy. Máme zároveň přislíbenu účast zahraničních hráček a hráčů, ale i trenérů,
					a proto jsme tomu přizpůsobili i termín akce na 10. až 16. července, hned po finálových turnajích Little League Major, Junior a Senior, které se letos konají v Chomutově a Mostě.
					Tento náš přístup symbolizuje slovo <b>EUROPEAN</b>. Chceme mezinárodní setkání.</div>
					
					<div id="pac1" style="display: none">Již před několika lety jsme přemýšleli společně s dalšími trenéry o realizaci setkání hráček a hráčů v rámci turnaje,
					kde budou jednotlivé hráčky a hráči rozděleni do týmů nikoliv dle klubové příslušnosti, a to v našem názvu symbolizuje slovo <b>INDEPENDENT</b>.
					Nezávislost na klubu při naší akci rozšíří kamarádské obzory napříč kluby, ale i národnostmi. Cílem je přivést zahraniční trenéry, kteří budou jednotlivé týmy vést společně s trenéry z České republiky.</div>
					
					<div id="pac2" style="display: none">Poslední tři ročníky jsme se jako kouči zúčastnili  bezva akce EBT (baseball), ale této akci chyběla přítomnost opačného pohlaví na hřišti (až na výjimky).
					Softball nám umožní udělat tuto akci za přítomnosti jak holek, tak kluků. <b>SOFTBALL</B> je sport, který hrají holky i kluci. Je to sport, který lze hrát na různých úrovních,
					a v neposlední řadě i v různých kategoriích. Je to sport, kde mohou vedle sebe hrát jak mistryně Evropy, tak úplní začátečníci, a o dobré akce a legraci určitě není nouze.</div>
					
					<div id="pac3" style="display: none">Slovem <b>FESTIVAL</b> označujeme obvykle organizovanou sadu zvláštních společenských událostí, jak uvádí wikipedie, i toto bude sada společenských událostí.
					Sport, přátelství, zábava. Součástí EISF nebude jen zápolení v softballových zápasech, bude i hromada doprovodného programu, různá vystoupení, hudba, tanec, každý večer vyhlášení mimořádných výkonů,
					hodně fotek, rozhovorů atd. Proto jsme zakomponovali do názvu i slovo festival. European Independent Softball Festival 2023 bude akce, na kterou se budou chtít hráčky a hráči vracet. Budeš to i Ty
					<p>… někdo se může ptát, proč jsme do názvu nezakomponovali i slovo YOUTH, vyjadřující určení EISF pro mládež, ale i pro nás dospěláky to bude zážitek, tudíž akce pro všechny ;-)</div>
					
				</div></div></div>
			</div>
			<div id="page_info" style="display: none">
				<div class="page_h">INFORMACE</div>
				<div id="mc_content_lc"><div id="mc_content_rc">
					<!--div style="position: absolute">
					Místo:<br>Termín:<br>Ubytování:<br>Strava:<br>Pitný režim:<br>Dresy:<br>Hrací míče:<br>Rozhodčí:<br>Trenéři:<br>Počet zápasů:<br>Odměny:<br>Cena:<br>
					</div-->
					<div style="padding-top: 150px">
					<b>Místo:</b> areál SK JOUDRS PRAHA, Dolákova 555, Praha 8<br>
					<b>Termín:</b> od pondělka 10. července do soboty 16. července<br>
					<b>Ubytování:</b> vlastní, nebo v tělocvičnách SK JOUDRS PRAHA za 100,- Kč/noc<br>
					<b>Strava:</b> zajištěny obědy a večeře pro všechny zaregistrované počínaje večeří 10. července<br>
					<b>Pitný režim:</b> zajištěn v rozsahu vody a iontových nápojů na jednotlivé zápasy<br>
					<b>Dresy:</b> hráčky a hráči obdrží dres s vlastním zvoleným číslem, který jim zůstane. Dále obdrží turnajové tričko a kšilt v případě holek, kšiltovku v případě kluků<br>
					<b>Hrací míče:</b> na každý zápas budou dodané kvalitní nové míče příslušné velikosti a typu<br>
					<b>Rozhodčí:</b> každý zápas budou rozhodovat 2 rozhodčí<br>
					<b>Trenéři:</b> každý tým bude mít svého vlastního hlavního trenéra a asistenta<br>
					<b>Počet zápasů:</b> každý tým odehraje minimálně 8 zápasů, kdy všichni hráči musí odehrát podobné množství směn (plus/minus 1)<br>
					<b>Odměny:</b> diplomy, medaile, poháry, individuální ceny zajištěny<br>
					<b>Cena:</b> cena 4 950,- Kč za hráčku nebo hráče<br>
					</div>
				</div></div>
			</div>
			<div id="page_register" style="display: none">
				<div class="page_h">REGISTRACE</div>
				<a href="https://forms.gle/Q2q4DY2FFvmP3NJM9"><div style="background-color: #0164BA; position: absolute; margin: auto; left: 0; right: 0; font: bold 40px Verdana; color: #FFF;
				width: 500px; height: 100px; top: 500px; border-radius: 20px"><div style="position: absolute; width: 100%; text-align: center; top: 50%; transform: translateY(-50%)">Zaregistrovat se</div></div></a>
				<div id="mc_content_lc"><div id="mc_content_rc">
					<div style="padding-top: 200px">
					Zaregistrovat se do naplnění kapacity, kdy v každém týmu bude ideálně dvanáct hráček nebo hráčů, maximálně třináct. Po vyplnění přihlášky Vám budou zaslány podrobné informace.
					Ubytování je možné v tělocvičnách Joudrs za 100,-/noc (operuje SK Joudrs Praha), a dále jednáme o ubytovacích prostorách na VŠ kolejích a pensionech v okolí. 
					</div>
				</div></div>
			</div>
			<div id="page_category" style="display: none">
				<div class="page_h">KATEGORIE</div>
				<table class="categories" style="position: absolute; margin-left: auto; margin-right: auto; margin-top: 200px; left: 25%; width: 50%; text-align: center">
				<tr><td>U10</td><td>MIX COACH PITCH</td></tr>
				<tr><td>U11</td><td>MIX COACH PITCH</td></tr>
				<tr><td>U13</td><td>GIRLS</td></tr>
				<tr><td>U13</td><td>BOYS</td></tr>
				<tr><td>U16</td><td>GIRLS</td></tr>
				<tr><td>U16</td><td>BOYS</td></tr>
				<tr><td>U18</td><td>GIRLS (výjimečně U19 ne na post nadhazovačky)</td></tr>
				</table>
			</div>
			<div id="page_contact" style="display: none">
				<div class="page_h">KONTAKT</div>
				<div id="mc_content_lc"><div id="mc_content_rc">
					<div style="padding-top: 300px">
					FUN&nbsp;PLAY Praha, z.s.<br>
					IČO: 09743413<br>
					Ředitel turnaje: Pavel Kalčev +420 603 499 093<br>
					E-mail: softballfestival@gmail.com<br>
					<a href="https://www.softballfestival.eu">www.softballfestival.eu</a><br>
					</div>
				</div></div>
			</div>
		</div>
	</div>
	<script>
	class Ball {
		X; Y; Radius; VelX; VelY; Finished;
		constructor(x, y, radius) { this.X = x; this.Y = y; this.Radius = radius; this.VelX = Math.random() * 0.001; this.VelY = Math.random() * 0.001; }
		Update()
		{
			if (this.X > 1 || this.X < 0) { this.VelX = -this.VelX; this.X = Math.min(Math.max(this.X, 0), 1); } this.X += this.VelX;
			if (this.Y > C.height / C.width || this.Y < 0) { this.VelY = -this.VelY; this.Y = Math.min(Math.max(this.Y, 0), C.height / C.width); } this.Y += this.VelY;
		}
		Render(dc)
		{
			var gradient = dc.createRadialGradient(C.width * this.X, C.width * this.Y, C.width * this.Radius + 40, C.width * this.X, C.width * this.Y, C.width * this.Radius);
			gradient.addColorStop(0, "#96AAFF00"); gradient.addColorStop(0.5, "#96AAFF80"); gradient.addColorStop(1, "#96AAFF40");
			dc.fillStyle = gradient; dc.beginPath(); dc.arc(this.X * C.width, this.Y * C.width, this.Radius * C.width + 40, 0, Math.PI * 2); dc.fill(); 
		}
	}
	class TimedFloat {
		Previous; Current; Next; Speed; Time; OnFinished; Finished;
		constructor(value, speed) { this.Previous = this.Current = this.Next = value; this.Speed = speed; this.Time = new Date().getTime(); this.Finished = false; }
		Update()
		{
			if (!this.Finished)
			{
				if (this.Next < this.Current)
				{
					this.Current -= this.Speed * (0.01 * (new Date().getTime() - this.Time));
					if (this.Current <= this.Next) { this.Current = this.Next; this.Finished = true; if (this.OnFinished instanceof Function) this.OnFinished(); }
				}
				if (this.Next > this.Current)
				{
					this.Current += this.Speed * (0.01 * (new Date().getTime() - this.Time));
					if (this.Current >= this.Next) { this.Current = this.Next; this.Finished = true; if (this.OnFinished instanceof Function) this.OnFinished(); }
				}
			}
			this.Time = new Date().getTime();
		}
		Set(value) { this.Previous = this.Next; this.Next = value; this.Finished = false; }
		Get() { return this.Current; }
	}
	class HomeBubble
	{
		X; Y; Radius; Scale;
		constructor(x, y, radius) { this.X = x; this.Y = y; this.Radius = radius; this.Scale = new TimedFloat(1, 0.1); }
		Update() { this.Scale.Update(); }
		InRadius(x, y) { return Math.sqrt((x - this.X) ** 2 + (y - this.Y) ** 2) < this.Radius; }
		OnClick(e, x, y) { if (this.InRadius(x, y)) ChangePage($("page_main")); }
		Mouse(e, x, y) { if (this.InRadius(x, y)) { if (this.Scale.Next != 1.1) this.Scale.Set(1.1); } else if (this.Scale.Next != 1) this.Scale.Set(1); }
		Render(dc)
		{
			dc.translate(this.X, this.Y); dc.scale(this.Scale.Get(), this.Scale.Get()); dc.strokeStyle = "#202040"; dc.lineWidth = 10;
			dc.beginPath(); dc.arc(0, 0, this.Radius, 0, Math.PI * 2); dc.fillStyle = "#404080"; dc.fill(); dc.stroke();
			dc.beginPath(); dc.moveTo(-20, 30); dc.lineTo(-20, -5); dc.lineTo(-30, -5); dc.lineTo(0, -35); dc.lineTo(30, -5); dc.lineTo(20, -5); dc.lineTo(20, 30); dc.lineTo(5, 30); dc.lineTo(5, 10); dc.lineTo(-5, 10); dc.lineTo(-5, 30);
			dc.fillStyle = "#000"; dc.fill(); dc.translate(100, 100); dc.fillStyle = "#FFF"; dc.fill(); dc.resetTransform();
		}
	}
	class PhotoBubble {
		X; Y; Radius; Photo; Timer;
		constructor(x, y, radius, time) { this.X = x; this.Y = y; this.Radius = radius; this.Photo = 0; this.Timer = new Date().getTime() * 0.001 + time; }
		NextPhoto(time) { this.Photo = (this.Photo + 1) % sideImages.length; this.Timer = time; }
		Update() { var time = new Date().getTime() * 0.001; if (time - this.Timer > 10) this.NextPhoto(time); }
		OnClick(e, x, y) { if (Math.sqrt((x - this.X) ** 2 + (y - this.Y) ** 2) < this.Radius) this.NextPhoto(new Date().getTime() * 0.001); }
		RenderOne(dc, image)
		{
			var imageSize = Math.max(image.width, image.height) * this.Radius * 2;
			var imageC = document.createElement("canvas"); imageC.width = imageC.height = this.Radius * 2;
			var imageDC = imageC.getContext("2d");
			imageDC.drawImage(image, (imageSize / image.height - imageC.width) * -0.5, (imageSize / image.width - imageC.height) * -0.5, imageSize / image.height, imageSize / image.width);
			var pattern = dc.createPattern(imageC, "repeat");
			dc.fillStyle = pattern; dc.fill();
		}
		Render(dc)
		{
			dc.translate(this.X - this.Radius, this.Y - this.Radius); dc.strokeStyle = "#404080"; dc.lineWidth = 10;
			dc.beginPath(); dc.arc(this.Radius, this.Radius, this.Radius, 0, Math.PI * 2);
			var time = new Date().getTime() * 0.001; this.RenderOne(dc, sideImages[this.Photo]);
			if (time - this.Timer < 1) { dc.globalAlpha = 1 - time + this.Timer; this.RenderOne(dc, sideImages[(this.Photo + sideImages.length - 1) % sideImages.length]); }
			dc.globalAlpha = 1; dc.stroke(); dc.resetTransform();
		}
	}
	function $(x) { return document.getElementById(x); }
	var C = $("screen"); var DC = C.getContext("2d");
	//var ballC = document.createElement("canvas");
	
	var buttons = []; var buttonPos = [];
	for (let i = 0; i < 5; i++)
	{
		buttons.push($(`button${i}`)); buttonPos.push(new TimedFloat(300, 100));
		buttons[i].addEventListener("mouseenter", (e) => { buttonPos[i].Set(-50); });
		buttons[i].addEventListener("mouseleave", (e) => { buttonPos[i].Set(0); });
	}
	var home = new HomeBubble(400, 100, 50);
	
	var photos = [new PhotoBubble(1250, 155, 150, 0), new PhotoBubble(1350, 450, 150, 0.5), new PhotoBubble(1250, 745, 150, 1.5)];
	var sideImages = []; var sideFiles = ["file://D:/Opráski/xenon.png", "file://D:/Opráski/loser.png", "file://D:/Opráski/world portal.png"];
	for (let i = 1; i <= 12; i++) { sideImages.push(new Image()); sideImages[sideImages.length - 1].src = `fotky/${i}.jpg`; }
	//for (let i = 0; i < sideFiles.length; i++) { sideImages.push(new Image()); sideImages[i].src = sideFiles[i]; }
	
	var mcTime = new TimedFloat(0, 0.5); mcTime.Set(1);
	mcTime.OnFinished = () => { $("main_svg").style.display = "initial"; for (let i = 0; i < buttonPos.length; i++) buttonPos[i].Set(0); }
	var currentPage = $("page_main");
	var currentEISF = 0;
	var balls = []; for (let i = 0; i < 25; i++) balls.push(new Ball(Math.random(), Math.random() * C.height / C.width, Math.random() * 0.05 + 0.01));
	setInterval(Render, 10); setInterval(Update, 10);
	addEventListener("mousemove", (e) => Mouse(e));
	addEventListener("resize", Resize); Resize();
	addEventListener("click", (e) => OnClick(e));
	function ChangePage(div)
	{
		if (mcTime.Finished)
		{
			mcTime.OnFinished = () => { mcTime.OnFinished = null; currentPage.style.display = "none"; currentPage = div; currentPage.style.display = "initial"; mcTime.Set(1); };
			mcTime.Set(0);
		}
	}
	function ChangeEISF(eisf)
	{
		$(`pac${currentEISF}`).style.display = "none"; $(`pal${currentEISF}`).setAttribute("fill", null); currentEISF = eisf;
		$(`pac${currentEISF}`).style.display = "initial"; $(`pal${currentEISF}`).setAttribute("fill", "#0164BA");
		$("pacBottom").innerHTML = `Strana ${eisf + 1} z 4`;
	}
	function Resize() { C.width = window.innerWidth; C.height = window.innerHeight; }
	function OnClick(e)
	{
		var rect = $("main_bg").getBoundingClientRect(); var x = e.pageX - rect.left; var y = e.pageY - rect.top; home.OnClick(e, x, y);
		photos.forEach(photo => photo.OnClick(e, x, y));
	}
	function Mouse(e)
	{
		var rect = $("main_bg").getBoundingClientRect(); var x = e.pageX - rect.left; var y = e.pageY - rect.top; home.Mouse(e, x, y);
	}
	function Update()
	{
		balls.forEach(ball => ball.Update()); photos.forEach(photo => photo.Update()); home.Update();
		mcTime.Update(); var mc = $("main_circle").style;
		mc.clipPath = `circle(${(mcTime.Get() < 0.75 ? mcTime.Get() / 0.75 * 400 : 390 + (1 - mcTime.Get()) / 0.75 * 10)}px at 400px 400px)`;
		lastTime = new Date().getTime();
		for (let i = 0; i < buttons.length; i++)
		{
			buttonPos[i].Update(); buttons[i].setAttribute("transform", `translate(${buttonPos[i].Get()}, 0)`);
		}
	}
	function Render()
	{
		var gradient = DC.createRadialGradient(C.width * 0.5, C.height * 0.5, C.width * 0.5, C.width * 0.5, C.height * 0.5, 0);
		gradient.addColorStop(0, "#0164BA"); gradient.addColorStop(0.75, "#6480CC");
		DC.fillStyle = gradient; DC.fillRect(0, 0, C.width, C.height);
		var bg = $("main_bg");
		var bgDC = bg.getContext("2d"); bgDC.clearRect(0, 0, bg.width, bg.height);
		balls.forEach(ball => ball.Render(DC)); photos.forEach(photo => photo.Render(bgDC)); home.Render(bgDC);
	}
	</script>
</body>