<!DOCTYPE html>
<html>

<head>
    <title>DGFC v20250101</title>
    <meta name="viewport" content="initial-scale=1.0 width=max-device-width user-scalable=yes"><!-- initial-scale=1.0, width=device-width -->

    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"><!-- for iframe errors -->
    <style type="text/css">
        body {
            font-size: 10px;
        }

        td {
            text-align: center;
        }

        .pointer {
            cursor: pointer;
        }

        .imgPreview {
            width: 64px;
            height: 64px;
            cursor: pointer;
        }

        .btnDesign {
            background: url("https://us-nizi2d-r53.amz-aws.jp/img/hp/select_pink.png?1100");
            background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
            padding-top: 9px;   
            padding-bottom: 9px;
            padding-right: 10px;
            padding-left: 7px;
            margin: -1px;
            border: transparent;
            cursor: pointer;
        }

        .context-menu {
            position: absolute;
            text-align: center;
            background: lightgray;
            border: 1px solid black;
        }

        .context-menu ul {
            padding: 0px;
            margin: 0px;
            min-width: 150px;
            list-style: none;
        }

        .context-menu ul li {
            padding-bottom: 11px;
            padding-top: 11px;
            border: 1px solid black;
            cursor: pointer;
            user-select: none;
        }

        .context-menu ul li p {
            text-decoration: none;
            font-size: 15px;
            color: black;
            margin: 0px;
            user-select: none;
        }

        .context-menu ul li:hover {
            background: darkgray;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>

<body>
    <table id="main_table" class="bordered fonter" border="1" style="display:none;">
        <tr>
            <td>
                <table class="bordered fonter" border="1">
                    <tr>
                        <td>
                            <table class="bordered fonter" 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="9" id="serverID" name="serverName" class="settingToggle" style="display:none;"
                                            onchange="changeSetting('server', 2)" onkeyup="changeSetting('server', 2)">

                                    </td>
                                    <td></td>
                                    <td>URL</td>
                                    <td><input id="url" size="13" style="font-size:11px" onclick="$(this).select();">
                                    </td>
                                    <td><button class="pointer" onclick="loadURL(0);">Load</button></td>
                                    <td><button class="pointer"
                                            onclick="updateImage(3);console.log('Update Image via: Update Button');">Update</button>
                                    </td>
                                    <td><button class="btnDesignRemover" onclick="saveImage(0);"><b>Save
                                                Image</b></button></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table class="bordered fonter" border="1">
                                <tr>
                                    <td>Skin Color</td>
                                    <td>
                                        <select id="skincolorSelect" class="selector" onchange="change(0,2,1);" style="width:53px">
                                            <option value="1">Regular</option>
                                            <option value="2" selected>Pale</option>
                                            <option value="3">Tanned</option>
                                        </select>
                                        <br><input size="1" id="skincolorID" name="skincolorName" class="settingToggle" style="display:none;"
                                            onchange="change(0,2,2);" onkeyup="change(0,2,2);">
                                    </td>
                                    <td>&nbsp;</td>
                                    <td>Height</td>
                                    <td>
                                        <select id="heightSelect" class="selector" onchange="change(0,3,1);" style="width:56px">
                                            <option value="1" selected>Regular</option>
                                            <option value="2">Short</option>
                                            <option value="3">Very Short</option>
                                        </select>
                                        <br><input size="1" id="heightID" name="heightName" class="settingToggle" style="display:none;"
                                            onchange="change(0,3,2);" onkeyup="change(0,3,2);">
                                    </td>
                                    <td>&nbsp;</td>
                                    <td>Expression</td>
                                    <td>
                                        <select id="expressionSelect" class="selector xmotion" onchange="change(0,4,1)" style="width:75px">
                                            <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>
                                        <br><input size="1" id="expressionID" name="expressionName" class="settingToggle" style="display:none;"
                                            onchange="change(0,4,2);" onkeyup="change(0,4,2);">
                                    </td>
                                    <td>
                                        <select id="blushsweatSelect" class="selector" onchange="change(0,5,1)" style="width:80px">
                                            <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>
                                        <br><input size="1" id="blushsweatID" name="blushsweatName" class="settingToggle" style="display:none;"
                                            onchange="change(0,5,2);" onkeyup="change(0,5,2);">
                                    </td>

                                    <td>&nbsp;</td>

                                    <td>Image</td><!-- Type/Size -->
                                    <td>
                                        <select id="filetypeSelect" class="selector xmotion" onchange="change(0,6,1)" style="width:52px">
                                            <option value="0">JPEG</option>
                                            <option value="1" selected>PNG</option>
                                        </select>
                                        <br><input size="1" id="filetypeID" name="filetypeName" class="settingToggle" style="display:none;"
                                            onchange="change(0,6,2);" onkeyup="change(0,6,2);">
                                    </td>
                                    <td>
                                        <select id="filesizeSelect" class="selector xmotion" onchange="change(0,7,1)" style="width:52px">
                                            <option value="0" selected>Full</option>
                                            <option value="1">Half</option>
                                            <option value="2">Quarter</option>
                                        </select>
                                        <br><input size="1" id="filesizeID" name="filesizeName" class="settingToggle" style="display:none;"
                                            onchange="change(0,7,2);" onkeyup="change(0,7,2);">
                                    </td>
                                    <td class="settingToggle" style="display:none;">
                                        <select id="motionSelect" class="selector" onchange="changeSetting('motion',1)" style="width:52px">
                                            <option value="0" selected>Static Image</option>
                                            <option value="2" disabled>Static Image (Dynamic Effect)</option>
                                            <option value="1">Motion Rare (Experimental)(Needs CORS extension)</option>
                                            <option value="3" disabled>Bedtime</option>
                                        </select>
                                        <br><input size="1" id="motionID" name="motionName" class="settingToggle" style="display:none;"
                                            onchange="changeSetting('motion');" onkeyup="changeSetting('motion',2);">
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table class="bordered fonter" border="1">
                    <tr>
                        <td valign="top" class="image_static" style="max-width:461px;max-height:615px;display:none;">
                            <img id="imagePreview" style="max-width:461px;max-height:615px;" src="">
                        </td>
                        <td valign="top" class="image_animated" style="max-width:461;max-height:615;padding:0px;margin:0px;display:none;">
                            <iframe id="the_mr" sandbox="allow-scripts allow-same-origin" src="" style="width:460px;height:614px;padding:0px;margin:0px"></iframe>
                        </td>
                        <td valign="top" id="showhidestuff">
                            <table id="slotsTable" class="bordered fonter" border="1" style="display: block; max-height: 614px; overflow-y: auto; ">
                                <tr>
                                    <td class="td_mobile_body td_desktop_front">
                                        <div class="tdi tdi0 tdifront">
                                            Front <!--0--> <br class="outfitToggle">
                                            <input id="frontID" name="frontName" class="outfitToggle input_enter"
                                                size="4" onchange="change(0);" onkeyup="change(0)"><br>
                                            <img id="frontPreview" class="imgPreview righterSlots" onclick="clicked(0)"
                                                oncontextmenu="change(0,1,3)">
                                        </div>
                                    </td>
                                    <td class="td_mobile_bg td_desktop_body">
                                        <div class="tdi tdi1 tdibody">
                                            Body <!--1--> <br class="outfitToggle">
                                            <input id="bodyID" name="bodyName" class="outfitToggle input_enter" size="4"
                                                onchange="change(1,1,0,1);" onkeyup="change(1)"><br>
                                            <img id="bodyPreview" class="imgPreview righterSlots"
                                                oncontextmenu="change(1,1,3)">
                                        </div>
                                    </td>
                                    <td class="td_mobile_hairfront td_desktop_bodyacc1">
                                        <div class="tdi tdi2 tdibody_acc">
                                            Body Acc1 <!--2--> <br class="outfitToggle">
                                            <input id="bodyacc1ID" name="bodyacc1Name" class="outfitToggle input_enter"
                                                size="4" onchange="change(2);" onkeyup="change(2)"><br>
                                            <img id="bodyacc1Preview" class="imgPreview righterSlots"
                                                onclick="clicked(2)" oncontextmenu="change(2,1,3)">
                                        </div>
                                    </td>
                                    <td class="td_mobile_hider td_desktop_bodyacc2">
                                        <div class="tdi tdi3 tdibody_acc">
                                            Body Acc2 <!--3--><br class="outfitToggle">
                                            <input id="bodyacc2ID" name="bodyacc2Name" class="outfitToggle input_enter"
                                                size="4" onchange="change(3);" onkeyup="change(3)"><br>
                                            <img id="bodyacc2Preview" class="imgPreview righterSlots"
                                                onclick="clicked(3)" oncontextmenu="change(3,1,3)">
                                        </div>
                                    </td>
                                    <td class="td_mobile_hider td_desktop_hairacc1">
                                        <div class="tdi tdi4 tdihair_acc">
                                            Hair Acc1 <!--4--><br class="outfitToggle">
                                            <input id="hairacc1ID" name="hairacc1Name" class="outfitToggle input_enter"
                                                size="4" onchange="change(4);" onkeyup="change(4)"><br>
                                            <img id="hairacc1Preview" class="imgPreview righterSlots"
                                                onclick="clicked(4)" oncontextmenu="change(4,1,3)">
                                        </div>
                                    </td>
                                    <td class="td_mobile_hider td_desktop_hairacc2">
                                        <div class="tdi tdi5 tdihair_acc">
                                            Hair Acc2 <!--5--><br class="outfitToggle">
                                            <input id="hairacc2ID" name="hairacc2Name" class="outfitToggle input_enter"
                                                size="4" onchange="change(5);" onkeyup="change(5)"><br>
                                            <img id="hairacc2Preview" class="imgPreview righterSlots"
                                                onclick="clicked(5)" oncontextmenu="change(5,1,3)">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="td_mobile_eyeright td_desktop_faceacc1">
                                        <div class="tdi tdi6 tdiface_acc">
                                            Face Acc1 <!--6--><br class="outfitToggle">
                                            <input id="faceacc1ID" name="faceacc1Name" class="outfitToggle input_enter"
                                                size="4" onchange="change(6);" onkeyup="change(6)"><br>
                                            <img id="faceacc1Preview" class="imgPreview righterSlots"
                                                onclick="clicked(6)" oncontextmenu="change(6,1,3)">
                                        </div>
                                    </td>
                                    <td class="td_mobile_eyeleft td_desktop_faceacc2">
                                        <div class="tdi tdi7 tdiface_acc">
                                            Face Acc2 <!--7--><br class="outfitToggle">
                                            <input id="faceacc2ID" name="faceacc2Name" class="outfitToggle input_enter"
                                                size="4" onchange="change(7);" onkeyup="change(7)"><br>
                                            <img id="faceacc2Preview" class="imgPreview righterSlots"
                                                onclick="clicked(7)" oncontextmenu="change(7,1,3)">
                                        </div>
                                    </td>
                                    <td class="td_mobile_hairback td_desktop_backacc1">
                                        <div class="tdi tdi8 tdiback_acc">
                                            Back Acc1 <!--8--><br class="outfitToggle">
                                            <input id="backacc1ID" name="backacc1Name" class="outfitToggle input_enter"
                                                size="4" onchange="change(8);" onkeyup="change(8)"><br>
                                            <img id="backacc1Preview" class="imgPreview righterSlots"
                                                onclick="clicked(8)" oncontextmenu="change(8,1,3)">
                                        </div>
                                    </td>
                                    <td class="td_mobile_hider td_desktop_backacc2">
                                        <div class="tdi tdi9 tdiback_acc">
                                            Back Acc2 <!--9--><br class="outfitToggle">
                                            <input id="backacc2ID" name="backacc2Name" class="outfitToggle input_enter"
                                                size="4" onchange="change(9);" onkeyup="change(9)"><br>
                                            <img id="backacc2Preview" class="imgPreview righterSlots"
                                                onclick="clicked(9)" oncontextmenu="change(9,1,3)">
                                        </div>
                                    </td>
                                    <td class="td_mobile_hider td_desktop_bg">
                                        <div class="tdi tdi10 tdibg">
                                            Background <!--10--><br class="outfitToggle">
                                            <input id="bgID" name="bgName" size="4" class="outfitToggle input_enter"
                                                onchange="change(10);" onkeyup="change(10)"><br>
                                            <img id="bgPreview" class="imgPreview righterSlots"
                                                oncontextmenu="change(10,1,3)">
                                        </div>
                                    </td>
                                    <td class="td_mobile_hider td_desktop_hairfront">
                                        <div class="tdi tdi11 tdihair">
                                            Front Hair <!--11--><br class="outfitToggle">
                                            <input id="hairfrontID" name="hairfrontName"
                                                class="outfitToggle input_enter" size="4" onchange="change(11);"
                                                onkeyup="change(11)"><br>
                                            <img id="hairfrontPreview" class="imgPreview righterSlots"
                                                onclick="clicked(11)" oncontextmenu="change(11,1,3)">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="td_mobile_pupilright td_desktop_eyeright">
                                        <div class="tdi tdi12">
                                            Right Eye <!--12--><br>
                                            <select id="eyerightSelect" class="selector" onchange="change(12,1,1);"
                                                style="width:66px">
                                                <option value="749" selected>Brown</option>
                                                <option value="750">Black</option>
                                                <option value="751">Blue</option>
                                                <option value="752">Red</option>
                                                <option value="753">Green</option>
                                                <option value="754">Purple</option>
                                                <option value="755">Red/Blue</option>
                                                <option value="4048">Gold (Premium)</option>
                                                <option value="4049">Black (Premium)</option>
                                                <option value="4050">Blue (Premium)</option>
                                                <option value="4051">Red (Premium)</option>
                                                <option value="4052">Green (Premium)</option>
                                                <option value="4053">Purple (Premium)</option>
                                                <option value="1077">Orange</option>
                                                <option value="1078">Pink (Premium)</option>
                                                <option value="1079">Amber (Premium)</option>
                                                <option value="1080">Aqua (Premium)</option>
                                                <option value="1081">Emerald</option>
                                                <option value="15189">Yellow/Pink</option>
                                                <option value="15190">Pink/Blue</option>
                                                <option value="15191">Purple/Yellow</option>
                                                <option value="15192">Purple/Blue</option>
                                                <option value="15193">Silver</option>
                                                <option value="15194">Dark/Light Green</option>
                                                <option value="31276">Citrus</option>
                                                <option value="31277">Peach</option>
                                                <option value="31278">Biscuit</option>
                                                <option value="31279">Aquamarine</option>
                                                <option value="31280">Night Purple</option>
                                                <option value="31281">Ruby</option>
                                            </select><br class="settingToggle">
                                            <input id="eyerightID" name="eyerightName" class="settingToggle input_enter"
                                                size="4" onchange="change(12,1,2);" onkeyup="change(12,1,2)"><br>
                                            <img id="eyerightPreview" class="imgPreview righterSlots">
                                        </div>
                                    </td>
                                    <td class="td_mobile_pupilleft td_desktop_eyeleft">
                                        <div class="tdi tdi13">
                                            Left Eye<!--13--><br>
                                            <select id="eyeleftSelect" class="selector" onchange="change(13,1,1);"
                                                style="width:66px">
                                                <option value="749" selected>Brown</option>
                                                <option value="750">Black</option>
                                                <option value="751">Blue</option>
                                                <option value="752">Red</option>
                                                <option value="753">Green</option>
                                                <option value="754">Purple</option>
                                                <option value="755">Red/Blue</option>
                                                <option value="4048">Gold (Premium)</option>
                                                <option value="4049">Black (Premium)</option>
                                                <option value="4050">Blue (Premium)</option>
                                                <option value="4051">Red (Premium)</option>
                                                <option value="4052">Green (Premium)</option>
                                                <option value="4053">Purple (Premium)</option>
                                                <option value="1077">Orange</option>
                                                <option value="1078">Pink (Premium)</option>
                                                <option value="1079">Amber (Premium)</option>
                                                <option value="1080">Aqua (Premium)</option>
                                                <option value="1081">Emerald</option>
                                                <option value="15189">Yellow/Pink</option>
                                                <option value="15190">Pink/Blue</option>
                                                <option value="15191">Purple/Yellow</option>
                                                <option value="15192">Purple/Blue</option>
                                                <option value="15193">Silver</option>
                                                <option value="15194">Dark/Light Green</option>
                                                <option value="31276">Citrus</option>
                                                <option value="31277">Peach</option>
                                                <option value="31278">Biscuit</option>
                                                <option value="31279">Aquamarine</option>
                                                <option value="31280">Night Purple</option>
                                                <option value="31281">Ruby</option>
                                            </select><br class="settingToggle">
                                            <input id="eyeleftID" name="eyeleftName" class="settingToggle input_enter"
                                                size="4" onchange="change(13,1,2);" onkeyup="change(13,1,2)"><br>
                                            <img id="eyeleftPreview" class="imgPreview righterSlots">
                                        </div>
                                    </td>
                                    <td class="td_mobile_browslashes td_desktop_hairback">
                                        <div class="tdi tdi14 tdihair">
                                            Back Hair <!--14--><br class="outfitToggle">
                                            <input id="hairbackID" name="hairbackName" class="outfitToggle input_enter"
                                                size="4" onchange="change(14);" onkeyup="change(14)"><br>
                                            <img id="hairbackPreview" class="imgPreview righterSlots"
                                                onclick="clicked(14)" oncontextmenu="change(14,1,3)">
                                        </div>
                                    </td>
                                    <td class="td_mobile_hider td_desktop_front2">
                                        <div class="tdi tdi15 tdifront">
                                            Front2 <!--15--><br class="outfitToggle">
                                            <input id="front2ID" name="front2Name" class="outfitToggle input_enter"
                                                size="4" onchange="change(15);" onkeyup="change(15)"><br>
                                            <img id="front2Preview" class="imgPreview righterSlots"
                                                onclick="clicked(15)" oncontextmenu="change(15,1,3)">
                                        </div>
                                    </td>
                                    <td class="td_mobile_hider td_desktop_bodyacc3">
                                        <div class="tdi tdi16 tdibody_acc">
                                            Body Acc3 <!--16--><br class="outfitToggle">
                                            <input id="bodyacc3ID" name="bodyacc3Name" class="outfitToggle input_enter"
                                                size="4" onchange="change(16);" onkeyup="change(16)"><br>
                                            <img id="bodyacc3Preview" class="imgPreview righterSlots"
                                                onclick="clicked(16)" oncontextmenu="change(16,1,3)">
                                        </div>
                                    </td>
                                    <td class="td_mobile_hider td_desktop_hairacc3">
                                        <div class="tdi tdi17 tdihair_acc">
                                            Hair Acc3 <!--17--><br class="outfitToggle">
                                            <input id="hairacc3ID" name="hairacc3Name" class="outfitToggle input_enter"
                                                size="4" onchange="change(17);" onkeyup="change(17)"><br>
                                            <img id="hairacc3Preview" class="imgPreview righterSlots"
                                                onclick="clicked(17)" oncontextmenu="change(17,1,3)">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="td_mobile_customeyes td_desktop_faceacc3">
                                        <div class="tdi tdi18 tdiface_acc">
                                            Face Acc3 <!--18--><br class="outfitToggle">
                                            <input id="faceacc3ID" name="faceacc3Name" class="outfitToggle input_enter"
                                                size="4" onchange="change(18);" onkeyup="change(18)"><br>
                                            <img id="faceacc3Preview" class="imgPreview righterSlots"
                                                onclick="clicked(18)" oncontextmenu="change(18,1,3)">
                                        </div>
                                    </td>
                                    <td class="td_mobile_custommouth td_desktop_backacc3">
                                        <div class="tdi tdi19 tdiback_acc">
                                            Back Acc3 <!--19--><br class="outfitToggle">
                                            <input id="backacc3ID" name="backacc3Name" class="outfitToggle input_enter"
                                                size="4" onchange="change(19);" onkeyup="change(19)"><br>
                                            <img id="backacc3Preview" class="imgPreview righterSlots"
                                                onclick="clicked(19)" oncontextmenu="change(19,1,3)">
                                        </div>
                                    </td>
                                    <td class="td_mobile_custombrows td_desktop_pupilright">
                                        <div class="tdi tdi20">
                                            Pupil Right <!--20--><br>
                                            <input id="pupilrightID" name="pupilrightName" class="input_enter" size="4"
                                                onchange="change(20);" onkeyup="change(20)"><br>
                                            <img id="pupilrightPreview" class="imgPreview righterSlots">
                                        </div>
                                    </td>
                                    <td class="td_mobile_hider td_desktop_pupilleft">
                                        <div class="tdi tdi21">
                                            Pupil Left <!--21--><br>
                                            <input id="pupilleftID" name="pupilleftName" class="input_enter" size="4"
                                                onchange="change(21);" onkeyup="change(21)"><br>
                                            <img id="pupilleftPreview" class="imgPreview righterSlots">
                                        </div>
                                    </td>
                                    <td class="td_mobile_hider td_desktop_browslashes">
                                        <div class="tdi tdi91">
                                            Brows&Lashes<!--91--><br>
                                            <select id="browslashesSelect" class="selector" onchange="change(91,1,1);"
                                                style="width:66px">
                                                <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 class="settingToggle">
                                            <input id="browslashesID" name="browslashesName"
                                                class="settingToggle input_enter" size="4" onchange="change(91,1,2);"
                                                onkeyup="change(91,1,2)"><br>
                                            <img id="browslashesPreview" class="imgPreview righterSlots">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="td_mobile_faceacc1 td_desktop_customeyes">
                                        <div class="tdi tdi104">
                                            Custom Eyes <!--104--><br>
                                            <select id="customeyesSelect" class="selector" onchange="change(104,1,1);"
                                                style="width:66px">
                                                <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">Ill-Fated Girl's</option>
                                            </select><br class="settingToggle">
                                            <input id="customeyesID" name="customeyesName"
                                                class="settingToggle input_enter" size="4" onchange="change(104,1,2);"
                                                onkeyup="change(104,1,2)"><br>
                                            <img id="customeyesPreview" class="imgPreview righterSlots">
                                        </div>
                                    </td>
                                    <td class="td_mobile_faceacc2 td_desktop_custommouth">
                                        <div class="tdi tdi105">
                                            Customouth <!--105--><br>
                                            <select id="custommouthSelect" class="selector xmotion" onchange="change(105,1,1);"
                                                style="width:66px">
                                                <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">Ill-Fated Girl's</option>
                                            </select><br class="settingToggle">
                                            <input id="custommouthID" name="custommouthName"
                                                class="settingToggle input_enter" size="4" onchange="change(105,1,2);"
                                                onkeyup="change(105,1,2)"><br>
                                            <img id="custommouthPreview" class="imgPreview righterSlots">
                                        </div>
                                    </td>
                                    <td class="td_mobile_faceacc3 td_desktop_custombrows">
                                        <div class="tdi tdi106">
                                            Custom Brows <!--106--><br>
                                            <select id="custombrowsSelect" class="selector xmotion" onchange="change(106,1,1);"
                                                style="width:66px">
                                                <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">Ill-Fated Girl's</option>
                                            </select><br class="settingToggle">
                                            <input id="custombrowsID" name="custombrowsName"
                                                class="settingToggle input_enter" size="4" onchange="change(106,1,2);"
                                                onkeyup="change(106,1,2)"><br>
                                            <img id="custombrowsPreview" class="imgPreview righterSlots">
                                        </div>
                                    </td>
                                    <td class="td_mobile_hider td_desktop_effects">
                                        <div class="tdi tdi110">
                                            Effect <!--110--><br class="outfitToggle">
                                            <input id="effectsID" name="effectsName" size="4"
                                                class="outfitToggle input_enter" onchange="change(110);"
                                                onkeyup="change(110)"><br>
                                            <img id="effectsPreview" class="imgPreview righterSlots"
                                                oncontextmenu="change(110,1,3)">
                                        </div>
                                    </td>
                                </tr>
                                <tr class="td_desktop_hider">
                                    <td class="td_mobile_hairacc1"></td>
                                    <td class="td_mobile_hairacc2"></td>
                                    <td class="td_mobile_hairacc3"></td>
                                </tr>
                                <tr class="td_desktop_hider">
                                    <td class="td_mobile_bodyacc1"></td>
                                    <td class="td_mobile_bodyacc2"></td>
                                    <td class="td_mobile_bodyacc3"></td>
                                </tr>
                                <tr class="td_desktop_hider">
                                    <td class="td_mobile_backacc1"></td>
                                    <td class="td_mobile_backacc2"></td>
                                    <td class="td_mobile_backacc3"></td>
                                </tr>
                                <tr class="td_desktop_hider">
                                    <td class="td_mobile_front"></td>
                                    <td class="td_mobile_front2"></td>
                                    <td class="td_mobile_effects"></td>
                                </tr>
                            </table>
                        </td>
                        <td valign="top" class="wardlaptop">
                            <table border="1" class="bordered fonter wardrobe">
                                <thead>
                                    <tr>
                                        <td style="text-align: right;">
                                            <div class="wardrobeDynamicWidth" style="overflow-x: auto; width:36px;">
                                                <table class="bordered fonter" border="1">
                                                    <tr>
                                                        <td>Wardrobe &nbsp;</td>
                                                        <td>
                                                            <button id="minusItems" class="btnDesignRemover"
                                                                onclick="clearWardrobe();populate(0);"><b>Items-100</b></button>
                                                            <input size="3" id="populationID" name="populationName"
                                                                value="101" onchange="populateCounter(1);"
                                                                onkeyup="populateCounter(1);">
                                                            <button id="addItems" class="btnDesignRemover"
                                                                onclick="clearWardrobe();populate();"><b>Items+100</b></button>
                                                        </td>
                                                        <td>
                                                            <select id="populateSelect" onchange="populateSetting();" class="settingToggle"
                                                                style="display:none">
                                                                <option value="1">Resume Adding Outfits</option>
                                                                <option value="0" selected>Pause Adding Outfits</option>
                                                            </select>
                                                            <button onclick="clearWardrobe();" class="settingToggle" style="display:none;">Clear
                                                                Wardrobe</button>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </td>
                                        <td></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="wardrobeDynamicWidth" style="overflow-x: auto; width:36px;">
                                                <table class="bordered fonter" border="1">
                                                    <tr class="trl trls_body1"></tr>
                                                </table>
                                            </div>
                                        </td>
                                        <td>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="wardrobeDynamicWidth" style="overflow-x: auto; width:36px;">
                                                <table class="bordered fonter" border="1">
                                                    <tr class="trl trls_bg"></tr>
                                                </table>
                                            </div>
                                        </td>
                                        <td>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="wardrobeDynamicWidth" style="overflow-x: auto; width:36px;">
                                                <table class="bordered fonter" border="1">
                                                    <tr class="trl trls_hair"></tr>
                                                </table>
                                            </div>
                                        </td>
                                        <td>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="wardrobeDynamicWidth" style="overflow-x: auto; width:36px;">
                                                <table class="bordered fonter" border="1">
                                                    <tr class="trl trls_face_acc"></tr>
                                                </table>
                                            </div>
                                        </td>
                                        <td>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="wardrobeDynamicWidth" style="overflow-x: auto; width:36px;">
                                                <table class="bordered fonter" border="1">
                                                    <tr class="trl trls_hair_acc"></tr>
                                                </table>
                                            </div>
                                        </td>
                                        <td>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="wardrobeDynamicWidth" style="overflow-x: auto; width:36px;">
                                                <table class="bordered fonter" border="1">
                                                    <tr class="trl trls_body_acc"></tr>
                                                </table>
                                            </div>
                                        </td>
                                        <td>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="wardrobeDynamicWidth" style="overflow-x: auto; width:36px;">
                                                <table class="bordered fonter" border="1">
                                                    <tr class="trl trls_back_acc"></tr>
                                                </table>
                                            </div>
                                        </td>
                                        <td>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="wardrobeDynamicWidth" style="overflow-x: auto; width:36px;">
                                                <table class="bordered fonter" border="1">
                                                    <tr class="trl trls_front"></tr>
                                                </table>
                                            </div>
                                        </td>
                                        <td>

                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot class="settingToggle">
                                    <tr>
                                        <td>
                                            <div class="wardrobeDynamicWidth settingToggle"
                                                style="overflow-x: auto; width:36px;">
                                                <table class="bordered fonter" border="1">
                                                    <tr class="dumper"></tr>
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr class="historyTop"><!-- History -->
            <td>
                <table class="bordered fonter" border="1">
                    <tr class="historyHeader">
                        <td>
                            History &nbsp;
                        </td>
                        <td>
                            Filter
                            <br class="settingToggle" style="display:none;">
                            <select id="historyFilterSelect" class="selector" onchange="changeSetting('historyFilter',1)" style="width:60px">
                                <option value="All" selected>All Visible</option>
                                <option value="body1">Body only</option>
                                <option value="hair">Hair Only</option>
                                <option value="bg">Background Only</option>
                                <option value="face_accandhair_acc">Face & Hair Accessory</option>
                                <option value="body_accandbackk_acc">Back and Body Accessory</option>
                                <option value="front">Front only</option>
                                <option value="body1andbg">Body and Background</option>
                                <option value="body1andhairandbg">Body, Hair, Background</option>
                            </select>
                            <br class="settingToggle" style="display:none;"><input size="1" id="historyFilterID" name="historyFilterName" class="settingToggle" style="display:none;"
                                onchange="changeSetting('historyFilter',2);" onkeyup="changeSetting('historyFilter',2)">
                        </td>
                    </tr>
                </table>
                <div class="wardrobeDynamicWidth" style="overflow-x: auto; width:36px;">
                    <table class="bordered fonter" border="1" style="display:-webkit-flex;">
                        <tr class="historyList">
                            <td class="clearHistoryTD"><button class="pointer" style="margin:0px;border:0px;padding:0px;margin-right:20px;width:40px;height:40px;" onclick="clearHistory();";>Clear<br>All</button></td>
                            <td class="dumperHistoryTD">
                                <table class="settingToggle bordered settingToggle" style="display:none;">
                                    <tr class="dumperHistory">
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>


        <tr><!-- Wardrobe Alternative for Mobile -->
            <td class="wardmobile">

            </td>
        </tr>

        <tr><!-- Settings -->
            <td>
                <table class="bordered fonter" border="1">
                    <tr>
                        <td>
                            <label for="interfaceSelect">Interface</label><br>
                            <select id="interfaceSelect" onchange="changeSetting('interface', 1);" style="width:53px">
                                <option value="1" selected>Light Mode</option>
                                <option value="0">Dark Mode</option>
                            </select>
                            <br><input size="1" id="interfaceID" name="interfaceName" class="settingToggle" style="display:none;"
                                onchange="changeSetting('interface', 2)" onkeyup="changeSetting('interface', 2)">
                        </td>
                        <td>
                            <label for="inputsToggleSelect">Slots Visibility</label><br>
                            <select id="slotsPreviewSelect" onchange="changeSetting('slotsPreview', 1);"
                                style="width:88px">
                                <option value="1" selected>Show Slots Section</option>
                                <option value="0">Hide Slots Section</option>
                            </select>
                            <br><input size="1" id="slotsPreviewID" name="slotsPreviewName" class="settingToggle" style="display:none;"
                                onchange="changeSetting('slotsPreview', 2)" onkeyup="changeSetting('slotsPreview', 2)">
                        </td>
                        <td>
                            <label for="inputsToggleSelect">Textbox Settings</label><br>
                            <select id="inputsToggleSelect" onchange="changeSetting('inputsToggle', 1);"
                                style="width:115px">
                                <option value="1">Show All Textbox (Debug)</option>
                                <option value="0">Hide All Textbox</option>
                                <option value="2" selected>Show Textbox ID's</option>
                            </select>
                            <br><input size="1" id="inputsToggleID" name="inputsToggleName" class="settingToggle" style="display:none;"
                                onchange="changeSetting('inputsToggle', 2)" onkeyup="changeSetting('inputsToggle', 2)">
                        </td>
                        <td>
                            <label for="wardrobePositionSelect">Wardrobe Position</label><br>
                            <select id="wardrobePositionSelect" onchange="changeSetting('wardrobePosition', 1);"
                                style="width:109px">
                                <option value="1" selected>Right Side Wardrobe (Desktop)</option>
                                <option value="0">Bottom Wardrobe (Mobile)</option>
                            </select>
                            <br><input size="1" id="wardrobePositionID" name="wardrobePositionName" class="settingToggle" style="display:none;"
                                onchange="changeSetting('wardrobePosition', 2)"
                                onkeyup="changeSetting('wardrobePosition', 2)">
                        </td>
                        <td>
                            <label for="wardrobeWidthID">Wardrobe width</label><br>
                            <input size="1" type="number" min="100" max="1400" id="wardrobeWidthID"
                                name="wardrobeWidthName" value="690" onchange="changeSetting('wardrobeWidth', 2)"
                                onkeyup="changeSetting('wardrobeWidth', 2)">
                        </td>
                        <td>
                            <label for="slotsOrderSelect">Slots Settings</label><br>
                            <select id="slotsOrderSelect" onchange="changeSetting('slotsOrder', 1);" style="width:83px">
                                <option value="1">Default Order</option>
                                <option value="0" selected>Compact (Good for Mobile)</option>
                            </select>
                            <br><input size="1" id="slotsOrderID" name="slotsOrderName" class="settingToggle" style="display:none;"
                                onchange="changeSetting('slotsOrder', 2)" onkeyup="changeSetting('slotsOrder', 2)">
                        </td>
                        <td>
                            <label for="slotsSize">Item Size</label><br>
                            <input size="1" type="number" min="24" max="256" id="slotsSizeID" name="slotsSizeName"
                                value="64" onchange="changeSetting('slotsSize', 2)"
                                onkeyup="changeSetting('slotsSize', 2)">
                        </td>
                        <td class="settingToggle" style="display:none;">
                            <button onclick="openFullscreen();">Full<br>screen</button>
                        </td>

                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <!-- Custom Menu-->
    <div id="menyu" class="context-menu" style="display:none">
        <ul>
            <li><p id="cm_viewer">X</p></li>
            <li id="cm_deleter"><p>Delete Item</p></li>
        </ul>
    </div>
    <!-- -->
    <script type="text/javascript">
        // Custom Menu Start (Not yet used)
        function openMenu(e) { // mag iif else ka pang tanga ka tanga mo
            /*if (document.getElementById("contextMenu").style.display == "block")*/ hideMenu();
            //else {
                let menu = document.getElementById("menyu");
                menu.style.display = 'block';
                menu.style.left = e.pageX + "px";
                menu.style.top = e.pageY + "px";
            //}
            var menyu_splitted_id = e.target.id.split("-"); console.log(menyu_splitted_id);
            // <img src="https://app.nizikano-2d.jp/img/avatar_cate_thum/hair_acc/4430.png" style="width: 39px; height: 39px">
            $("#cm_viewer").html("<img src=\""+$("#serverID").val()+"img/avatar_cate_thum/"+menyu_splitted_id[3]+"/"+menyu_splitted_id[1]+".png\" style=\"width:15px;height:15px;\"> </img>"
                +menyu_splitted_id[1]);
            $("#cm_deleter").off(); $("#cm_deleter").on("click", function(){ deleteItemHistory(menyu_splitted_id[1], menyu_splitted_id[3]); });
            //
        }
        function hideMenu() { document.getElementById("menyu").style.display = "none"; }
        function updateRighter() { // used after Populate
            $(".righterItem").off("contextmenu");
            $(".righterItem").on("contextmenu", function (e) {
                openMenu(e);
                console.log(e.target.id);
                e.preventDefault();
            });
        }
        // Custom Menu End


        $("body").on("click", function (e) { hideMenu(); });
        $(".righterSlots").on("contextmenu", function (e) { e.preventDefault(); });

        $(function () {
            // Needs to Initialize Settings
            changeSetting("server", 3); changeSetting("interface", 3); changeSetting("slotsPreview", 3); changeSetting("inputsToggle", 3);
            changeSetting("wardrobePosition", 3); changeSetting("wardrobeWidth", 3); changeSetting("slotsOrder", 3);
            changeSetting("slotsSize", 3);
            changeSetting("motion", 3);

            $("#main_table").show(); // idk fix for mobile users doing desktop mode testing NOT WORKING Ehhh!!!!

            // Initialize Wardrobe Stuffs
            populateCounter(2);

            //Initialize Values inside URL
            var xy;
            for (i = 0; i <= 110; i++) { // for id1
                xy = getDetails(i);
                loadBlankImage(i, xy["name"]);
                if (xy["name"]) {
                    console.log("Initializing: " + xy["name"]);
                    if (localStorage.getItem(xy["name"])) { //put stored ids on input 
                        $("#" + xy["name"] + "ID").val(localStorage.getItem(xy["name"]));
                        change(i, 1, 2);
                    } else { // no initial value, set it first
                        change(i, 1, 1);
                    }
                }

            }
            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(1); console.log("Updating Image via: onload");

            // Initialize Populate
            setTimeout(function () {
                populate(0); $("#populationID").val(parseInt($("#populationID").val()) + 100); populateCounter(1);
            }, 300);
            //startPopulate();

            // Initialize History
            loadItemHistory(); changeSetting("historyFilter", 3); updateRighter();

        });

        // Settings
        var settingsArray = ["server", "interface", "slotsPreview", "inputsToggle", "wardrobePosition", "wardrobeWidth", "slotsOrder"];
        var mr_iframe_isloaded = false; var mr_iframe_src = "mr/mr_addincludes_obfuscated.html";
        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) if ($("#" + settingName + "Select").length) $("#" + settingName + "ID").val($("#" + settingName + "Select").val()); // from select to id (if select exist)
            if (mode == 2) if ($("#" + settingName + "Select").length) $("#" + settingName + "Select").val($("#" + settingName + "ID").val()); // from id to select

            if (settingName == "interface") {
                if ($("#" + settingName + "ID").val() == "1") { $("body").css({ "backgroundColor": "white", "color": "black" }); $(".fonter").css({ "color": "black" }); }
                if ($("#" + settingName + "ID").val() == "0") { $("body").css({ "backgroundColor": "black", "color": "white" }); $(".fonter").css({ "color": "white" }); }
            } 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(); $(".fonter").css({ "font-family": "Lucida Console, Courier New, monospace", "font-size": "10px", "font-weight": "normal" }); $(".btnDesignRemover").removeClass("btnDesign"); $(".bordered").attr("border", "1"); }
                if ($("#" + settingName + "ID").val() == "0") { $(".settingToggle, .outfitToggle").hide(); $(".fonter").css({ "font-family": "Tahoma, sans-serif", "font-size": "10px", "font-weight": "bold" }); $(".btnDesignRemover").addClass("btnDesign"); $(".bordered").attr("border", "0"); }
                if ($("#" + settingName + "ID").val() == "2") { $(".settingToggle").hide(); $(".outfitToggle").show(); $(".fonter").css({ "font-family": "Tahoma, sans-serif", "font-size": "10px", "font-weight": "bold" }); $(".btnDesignRemover").addClass("btnDesign"); $(".bordered").attr("border", "0"); }
            } if (settingName == "wardrobePosition") {
                if ($("#" + settingName + "ID").val() == "1") { $(".wardlaptop").append($(".wardrobe")); }
                if ($("#" + settingName + "ID").val() == "0") { $(".wardmobile").append($(".wardrobe")); }
            } if (settingName == "wardrobeWidth") {
                $(".wardrobeDynamicWidth").css({ "width": $("#" + settingName + "ID").val() + "px" });
            } if (settingName == "slotsOrder") { // Rearrange Slots for Desktop or for Mobile   
                //setTimeout(function () { $("#slotsTable").css("overflow-x", "hidden"); }, 2000);
                for (var so = 0; so <= 110; so++) {
                    var sogd = getDetails(so, 1);
                    if (sogd["name"]) {
                        var sogdName = sogd["name"]; console.log("slotsOrder: " + so + "|| Name: " + sogdName);
                        if ($("#" + settingName + "ID").val() == "1") { console.log("1 .td_desktop_" + sogdName + " <append> .tdi" + so); $(".td_desktop_" + sogdName).append($(".tdi" + so)); $(".td_desktop_hider").hide(); $(".td_mobile_hider").show(); }
                        if ($("#" + settingName + "ID").val() == "0") { console.log("0 .td_desktop_" + sogdName + " <append> .tdi" + so); $(".td_mobile_" + sogdName).append($(".tdi" + so)); $(".td_desktop_hider").show(); $(".td_mobile_hider").hide(); }
                    }
                }
            } if (settingName == "slotsSize") { $(".dynamicItemSize").css({ 'width': $("#" + settingName + "ID").val(), 'height': $("#" + settingName + "ID").val() }); 
            } if (settingName == "motion") { if(!mr_iframe_isloaded && $("#" + settingName + "ID").val() == "1") { $("#the_mr").attr("src", mr_iframe_src); mr_iframe_isloaded = true; console.log("iFrame Loaded; mode:"+mode); }
                if ($("#" + settingName + "ID").val() == "0") { $(".xmotion").attr("disabled", false); $(".image_static").show(); $(".image_animated").hide();  }
                if ($("#" + settingName + "ID").val() == "1") { $(".xmotion").attr("disabled", true);  $(".image_animated").show(); $(".image_static").hide();  }
            } if (settingName == "historyFilter") {
                if( $("#"+settingName+"ID").val() == "All") { $(".ihs").show(); }
                else { var ihsfiltereds = $("#historyFilterID").val().split("and"); console.log(ihsfiltereds); $(".ihs").hide();
                    for (i=0; i<ihsfiltereds.length;i++) { $(".ihsurl_"+ihsfiltereds[i]).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 + ", " + action + ")"); // 0=Default; 2=onFirstRun/onLoad
            var cldt = getDetails(selectedSlot); cldturl = cldt["url"]; console.log(cldt);
            if (action == 2) { //onload
                if (localStorage.getItem(selectedSlotArray[selectedSlot]) == null) localStorage.setItem(selectedSlotArray[selectedSlot], selectedSlot); //onFirstRun
                selectedSlot = parseInt(localStorage.getItem(selectedSlotArray[selectedSlot])); // localStorage to var
            }

            $(".tdi" + cldturl).css({ "background-color": "transparent" });
            $(".tdi" + selectedSlot).css({ "background-color": "#D0D0D0" });
            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 Continuous Populate (Old and not used)
        let nIntervId;
        function populateSetting() {
            if ($("#populateSelect").val() == "1") startPopulate();
            if ($("#populateSelect").val() == "0") stopPopulate();
        }
        function startPopulate() {
            if (!nIntervId) { nIntervId = setInterval(populate, 1 * 1500); }
        }
        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", "101"); //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;
        var slotsToPopulate = [0, 1, 2, 4, 6, 8, 10, 11]; // needed in History too
        function populate(mode = 1) { $("#minusItems, #addItems").prop("disabled", true);
            selectedServer = $("#serverID").val(); var pp = populateCounter(1); pq = pp + 100;
            if (mode == 0) { pp -= 100; pq -= 100; } //adjust counters to make previous page
            var picSize = $("#slotsSizeID").val();
            for (pp; pp < pq; pp++) {
                for (ims = 0; ims < slotsToPopulate.length; ims++) { //console.log("pp: "+pp+" || pq: "+pq);
                    var tbp = getDetails(slotsToPopulate[ims], 1); var tbpurl = tbp["url"];

                    $(".dumper").append("<td class=\"txbl txbls" + tbpurl + " txbli_" + pp + "_" + slotsToPopulate[ims] + "\">" +
                        "<img id=\"img_" + pp + "_" + slotsToPopulate[ims] + "\" class=\"imgPreview dynamicItemSize 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\" style=\"width: " + picSize + "px; height: " + picSize + "px\" >" +
                        "</td>");
                }

            } if (mode == 0) { pp -= 100 } $("#populationID").val(pp); populateCounter(1);
            updateRighter();
            setTimeout(function(){ $("#minusItems, #addItems").prop("disabled", false); }, 1500);
        }
        function imageFound(idd, selSlot, tbpurl) { $(".txbli_" + idd + "_" + selSlot).appendTo(".trls_" + tbpurl); }
        function imageError(idd, selSlot) { $(".txbli_" + idd + "_" + selSlot).remove(); }
        var tempDetail;
        function clickItem(idd, selSlot) {
            console.log("clickItem(idd=" + idd + ", selSlot=" + selSlot + ")");
            $(".txbli_" + idd + "_" + selSlot).css({ "background-color": "#CCCCCC" });
            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(); console.log("Update Image via: click Item in Wardrobe");
        }



        //localStorage.removeItem("myCat");
        //localStorage.clear();
        function loadBlankImage(aydi, neym) {
            $("#" + neym + "Preview").css({
                "background-image": "url('" + $("#serverID").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
                    // 97 Custom Background (BG)
                    // 98-103 Custom Background too (Front or Back Accessory)
                    // +12 fillers
                    case 104: temp["url"] = "face"; temp["name"] = "customeyes"; break;
                    case 105: temp["url"] = "face"; temp["name"] = "custommouth"; break;
                    case 106: temp["url"] = "face"; temp["name"] = "custombrows"; break;
                    // +3 fillers
                    // 109 MR Alternate Outfit (input same ID as MR)
                    case 110: temp["url"] = "effect"; temp["name"] = "effects"; break;
                    default: temp["url"] = "xx"; //console.log("!"+id);
                }
            } else if (main_id == 2) { // 1:Regular, 2:Pale, 3:Tanned
                if (id == 0) { temp["url"] = "xx"; temp["name"] = "skincolor"; }
            } else if (main_id == 3) { // 1:Regular, 2:Short, 3:Very     Short
                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;
        }
        var browslashesArray = ["6d413c", "a0746e", "787878", "656856", "856886", "915e5d", "755b64", "a98660", "926b4c", "c0b6ff", "bec033", "d89aff", "7894ff", "fc74a2", "b2dafe"];
        function change(id, main_id = 1, select = 0, tempered = 0) {
            console.log("change(" + id + "," + main_id + "," + select + ", " + tempered + ")");
            var xp = []; xp = getDetails(id, main_id); xpname = xp["name"]; xpurl = xp["url"]; var xpval = "";

            // Clean Input
            xpval = $("#" + xpname + "ID").val();
            if (xpval) xpval = xpval.replace(/\D/g, ''); else { xpval = ""; }

            // Modes/Process
            if (select == 1) { // from select to id
                if ($("#" + xpname + "Select").val()) $("#" + xpname + "ID").val($("#" + xpname + "Select").val());
                xpval = $("#" + xpname + "ID").val();
            }
            if (select == 2) { // from id to select; onload and input(change,keyup)
                $("#" + xpname + "Select").val(xpval);
            }
            if (select == 3) { // right click to remove item
                $("#" + xpname + "ID").val(""); xpval = ""; updateImage(); console.log("Update Image via: Remove Item");
            }

            // Special Process for Pupil because of Multiple Selects (Pending)
            if (select == 1 && id == 20 || id == 21) { }
            if (select == 2 && id == 20 || id == 21) { }

            // Output
            if (xpurl == "xx") {
                if (xpname == "browslashes") {
                    if (xpval) $("#browslashesPreview").css({ "background-color": "#" + browslashesArray[xpval] });
                    else $("#browslashesPreview").css({ "background-color": "transparent" });
                }
            }
            else $("#" + xpname + "Preview").attr("src", $("#serverID").val() + "img/avatar_cate_thum/" + xpurl + "/" + xpval + ".png");

            // Saving to LocalStorage
            if (xpname) {
                localStorage.setItem(xpname, xpval);
            }
        }


        // History Start
        var tempSlotPrevious = []; var tempSlotNow = [];
        function saveTempSlots() {
            var tempSlot = []; console.log("saveTempSlots();");
            for (i = 0; i <= 110; i++) { if(i==12||i==13||i==104||i==105||i==106) continue; // skip custom, eyes // brows and pupils are autoskipped coz their urls are xx and no pic
                var gdts = getDetails(i, 1); gdtsName = gdts["name"];
                var gdtsValue = ""; if ($("#" + gdtsName + "ID").val()) gdtsValue = $("#" + gdtsName + "ID").val();
                tempSlot[i] = gdtsValue;
            }
            return tempSlot;
        }
        function updateHistory() {
            for (i = 0; i <= 110; i++) { if(i==12||i==13||i==104||i==105||i==106) continue; // skip custom, eyes
                var gduh = getDetails(i, 1); var gduhname = gduh["name"]; var gduhurl = gduh["url"];
                if (tempSlotPrevious[i] != tempSlotNow[i]) {
                    if (tempSlotPrevious[i] == 0 || tempSlotPrevious[i] == "") { }
                    else {
                        checkItem(tempSlotPrevious[i], gduhname, gduhurl, i);
                    }
                }
            }
            tempSlotPrevious = tempSlotNow;
        }
        function checkItem(id, name, url, id1_id) {
            console.log("checkItem(id:" + id + ", name:" + name + ", url:" + url + ")");
            var selectedServer = $("#serverID").val(); var picSize = $("#slotsSizeID").val();
            if (localStorage.getItem("historyIDzs") == null) localStorage.setItem("historyIDzs", "END");
            if (localStorage.getItem("historyDesc") == null) localStorage.setItem("historyDesc", "END");

            // changes here should also reflect history load: search for historyItemuzu
            $(".dumperHistory").append("<td class=\"ihs ihsurl_"+url+" ihsid_" + id + "_" + url + " ihtemp_" + id + "_" + name + "  \">" +
                "<img id=\"ihs-"+id+"-"+name+"-"+url+"-"+id1_id+"\" class=\"imgPreview righterItem dynamicItemSize img_" + id + "_" + name + "\" onload=\"historyFound(" + id + ", '" + name + "', '" + url + "' , " + id1_id + ")\" onerror=\"historyError(" + id + ", '" + name + "')\" onclick=\"clickItem(" + id + ", " + id1_id + ")\" src=\"" + selectedServer + "img/avatar_cate_thum/" + url + "/" + id + ".png\" style=\"width: " + picSize + "px; height: " + picSize + "px\" >" +
                "</td>");

        }
        function historyFound(id, name, url, id1_id) { console.log("saveItemHistory(id=" + id + ", name=" + name + ", url=" + url + ", id1_id=" + id1_id + ")");
            if (!saveItemHistory(id, name, url, id1_id)) { console.log("ID "+id+" exists in localStorage");
                $(".ihtemp_" + id + "_" + name).remove(); $(".ihsid_" + id + "_" + url).prependTo(".historyList"); 
            } else { $(".ihtemp_" + id + "_" + name).prependTo(".historyList"); $(".ihtemp_" + id + "_" + name).removeClass("ihtemp_" + id + "_" + name); }
            $(".historyList").prepend($(".clearHistoryTD"));
            updateRighter(); changeSetting("historyFilter", 3);
        }
        function historyError(id, name) { $(".ihtemp_" + id + "_" + name).remove(); }
        function saveItemHistory(id, name, url, id1) {
            var ids = localStorage.getItem("historyIDzs").split("||"); // var descz = localStorage.getItem("historyDesc").split("||");
            id = String(id); id1 = String(id1); var itemHistoryIndex = ids.indexOf(id); console.log("itemHistoryIndex: "+itemHistoryIndex);
            if (itemHistoryIndex == -1) { // if doesnt exist, just add sa unahan
                localStorage.setItem("historyIDzs",  id+"||"+ localStorage.getItem("historyIDzs")  );
                localStorage.setItem("historyDesc",  id+"-;-"+name+"-;-"+url+"-;-"+id1+"||"+localStorage.getItem("historyDesc")  );
                console.log("History Added: "+id);
                return true;
            } else { // if exists, remove id and ilagay sa unahan
                var noid = localStorage.getItem("historyIDzs").split(id+"||");
                localStorage.setItem("historyIDzs",  id+"||"+noid[0]+noid[1] );

                var desc_splitter = localStorage.getItem("historyDesc").split("||")[itemHistoryIndex];
                var nodc = localStorage.getItem("historyDesc").split(desc_splitter+"||");
                localStorage.setItem("historyDesc",  id+"-;-"+name+"-;-"+url+"-;-"+id1+"||"+nodc[0]+nodc[1] );

                console.log("History Exists: "+id);
                return false;
            }
        }
        function loadItemHistory() {
            if (localStorage.getItem("historyIDzs") == null || localStorage.getItem("historyDesc") == null) {
                localStorage.setItem("historyIDzs", "END");
                localStorage.setItem("historyDesc", "END");
            } else { var selectedServer = $("#serverID").val(); var picSize = $("#slotsSizeID").val();
                for (i=0; i<localStorage.getItem("historyIDzs").split("||").length-1;i++) { var itemDetails = localStorage.getItem("historyDesc").split("||")[i].split("-;-");
                    var id = itemDetails[0]; var name = itemDetails[1]; var url = itemDetails[2]; var id1_id = itemDetails[3];
                    // changes here should also reflect history on update: search for historyItemuzu
                    $(".historyList").append("<td class=\"ihs ihsurl_"+url+" ihsid_" + id + "_" + url + " \">" +
                    "<img id=\"ihs-"+id+"-"+name+"-"+url+"-"+id1_id+"\" class=\"imgPreview righterItem dynamicItemSize img_" + id + "_" + name + "\" onclick=\"clickItem(" + id + ", " + id1_id + ")\" src=\"" + selectedServer + "img/avatar_cate_thum/" + url + "/" + id + ".png\" style=\"width: " + picSize + "px; height: " + picSize + "px\" >" +
                    "</td>");
                }
                $(".historyList").prepend( $(".clearHistoryTD") );
            }
        }
        function clearHistory() {
            localStorage.setItem("historyIDzs", "END");
            localStorage.setItem("historyDesc", "END");
            $(".historyHeader").append( $(".clearHistoryTD, .dumperHistoryTD") );
            $(".historyList").empty();
            $(".historyList").append( $(".clearHistoryTD, .dumperHistoryTD") );
        }
        function deleteItemHistory(id, url) {
            var ids = localStorage.getItem("historyIDzs").split("||");
            id = String(id); var itemHistoryIndex = ids.indexOf(id); console.log("itemHistoryIndexToDelete: "+itemHistoryIndex);
            if (itemHistoryIndex != -1) {
                var noid = localStorage.getItem("historyIDzs").split(id+"||");
                localStorage.setItem("historyIDzs",  noid[0]+noid[1] );

                var desc_splitter = localStorage.getItem("historyDesc").split("||")[itemHistoryIndex];
                var nodc = localStorage.getItem("historyDesc").split(desc_splitter+"||");
                localStorage.setItem("historyDesc", nodc[0]+nodc[1] );
                $(".ihsid_"+id+"_"+url).remove();
                console.log("deleteItemHistory: deleted in index:"+itemHistoryIndex);
            } else { console.log("deleteItemHistory: not found"); }
        }
        // History End


        // Generate URL
        function generateURL(mode = 0) { // 0=Regular, 3=Motion 
            imageURL = ""; var addComma = false;
            if(mode==3) imageURL += $("#serverID").val() + "img/php/live2d/pc_data.php?1753";
            else imageURL += $("#serverID").val() + "img/php/all_param2.php?1753";
            
            for (var i = 1; i <= 7; i++) { if(mode==3 && i==5) break;
                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
        $(".input_enter").keypress(function (e) {
            if (e.which == 13) {
                console.log("Update Image via: Keypress Enter on inputters");
                updateImage();
            }
        });
        function updateImage(mode = 0) { // 0:Default, 1:Onload, 3:Manual Button
            if (mode == 1) tempSlotPrevious = saveTempSlots(); // For History (onload)
            else { tempSlotNow = saveTempSlots(); updateHistory(); }


            // Generate URL
            var generatedURL = generateURL();

            // Motion Special Load 
            if($("#motionID").val()=="1" && mode==3) { var delayermotioner = 0; // Add && mode==3 for manual loading only (via click of Update Button)
                if(mode==1) {delayermotioner = 1250; console.log("1250");} else {delayermotioner = 150; console.log("150");} // needs delay if automatic coz onload iframe needs time to load
                setTimeout(function(){
                    var generatedMotionURL = generateURL(3); console.log("motion special load; URL: "+generatedMotionURL);
                    document.getElementById("the_mr").contentWindow.arc_xd(generatedMotionURL);
                }, delayermotioner); // i add this coz maybe i have to wait to load iframe muna coz nag arc_xd undefined ehh
            }

            // Display Image
            $("#imagePreview").attr("src", generatedURL);

            //Save URL to LS
            $("#url").val(generatedURL);
            localStorage.setItem("url", generatedURL);
        }
        $(".selector").on("change", function () {
            console.log("Update Image via: .selector change");
            updateImage();
        });
        //


        // LoadSave | Load = URLtoPlatform, Save = URL to New Tab
        var ysplit, zsplit; var stringer;
        var serverURL = ""; var encodedData, decodedData;
        function loadURL(action = 0) {
            var url = $("#url").val().trim(); console.log(url);
            var xsplit = url.split("&"); console.log("xsplit:"); console.log(xsplit);

            if (xsplit.length != 1) {
                for (p = 0; p < xsplit.length; p++) { //p=1 coz we skip https stuffs
                    if (p == 0) { // Server
                        serverURL = xsplit[p].split("img")[0]; console.log("xsplit[0] is: " + xsplit[p]); console.log("serverURL is: " + serverURL);
                        $("#serverID").val(serverURL); $("#serverID").trigger("change");
                        continue;
                    }
                    ysplit = xsplit[p].split("="); console.log("ysplit: "); console.log(ysplit);
                    if (ysplit.length != 1) {

                        zsplit = ysplit[1].split(","); console.log("zsplit id" + p + ":"); console.log(zsplit);
                        //
                        for (q = 0; q < zsplit.length; q++) {
                            var encodedData = zsplit[q]; console.log("zsplit[q](Encoded):" + encodedData);
                            var decodedData = encodedData; stringer = "";
                            if (q == zsplit.length - 1) { decodedData = decodedData.slice(0, -1); } // remove 1 at the end
                            if (q == 0) { decodedData = "q" + decodedData; }

                            for (r = 0; r < decodedData.length; r++) {
                                if (r % 2 == 1) {
                                    stringer = stringer + decodedData.charAt(r); console.log("Stringer[" + p + "][" + q + "][" + r + "]: " + stringer);
                                }
                            }
                            decodedData = stringer;
                            console.log("zsplit[q](Decoded):" + decodedData);
                            console.log("- - - - - -");
                            //
                            var urlid = parseInt(ysplit[0].substring(2));
                            var gdtls = getDetails(q, urlid); var gdtlsname = gdtls["name"];
                            $("#" + gdtlsname + "ID").val(decodedData); $("#" + gdtlsname + "ID").trigger("change");
                            console.log("Changed[" + p + "][" + q + "][" + r + "][" + urlid + "]: " + decodedData);
                            //
                        }
                        //

                    } else alert("fail split!" + xsplit[p]);
                }
            } else alert("fail split!");

            updateImage(); console.log("Update Image via: Load Image from URL");
        }
        function saveImage(action = 0) {
            console.log("saveImage(" + action + ")");
            window.open($("#imagePreview").attr("src"), '_blank').focus();
        }
        //

    </script>
    <script>
        /* Not used Fullscreen code dahil ayaw ma zoom out sa mobile phone pag naka fullscreen nakakainis */
        var elexm = document.documentElement;

        /* View in fullscreen */
        function openFullscreen() {
            if (elexm.requestFullscreen) {
                elexm.requestFullscreen();
            } else if (elexm.webkitRequestFullscreen) { /* Safari */
                elexm.webkitRequestFullscreen();
            } else if (elexm.msRequestFullscreen) { /* IE11 */
                elexm.msRequestFullscreen();
            }
        }

        /* Close fullscreen not used */
        function closeFullscreen() {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitExitFullscreen) { /* Safari */
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) { /* IE11 */
                document.msExitFullscreen();
            }
        }
    </script>

</body>

</html>