<!DOCTYPE html>
<html>
	<head>
		<title>Test3</title>
		
			body {
				font-family: "Lucida Console", "Courier New", monospace;
				font-size: 9px !important;
				background-color: black;
				color:white;
			}
			td {
				text-align: center;
				font-size: 9px !important;
			}
			.imgPreview {
				width: 64px;
				height:64px;
				cursor: pointer;
			}
			.csPointer {

			}
		
		<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
	</head>
	<body>
		<table border="1">
			<tr>
				<td>
					<table border="1">
						<tr>
						<td>
							<table border="1">
								<tr>
									<td>Server</td>
									<td>
										<select id="serverSelect" class="selector" onchange="changeSetting('server', 1)";>
											<option value="https://us-nizi2d-r53.amz-aws.jp/" selected>EN</option>
											<option value="https://app.nizikano-2d.jp/">JP</option>
										</select>
										<input size="1" id="serverID" name="serverName" class="" onchange="changeSetting('server', 2)" onkeyup="changeSetting('server', 2)" style="display:none;">

									</td>
									<td></td>
									<td>URL</td>
									<td><input id="url" size="337" style="font-size:8px"></td>
								</tr>
							</table>
						</td>
						</tr>
						<tr><td>
							<table border="1">
								<tr>
									<td>Skin Color</td>
									<td>
										<select id="skincolorSelect" class="selector" onchange="change(0,2,1);">
											<option value="1">Regular</option>
											<option value="2" selected>Pale</option>
											<option value="3">Tanned</option>
										</select>
										<input size="1" id="skincolorID" name="skincolorName" class="settingToggle" onchange="change(0,2,2);" onkeyup="change(0,2,2);">
									</td>
									<td></td>
									<td>Height</td>
									<td>								
										<select id="heightSelect" class="selector" onchange="change(0,3,1);">
											<option value="1" selected>Regular</option>
											<option value="2">Short</option>
											<option value="3">Very Short</option>
										</select>
										<input size="1" id="heightID" name="heightName" class="settingToggle" onchange="change(0,3,2);" onkeyup="change(0,3,2);">
									</td>
									<td></td>
									<td>Expression</td>
									<td>
										<select id="expressionSelect" class="selector" onchange="change(0,4,1)">
											<option value="01" selected>Regular</option>
											<option value="02">Smiling</option>
											<option value="03">Grinning</option>
											<option value="04">Surprised</option>
											<option value="05">Angry</option>
											<option value="06">Sad</option>
											<option value="07">Staring</option>
											<option value="08">Relaxed</option>
											<option value="09">Smirking</option>
											<option value="11">Winking</option>
											<option value="12">Expectant</option>
											<option value="13">In Love</option>
											<option value="14">Kiss</option>
											<option value="21">Furious</option>
											<option value="22">Embarrassed</option>
											<option value="24">Blank</option>
											<option value="25">Longing</option>
											<option value="26">Oh Dear</option>
											<option value="27">Deceptive</option>
											<option value="28">Entranced</option>
											<option value="29">Dazed</option>
											<option value="30">Sleepy</option>
											<option value="32">Smug</option>
											<option value="33">Troubled</option>
											<option value="34">Sly</option>
											<option value="35">Frustrated</option>
										</select>
										<input size="1" id="expressionID" name="expressionName" class="settingToggle" onchange="change(0,4,2);" onkeyup="change(0,4,2);">

										<select id="blushsweatSelect" class="selector" onchange="change(0,5,1)">
											<option value="0" selected="selected">No Blush/Sweat</option>
											<option value="1">Blush</option>
											<option value="2">Sweat</option>
											<option value="3">Blush&Sweat</option>
										</select>
										<input size="1" id="blushsweatID" name="blushsweatName" class="settingToggle" onchange="change(0,5,2);" onkeyup="change(0,5,2);">
									</td>
									<td></td>

									<td>Image</td><!-- Type/Size -->
									<td>
										<select id="filetypeSelect" class="selector" onchange="change(0,6,1)">
											<option value="0">JPEG</option>
											<option value="1" selected>PNG</option>
										</select>
										<input size="1" id="filetypeID" name="filetypeName" class="settingToggle" onchange="change(0,6,2);" onkeyup="change(0,6,2);">
										<select id="filesizeSelect" class="selector" onchange="change(0,7,1)">
											<option value="0" selected>Full</option>
											<option value="1">Half</option>
											<option value="2">Quarter</option>
										</select>
										<input size="1" id="filesizeID" name="filesizeName" class="settingToggle" onchange="change(0,7,2);" onkeyup="change(0,7,2);">
									</td>
								</tr>
							</table>
						</td></tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
				<table border="1">
					<tr>
						<td valign="top">
							<img id="imagePreview" src="">
						</td>
						<td valign="top" id="showhidestuff">
							<table border="1">
								<tr>
									<td class="tdi tdi0 tdifront">
										Front      <!--0--> <br>
										<input id="frontID" name="frontName" class="outfitToggle" size="5" onchange="change(0);" onkeyup="change(0)"><br>
										<img id="frontPreview" class="imgPreview" onclick="clicked(0)">
									</td>
									<td class="tdi tdi1 tdibody">
										Body       <!--1--> <br>
										<input id="bodyID" name="bodyName" class="outfitToggle" size="5" onchange="change(1);" onkeyup="change(1)"><br>
										<img id="bodyPreview" class="imgPreview">
									</td>
									<td class="tdi tdi2 tdibody_acc">
										Body Acc1  <!--2--> <br>
										<input id="bodyacc1ID" name="bodyacc1Name" class="outfitToggle" size="5" onchange="change(2);" onkeyup="change(2)"><br>
										<img id="bodyacc1Preview" class="imgPreview" onclick="clicked(2)">
									</td>
									<td class="tdi tdi3 tdibody_acc">
										Body Acc2  <!--3--><br>
										<input id="bodyacc2ID" name="bodyacc2Name" class="outfitToggle" size="5" onchange="change(3);" onkeyup="change(3)"><br>
										<img id="bodyacc2Preview" class="imgPreview" onclick="clicked(3)">
									</td>
									<td class="tdi tdi4 tdihair_acc">
										Hair Acc1  <!--4--><br>
										<input id="hairacc1ID" name="hairacc1Name" class="outfitToggle" size="5" onchange="change(4);" onkeyup="change(4)"><br>
										<img id="hairacc1Preview" class="imgPreview" onclick="clicked(4)">
									</td>
									<td class="tdi tdi5 tdihair_acc">
										Hair Acc2  <!--5--><br>
										<input id="hairacc2ID" name="hairacc2Name" class="outfitToggle" size="5" onchange="change(5);" onkeyup="change(5)"><br>
										<img id="hairacc2Preview" class="imgPreview" onclick="clicked(5)">
									</td>
								</tr>
								<tr>
									<td class="tdi tdi6 tdiface_acc">
										Face Acc1  <!--6--><br>
										<input id="faceacc1ID" name="faceacc1Name" class="outfitToggle" size="5" onchange="change(6);" onkeyup="change(6)"><br>
										<img id="faceacc1Preview" class="imgPreview" onclick="clicked(6)">
									</td>
									<td class="tdi tdi7 tdiface_acc">
										Face Acc2  <!--7--><br>
										<input id="faceacc2ID" name="faceacc2Name" class="outfitToggle" size="5" onchange="change(7);" onkeyup="change(7)"><br>
										<img id="faceacc2Preview" class="imgPreview" onclick="clicked(7)">
									</td>
									<td class="tdi tdi8 tdiback_acc">
										Back Acc1  <!--8--><br>
										<input id="backacc1ID" name="backacc1Name" class="outfitToggle" size="5" onchange="change(8);" onkeyup="change(8)"><br>
										<img id="backacc1Preview" class="imgPreview" onclick="clicked(8)">
									</td>
									<td class="tdi tdi9 tdiback_acc">
										Back Acc2  <!--9--><br>
										<input id="backacc2ID" name="backacc2Name" class="outfitToggle" size="5" onchange="change(9);" onkeyup="change(9)"><br>
										<img id="backacc2Preview" class="imgPreview" onclick="clicked(9)">
									</td>
									<td>
										Background <!--10--><br>
										<input id="bgID" name="bgName" size="5" class="outfitToggle" onchange="change(10);" onkeyup="change(10)"><br>
										<img id="bgPreview" class="imgPreview" onclick="clicked(10)">
									</td>
									<td class="tdi tdi11 tdihair">
										Front Hair <!--11--><br>
										<input id="hairfrontID" name="hairfrontName" class="outfitToggle" size="5" onchange="change(11);" onkeyup="change(11)"><br>
										<img id="hairfrontPreview" class="imgPreview" onclick="clicked(11)">
									</td>
								</tr>
								<tr>
									<td>
										Right Eye <!--12--><br>
										<input id="eyerightID" name="eyerightName" size="5" onchange="change(12);" onkeyup="change(12)"><br>
										<img id="eyerightPreview" class="imgPreview">
									</td>
									<td>
										Left Eye <!--13--><br>
										<input id="eyeleftID" name="eyeleftName" size="5" onchange="change(13);" onkeyup="change(13)"><br>
										<img id="eyeleftPreview" class="imgPreview">
									</td>
									<td class="tdi tdi14 tdihair">
										Back Hair <!--14--><br>
										<input id="hairbackID" name="hairbackName" class="outfitToggle" size="5" onchange="change(14);" onkeyup="change(14)"><br>
										<img id="hairbackPreview" class="imgPreview" onclick="clicked(14)">
									</td>
									<td class="tdi tdi15 tdifront">
										Front2 <!--15--><br>
										<input id="front2ID" name="front2Name" class="outfitToggle" size="5" onchange="change(15);" onkeyup="change(15)"><br>
										<img id="front2Preview" class="imgPreview" onclick="clicked(15)">
									</td>
									<td class="tdi tdi16 tdibody_acc">
										Body Acc3 <!--16--><br>
										<input id="bodyacc3ID" name="bodyacc3Name" class="outfitToggle" size="5" onchange="change(16);" onkeyup="change(16)"><br>
										<img id="bodyacc3Preview" class="imgPreview" onclick="clicked(16)">
									</td>
									<td class="tdi tdi17 tdihair_acc">
										Hair Acc3 <!--17--><br>
										<input id="hairacc3ID" name="hairacc3Name" class="outfitToggle" size="5" onchange="change(17);" onkeyup="change(17)"><br>
										<img id="hairacc3Preview" class="imgPreview" onclick="clicked(17)">
									</td>
								</tr>
								<tr>
									<td class="tdi tdi18 tdiface_acc">
										Face Acc3 <!--18--><br>
										<input id="faceacc3ID" name="faceacc3Name" class="outfitToggle" size="5" onchange="change(18);" onkeyup="change(18)"><br>
										<img id="faceacc3Preview" class="imgPreview" onclick="clicked(18)">
									</td>
									<td class="tdi tdi19 tdiback_acc">
										Back Acc3 <!--19--><br>
										<input id="backacc3ID" name="backacc3Name" class="outfitToggle" size="5" onchange="change(19);" onkeyup="change(19)"><br>
										<img id="backacc3Preview" class="imgPreview" onclick="clicked(19)">
									</td>
									<td>
										Pupil Right <!--20--><br>
										<input id="pupilrightID" name="pupilrightName" size="5" onchange="change(20);" onkeyup="change(20)"><br>
										<img id="pupilrightPreview" class="imgPreview">
									</td>
									<td>
										Pupil Left <!--21--><br>
										<input id="pupilleftID" name="pupilleftName" size="5" onchange="change(21);" onkeyup="change(21)"><br>
										<img id="pupilleftPreview" class="imgPreview">
									</td>
									<td>
										Brows&Lashes<!--91--><br>
										<select id="browslashesSelect" class="selector" onchange="change(91,1,1);">
											<option value="0" 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">Lavender</option>
											<option value="10">Pea Green</option>
											<option value="11">Purple</option>
											<option value="12">Blue</option>
											<option value="13">Rose</option>
											<option value="14">Light Blue</option>
										</select><br>	
										<input id="browslashesID" name="browslashesName" class="outfitToggle" size="5" onchange="change(91,1,2);" onkeyup="change(91,1,2)"><br>
										<img id="browslashesPreview" class="imgPreview">
									</td>
									<td></td>
								</tr>
								<tr>
									<td>
										Custom Eyes <!--104--><br>
										<input id="customeyesID" name="customeyesName" class="outfitToggle" size="5" onchange="change(104);" onkeyup="change(104)"><br>
										<img id="customeyesPreview" class="imgPreview">
									</td>
									<td>
										Custom Mouth <!--105--><br>
										<input id="custommouthID" name="custommouthName" class="outfitToggle" size="5" onchange="change(105);" onkeyup="change(105)"><br>
										<img id="custommouthPreview" class="imgPreview">
									</td>
									<td>
										Custom Brows <!--106--><br>
										<input id="custombrowsID" name="custombrowsName" class="outfitToggle" size="5" onchange="change(106);" onkeyup="change(106)"><br>
										<img id="custombrowsPreview" class="imgPreview">
									</td>
									<td>
										Effect <!--110--><br>
										<input id="effectsID" name="effectsName" size="5" class="outfitToggle" onchange="change(110);" onkeyup="change(110)"><br>
										<img id="effectsPreview" class="imgPreview">
									</td>
								</tr>
							</table>
						</td>
						<td valign="top">
							<table border="1">
								<thead>
									<tr>
										<td style="text-align: right;">
											<table border="1">
												<tr>
													<td>
														<button id="minusItems" onclick="clearWardrobe();populate(0);populate(0);populate(0);populate(0);">Items-100</button>
														<input size="1" id="populationID" name="populationName" value="1" onchange="populateCounter(1);" onkeyup="populateCounter(1);">
														<button id="addItems" onclick="clearWardrobe();populate();populate();populate();populate();">Items+100</button>
													</td>
													<td>
														<select id="populateSelect" onchange="populateSetting();" style="display:none">
															<option value="1">Resume Adding Outfits</option>
															<option value="0" selected>Pause Adding Outfits</option>
														</select>
														<button onclick="clearWardrobe();" style="display:none;">Clear Wardrobe</button>
													</td>
												</tr>
											</table>
										</td>
										<td></td>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>
											<div style="overflow-x: auto; width:360px;">
												<table border="1">
													<tr class="trl trls_body1"></tr>
												</table>
											</div>
										</td>
										<td>
											
										</td>
									</tr>
									<tr>
										<td>
											<div style="overflow-x: auto; width:360px;">
												<table border="1">
													<tr class="trl trls_bg"></tr>
												</table>
											</div>
										</td>
										<td>
											
										</td>
									</tr>
									<tr>
										<td>
											<div style="overflow-x: auto; width:360px;">
												<table border="1">
													<tr class="trl trls_hair"></tr>
												</table>
											</div>
										</td>
										<td>
											
										</td>
									</tr>
									<tr>
										<td>
											<div style="overflow-x: auto; width:360px;">
												<table border="1">
													<tr class="trl trls_front"></tr>
												</table>
											</div>
										</td>
										<td>
											
										</td>
									</tr>
									<tr>
										<td>
											<div style="overflow-x: auto; width:360px;">
												<table border="1">
													<tr class="trl trls_face_acc"></tr>
												</table>
											</div>
										</td>
										<td>
											
										</td>
									</tr>
									<tr>
										<td>
											<div style="overflow-x: auto; width:360px;">
												<table border="1">
													<tr class="trl trls_hair_acc"></tr>
												</table>
											</div>
										</td>
										<td>
											
										</td>
									</tr>
									<tr>
										<td>
											<div style="overflow-x: auto; width:360px;">
												<table border="1">
													<tr class="trl trls_body_acc"></tr>
												</table>
											</div>
										</td>
										<td>
											
										</td>
									</tr>
									<tr>
										<td>
											<div style="overflow-x: auto; width:360px;">
												<table border="1">
													<tr class="trl trls_back_acc"></tr>
												</table>
											</div>
										</td>
										<td>
											
										</td>
									</tr>
								</tbody>
								<tfoot>
									<tr>
										<td>
											<div style="overflow-x: auto; width:360px; display:none;">
												<table border="1">
													<tr class="dumper"></tr>
												</table>
											</div>
										</td>
									</tr>
								</tfoot>
							</table>
						</td>
					</tr>
				</table>
				</td>
			</tr>
			<tr><!-- Debug -->
				<td colspan="2">
					<table border="1">
						<tr>
							<td>
								<select id="slotsPreviewSelect" onchange="changeSetting('slotsPreview', 1)";>
									<option value="1" selected>Show Outfits Preview</option>
									<option value="0">Hide Outfits Preview</option>
								</select>
								<input size="1" id="slotsPreviewID" name="slotsPreviewName" class="settingToggle" onchange="changeSetting('slotsPreview', 2)" onkeyup="changeSetting('slotsPreview', 2)">
							</td>
							<td>
								<select id="inputsToggleSelect" onchange="changeSetting('inputsToggle', 1)";>
									<option value="1">Show All Textbox</option>
									<option value="0">Hide All Textbox</option>
									<option value="2" selected>Show Textbox ID's</option>
								</select>
								<input size="1" id="inputsToggleID" name="inputsToggleName" class="settingToggle" onchange="changeSetting('inputsToggle', 2)" onkeyup="changeSetting('inputsToggle', 2)">
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		<script type="text/javascript">
			$(function(){ var xy;
				// Needs to Initialize Settings
				changeSetting("server", 3); changeSetting("slotsPreview", 3); changeSetting("inputsToggle", 3);

				// Initialize Wardrobe Stuffs
				populateCounter(2);


				//Initialize Values inside URL
				for (i=0; i<111; i++) { // for id1
					xy = getDetails(i);
					loadBlankImage(i, xy["name"]);
					if(localStorage.getItem(xy["name"])) { //put stored ids on input
						$("#"+xy["name"]+"ID").val(localStorage.getItem(xy["name"]));
						change(i,1,2);
					}
				}
				for (i=2; i<12; i++) { // id2 and onwards
					xy = getDetails(0, i); // always 0 for now coz id2 and above always have 1 parameter only
					if(localStorage.getItem(xy["name"])) {
						$("#"+xy["name"]+"ID").val(localStorage.getItem(xy["name"]));
						change(0,i,2);
					} else { // no initial value, set it first
						change(0,i,1);
					}
				}

				// Initialize Selected Slots
				clicked(selectedHairSlot, 2); clicked(selectedFrontSlot, 2); clicked(selectedFaceAccSlot, 2); clicked(selectedHairAccSlot, 2); clicked(selectedBodyAccSlot, 2); clicked(selectedBackAccSlot, 2);

				// Initialize Image
				updateImage(); console.log("Updating Image via: onload");
				populate(0);populate(0);populate(0);populate(0); $("#populationID").val(parseInt($("#populationID").val())+100); populateCounter(1);
				//startPopulate();
			});

			// Settings
			var settingsArray = ["server", "slotsPreview", "inputsToggle"];
			function changeSetting(settingName, mode = 1) { console.log("changeSetting("+settingName+", "+mode+")");
				if(localStorage.getItem(settingName) == null) mode = 1; // deny (onload) because this is (onFirstRun)
				if(mode==3) {$("#"+settingName+"ID").val( localStorage.getItem(settingName) ); mode = 2; } //localStorage->id->select (onload)
				if(mode==1) $("#"+settingName+"ID").val( $("#"+settingName+"Select").val() ); // from select to id
				if(mode==2) $("#"+settingName+"Select").val( $("#"+settingName+"ID").val() ); // from id to select

				if(settingName=="slotsPreview") {
					if ($("#"+settingName+"ID").val()=="1") $("#showhidestuff").show();
					if ($("#"+settingName+"ID").val()=="0") $("#showhidestuff").hide();
				} if(settingName=="inputsToggle") {
					if ($("#"+settingName+"ID").val()=="1") $(".settingToggle, .outfitToggle").show();
					if ($("#"+settingName+"ID").val()=="0") $(".settingToggle, .outfitToggle").hide();
					if ($("#"+settingName+"ID").val()=="2") { $(".settingToggle").hide(); $(".outfitToggle").show(); }
				}

				localStorage.setItem(settingName, $("#"+settingName+"ID").val()); //id->localStorage
			};



			// Set Selected Slots 
			var selectedSlotArray = ["selectedFrontSlot", "", "selectedBodyAccSlot", "selectedBodyAccSlot", "selectedHairAccSlot", "selectedHairAccSlot", "selectedFaceAccSlot", "selectedFaceAccSlot", "selectedBackAccSlot", "selectedBackAccSlot", "", "selectedHairSlot", "", "", "selectedHairSlot", "selectedFrontSlot", "selectedBodyAccSlot", "selectedHairAccSlot", "selectedFaceAccSlot", "selectedBackAccSlot"];
			var selectedHairSlot = 11, selectedFrontSlot = 0, selectedFaceAccSlot = 6, selectedHairAccSlot = 4, selectedBodyAccSlot = 2, selectedBackAccSlot = 8;
			function clicked(selectedSlot, action = 0) { console.log("clicked(" + selectedSlot+")"); // 0=Default; 2=onFirstRun/onLoad
				var cldt = getDetails(selectedSlot); cldturl = cldt["url"];
				if (action == 2) { //onload
					if(localStorage.getItem(selectedSlotArray[selectedSlot])==null) localStorage.setItem(selectedSlotArray[selectedSlot], selectedSlot); //onFirstRun
					window[selectedSlotArray[selectedSlot]] = localStorage.getItem(selectedSlotArray[selectedSlot]); // localStorage to var
					selectedSlot = window[selectedSlotArray[selectedSlot]] // var to selected var
				}
				
				$(".tdi"+cldturl).css({"background-color": "transparent"});
				$(".tdi"+selectedSlot).css({"background-color": "#949494"});
				if        (selectedSlot ==  0                       || selectedSlot == 15) {
					selectedFrontSlot   = selectedSlot; localStorage.setItem("selectedFrontSlot",   selectedSlot);
				} else if (selectedSlot ==  2 || selectedSlot ==  3 || selectedSlot == 16) {
					selectedBodyAccSlot = selectedSlot; localStorage.setItem("selectedBodyAccSlot", selectedSlot);
				} else if (selectedSlot ==  4 || selectedSlot ==  5 || selectedSlot == 17) {
					selectedHairAccSlot = selectedSlot; localStorage.setItem("selectedHairAccSlot", selectedSlot);
				} else if (selectedSlot ==  6 || selectedSlot ==  7 || selectedSlot == 18) {
					selectedFaceAccSlot = selectedSlot; localStorage.setItem("selectedFaceAccSlot", selectedSlot);
				} else if (selectedSlot ==  8 || selectedSlot ==  9 || selectedSlot == 19) {
					selectedBackAccSlot = selectedSlot; localStorage.setItem("selectedBackAccSlot", selectedSlot);
				} else if (selectedSlot == 11 || selectedSlot == 14) {
					selectedHairSlot    = selectedSlot; localStorage.setItem("selectedHairSlot",    selectedSlot);
				}
			}



			// Wardrobe Settings
			let nIntervId;
			function populateSetting() {
				if ($("#populateSelect").val() == "1") startPopulate();
				if ($("#populateSelect").val() == "0") 	 stopPopulate();
			}
			function startPopulate() {
				if (!nIntervId) { nIntervId = setInterval(populate,1*1000); }  
			}
			function stopPopulate(){
				clearInterval(nIntervId); nIntervId = null;
			}    
			function clearWardrobe() { $(".trl").empty(); }
			function populateCounter(mode = 1) { var ppc; // 1=getset, 2=onload, 3=-200
				if (localStorage.getItem("lastPopulateCounter") == null) localStorage.setItem("lastPopulateCounter", "1"); //ls (onFirstRun)
				if(mode==2) {$("#populationID").val(localStorage.getItem("lastPopulateCounter"));} // lS to input //onload
				ppc = $("#populationID").val(); // input to var

				localStorage.setItem("lastPopulateCounter", $("#populationID").val()); // input to ls
				return parseInt(ppc);
			}



			// Wardrobe Populate
			var pp, pq;
			function populate(mode = 1) { selectedServer = $("#serverSelect").val(); var pp = populateCounter(1); pq=pp+25;
				if (mode==0) { pp-=50; pq-=50; } //adjust counters to make previous page
				var slotsToPopulate = [0, 1, 2, 4, 6, 8, 10, 11];
				for(pp; pp<pq; pp++) {
					for (ims=0; ims<slotsToPopulate.length; ims++){
						var tbp = getDetails(slotsToPopulate[ims], 1); var tbpurl = tbp["url"];
						console.log("pp: "+pp+" || pq: "+pq);
						$(".dumper").append("<td class=\"txbl txbls"+tbpurl+" txbli_"+pp+"_"+slotsToPopulate[ims]+"\">"+
						"<img class=\"imgPreview img_"+pp+"_"+slotsToPopulate[ims]+"\" onload=\"imageFound("+pp+", "+slotsToPopulate[ims]+",'"+tbpurl+"')\" onerror=\"imageError("+pp+", '"+slotsToPopulate[ims]+"')\" onclick=\"clickItem("+pp+", "+slotsToPopulate[ims]+")\" src=\""+selectedServer+"img/avatar_cate_thum/"+tbpurl+"/"+pp+".png\">" +
						"</td>");
					}

				} $("#populationID").val(pp); populateCounter(1);
			}
			function imageFound(idd, selSlot, tbpurl) { $(".txbli_"+idd+"_"+selSlot).appendTo(".trls_"+tbpurl); }
			function imageError(idd, selSlot) {         $(".txbli_"+idd+"_"+selSlot).remove();                  }
			function clickItem(idd, selSlot) {
				$(".txbli_"+idd+"_"+selSlot).css({"background-color": "white"});
				setTimeout(function(){ $(".txbli_"+idd+"_"+selSlot).css({"background-color": "transparent"}); }, 689);
				
				if        (selSlot == 0                 || selSlot == 15) {
					tempDetail = getDetails(selectedFrontSlot, 1); tempDetailName = tempDetail["name"];
					$("#"+tempDetailName+"ID").val(idd); change(selectedFrontSlot);
				} else if (selSlot == 2 || selSlot == 3 || selSlot == 16) {
					tempDetail = getDetails(selectedBodyAccSlot, 1); tempDetailName = tempDetail["name"];
					$("#"+tempDetailName+"ID").val(idd); change(selectedBodyAccSlot);
				} else if (selSlot == 4 || selSlot == 5 || selSlot == 17) {
					tempDetail = getDetails(selectedHairAccSlot, 1); tempDetailName = tempDetail["name"];
					$("#"+tempDetailName+"ID").val(idd); change(selectedHairAccSlot);
				} else if (selSlot == 6 || selSlot == 7 || selSlot == 18) {
					tempDetail = getDetails(selectedFaceAccSlot, 1); tempDetailName = tempDetail["name"];
					$("#"+tempDetailName+"ID").val(idd); change(selectedFaceAccSlot);
				} else if (selSlot == 8 || selSlot == 9 || selSlot == 19) {
					tempDetail = getDetails(selectedBackAccSlot, 1); tempDetailName = tempDetail["name"];
					$("#"+tempDetailName+"ID").val(idd); change(selectedBackAccSlot);
				} else if (selSlot == 11 || selSlot == 14) {
					tempDetail = getDetails(selectedHairSlot, 1); tempDetailName = tempDetail["name"];
					$("#"+tempDetailName+"ID").val(idd); change(selectedHairSlot);
				} else {
					tempDetail = getDetails(selSlot, 1); tempDetailName = tempDetail["name"];
					$("#"+tempDetailName+"ID").val(idd); change(selSlot);
				}
				updateImage();
			}



			//localStorage.removeItem("myCat");
			//localStorage.clear();
			function loadBlankImage(aydi, neym){
				$("#"+neym+"Preview").css({
					"background-image": "url('"+$("#serverSelect").val()+"img/cos/avatar_slot"+aydi+".png')",
					"background-size": "contain"
				});
			}

			var lastTemp = [];
			var xpname, xpurl, xpval; //change

			function getDetails(id, main_id = 1) {
				var temp = [];
					if(main_id==1) {
						switch (id) {
							case   0: temp["url"] = "front";    temp["name"] = "front";       break;
							case   1: temp["url"] = "body1";    temp["name"] = "body";        break;
							case   2: temp["url"] = "body_acc"; temp["name"] = "bodyacc1";    break;
							case   3: temp["url"] = "body_acc"; temp["name"] = "bodyacc2";    break;
							case   4: temp["url"] = "hair_acc"; temp["name"] = "hairacc1";    break;
							case   5: temp["url"] = "hair_acc"; temp["name"] = "hairacc2";    break;
							case   6: temp["url"] = "face_acc"; temp["name"] = "faceacc1";    break;
							case   7: temp["url"] = "face_acc"; temp["name"] = "faceacc2";    break;
							case   8: temp["url"] = "back_acc"; temp["name"] = "backacc1";    break;
							case   9: temp["url"] = "back_acc"; temp["name"] = "backacc2";    break;
							case  10: temp["url"] = "bg";       temp["name"] = "bg";          break;
							case  11: temp["url"] = "hair";     temp["name"] = "hairfront";   break;
							case  12: temp["url"] = "face";     temp["name"] = "eyeright";    break;
							case  13: temp["url"] = "face";     temp["name"] = "eyeleft";     break;
							case  14: temp["url"] = "hair";     temp["name"] = "hairback";    break;
							case  15: temp["url"] = "front";    temp["name"] = "front2";      break;
							case  16: temp["url"] = "body_acc"; temp["name"] = "bodyacc3";    break;
							case  17: temp["url"] = "hair_acc"; temp["name"] = "hairacc3";    break;
							case  18: temp["url"] = "face_acc"; temp["name"] = "faceacc3";    break;
							case  19: temp["url"] = "back_acc"; temp["name"] = "backacc3";    break;
							case  20: temp["url"] = "xx";       temp["name"] = "pupilright";  break; //todo multiple selects for pupils
							case  21: temp["url"] = "xx";       temp["name"] = "pupilleft";   break;
							// +69 fillers
							case  91: temp["url"] = "xx";       temp["name"] = "browslashes"; break; //color
								// 92 face line 0 Regular 1 Fine
							// +12 fillers
							case 104: temp["url"] = "xx";       temp["name"] = "customeyes";  break;
							case 105: temp["url"] = "xx";       temp["name"] = "custommouth"; break;
							case 106: temp["url"] = "xx";       temp["name"] = "custombrows"; break;
							// +3 fillers but one of these are custom MR's
							case 110: temp["url"] = "effect";   temp["name"] = "effects"; break;
							default:  temp["url"] = "xx"; //console.log("!"+id);
							}
						} else if (main_id==2) {
							if (id==0) { temp["url"] = "xx";    temp["name"] = "skincolor"; }
						} else if (main_id==3) {
							if (id==0) { temp["url"] = "xx";    temp["name"] = "height"; }
						} else if (main_id==4) {
							if (id==0) { temp["url"] = "xx";    temp["name"] = "expression"; }
						} else if (main_id==5) {
							if (id==0) { temp["url"] = "xx";    temp["name"] = "blushsweat"; }
						} else if (main_id==6) {
							if (id==0) { temp["url"] = "xx";    temp["name"] = "filetype"; }
						} else if (main_id==7) {
							if (id==0) { temp["url"] = "xx";    temp["name"] = "filesize"; }
						}

						// id 9 custom crop 0-default 1-face 2-body 3-cover(lengthy)
				lastTemp = temp;
				return temp;
			}
			function change(id, main_id = 1, select = 0) { console.log("change("+id+","+main_id+","+select+")");
					var xp = [];
					xp = getDetails(id, main_id); xpname = xp["name"]; xpurl = xp["url"];

					if(select==1) $("#"+xpname+"ID").val( $("#"+xpname+"Select").val() ); // from select to id
					else if(select==2) $("#"+xpname+"Select").val( $("#"+xpname+"ID").val() ); // from id to select (usually onload)
					xpval = $("#"+xpname+"ID").val();
					
					if(xpurl == "xx") {}
					else	$("#"+xpname+"Preview").attr("src", $("#serverSelect").val()+"img/avatar_cate_thum/"+xpurl+"/"+xpval+".png");

					localStorage.setItem(xpname, xpval);
			}

			function generateURL() { imageURL = ""; var addComma = false;
				imageURL += $("#serverSelect").val() + "img/php/all_param2.php?1753";

				for(i=1; i<=7; i++) { addComma = false;
					imageURL += "&id" + i + "=";
					if(i==1) {
						for(j=0; j<=110; j++) { var zp = getDetails(j, i); var zpname = zp["name"];

							if(addComma) imageURL+=",";
							imageURL += encoder( $("#"+zpname+"ID").val() , j , "x");
							addComma = true;
						}
					} else { var zp = getDetails(0, i); var zpname = zp["name"];
						imageURL +=    encoder( $("#"+zpname+"ID").val() , 0 , "x");
					}
					
					imageURL += "1";
				}

				return imageURL;
			}

			var piece, encoded;
			function encoder(cake = "0", id = 1, splitSetting="") {
				cake = cake.trim();
				if(cake == "") cake = "0";
				piece = cake.split("");

				encoded = "";
				for(c=0;c<piece.length;c++){ if(splitSetting=="") splitter = gr(); else splitter = "x";
					encoded += piece[c]; encoded += splitter;
					if (id!=0 && c==0) {      if(splitSetting=="") splitter = gr(); else splitter = "x";
						encoded = splitter + encoded;

					}
				}

				//console.log(piece);
				return encoded;
			}

			function gr() { // gr stands for generate random (letter)
				return String.fromCharCode(0|Math.random()*26+97);
			}


			// Enter Function and Image Update
			$(document).keypress(function(e) {
				if(e.which == 13) {  console.log("Update Imag via: Keypress Enter");
					updateImage();
				}
			});
			function updateImage() { var generatedURL = generateURL();
				$("#imagePreview").attr("src", generatedURL);
				$("#url").val(generatedURL);
			}
			$(".selector").on("change", function(){ console.log("Update Image via: .selector");
				updateImage();
			});
			//


			// URL Tester
			var url = "https://us-nizi2d-r53.amz-aws.jp/img/php/all_param2.php?1753&id1=0D,g3q7f7a5U1q,a0B,Z0x,F3u1r8d6X,S0H,D2i7w5E,w0u,G0i,90d,D3h7U1G8M6V,j1K2R6k2h3q,P1G561A9g0D,6165N1G8i9B,t111L2P5Q0c,b0e,N09,P06,50d,y0R,s2n1d,t2Z1X,D0G,h0a,w0S,W0A,A0Z,m06,g0H,F07,b0N,T0e,10c,x0u,x0t,A08,D0F,f02,r0N,i09,Q0g,q0J,D0G,h0R,10Z,E09,N0B,n0k,m0u,A0L,D0c,q0u,i08,603,x0M,C0Q,c0J,t0J,t0C,S0d,D0Y,S0C,608,70d,Z0a,10F,f0Q,p09,r0U,w0W,U0K,T0w,r0Z,D0e,e0T,J0H,50p,p0B,r0T,J0f,50i,y0B,x0P,d0T,n0R,B01,n0S,30j,i0n,Z0u,j04,x0n,e1E,r0K,k08,J0D,u0F,n0K,T0w,P05,d0n,s06,D0y,P0v,E0r,R0T,D0Y,V0q,c0n,908,A0Z1&id2=2S1&id3=1G1&id4=1p1&id5=0H1&id6=0t1&id7=0k1&id8=0e1&id9=0L1&id10=091";
			//console.log(url);
			var xsplit = url.split("&");//console.log("xsplit:"); console.log(xsplit);
			var ysplit, zsplit;
			if(xsplit.length!=1){
				for(p=0;p<xsplit.length;p++){ //p=1 coz we skip https stuffs
					if(p==0) {/*console.log("url is: "+xsplit[p]);*/continue;} //url
					ysplit = xsplit[p].split("="); //console.log(ysplit);
					if(ysplit!=1){
						zsplit = ysplit[1].split(","); /*console.log("zsplit id"+p+":"); console.log(zsplit);*/

						
					} else alert("fail split! 2");
				}
			}else alert("fail split!");
		</script>

	</body>
</html>