
<html><head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<style>
			.test td, .test tr {
				border-style: ridge;
			}

			.backgroundPattern{
				background-image: url("https://us-nizi2d-r53.amz-aws.jp/img/pc_room/menu_bg.png?1246");
				background-repeat: repeat;
				background-position: center;
				-webkit-tap-highlight-color: rgba(0,0,0,0);
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				word-break: normal;
				background-size: 320px 9px;
				position: relative;
				padding: 15px;
			}

			.tabcontent {
				display: none;
			}

			.sidenav {
			  height: 100%;
			  width: 160px;
			  position: fixed;
			  z-index: 1;
			  top: 0;
			  left: 0;
			  background-color: rgba(0,0,0,0.2);
			  overflow-x: hidden;
			  padding-top: 20px;
			}

			.sidenav div {
			  padding: 6px 8px 6px 16px;
			  text-decoration: none;
			  font-size: 25px;
			  color: black;
			  display: block;
			}

			.sidenav div:hover {
			  color: #f1f1f1;
			}
			
			.sidenavSelected {
				background:black;
			}
			
			.main {
			  margin-left: 160px; 
			  padding: 0px 10px;
			  text-decoration: none;
			  border: 0;
			  color: #604731;
			  font-weight: bold;
			}

			input[type=text] {
				border: none;
				border-bottom: 1px solid #FF9CC0;
				background: transparent;
				width: 150px;
				color: #604731;	
			}

			input[type=text]:focus {
				outline: none;
				border: 1px solid #FF9CC0;
			}

			button[type=button] {
				background: url("https://us-nizi2d-r53.amz-aws.jp/img/hp/select_pink.png?1100");
				background-size: auto;
				background-size: auto;
				background-size: 100% 100%;
				-webkit-background-size: 100% 100%;
				line-height: 34px;
				box-sizing: border-box;
				-webkit-box-sizing: border-box;
				-ms-box-sizing: border-box;
				-moz-box-sizing: border-box;
				cursor: pointer;
				margin-left: 10px; 
				border: transparent; 
				font-weight: bold;
				font-size: 13px;
			}

			input[type="button"] {
				border-radius: 5px;
				border: transparent; 
				background-color: #ff9e9e;
				font-weight: bold;
				font-size: 13px;
				margin-left: 5px; 
				margin-top: 4px;
				cursor: pointer;
			}

			input[type="button"]:hover {
				border: 1px solid #000000;
			}

			input[type="text"] {
				margin: 3px 6px 3px 6px;
			}

			td {
				color: #604731;
				font-weight: bold;
			}

			select {
				margin: 3px;
			}

			#close-btn {
				background-image: url("https://us-nizi2d-r53.amz-aws.jp/img/hp/select_blue.png?1100");
			}

			.modal {
				  display: none;
				  position: fixed; 
				  left: 0; 
				  top: 0;
				  width: 30%;
				  margin: 10% 35%;
				  padding: 0;
				  height: 100%; 
			}

			.modal-content {
				  position: relative; 
				  background-color: #fbfbf3;
				  border: 5px solid #fbd7a9;
				  padding: 20px; 
				  margin: auto; 
				  width: 75%;  
				  -webkit-animation-name: animatetop;
				  -webkit-animation-duration: 0.4s;
				  animation-name: animatetop;
				  animation-duration: 0.4s
			}

			@-webkit-keyframes animatetop {
				  from {top:-300px; opacity:0} 
				  to {top:0; opacity:1}
			}

			@keyframes animatetop {
				  from {top:-300px; opacity:0}
				  to {top:0; opacity:1}
			}
		</style>
	</head>
	<body class="backgroundPattern">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Create a Girlfriend</title>

		<div class="sidenav">
		  <div id="ConstructorButton" class="backgroundPattern" onclick="ConstructorButton()">Builder</div>
		  <div id="IdFinderButton" onclick="IdFincderButton()" class="">ID Finder</div>
		  <div id="InfoButton" onclick="InfoButton()" class="">Information</div>
		  <div></div>
		</div>

		<div class="main">
		<div id="InfoHeader">
			<h1 style="color:#34beff; display: inline; padding-left: 50px;">DGF</h1>
			<h1 style="color:#ff4d8a; display: inline; padding-left: 3px;">Creator</h1> 
			<p style="display: inline; padding-left: 42px;">
			Server:<select id="serverid">
			  <option value="https://us-nizi2d-r53.amz-aws.jp/" selected="selected">EN</option>
			  <option value="https://app.nizikano-2d.jp/">JP</option>
			</select>
			<br>
			</p>
		</div>
		<div id="Builder" class="tabcontent" style="display: block;">
			<form id="frm1" action="form_action.asp">
				<table border="1">
					<tbody>
						<tr>
							<td>
								Skin colour:<select name="Skincolour">
									<option value="1a1" selected="selected">Regular</option>
									<option value="2a1">Pale</option>
									<option value="3a1">Tanned</option>
								</select>
								Height:<select name="Height">
									<option value="1a1" selected="selected">Regular</option>
									<option value="2a1">Short</option>
									<option value="3a1">Very Short</option>
								</select>
								Eyebrows/Eyelashes:<select name="eyebrowsEyelashes">
									<option value="0" selected="selected">Base</option>
									<option value="1">Brown</option>
									<option value="2">Gray</option>
									<option value="3">Dark Green</option>
									<option value="4">Amethyst</option>
									<option value="5">Russet</option>
									<option value="6">Puce</option>
									<option value="7">Ash</option>
									<option value="8">Light Brown</option>
									<option value="9">Light Purple</option>
									<option value="100">Green</option>
									<option value="101">Purple</option>
									<option value="102">Blue</option>
									<option value="103">Pink</option>
									<option value="104">Light Blue</option>
								</select>
								<br>
								Right Eye:<input name="reyeID" type="text" class="categoryInput">
								Left Eye:<input name="leyeID" type="text" class="categoryInput">
								<br>
								Right Pupil:<input name="pupilsID1" type="text" class="categoryInput">
								Left Pupil:<input name="pupilsID2" type="text" class="categoryInput">
								<br>
								Custom Faces?:<select name="customFaceOption" id="customFaceOption" onchange="enableCustomDropdown(this.value)">
									<option selected="selected" value="yes">Yes</option>
									<option value="no">No</option>
								</select>
								<br>
								Custom Eyes: <select name="customEyes" class="customFaceDropdown">
									<option value="728">Gentle</option>
									<option value="735">Innocent</option>
									<option value="742">Cheeky</option>
									<option value="749" selected="selected">Regular</option>
									<option value="756">Angle-Eyed</option>
									<option value="763">Kind</option>
									<option value="770">Bumpkin</option>
									<option value="777">Bossy</option>
									<option value="784">Longing</option>
									<option value="791">Thin Angle-Eyed</option>
									<option value="798">Cool</option>
									<option value="805">Staring</option>
									<option value="812">Loving</option>
									<option value="819">Western</option>
									<option value="826">Pure</option>
									<option value="833">Boyish</option>
									<option value="840">Hawk-Eyed</option>
									<option value="847">Yandere</option>
									<option value="854">Calm</option>
									<option value="861">Devilish</option>
									<option value="2607">Thin-Eyed</option>
									<option value="2623">Cat-Eyed</option>
									<option value="3650">Timid</option>
									<option value="4372">Bright</option>
									<option value="10187">Narrow-Eyed Yandere</option>
									<option value="10205">Baby</option>
									<option value="10953">Smiling</option>
									<option value="10954">Large Angle</option>
									<option value="13129">Droopy Pure Eyed</option>
									<option value="13147">Sanpaku Eyed</option>
									<option value="14571">Stylish Eyeshadow</option>
									<option value="14572">Courtly</option>
									<option value="21424">Beastly</option>
									<option value="21448">Round-Eyed</option>
									<option value="21941">Demon</option>
									<option value="21965">Slightly Evil Lady's</option>
									<option value="22552">Dolly</option>
									<option value="22528">Cunning But Cute</option>
									<option value="23990">Tsundere</option>
									<option value="23966">Mischievous Lass</option>
									<option value="25142">Doe-Eyed Darling</option>
									<option value="25118">Gloomy</option>
									<option value="25940">Kitty-Like</option>
                					<option value="25964">Reserved</option>
									<option value="26871">Pointy Teeth</option>
									<option value="26847">Wide-Eyed Doll</option>
									<option value="28079">Gentle Yandere</option>
									<option value="28055">Cool Slanted</option>
									<option value="28651">Fox-Eyed Face</option>
									<option value="28675">Spiral Eyes</option>
									<option value="29441">Easygoing Eyes</option>
									<option value="29465">Mature Feminine</option>
									<option value="30095">Cartoon</option>
									<option value="30119">Angelic</option>
									<option value="31895">Spunky Gal</option>
									<option value="31925">Catty</option>
									<option value="32568">Narrow-Eyed Cheeky</option>
									<option value="32538">Sweet</option>
									<option value="33171">Teasing</option>
									<option value="33230">Vampire</option>
									<option value="33775">Sparkle☆Star</option>
									<option value="33805">Yandere Cool</option>
									<option value="34542">Playful</option>
									<option value="34572">Melancholic</option>
									<option value="35101">Tanuki</option>
									<option value="35131">Anime</option>
									<option value="36214">Twisted Doll</option>
									<option value="36244">Wide-Eyed Gentle</option>
									<option value="36142">Slightly Evil Gal</option>
									<option value="36172">Affectionate Kind</option>
									<option value="36578">Sparkling Maiden</option>
									<option value="36548">Jiangshi</option>
									<option value="37041">Scornful Teasing</option>
									<option value="37071">Unfortunate Girl</option>
								</select>
								Custom Mouth:<select name="customMouth" class="customFaceDropdown">
									<option value="728">Gentle</option>
									<option value="735">Innocent</option>
									<option value="742">Cheeky</option>
									<option value="749" selected="selected">Regular</option>
									<option value="756">Angle-Eyed</option>
									<option value="763">Kind</option>
									<option value="770">Bumpkin</option>
									<option value="777">Bossy</option>
									<option value="784">Longing</option>
									<option value="791">Thin Angle-Eyed</option>
									<option value="798">Cool</option>
									<option value="805">Staring</option>
									<option value="812">Loving</option>
									<option value="819">Western</option>
									<option value="826">Pure</option>
									<option value="833">Boyish</option>
									<option value="840">Hawk-Eyed</option>
									<option value="847">Yandere</option>
									<option value="854">Calm</option>
									<option value="861">Devilish</option>
									<option value="2607">Thin-Eyed</option>
									<option value="2623">Cat-Eyed</option>
									<option value="3650">Timid</option>
									<option value="4372">Bright</option>
									<option value="10187">Narrow-Eyed Yandere</option>
									<option value="10205">Baby</option>
									<option value="10953">Smiling</option>
									<option value="10954">Large Angle</option>
									<option value="13129">Droopy Pure Eyed</option>
									<option value="13147">Sanpaku Eyed</option>
									<option value="14571">Stylish Eyeshadow</option>
									<option value="14572">Courtly</option>
									<option value="21424">Beastly</option>
									<option value="21448">Round-Eyed</option>
									<option value="21941">Demon</option>
									<option value="21965">Slightly Evil Lady's</option>
									<option value="22552">Dolly</option>
									<option value="22528">Cunning But Cute</option>
									<option value="23990">Tsundere</option>
									<option value="23966">Mischievous Lass</option>
									<option value="25142">Doe-Eyed Darling</option>
									<option value="25118">Gloomy</option>
									<option value="25940">Kitty-Like</option>
					        		<option value="25964">Reserved</option>
									<option value="26871">Pointy Teeth</option>
									<option value="26847">Wide-Eyed Doll</option>
									<option value="28079">Gentle Yandere</option>
									<option value="28055">Cool Slanted</option>
									<option value="28651">Fox-Eyed Face</option>
									<option value="28675">Spiral Eyes</option>
									<option value="29441">Easygoing Eyes</option>
									<option value="29465">Mature Feminine</option>
									<option value="30095">Cartoon</option>
									<option value="30119">Angelic</option>
									<option value="31895">Spunky Gal</option>
									<option value="31925">Catty</option>
									<option value="32568">Narrow-Eyed Cheeky</option>
									<option value="32538">Sweet</option>
									<option value="33171">Teasing</option>
									<option value="33230">Vampire</option>
									<option value="33775">Sparkle☆Star</option>
									<option value="33805">Yandere Cool</option>
									<option value="34542">Playful</option>
									<option value="34572">Melancholic</option>
									<option value="35101">Tanuki</option>
									<option value="35131">Anime</option>
									<option value="36214">Twisted Doll</option>
									<option value="36244">Wide-Eyed Gentle</option>
									<option value="36142">Slightly Evil Gal</option>
									<option value="36172">Affectionate Kind</option>
									<option value="36578">Sparkling Maiden</option>
									<option value="36548">Jiangshi</option>
									<option value="37041">Scornful Teasing</option>
									<option value="37071">Unfortunate Girl</option>
								</select>
								<br>
								Expression:<select name="Expression">
									<option value="0a1a1" selected="selected">Regular</option>
									<option value="0a2a1">Smiling</option>
									<option value="0a3a1">Grinning</option>
									<option value="0a4a1">Surprised</option>
									<option value="0a5a1">Angry</option>
									<option value="0a6a1">Sad</option>
									<option value="0a7a1">Staring</option>
									<option value="0a8a1">Relaxed</option>
									<option value="0a9a1">Smirking</option>
									<option value="1a1a1">Winking</option>
									<option value="1a2a1">Expectant</option>
									<option value="1a3a1">In Love</option>
									<option value="1a4a1">Kiss</option>
                  					<option value="2a1H1">Furious</option>
                  					<option value="282V1">Embarrassed</option>
									<option value="2a4H1">Blank</option>
									<option value="285V1">Longing</option>
                  					<option value="2X6H1">Oh Dear</option>
                  					<option value="2V7q1">Deceptive</option>
									<option value="2V8q1">Entranced</option>
                  					<option value="2V9q1">Dazed</option>
									<option value="380V1">Sleepy</option>
									<option value="3x2C1">Smug</option>
									<option value="323g1">Troubled</option>
									<option value="3x4C1">Sly</option>
									<option value="3H5b1">Frustrated</option>
								</select>
								Blushing/Sweating:<select name="Blush">
									<option value="00" selected="selected">Neither</option>
									<option value="1a1">Blushing</option>
									<option value="2a1">Sweating</option>
									<option value="3a1">Blushing and Sweating</option>
								</select>
								<br>
								Bangs:<input name="bangsID" type="text" class="categoryInput">
								Hair Back:<input name="hairID" type="text" class="categoryInput">
								<br>
								Body:<input name="outfitID" type="text" class="categoryInput">
								Background:<input name="backgroundID" type="text" class="categoryInput">
							</td>
							<td>
								Front:<input name="frontID" type="text" class="categoryInput">
								Front slot 2:<input name="frontID2" type="text" class="categoryInput">
								<br>
								Body acc 1:<input name="bodyID1" type="text" class="categoryInput">
								Body acc 2:<input name="bodyID2" type="text" class="categoryInput">
								<br>
								Body acc 3:<input name="bodyID3" type="text" class="categoryInput">
								Hair acc 1:<input name="hairaccID1" type="text" class="categoryInput">
								<br>
								Hair acc 2:<input name="hairaccID2" type="text" class="categoryInput">
								Hair acc 3:<input name="hairaccID3" type="text" class="categoryInput">
								<br>
								Face acc 1:<input name="faceID1" type="text" class="categoryInput">
								Face acc 2:<input name="faceID2" type="text" class="categoryInput">
								<br>
								Face acc 3:<input name="faceID3" type="text" class="categoryInput">
								Back acc 1:<input name="backID1" type="text" class="categoryInput">
								<br>
								Back acc 2:<input name="backID2" type="text" class="categoryInput">
								Back acc 3:<input name="backID3" type="text" class="categoryInput">
								<br>	
								Image size:<select name="Imagesize">
									<option selected="selected" value="0a1">Full</option>
									<option value="1a1">Half</option>
									<option value="2a1">Quarter</option>
								</select>
								JPEG or PNG:<select name="JPEGPNG">
									<option value="0a1">JPEG (low quality)</option>
									<option value="1a1" selected="selected">PNG (high quality, no bg, transparent)</option>
								</select>
								<br>
								Custom Eyebrows: <select name="customBrows" class="customFaceDropdown">
									<option value="728">Gentle</option>
									<option value="735">Innocent</option>
									<option value="742">Cheeky</option>
									<option value="749" selected="selected">Regular</option>
									<option value="756">Angle-Eyed</option>
									<option value="763">Kind</option>
									<option value="770">Bumpkin</option>
									<option value="777">Bossy</option>
									<option value="784">Longing</option>
									<option value="791">Thin Angle-Eyed</option>
									<option value="798">Cool</option>
									<option value="805">Staring</option>
									<option value="812">Loving</option>
									<option value="819">Western</option>
									<option value="826">Pure</option>
									<option value="833">Boyish</option>
									<option value="840">Hawk-Eyed</option>
									<option value="847">Yandere</option>
									<option value="854">Calm</option>
									<option value="861">Devilish</option>
									<option value="2607">Thin-Eyed</option>
									<option value="2623">Cat-Eyed</option>
									<option value="3650">Timid</option>
									<option value="4372">Bright</option>
									<option value="10187">Narrow-Eyed Yandere</option>
									<option value="10205">Baby</option>
									<option value="10953">Smiling</option>
									<option value="10954">Large Angle</option>
									<option value="13129">Droopy Pure Eyed</option>
									<option value="13147">Sanpaku Eyed</option>
									<option value="14571">Stylish Eyeshadow</option>
									<option value="14572">Courtly</option>
									<option value="21424">Beastly</option>
									<option value="21448">Round-Eyed</option>
									<option value="21941">Demon</option>
									<option value="21965">Slightly Evil Lady's</option>
									<option value="22552">Dolly</option>
									<option value="22528">Cunning But Cute</option>
									<option value="23990">Tsundere</option>
									<option value="23966">Mischievous Lass</option>
									<option value="25142">Doe-Eyed Darling</option>
									<option value="25118">Gloomy</option>
									<option value="25940">Kitty-Like</option>
                					<option value="25964">Reserved</option>
									<option value="26871">Pointy Teeth</option>
									<option value="26847">Wide-Eyed Doll</option>
									<option value="28079">Gentle Yandere</option>
									<option value="28055">Cool Slanted</option>
									<option value="28651">Fox-Eyed Face</option>
									<option value="28675">Spiral Eyes</option>
									<option value="29441">Easygoing Eyes</option>
									<option value="29465">Mature Feminine</option>
									<option value="30095">Cartoon</option>
									<option value="30119">Angelic</option>
									<option value="31895">Spunky Gal</option>
									<option value="31925">Catty</option>
									<option value="32568">Narrow-Eyed Cheeky</option>
									<option value="32538">Sweet</option>
									<option value="33171">Teasing Onee-san</option>
									<option value="33230">Vampire</option>
									<option value="33775">Sparkle☆Star</option>
									<option value="33805">Yandere Cool</option>
									<option value="34542">Playful</option>
									<option value="34572">Melancholic</option>
									<option value="35101">Tanuki</option>
									<option value="35131">Anime</option>
								</select>
							</td>
						</tr>
					</tbody>
				</table>
			</form>
			<button type="button" onclick="getValues()" style="padding-left: 28px; padding-right: 38px;">Submit</button>
			<button type="button" id="clearCategories" style="padding-left: 6px; padding-right: 26px;">Clear Categories</button>
			<br>
			<br>
			Background only:<input type="text" id="imagename">
			<input type="button" id="btn" value="Submit">
			<br>
			Test ID:<input type="text" id="testname">
			<input type="button" id="testbtn" value="Test">
			<input type="button" value="-1" onclick="display(this.value)">
			<input type="button" value="+1" onclick="display(this.value)">
			<p>
				<button type="button" onclick="clearDG()" style="padding-left: 6px; padding-right: 24px;">Clear DG Image</button>
				<button type="button" onclick="clearbg()" style="padding-left: 6px; padding-right: 24px;">Clear BG Image</button>
				<button type="button" onclick="cleartest()" style="padding-left: 6px; padding-right: 26px;">Clear Test Image</button>
			</p>
			<p>
				<table class="test">
					<tbody>
						<tr>
							<td>Hairstyle</td>
							<td>Front</td>
							<td>Body</td>
							<td>Body Acc</td>
							<td>Hair Acc</td>
							<td>Face Acc</td>
							<td>Back Acc</td>
							<td>Background</td>
							<td>Face</td>
						</tr>
						<tr>
							<td><img id="hairtest"></td>
							<td><img id="fronttest"></td>
							<td><img id="bodytest"></td>
							<td><img id="bodyacctest"></td>
							<td><img id="hairacctest"></td>
							<td><img id="faceacctest"></td>
							<td><img id="backacctest"></td>
							<td><img id="bgtest"></td>
							<td><img id="facetest"></td>
						</tr>
					</tbody>
				</table>
			</p>
			<p>
				<img id="1">
				<img id="2">
			</p>
		</div>

		<div class="modal">
			  <div class="modal-content">
					<p>Are you sure you want to clear all inputs?</p>
					<button type="button" onClick="clearInputs()" style="padding-left: 30px; padding-right: 36px;">Yes</button><button type="button" id="close-btn" style="padding-left: 26px; padding-right: 32px;">Close</button>
			  </div>
		</div>

		<div id="Test100" class="tabcontent" style="display: none;">
			<br>
			Test 100 ID:<input type="text" id="testname100">
			<input type="button" id="testbtn100" value="Test">
			<input type="button" value="-100" onclick="display100(this.value)">
			<input type="button" value="+100" onclick="display100(this.value)">
			<br>
			<br>
			Table will display once you have entered a code and hit test.
			<br>
			Table shows 100 items corresponding to and starting with the ID entered.
			<br>
			<p>
				<button type="button" onclick="cleartest100()" style="padding-left: 6px; padding-right: 27px;">Clear Test Images</button>
				<table class="test">
					<tbody id="tBodyIds">
					</tbody>
				</table>
			</p>
		</div>

		<div id="Info" style="display: none; padding-top: 10px;">A searchable spreedsheet of Eye and Pupil IDs is <a href="https://docs.google.com/spreadsheets/d/1VSiVY7iWVvPDz05NRDk9vtlaWFgp9H2CYVLr1YXUfsw/edit?usp=sharing" target="blank">here</a>. <!--(You will need to make a copy of it to use the dropdown ID search function.)--><br>
		<a href="https://dgf-catalog.spread.name/" target="blank">DGF Unofficial Catalog</a> (Useful for finding IDs on mobile, incomplete) (<a href="https://docs.google.com/spreadsheets/d/1RWqOVkZ0L23A0r3OUX5qJ0Y1jIUZrbynrik_3rJVzPw/edit?usp=sharing" target="blank">Google Sheets version</a>)<br>
		<a href="https://docs.google.com/spreadsheets/d/15GeXCsCAx-NIL9gbevZKtNoeTs4J9RU4-o4z1jLDOOw/edit#gid=1349900293" target="blank">Enstylopedia as of October 18, 2020 23:00 PDT</a><br><br>
		See <a href="https://dgcreator.neocities.org/guides" target="blank">here</a> for a tutorial on how to use the creator and find item IDs on PC.<br><br>
		See <a href="https://dgcreator.neocities.org/guides" target="blank">here</a> for a tutorial on how to use Custom Eyebrows. This will work on mobile as well.<br>
		(I apologize that there's no better option at this time. I'm seeking help on getting them to work in Creator's script.<br>
		If you're familiar with Javascript or anything adjacent/coding in general and/or interested in helping, <strong><em>please contact me!!!</em></strong>)<br><br>
		If you'd like to extract individual sprites, you can use <a href="https://dgcreator.neocities.org/individual" target="blank">these links.</a><br><br>
		Current version: 2.4.16 <a href="https://dgcreator.neocities.org/changelog.html">(changelog)</a><br><br>
		With thanks to Franchestnut, Hiroaki, Mayoi, and more.<br>
		Maintained and updated by Angel; please ping loftyanpassen on Discord if you encounter issues or have questions.</div>

		<script>
		//actualDG
		/*
		very basic girlfriend
		https://us-nizi2d-r53.amz-aws.jp/img/php/all_param2.php?1090&id1=0T,80g,402,b0j,h0f,U0f,k0Q,q0C,T0p,a0g,J4M3B7s9C,g1t8L5279,r7m4A9i,87E4J9s,G0f,90F,g0i,C0Z,s0B,802,c09,s0a,S0e,F09,k0h,C0t,10Y,60C,h0E,X0X,Q0F,U0d,V04,N0n,50k,S0v,808,X0b,t0K,V0Y,A0M,i0D,w0a,30Q,S0r,60z,M0v,407,x07,i0Q,t0f,U0W,40z,q0z,107,r06,T0v,m09,B07,b0H,J0v,a0G,K0j,108,R0t,P0m,105,S0g,D0t,d04,10T,30h,V0x,S0n,c0y,H0s,W0N,E0S,20h,Z0S,v0U,H0x,L0M,20c,p0x,B0j,Y0r,50u,k0q,Y0a,m09,k09,70r,P0N,X0c,30K,L0m,90a,Z0r,d0G,70R,E0t,F02,X01,J0j,J0C1&id2=#a1&id3=#21&id4=1f1&id5=0X1&id6=0C1&id7=0w1&id8=0b1

		all slots filled
																		  front		body	   bodyacc1 bodyacc2  hairacc1  hairacc2  faceacc1	faceacc2  backacc1	backacc2      bg       bangs     right eye	 left eye	 hairback    front2   bodyacc3  hairacc3  faceacc3  backacc3 pupil1 pupil2																																																																																		 eye shape mouth shape
		https://us-nizi2d-r53.amz-aws.jp/img/php/all_param2.php?1090&id1=8T981g14,21b8j0h8f9U,f3k7Q2q8C,T3p7a2g8J,M3B7s2C6g,t3L72296r,m3A7i285E,J3s7G2f59,F3g7i2C7Z,s3B78227c,91s8a0S9e1F,94k4h0C9t,11Y562C7h0E,X1X5Q2F7U0d,V145N8n251k,S8v98181X,b3t7K2V8Y,A3M7i2D6w,a337Q2S5r,63z7M2v74,72x07,i2Q0t,f0U,W04,z0q,z01,70r,60T,v0m,90B,70b,H0J,v0a,G0K,j01,80R,t0P,m01,50S,g0D,t0d,401,T03,h0V,x0S,n0c,y0H,s0W,N0E,S02,h0Z,S0v,U0H,x0L,M02,c0p,x0B,j0Y,r05,u0k,q0Y,a0m,90k,907,r0P,N0X,c03,K0L,m09,a0Z,r0d,G07,R0E,t0F,20X,10J,j0J,C0w,q0q,20B,20V,v08,w0F,V0z,h08,g0w,P0w,v0K,s0k,w01,p0W,Y0Z,R0S,Z0f,X01,E0t,20F,w0F,m03,z0v,x0y,f0i,Y01,J0v,h8u4m0S,X1h0T1R8W7y1&id2=3a1&id3=121&id4=1f1&id5=0X1&id6=0C1&id7=0w1&id8=0b1

		id1, front, body, body acc 1, body acc 2, hair acc 1, hair acc 2, face acc 1, face acc 2, back acc 1, back acc 2, background, bangs, right eye, left eye, hair back, front 2, body acc 3, hair acc 3, face acc 3, back acc 3, pupil 1, pupil 2, filler space, mouth
		id2 skin color, 1=regular, 2=pale, 3=tanned 
		id3 height, 1=regular, 2=short, 3=very short 
		id4 expression, refer to expression ids further up 
		id5 blushing/crying, 0=normal, 1=blushing, 2=crying, 3=blushing and crying 
		id6, jpg/png
		id7 picture size, 0=normal, 1=halfsize, 2=quartersize 
		id8, ?
		id9, curtain?
		*/

		function getValues() {
			const server = document.getElementById("serverid").value;

			const girlfriendBaseURL = server + 'img/php/all_param2.php?1090&id1=8T981g140e,21b8j0h8f9U,f3k7Q2q8C0x,T3p7a2g8J09,M3B7s2C6g0D,t3L72296r0X,m3A7i285E0N,J3s7G2f590p,F3g7i2C7Z02,s3B78227c0w,91s8a0S9e1F,94k4h0C9t0J,11Y562C7h0E,X1X5Q2F7U0d,V145N8n251k,S8v98181X03,b3t7K2V8Y0j,A3M7i2D6w0d,a337Q2S5r0O,63z7M2v740A,72x070R040B0f,i2Q0t0P07020c,f0U,W04,z0q,z01,70r,60T,v0m,90B,70b,H0J,v0a,G0K,j01,80R,t0P,m01,50S,g0D,t0d,401,T03,h0V,x0S,n0c,y0H,s0W,N0E,S02,h0Z,S0v,U0H,x0L,M02,c0p,x0B,j0Y,r05,u0k,q0Y,a0m,90k,907,r0P,N0X,c03,K0L,m09,a0Z,r0d,G07,R0E,t0F,20X,10J,j0J,C0w,q0q,20B,20V,v08,w0F,V0z,h08,g0w,P0w,v0K,s0k,w01,p0W,Y0Z,R0S,Z0f,X01,E0t,20F,w0F,m03,z0v,x0y,f0i,Y01,J0v,h8u4m0S0c07,X1h0T1R8W7y1&id2=3a1&id3=121&id4=1f1&id5=0X1&id6=0C1&id7=0w1&id8=0b1';

			//https://us-nizi2d-r53.amz-aws.jp/img/php/all_param2.php?1090&id1=8T981g14,23b1j0h4f,f3k7Q2q8C,T3p7a2g8J,M3B7s2C6g,t3L72296r,m3A7i285E,J3s7G2f59,F3g7i2C7Z,s3B78227c,90s,91k3h0C8t,17Y268C,X7X2Q8F,V143N0n85,S8v98181X,b3t7K2V8Y,A3M7i2D6w,a337Q2S5r,63z7M2v74,70x,i0Q,f0U,W04,z0q,z01,70r,60T,v0m,90B,70b,H0J,v0a,G0K,j01,80R,t0P,m01,50S,g0D,t0d,401,T03,h0V,x0S,n0c,y0H,s0W,N0E,S02,h0Z,S0v,U0H,x0L,M02,c0p,x0B,j0Y,r05,u0k,q0Y,a0m,90k,907,r0P,N0X,c03,K0L,m09,a0Z,r0d,G07,R0E,t0F,20X,10J,j0J,C0w,q0q,20B,20V,v08,w0F,V0z,h08,g0w,P0w,v0K,s0k,w01,p0W,Y0Z,R0S,Z0f,X01,E0t,20F,w0F,m03,z0v,x0y,f0i,Y01,J0v,h7u4m9S,X7h4T9R,1&id2=1a1&id3=1a1&id4=0a1a1&id5=00&id6=1a1&id7=0a1&id8=0b1&id9=0C1

			/* idArr (	)
				0 = skin color
				1 = height
				2 = eyebrows/eyelashes (color)
				3 = right eye
				4 = left eye
				5 = right pupil
				6 = left pupil

			*/


			// Get all inputed IDs and split them into an array
			const allIds = document.getElementById("frm1");
			console.log(allIds.elements);

			let idList = "";
			for (let i = 0; i < allIds.length ; i++) {
				idList += allIds.elements[i].value + ".";
			}
			let idArr = idList.split(".");	

			console.log("idArr: " + idArr); 

			// Global variable declaration
			let tempGfUrl;
			let tempGfUrlPiece;
			let tempUrlPiece;
			let gfUrl = `${server}img/php/all_param2.php?1090&id1=`;
			let bangId;
			const tempPieceLength = (tempPieceId, tempPieceUrl) => {
				if (tempPieceId.length == 1) { 
					tempGfUrlPiece = `${tempPieceUrl[0]}${tempPieceId[0]}${tempPieceUrl[2]},`;
				} else if (tempPieceId.length == 2) {
					tempGfUrlPiece = `${tempPieceUrl[0]}${tempPieceId[0]}${tempPieceUrl[2]}${tempPieceId[1]}${tempPieceUrl[4]},`;
				} else if (tempPieceId.length == 3) {
					tempGfUrlPiece = `${tempPieceUrl[0]}${tempPieceId[0]}${tempPieceUrl[2]}${tempPieceId[1]}${tempPieceUrl[4]}${tempPieceId[2]}${tempPieceUrl[6]},`;
				} else if (tempPieceId.length == 4) {
					tempGfUrlPiece = `${tempPieceUrl[0]}${tempPieceId[0]}${tempPieceUrl[2]}${tempPieceId[1]}${tempPieceUrl[4]}${tempPieceId[2]}${tempPieceUrl[6]}${tempPieceId[3]}${tempPieceUrl[8]},`
				} else if (tempPieceId.length == 5) {
					tempGfUrlPiece = `${tempPieceUrl[0]}${tempPieceId[0]}${tempPieceUrl[2]}${tempPieceId[1]}${tempPieceUrl[4]}${tempPieceId[2]}${tempPieceUrl[6]}${tempPieceId[3]}${tempPieceUrl[8]}${tempPieceId[4]}${tempPieceUrl[10]},`
				} else if (tempPieceId.length == 6) { //for pupils currently
					tempGfUrlPiece = `${tempPieceUrl[0]}${tempPieceId[0]}${tempPieceUrl[2]}${tempPieceId[1]}${tempPieceUrl[4]}${tempPieceId[2]}${tempPieceUrl[6]}${tempPieceId[3]}${tempPieceUrl[8]}${tempPieceId[4]}${tempPieceUrl[10]}${tempPieceId[5]}${tempPieceUrl[12]},`
				}
			}

			// EN first, then JP; splitting out only the ID1 from the url
			if (server === "https://us-nizi2d-r53.amz-aws.jp/") {
				tempGfUrl = girlfriendBaseURL.slice(65, 684);
			} else if (server === "https://app.nizikano-2d.jp/") {
				tempGfUrl = girlfriendBaseURL.slice(59, 678);
			}
			console.log("tempGfUrl: " + tempGfUrl);

			//url components seperated & filtered of filler
			let urlArr = tempGfUrl.split(',');
			console.log("urlArr: " + urlArr);
			let urlArrFinal = urlArr.filter(category => category.length > 3);
			console.log("urlArrFinal: " + urlArrFinal);
			console.log("urlArrFinal.length: " + urlArrFinal.length);
			
			// Loop through the url categories array
			for (let i = 0; i < urlArrFinal.length - 2; i++) {
				//seperate out each character from url string
				tempUrlPiece = urlArrFinal[i].split('');

				// Loop through the user ID inputs
				for (let k = 0; k < idArr.length; k++) {

				// seperate out each character from the ID
					let tempIdPiece = idArr[k].split('');

					if (i == 12 && k == 3) { // Right Eye
						if (tempIdPiece == 0) {
							tempGfUrlPiece = '17Y268C,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} else if (i == 13 && k == 4) { // Left Eye
						if (tempIdPiece == 0) {
							tempGfUrlPiece = 'X7X2Q8F,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} else if (i == 20 && k == 5) { // Right Pupil
						if (tempIdPiece == 0) {
							tempGfUrlPiece = '70x,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} else if (i == 21 && k == 6) { // Left Pupil
						if (tempIdPiece == 0) {
							tempGfUrlPiece = 'i0Q,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} else if (i == 11 && k == 12) { // Bangs
						bangId = tempIdPiece;
						if (tempIdPiece == 0) {
							tempGfUrlPiece = '91k3h0C8t,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} else if (i == 14 && k == 13) { // Hair Back
						if (tempIdPiece == 0 && bangId != 0) {
							tempPieceLength(bangId, tempUrlPiece);
						} else if (tempIdPiece == 0 && bangId == 0) {
							tempGfUrlPiece = 'V143N0n85,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} else if (i == 1 && k == 14) { // Body
						if (tempIdPiece == 0) {
							tempGfUrlPiece = '23b1j0h4f,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} else if (i == 10 && k == 15) { // Background
						if (tempIdPiece == 0) {
							tempGfUrlPiece = '90s,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} else if (i == 0 && k == 16) { // Front
						if (tempIdPiece == 0) {
							tempGfUrlPiece = '8T981g14,';
						} else {
							if (tempIdPiece.length == 1) {
								tempGfUrlPiece = `${tempIdPiece[0]}${tempUrlPiece[1]},`;
							} else if (tempIdPiece.length == 2) {
								tempGfUrlPiece = `${tempIdPiece[0]}${tempUrlPiece[1]}${tempIdPiece[1]}${tempUrlPiece[3]},`;
							} else if (tempIdPiece.length == 3) {
								tempGfUrlPiece = `${tempIdPiece[0]}${tempUrlPiece[1]}${tempIdPiece[1]}${tempUrlPiece[3]}${tempIdPiece[2]}${tempUrlPiece[5]},`;
							} else if (tempIdPiece.length == 4) {
								tempGfUrlPiece = `${tempIdPiece[0]}${tempUrlPiece[1]}${tempIdPiece[1]}${tempUrlPiece[3]}${tempIdPiece[2]}${tempUrlPiece[5]}${tempIdPiece[3]}${tempUrlPiece[7]},`;
							} else if (tempIdPiece.length == 5) {
								tempGfUrlPiece = `${tempIdPiece[0]}${tempUrlPiece[1]}${tempIdPiece[1]}${tempUrlPiece[3]}${tempIdPiece[2]}${tempUrlPiece[5]}${tempIdPiece[3]}${tempUrlPiece[7]}${tempIdPiece[4]}${tempUrlPiece[9]},`;
							} 
						}
					} else if (i == 15 && k == 17) { // Front 2
						if (tempIdPiece == 0) {
							tempGfUrlPiece = 'S8v98181X,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} else if (i == 2 && k == 18) { // Body Acc 1
						if (tempIdPiece == 0) {
							tempGfUrlPiece = 'f3k7Q2q8C,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} else if (i == 3 && k == 19) { // Body Acc 2
						if (tempIdPiece == 0) {
							tempGfUrlPiece = 'T3p7a2g8J,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} else if (i == 16 && k == 20) { // Body Acc 3
						if (tempIdPiece == 0) {
							tempGfUrlPiece = 'b3t7K2V8Y,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} else if (i == 4 && k == 21) { // Hair Acc 1
						if (tempIdPiece == 0) {
							tempGfUrlPiece = 'M3B7s2C6g,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} else if (i == 5 && k == 22) { // Hair Acc 2
						if (tempIdPiece == 0) {
							tempGfUrlPiece = 't3L72296r,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} else if (i == 17 && k == 23) { // Hair Acc 3
						if (tempIdPiece == 0) {
							tempGfUrlPiece = 'A3M7i2D6w,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} else if (i == 6 && k == 24) { // Face Acc 1
						if (tempIdPiece == 0) {
							tempGfUrlPiece = 'm3A7i285E,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} else if (i == 7 && k == 25) { // Face Acc 2
						if (tempIdPiece == 0) {
							tempGfUrlPiece = 'J3s7G2f59,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} else if (i == 18 && k == 26) { // Face Acc 3
						if (tempIdPiece == 0) {
							tempGfUrlPiece = 'a337Q2S5r,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} else if (i == 8 && k == 27) { // Back Acc 1
						if (tempIdPiece == 0) {
							tempGfUrlPiece = 'F3g7i2C7Z,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} else if (i == 9 && k == 28) { // Back Acc 2
						if (tempIdPiece == 0) {
							tempGfUrlPiece = 's3B78227c,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} else if (i == 19 && k == 29) { // Back Acc 3
						if (tempIdPiece == 0) {
							tempGfUrlPiece = '63z7M2v74,';
						} else {
							tempPieceLength(tempIdPiece, tempUrlPiece);
						}
					} 
				}
				gfUrl += tempGfUrlPiece;
			}

			// add first filler
			gfUrl += 'f0U,W04,z0q,z01,70r,60T,v0m,90B,70b,H0J,v0a,G0K,j01,80R,t0P,m01,50S,g0D,t0d,401,T03,h0V,x0S,n0c,y0H,s0W,N0E,S02,h0Z,S0v,U0H,x0L,M02,c0p,x0B,j0Y,r05,u0k,q0Y,a0m,90k,907,r0P,N0X,c03,K0L,m09,a0Z,r0d,G07,R0E,t0F,20X,10J,j0J,C0w,q0q,20B,20V,v08,w0F,V0z,h08,g0w,P0w,v0K,s0k,w01,p0W,';
			
			// Eyebrows/Eyelashes COLOR
			gfUrl += `Y${idArr[2]}Z,`

			// add second filler
			gfUrl += 'R0S,Z0f,X01,E0t,20F,w0F,m03,z0v,x0y,f0i,Y01,J0v,';

			if (idArr[7] == 'yes') {
				// Custom Eyes
				tempUrlPiece = urlArrFinal[22].split('');
				let tempIdPiece = idArr[8].split('');
				
				tempPieceLength(tempIdPiece, tempUrlPiece);
				gfUrl += tempGfUrlPiece;

				// Custom Mouth
				tempUrlPiece = urlArrFinal[23].split('');
				tempIdPiece = idArr[9].split('');

				tempPieceLength(tempIdPiece, tempUrlPiece);
				gfUrl += tempGfUrlPiece;
			} else if (idArr[7] == 'no') {
				gfUrl += 'h0u,m0S';
			}

			//custom eyebrows
			let tempIdPieceCustomEyebrows = idArr[32].split('');
			tempPieceLength(tempIdPieceCustomEyebrows, tempUrlPiece);
			gfUrl += tempGfUrlPiece;

			// Other IDs
			gfUrl += `1&id2=${idArr[0]}&id3=${idArr[1]}&id4=${idArr[10]}&id5=${idArr[11]}&id6=${idArr[31]}&id7=${idArr[30]}&id8=0b1&id9=0C1`
			
			document.getElementById(1).src = gfUrl;
			console.log("gfUrl : " + gfUrl);
		}

		document.getElementById("clearCategories").onclick = function() {
			document.querySelector(".modal").style.display = "block";
		}
		document.getElementById("close-btn").onclick = function() {
			document.querySelector(".modal").style.display = "none";
		}

		function clearInputs() {
			const inputs = document.getElementsByClassName('categoryInput');
			for(let i = 0; i < inputs.length; i++) {
				inputs[i].value = '';
			}
			document.querySelector(".modal").style.display = "none";
		}

		function enableCustomDropdown(value) {
			if (value === "yes") {
				document.getElementsByClassName('customFaceDropdown')[0].removeAttribute('disabled');
				document.getElementsByClassName('customFaceDropdown')[1].removeAttribute('disabled');
			} else if (value === "no") {
				document.getElementsByClassName('customFaceDropdown')[0].setAttribute('disabled', 'true');
				document.getElementsByClassName('customFaceDropdown')[1].setAttribute('disabled', 'true');
			}
			
		}

		//bgonly
		document.getElementById('btn').onclick = function() {
			const servervar = document.getElementById("serverid").value;
			let val = document.getElementById('imagename').value,
				src = servervar + 'img/php/avatar.php?270&id1=' + val +'0&id2=071';
			document.getElementById(2).src = src;
		}

		//test
		document.getElementById('testbtn').onclick = function() {
			const servervar = document.getElementById("serverid").value;
			let testval = document.getElementById('testname').value,
				hairsrc = servervar + 'img/avatar_thum/hair/' + testval +'.png';
				document.getElementById("hairtest").src = hairsrc;
				frontsrc = servervar + 'img/avatar_thum/front/' + testval +'.png';
				document.getElementById("fronttest").src = frontsrc;
				bodysrc = servervar + 'img/avatar_thum/body1/' + testval +'.png';
				document.getElementById("bodytest").src = bodysrc;
				bodyaccsrc = servervar + 'img/avatar_thum/body_acc/' + testval +'.png';
				document.getElementById("bodyacctest").src = bodyaccsrc;
				hairaccsrc = servervar + 'img/avatar_thum/hair_acc/' + testval +'.png';
				document.getElementById("hairacctest").src = hairaccsrc;
				faceaccsrc = servervar + 'img/avatar_thum/face_acc/' + testval +'.png';
				document.getElementById("faceacctest").src = faceaccsrc;
				backaccsrc = servervar + 'img/avatar_thum/back_acc/' + testval +'.png';
				document.getElementById("backacctest").src = backaccsrc;
				bgsrc = servervar + 'img/avatar_thum/bg/' + testval +'.png';
				document.getElementById("bgtest").src = bgsrc;
				facesrc = servervar + 'img/avatar_thum/face/' + testval +'.png';
				document.getElementById("facetest").src = facesrc;
		}

		//testincrement
		function display(buttonclickedvalue)
		{
			let value = parseInt(document.getElementById('testname').value);

			if(buttonclickedvalue == '+1')
			{
				value += 1;
			}
			else
			{
				value -= 1;
			}

			document.getElementById('testname').value = value 
			document.getElementById('testbtn').click()
		}

		//clearimages
		function clearDG() {
			document.getElementById('1').src = ""; 
		}

		function clearbg() {
			document.getElementById('2').src = ""; 
		}

		function cleartest() {
			document.getElementById("hairtest").src = ""; 
			document.getElementById("fronttest").src = ""; 
			document.getElementById("bodytest").src = ""; 
			document.getElementById("bodyacctest").src = ""; 
			document.getElementById("hairacctest").src = ""; 
			document.getElementById("faceacctest").src = ""; 
			document.getElementById("backacctest").src = ""; 
			document.getElementById("bgtest").src = ""; 
			document.getElementById("facetest").src = ""; 
			document.getElementById("hairtest").src = " "; 
			document.getElementById("fronttest").src = " "; 
			document.getElementById("bodytest").src = " "; 
			document.getElementById("bodyacctest").src = " "; 
			document.getElementById("hairacctest").src = " "; 
			document.getElementById("faceacctest").src = " "; 
			document.getElementById("backacctest").src = " "; 
			document.getElementById("bgtest").src = " "; 
			document.getElementById("facetest").src = " "; 
		}

		//tabs
		document.getElementById("Builder").style.display = "block";

		function openTab(evt, tabName) {
			let tabcontent, tablinks;
			tabcontent = document.getElementsByClassName("tabcontent");
			for (let i = 0; i < tabcontent.length; i++) {
				tabcontent[i].style.display = "none";
			}
			tablinks = document.getElementsByClassName("tablinks");
			for (let i = 0; i < tablinks.length; i++) {
				tablinks[i].className = tablinks[i].className.replace(" active", "");
			}
			document.getElementById(tabName).style.display = "block";
			evt.currentTarget.className += " active";
		}

		//test100
		document.getElementById('testbtn100').onclick = function() {
			cleartest100();
			const servervar = document.getElementById("serverid").value;
			const testval100 = parseInt(document.getElementById('testname100').value);
			
			const descriptionElements = ["ID","Hairstyle","Front","Body","Body Acc","Hair Acc","Face Acc","Back Acc","Background","Face","Effect"] 
			const tBody = document.getElementById("tBodyIds");
			const headerFooter = document.createElement("tr");

			// Creating table
			for (const element in descriptionElements) {
				text = document.createTextNode(descriptionElements[element]);
				td = document.createElement("td");
				td.appendChild(text);
				headerFooter.appendChild(td);
			}
			tBody.appendChild(headerFooter);
			
			// Calling for images
			const testElements = ["hairtest","fronttest","bodytest","bodyacctest","hairacctest","faceacctest","backacctest","bgtest","facetest","eftest"]
			for (let i = testval100; i <= (testval100 + 100); i++) {
				hairsrc = servervar + 'img/avatar_thum/hair/' + i +'.png';
				frontsrc = servervar + 'img/avatar_thum/front/' + i +'.png';
				bodysrc = servervar + 'img/avatar_thum/body1/' + i +'.png';
				bodyaccsrc = servervar + 'img/avatar_thum/body_acc/' + i +'.png';	
				hairaccsrc = servervar + 'img/avatar_thum/hair_acc/' + i +'.png';	
				faceaccsrc = servervar + 'img/avatar_thum/face_acc/' + i +'.png';	
				backaccsrc = servervar + 'img/avatar_thum/back_acc/' + i +'.png';	
				bgsrc = servervar + 'img/avatar_thum/bg/' + i +'.png';	
				facesrc = servervar + 'img/avatar_thum/face/' + i +'.png';
				efsrc = servervar + 'img/avatar_cate_thum/effect/' + i +'.png';
				curentElements = [hairsrc,frontsrc,bodysrc,bodyaccsrc,hairaccsrc,faceaccsrc,backaccsrc,bgsrc,facesrc,efsrc];
				
				
				input = document.createElement("input"); 
				input.setAttribute('type', 'text'); 
				input.setAttribute('readonly', 'readonly');
				input.setAttribute('id', "testID" + i);
				input.setAttribute('value', i);
				tr = document.createElement("tr");
				tr.appendChild(input);

				// Placing images
				for (const element in testElements) {
					const img = document.createElement('img'); 
					img.src = curentElements[element]; 
					img.setAttribute("id", testElements[element] + i);
					td = document.createElement("td"); 
					td.appendChild(img);
					tr.appendChild(td);
				}
				tBody.appendChild(tr);
			}
			tBody.appendChild(headerFooter.cloneNode(true));
		}

		//test100 increment
		function display100(buttonclickedvalue)
		{
			let value = parseInt(document.getElementById('testname100').value);

			if(buttonclickedvalue == '+100')
			{
				value += 100;
			}
			else
			{
				value -= 100;
			}
			cleartest100();
			document.getElementById('testname100').value = value 
			document.getElementById('testbtn100').click()
		}


		//test100 clear
		function cleartest100() {
			const new_tbody = document.createElement('tbody');
			const old_tbody = document.getElementById("tBodyIds");

			new_tbody.setAttribute('id', 'tBodyIds');
			old_tbody.parentNode.replaceChild(new_tbody, old_tbody);
		}
		
		function ConstructorButton(){
			document.getElementById("ConstructorButton").className += "backgroundPattern";
			document.getElementById("IdFinderButton").className = "";
			document.getElementById("InfoButton").className = "";
			
			document.getElementById("Builder").style.display = "block";
			document.getElementById("Test100").style.display = "none";
			document.getElementById("Info").style.display = "none";
		}
		function IdFincderButton(){
			document.getElementById("ConstructorButton").className = "";
			document.getElementById("IdFinderButton").className += "backgroundPattern";
			document.getElementById("InfoButton").className = "";
			
			document.getElementById("Builder").style.display = "none";
			document.getElementById("Test100").style.display = "block";
			document.getElementById("Info").style.display = "none";
		}
		function InfoButton(){
			document.getElementById("ConstructorButton").className = "";
			document.getElementById("IdFinderButton").className = "";
			document.getElementById("InfoButton").className += "backgroundPattern";
			
			document.getElementById("Builder").style.display = "none";
			document.getElementById("Test100").style.display = "none";
			document.getElementById("Info").style.display = "block";
		}
		
		</script>



		</div>
		
	
</body></html>