var currentValue = {
    clotheset: {min: 0, value: -1, max: 0}
}
var items = {}
var clotheSets = {}
var skinManager = null
var handsUpKey = null
var disabledValues = {}
var direction = ""

window.addEventListener('message', function(event){
    var item = event.data;
    if (item.action == "openCharacter") {
        $('.categories').empty()
        $("body").fadeIn(100)
        $('.panel').empty()

        document.getElementById("rotate-input").value = (item.currentRotate).toString()
        document.getElementById("distance-input").value = (item.currentDistance).toString()

        $('#headerName').text(translate.create_character);
        $('#headerCategory').text(translate.select_category);

        $('#height-text').text(translate.height);
        $('#rotate-text').text(translate.rotate);
        $('#distance-text').text(translate.distance);
        $('#save').text(translate.save);
        $('#cancel').text(translate.cancel);

        if (item.clotheSets) {
            clotheSets = item.clotheSets
        }
        
        if (item.items) {
            items = item.items
        }

        skinManager = item.skinmanager
        disabledValues = item.disabledValues

        handsUpKey = item.handsUpKey
        $('.hands-up').hide()
        if (item.enableHandsUpButton) {
            $('.hands-up').show()
        }

        $('.cancel-skin').hide()
        if (item.enableCancelButtonUI && item.playerHasAlreadySkin) {
            $('.cancel-skin').show()
        }

        if (item.categories) {
            if (item.categories['parents']) {
                $('.categories').append(`
                    <div class="parents categoryBtn" data-type="parents">
                        <img class="itemIcon" width="55" height="55" src="icons/parents.svg">
                    </div>
                `)
            }
            if (item.categories['face']) {
                $('.categories').append(`
                    <div class="face categoryBtn" data-type="face">
                        <img class="itemIcon" width="55" height="55" src="icons/face.svg">
                    </div>
                `)
            }
            if (item.categories['clothes']) {
                $('.categories').append(`
                    <div class="clothes categoryBtn" data-type="clothes">
                        <img class="itemIcon" width="55" height="55" src="icons/clothes.svg">
                    </div>
                `)
            }
            // if (item.categories['clothesets']) {
            //     $('.categories').append(`
            //         <div class="clothesets categoryBtn" data-type="clothesets">
            //             <img class="itemIcon" width="55" height="55" src="icons/clothesets.svg">
            //         </div>
            //     `)
            // }
            if (item.categories['hairs']) {
                $('.categories').append(`
                    <div class="hairs categoryBtn" data-type="hairs">
                        <img class="itemIcon" width="55" height="55" src="icons/hairs.svg">
                    </div>
                `)
            }
            if (item.categories['makeup']) {
                $('.categories').append(`
                    <div class="makeup categoryBtn" data-type="makeup">
                        <img class="itemIcon" width="55" height="55" src="icons/makeup.svg">
                    </div>
                `)
            }
        }
        for (const [key, value] of Object.entries(item.data)) {
            currentValue[key] = {
                value: value.value,
                min: value.min,
                max: value.max,
                excluded: []
            }
        }
        for (const [k, v] of Object.entries(currentValue)) {
            if (disabledValues[k]) {
                for (const [_k, _v] of Object.entries(disabledValues[k])) {
                    v.excluded.push(_v)
                }
            }
        }
    }
    if (item.action == 'updateSecondValue') {
        document.getElementById(`${item.secondItem}-range`).max = item.secondValue
        document.getElementById(`${item.secondItem}-range`).value = 0
        $(`#${item.secondItem}-value`).html(0)
        $(`#${item.secondItem}-max`).html(item.secondValue)
    }
    if (item.action == 'updateInputs') {
        document.getElementById("distance-input").value = (item.fov).toString()
    }
});

$(document).on('click', '.accept-skin', function(e){
    $.post('https://hp_charcreator/closeCharacter');
    $("body").css("display", "none")
})

$(document).on('click', '.cancel-skin', function(e) {
    $.post('https://hp_charcreator/cancel');
    $("body").css("display", "none")
})

$(document).on('click', '.hands-up', function(e) {
    $.post('https://hp_charcreator/hands_up');
})

$(document).on('click', '.categoryBtn', function(e){
    $('.panel').empty()
    $('#headerCategory').html(translate.category[$(this).data("type")])
    changeCamera($(this).data("type"))
    var values = ``
    switch ($(this).data("type")) {
        case "parents":
            if (items['parents'].sex) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_sex}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <p class="item-subname">${translate.sub_sex}</p>
                                    <div class="item-suboptions">
                                        <div class="item-suboptions">
                                            <input type="range" min="${currentValue['sex'].min}" max="${currentValue['sex'].max}" value="${currentValue['sex'].value}" class="input-value-radius" id="sex-range" oninput="changeRange('sex')">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['parents'].parents) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_parents}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div style="background-image: url('./parents/mom-${currentValue['mom'].value}.png')" id="mom-photo"></div>
                                    <p class="item-subname">${translate.sub_mom}</p>
                                    <div class="item-suboptions">
                                        <div class="item-suboptions-values left-arrow" onclick="previous('mom')">
                                            <i class="fa-solid fa-caret-left"></i>
                                        </div>
                                        <div class="item-suboptions-values">
                                            <p class="item-label" id="mom-label">${translate.parentsNames['mom'][currentValue['mom'].value]}</p>
                                        </div>
                                        <div class="item-suboptions-values right-arrow" onclick="next('mom')">
                                            <i class="fa-solid fa-caret-right"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div style="background-image: url('./parents/dad-${currentValue['dad'].value}.png')" id="dad-photo"></div>
                                    <p class="item-subname">${translate.sub_dad}</p>
                                    <div class="item-suboptions">
                                        <div class="item-suboptions-values left-arrow" onclick="previous('dad')">
                                            <i class="fa-solid fa-caret-left"></i>
                                        </div>
                                        <div class="item-suboptions-values">
                                            <p class="item-label" id="dad-label">${translate.parentsNames['dad'][currentValue['dad'].value]}</p>
                                        </div>
                                        <div class="item-suboptions-values right-arrow" onclick="next('dad')">
                                            <i class="fa-solid fa-caret-right"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `  
            }
            if (items['parents'].face_md_weight) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_resemblance}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <p class="item-subname">${translate.sub_face_md_weight}</p>
                                    <div class="item-suboptions">
                                        <div class="item-suboptions">
                                            <input type="range" min="${currentValue['face_md_weight'].min}" max="${currentValue['face_md_weight'].max}" value="${currentValue['face_md_weight'].value}" class="input-value-radius" id="face_md_weight-range" oninput="changeRange('face_md_weight')">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `  
            }
            if (items['parents'].skin_md_weight) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_skin_md_weight}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <p class="item-subname">${translate.sub_skin_md_weight}</p>
                                    <div class="item-suboptions">
                                        <div class="item-suboptions">
                                            <input type="range" min="${currentValue['skin_md_weight'].min}" max="${currentValue['skin_md_weight'].max}" value="${currentValue['skin_md_weight'].value}" class="input-value-radius" id="skin_md_weight-range" oninput="changeRange('skin_md_weight')">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `  
            }
            $('.panel').html(values)
            break;
        case "face":
            if (items['face'].neck_thickness) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_neck_thickness}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_neck_thickness}</p>
                                        <p class="item-value" id="neck_thickness-value">${currentValue['neck_thickness'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['neck_thickness'].min}" max="${currentValue['neck_thickness'].max}" value="${currentValue['neck_thickness'].value}" class="input-value-radius" id="neck_thickness-range" oninput="changeRange('neck_thickness')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `  
            }
            if (items['face'].age) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_ageing}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_age_1}</p>
                                        <p class="item-value" id="age_1-value">${currentValue['age_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['age_1'].min}" max="${currentValue['age_1'].max}" value="${currentValue['age_1'].value}" class="input-value-radius" id="age_1-range" oninput="changeRange('age_1')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_age_2}</p>
                                        <p class="item-value" id="age_2-value">${currentValue['age_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['age_2'].min}" max="${currentValue['age_2'].max}" value="${currentValue['age_2'].value}" class="input-value-radius" id="age_2-range" oninput="changeRange('age_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `  
            }
            if (items['face'].eyebrows) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_eyebrow}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_eyebrows_5}</p>
                                        <p class="item-value" id="eyebrows_5-value">${currentValue['eyebrows_5'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['eyebrows_5'].min}" max="${currentValue['eyebrows_5'].max}" value="${currentValue['eyebrows_5'].value}" class="input-value-radius" id="eyebrows_5-range" oninput="changeRange('eyebrows_5')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_eyebrows_6}</p>
                                        <p class="item-value" id="eyebrows_6-value">${currentValue['eyebrows_6'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['eyebrows_6'].min}" max="${currentValue['eyebrows_6'].max}" value="${currentValue['eyebrows_6'].value}" class="input-value-radius" id="eyebrows_6-range" oninput="changeRange('eyebrows_6')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `  
            }
            if (items['face'].nose) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_nose}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_nose_1}</p>
                                        <p class="item-value" id="nose_1-value">${currentValue['nose_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['nose_1'].min}" max="${currentValue['nose_1'].max}" value="${currentValue['nose_1'].value}" class="input-value-radius" id="nose_1-range" oninput="changeRange('nose_1')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_nose_2}</p>
                                        <p class="item-value" id="nose_2-value">${currentValue['nose_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['nose_2'].min}" max="${currentValue['nose_2'].max}" value="${currentValue['nose_2'].value}" class="input-value-radius" id="nose_2-range" oninput="changeRange('nose_2')">
                                    </div>
                                </div>
                            </div>
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_nose_3}</p>
                                        <p class="item-value" id="nose_3-value">${currentValue['nose_3'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['nose_3'].min}" max="${currentValue['nose_3'].max}" value="${currentValue['nose_3'].value}" class="input-value-radius" id="nose_3-range" oninput="changeRange('nose_3')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_nose_4}</p>
                                        <p class="item-value" id="nose_4-value">${currentValue['nose_4'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['nose_4'].min}" max="${currentValue['nose_4'].max}" value="${currentValue['nose_4'].value}" class="input-value-radius" id="nose_4-range" oninput="changeRange('nose_4')">
                                    </div>
                                </div>
                            </div>
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_nose_5}</p>
                                        <p class="item-value" id="nose_5-value">${currentValue['nose_5'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['nose_5'].min}" max="${currentValue['nose_5'].max}" value="${currentValue['nose_5'].value}" class="input-value-radius" id="nose_5-range" oninput="changeRange('nose_5')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_nose_6}</p>
                                        <p class="item-value" id="nose_6-value">${currentValue['nose_6'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['nose_6'].min}" max="${currentValue['nose_6'].max}" value="${currentValue['nose_6'].value}" class="input-value-radius" id="nose_6-range" oninput="changeRange('nose_6')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `  
            }
            if (items['face'].cheeks) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_cheekbones}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_cheeks_1}</p>
                                        <p class="item-value" id="cheeks_1-value">${currentValue['cheeks_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['cheeks_1'].min}" max="${currentValue['cheeks_1'].max}" value="${currentValue['cheeks_1'].value}" class="input-value-radius" id="cheeks_1-range" oninput="changeRange('cheeks_1')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_cheeks_2}</p>
                                        <p class="item-value" id="cheeks_2-value">${currentValue['cheeks_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['cheeks_2'].min}" max="${currentValue['cheeks_2'].max}" value="${currentValue['cheeks_2'].value}" class="input-value-radius" id="cheeks_2-range" oninput="changeRange('cheeks_2')">
                                    </div>
                                </div>
                            </div>
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_cheeks_3}</p>
                                        <p class="item-value" id="cheeks_3-value">${currentValue['cheeks_3'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['cheeks_3'].min}" max="${currentValue['cheeks_3'].max}" value="${currentValue['cheeks_3'].value}" class="input-value-radius" id="cheeks_3-range" oninput="changeRange('cheeks_3')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `  
            }
            if (items['face'].lip_thickness) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_lips}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_lip_thickness}</p>
                                        <p class="item-value" id="lip_thickness-value">${currentValue['lip_thickness'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['lip_thickness'].min}" max="${currentValue['lip_thickness'].max}" value="${currentValue['lip_thickness'].value}" class="input-value-radius" id="lip_thickness-range" oninput="changeRange('lip_thickness')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `  
            }
            if (items['face'].jaw) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_jaw}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_jaw_1}</p>
                                        <p class="item-value" id="jaw_1-value">${currentValue['jaw_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['jaw_1'].min}" max="${currentValue['jaw_1'].max}" value="${currentValue['jaw_1'].value}" class="input-value-radius" id="jaw_1-range" oninput="changeRange('jaw_1')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_jaw_2}</p>
                                        <p class="item-value" id="jaw_2-value">${currentValue['jaw_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['jaw_2'].min}" max="${currentValue['jaw_2'].max}" value="${currentValue['jaw_2'].value}" class="input-value-radius" id="jaw_2-range" oninput="changeRange('jaw_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `  
            }
            if (items['face'].chin) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_chin}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_chin_1}</p>
                                        <p class="item-value" id="chin_1-value">${currentValue['chin_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['chin_1'].min}" max="${currentValue['chin_1'].max}" value="${currentValue['chin_1'].value}" class="input-value-radius" id="chin_1-range" oninput="changeRange('chin_1')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_chin_2}</p>
                                        <p class="item-value" id="chin_2-value">${currentValue['chin_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['chin_2'].min}" max="${currentValue['chin_2'].max}" value="${currentValue['chin_2'].value}" class="input-value-radius" id="chin_2-range" oninput="changeRange('chin_2')">
                                    </div>
                                </div>
                            </div>
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_chin_3}</p>
                                        <p class="item-value" id="chin_3-value">${currentValue['chin_3'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['chin_3'].min}" max="${currentValue['chin_3'].max}" value="${currentValue['chin_3'].value}" class="input-value-radius" id="chin_3-range" oninput="changeRange('chin_3')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_chin_4}</p>
                                        <p class="item-value" id="chin_4-value">${currentValue['chin_4'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['chin_4'].min}" max="${currentValue['chin_4'].max}" value="${currentValue['chin_4'].value}" class="input-value-radius" id="chin_4-range" oninput="changeRange('chin_4')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `  
            }
            if (items['face'].eye_color) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_eye_color}</p>
                        <div class="item-bar">
                            <p class="item-subname">${translate.sub_eye_color}</p>
                            <div class="color-selector-bar">
                                <div class="item-sub-color-selector" style="background: #d2d6d3;" onclick="changeColor('eye_color', 0)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #5c6e36;" onclick="changeColor('eye_color', 45)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #1f400f;" onclick="changeColor('eye_color', 2)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #8fcbeb;" onclick="changeColor('eye_color', 3)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #2e6b94;" onclick="changeColor('eye_color', 4)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #27c07d;" onclick="changeColor('eye_color', 6)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                
                                <div class="item-sub-color-selector" style="background: #947647;" onclick="changeColor('eye_color', 31)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #593b0a;" onclick="changeColor('eye_color', 30)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #2e2316;" onclick="changeColor('eye_color', 24)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #9b9b9b;" onclick="changeColor('eye_color', 9)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #5f5f5f;" onclick="changeColor('eye_color', 10)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #0e0e0e;" onclick="changeColor('eye_color', 12)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['face'].blemishes) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_blemishes}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_blemishes_1}</p>
                                        <p class="item-value" id="blemishes_1-value">${currentValue['blemishes_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['blemishes_1'].min}" max="${currentValue['blemishes_1'].max}" value="${currentValue['blemishes_1'].value}" class="input-value-radius" id="blemishes_1-range" oninput="changeRange('blemishes_1')">
                                    </div>
                                </div>
                                <div class="item-option" ${skinManager == 'qb-clothing' && `style="display:none"`}>
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_blemishes_2}</p>
                                        <p class="item-value" id="blemishes_2-value">${currentValue['blemishes_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['blemishes_2'].min}" max="${currentValue['blemishes_2'].max}" value="${currentValue['blemishes_2'].value}" class="input-value-radius" id="blemishes_2-range" oninput="changeRange('blemishes_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['face'].complexion) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_complexion}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_complexion_1}</p>
                                        <p class="item-value" id="complexion_1-value">${currentValue['complexion_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['complexion_1'].min}" max="${currentValue['complexion_1'].max}" value="${currentValue['complexion_1'].value}" class="input-value-radius" id="complexion_1-range" oninput="changeRange('complexion_1')">
                                    </div>
                                </div>
                                <div class="item-option" ${skinManager == 'qb-clothing' && `style="display:none"`}>
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_complexion_2}</p>
                                        <p class="item-value" id="complexion_2-value">${currentValue['complexion_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['complexion_2'].min}" max="${currentValue['complexion_2'].max}" value="${currentValue['complexion_2'].value}" class="input-value-radius" id="complexion_2-range" oninput="changeRange('complexion_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['face'].sun) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_sun}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_sun_1}</p>
                                        <p class="item-value" id="sun_1-value">${currentValue['sun_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['sun_1'].min}" max="${currentValue['sun_1'].max}" value="${currentValue['sun_1'].value}" class="input-value-radius" id="sun_1-range" oninput="changeRange('sun_1')">
                                    </div>
                                </div>
                                <div class="item-option" ${skinManager == 'qb-clothing' && `style="display:none"`}>
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_sun_2}</p>
                                        <p class="item-value" id="sun_2-value">${currentValue['sun_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['sun_2'].min}" max="${currentValue['sun_2'].max}" value="${currentValue['sun_2'].value}" class="input-value-radius" id="sun_2-range" oninput="changeRange('sun_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['face'].moles) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_moles}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_moles_1}</p>
                                        <p class="item-value" id="moles_1-value">${currentValue['moles_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['moles_1'].min}" max="${currentValue['moles_1'].max}" value="${currentValue['moles_1'].value}" class="input-value-radius" id="moles_1-range" oninput="changeRange('moles_1')">
                                    </div>
                                </div>
                                <div class="item-option" ${skinManager == 'qb-clothing' && `style="display:none"`}>
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_moles_2}</p>
                                        <p class="item-value" id="moles_2-value">${currentValue['moles_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['moles_2'].min}" max="${currentValue['moles_2'].max}" value="${currentValue['moles_2'].value}" class="input-value-radius" id="moles_2-range" oninput="changeRange('moles_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
            $('.panel').html(values)
            break;
        case "clothes":
            if (items['clothes'].tshirt) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_tshirt}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_tshirt_1}</p>
                                        <p class="item-value" id="tshirt_1-value">${currentValue['tshirt_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['tshirt_1'].min}" max="${currentValue['tshirt_1'].max}" value="${currentValue['tshirt_1'].value}" data-excluded="${currentValue['tshirt_1'].excluded}" class="input-value-radius" id="tshirt_1-range" oninput="changeRange('tshirt_1')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_tshirt_2}</p>
                                        <p class="item-value" id="tshirt_2-value">${currentValue['tshirt_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['tshirt_2'].min}" max="${currentValue['tshirt_2'].max}" value="${currentValue['tshirt_2'].value}" class="input-value-radius" id="tshirt_2-range" oninput="changeRange('tshirt_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['clothes'].torso) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_torso}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_torso_1}</p>
                                        <p class="item-value" id="torso_1-value">${currentValue['torso_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['torso_1'].min}" max="${currentValue['torso_1'].max}" value="${currentValue['torso_1'].value}" data-excluded="${currentValue['torso_1'].excluded}" class="input-value-radius" id="torso_1-range" oninput="changeRange('torso_1')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_torso_2}</p>
                                        <p class="item-value" id="torso_2-value">${currentValue['torso_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['torso_2'].min}" max="${currentValue['torso_2'].max}" value="${currentValue['torso_2'].value}" class="input-value-radius" id="torso_2-range" oninput="changeRange('torso_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['clothes'].arms) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_arms}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_arms}</p>
                                        <p class="item-value" id="arms-value">${currentValue['arms'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['arms'].min}" max="${currentValue['arms'].max}" value="${currentValue['arms'].value}" data-excluded="${currentValue['arms'].excluded}" class="input-value-radius" id="arms-range" oninput="changeRange('arms')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_arms_2}</p>
                                        <p class="item-value" id="arms_2-value">${currentValue['arms_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['arms_2'].min}" max="${currentValue['arms_2'].max}" value="${currentValue['arms_2'].value}" class="input-value-radius" id="arms_2-range" oninput="changeRange('arms_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['clothes'].pants) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_pants}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_pants_1}</p>
                                        <p class="item-value" id="pants_1-value">${currentValue['pants_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['pants_1'].min}" max="${currentValue['pants_1'].max}" value="${currentValue['pants_1'].value}" data-excluded="${currentValue['pants_1'].excluded}" class="input-value-radius" id="pants_1-range" oninput="changeRange('pants_1')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_pants_2}</p>
                                        <p class="item-value" id="pants_2-value">${currentValue['pants_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['pants_2'].min}" max="${currentValue['pants_2'].max}" value="${currentValue['pants_2'].value}" class="input-value-radius" id="pants_2-range" oninput="changeRange('pants_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['clothes'].shoes) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_shoes}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_shoes_1}</p>
                                        <p class="item-value" id="shoes_1-value">${currentValue['shoes_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['shoes_1'].min}" max="${currentValue['shoes_1'].max}" value="${currentValue['shoes_1'].value}" data-excluded="${currentValue['shoes_1'].excluded}" class="input-value-radius" id="shoes_1-range" oninput="changeRange('shoes_1')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_shoes_2}</p>
                                        <p class="item-value" id="shoes_2-value">${currentValue['shoes_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['shoes_2'].min}" max="${currentValue['shoes_2'].max}" value="${currentValue['shoes_2'].value}" class="input-value-radius" id="shoes_2-range" oninput="changeRange('shoes_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['clothes'].decals) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_decals}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_decals_1}</p>
                                        <p class="item-value" id="decals_1-value">${currentValue['decals_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['decals_1'].min}" max="${currentValue['decals_1'].max}" value="${currentValue['decals_1'].value}" data-excluded="${currentValue['decals_1'].excluded}" class="input-value-radius" id="decals_1-range" oninput="changeRange('decals_1')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_decals_2}</p>
                                        <p class="item-value" id="decals_2-value">${currentValue['decals_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['decals_2'].min}" max="${currentValue['decals_2'].max}" value="${currentValue['decals_2'].value}" class="input-value-radius" id="decals_2-range" oninput="changeRange('decals_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['clothes'].mask) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_mask}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_mask_1}</p>
                                        <p class="item-value" id="mask_1-value">${currentValue['mask_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['mask_1'].min}" max="${currentValue['mask_1'].max}" value="${currentValue['mask_1'].value}" data-excluded="${currentValue['mask_1'].excluded}" class="input-value-radius" id="mask_1-range" oninput="changeRange('mask_1')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_mask_2}</p>
                                        <p class="item-value" id="mask_2-value">${currentValue['mask_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['mask_2'].min}" max="${currentValue['mask_2'].max}" value="${currentValue['mask_2'].value}" class="input-value-radius" id="mask_2-range" oninput="changeRange('mask_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['clothes'].bproof) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_bproof}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_bproof_1}</p>
                                        <p class="item-value" id="bproof_1-value">${currentValue['bproof_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['bproof_1'].min}" max="${currentValue['bproof_1'].max}" value="${currentValue['bproof_1'].value}" data-excluded="${currentValue['bproof_1'].excluded}" class="input-value-radius" id="bproof_1-range" oninput="changeRange('bproof_1')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_bproof_2}</p>
                                        <p class="item-value" id="bproof_2-value">${currentValue['bproof_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['bproof_2'].min}" max="${currentValue['bproof_2'].max}" value="${currentValue['bproof_2'].value}" class="input-value-radius" id="bproof_2-range" oninput="changeRange('bproof_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['clothes'].chain) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_chain}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_chain_1}</p>
                                        <p class="item-value" id="chain_1-value">${currentValue['chain_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['chain_1'].min}" max="${currentValue['chain_1'].max}" value="${currentValue['chain_1'].value}" data-excluded="${currentValue['chain_1'].excluded}" class="input-value-radius" id="chain_1-range" oninput="changeRange('chain_1')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_chain_2}</p>
                                        <p class="item-value" id="chain_2-value">${currentValue['chain_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['chain_2'].min}" max="${currentValue['chain_2'].max}" value="${currentValue['chain_2'].value}" class="input-value-radius" id="chain_2-range" oninput="changeRange('chain_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['clothes'].helmet) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_helmet}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_helmet_1}</p>
                                        <p class="item-value" id="helmet_1-value">${currentValue['helmet_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['helmet_1'].min}" max="${currentValue['helmet_1'].max}" value="${currentValue['helmet_1'].value}" data-excluded="${currentValue['helmet_1'].excluded}" class="input-value-radius" id="helmet_1-range" oninput="changeRange('helmet_1')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_helmet_2}</p>
                                        <p class="item-value" id="helmet_2-value">${currentValue['helmet_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['helmet_2'].min}" max="${currentValue['helmet_2'].max}" value="${currentValue['helmet_2'].value}" class="input-value-radius" id="helmet_2-range" oninput="changeRange('helmet_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['clothes'].glasses) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_glasses}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_glasses_1}</p>
                                        <p class="item-value" id="glasses_1-value">${currentValue['glasses_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['glasses_1'].min}" max="${currentValue['glasses_1'].max}" value="${currentValue['glasses_1'].value}" data-excluded="${currentValue['glasses_1'].excluded}" class="input-value-radius" id="glasses_1-range" oninput="changeRange('glasses_1')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_glasses_2}</p>
                                        <p class="item-value" id="glasses_2-value">${currentValue['glasses_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['glasses_2'].min}" max="${currentValue['glasses_2'].max}" value="${currentValue['glasses_2'].value}" class="input-value-radius" id="glasses_2-range" oninput="changeRange('glasses_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['clothes'].watches) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_watches}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_watches_1}</p>
                                        <p class="item-value" id="watches_1-value">${currentValue['watches_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['watches_1'].min}" max="${currentValue['watches_1'].max}" value="${currentValue['watches_1'].value}" data-excluded="${currentValue['watches_1'].excluded}" class="input-value-radius" id="watches_1-range" oninput="changeRange('watches_1')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_watches_2}</p>
                                        <p class="item-value" id="watches_2-value">${currentValue['watches_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['watches_2'].min}" max="${currentValue['watches_2'].max}" value="${currentValue['watches_2'].value}" class="input-value-radius" id="watches_2-range" oninput="changeRange('watches_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['clothes'].bracelets) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_bracelets}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_bracelets_1}</p>
                                        <p class="item-value" id="bracelets_1-value">${currentValue['bracelets_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['bracelets_1'].min}" max="${currentValue['bracelets_1'].max}" value="${currentValue['bracelets_1'].value}" data-excluded="${currentValue['bracelets_1'].excluded}" class="input-value-radius" id="bracelets_1-range" oninput="changeRange('bracelets_1')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_bracelets_2}</p>
                                        <p class="item-value" id="bracelets_2-value">${currentValue['bracelets_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['bracelets_2'].min}" max="${currentValue['bracelets_2'].max}" value="${currentValue['bracelets_2'].value}" class="input-value-radius" id="bracelets_2-range" oninput="changeRange('bracelets_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['clothes'].bags) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_bags}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_bags_1}</p>
                                        <p class="item-value" id="bags_1-value">${currentValue['bags_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['bags_1'].min}" max="${currentValue['bags_1'].max}" value="${currentValue['bags_1'].value}" data-excluded="${currentValue['bags_1'].excluded}" class="input-value-radius" id="bags_1-range" oninput="changeRange('bags_1')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_bags_2}</p>
                                        <p class="item-value" id="bags_2-value">${currentValue['bags_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['bags_2'].min}" max="${currentValue['bags_2'].max}" value="${currentValue['bags_2'].value}" class="input-value-radius" id="bags_2-range" oninput="changeRange('bags_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['clothes'].ears) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_ears}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_ears_1}</p>
                                        <p class="item-value" id="ears_1-value">${currentValue['ears_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['ears_1'].min}" max="${currentValue['ears_1'].max}" value="${currentValue['ears_1'].value}" data-excluded="${currentValue['ears_1'].excluded}" class="input-value-radius" id="ears_1-range" oninput="changeRange('ears_1')">
                                    </div>
                                </div>
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_ears_2}</p>
                                        <p class="item-value" id="ears_2-value">${currentValue['ears_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['ears_2'].min}" max="${currentValue['ears_2'].max}" value="${currentValue['ears_2'].value}" class="input-value-radius" id="ears_2-range" oninput="changeRange('ears_2')">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `
            }
            $('.panel').html(values)
            break;
        case "clothesets":
            values = values + `
                <div class="item-block">
                    <p class="item-title">${translate.title_clothesets}</p>
                    <div class="item-bar">
                        <div class="second-item-bar">
                            <div class="item-option">
                                <p class="item-subname">${translate.sub_clotheset}</p>
                                <div class="item-suboptions">
                                    <div class="item-suboptions-values left-arrow" onclick="previousClotheSets()">
                                        <i class="fa-solid fa-caret-left"></i>
                                    </div>
                                    <div class="item-suboptions-values">
                                        <p class="item-label" id="clotheset-label">${clotheSets[currentValue['clotheset'].value] && clotheSets[currentValue['clotheset'].value].name || 'NONE'}</p>
                                    </div>
                                    <div class="item-suboptions-values right-arrow" onclick="nextClotheSets()">
                                        <i class="fa-solid fa-caret-right"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `
            $('.panel').html(values)
            break;
        case "hairs":
            if (items['hairs'].hair) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_hair}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_hair_1}</p>
                                        <p class="item-value" id="hair_1-value">${currentValue['hair_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['hair_1'].min}" max="${currentValue['hair_1'].max}" value="${currentValue['hair_1'].value}" data-excluded="${currentValue['hair_1'].excluded}" class="input-value-radius" id="hair_1-range" oninput="changeRange('hair_1')">
                                    </div>
                                </div>
                                <div class="item-option" ${skinManager == 'qb-clothing' && `style="display:none"`}>
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_hair_2}</p>
                                    </div>
                                    
                                </div>
                            </div>
                            <p class="item-subname">${translate.sub_hair_color_1}</p>
                            <div class="color-selector-bar">
                                <div class="item-sub-color-selector" style="background: #060606;" onclick="changeColor('hair_color_1', 0)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #303230;" onclick="changeColor('hair_color_1', 2)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #1e0f0a;" onclick="changeColor('hair_color_1', 3)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #4e2a1d;" onclick="changeColor('hair_color_1', 4)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #42332d;" onclick="changeColor('hair_color_1', 58)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #EA3C11;" onclick="changeColor('hair_color_1', 18)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>

                                <div class="item-sub-color-selector" style="background: #8b6444;" onclick="changeColor('hair_color_1', 8)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #c4ab75;" onclick="changeColor('hair_color_1', 10)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #c21111;" onclick="changeColor('hair_color_1', 21)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #696969;" onclick="changeColor('hair_color_1', 27)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #a8a8a8;" onclick="changeColor('hair_color_1', 28)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #ff0178;" onclick="changeColor('hair_color_1', 34)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                
                                <div class="item-sub-color-selector" style="background: #fc9aff;" onclick="changeColor('hair_color_1', 35)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #185579;" onclick="changeColor('hair_color_1', 37)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #11288f;" onclick="changeColor('hair_color_1', 38)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #269b60;" onclick="changeColor('hair_color_1', 39)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #32ad13;" onclick="changeColor('hair_color_1', 43)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #eec614;" onclick="changeColor('hair_color_1', 46)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                            </div>

                            <p class="item-subname">${translate.sub_hair_color_2}</p>
                            <div class="color-selector-bar">
                                <div class="item-sub-color-selector" style="background: #060606;" onclick="changeColor('hair_color_2', 0)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #303230;" onclick="changeColor('hair_color_2', 2)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #1e0f0a;" onclick="changeColor('hair_color_2', 3)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #4e2a1d;" onclick="changeColor('hair_color_2', 4)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #42332d;" onclick="changeColor('hair_color_2', 58)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #EA3C11;" onclick="changeColor('hair_color_2', 18)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>

                                <div class="item-sub-color-selector" style="background: #8b6444;" onclick="changeColor('hair_color_2', 8)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #c4ab75;" onclick="changeColor('hair_color_2', 10)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #c21111;" onclick="changeColor('hair_color_2', 21)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #696969;" onclick="changeColor('hair_color_2', 27)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #a8a8a8;" onclick="changeColor('hair_color_2', 28)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #ff0178;" onclick="changeColor('hair_color_2', 34)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                
                                <div class="item-sub-color-selector" style="background: #fc9aff;" onclick="changeColor('hair_color_2', 35)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #185579;" onclick="changeColor('hair_color_2', 37)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #11288f;" onclick="changeColor('hair_color_2', 38)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #269b60;" onclick="changeColor('hair_color_2', 39)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #32ad13;" onclick="changeColor('hair_color_2', 43)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #eec614;" onclick="changeColor('hair_color_2', 46)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['hairs'].beard) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_beard}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_beard_1}</p>
                                        <p class="item-value" id="beard_1-value">${currentValue['beard_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['beard_1'].min}" max="${currentValue['beard_1'].max}" value="${currentValue['beard_1'].value}" data-excluded="${currentValue['beard_1'].excluded}" class="input-value-radius" id="beard_1-range" oninput="changeRange('beard_1')">
                                    </div>
                                </div>
                                <div class="item-option" ${skinManager == 'qb-clothing' && `style="display:none"`}>
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_beard_2}</p>
                                        <p class="item-value" id="beard_2-value">${currentValue['beard_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['beard_2'].min}" max="${currentValue['beard_2'].max}" value="${currentValue['beard_2'].value}" class="input-value-radius" id="beard_2-range" oninput="changeRange('beard_2')">
                                    </div>
                                </div>
                            </div>
                            <p class="item-subname">${translate.sub_beard_3}</p>
                            <div class="color-selector-bar">
                                <div class="item-sub-color-selector" style="background: #060606;" onclick="changeColor('beard_3', 0)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #303230;" onclick="changeColor('beard_3', 2)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #1e0f0a;" onclick="changeColor('beard_3', 3)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #4e2a1d;" onclick="changeColor('beard_3', 4)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #42332d;" onclick="changeColor('beard_3', 58)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #EA3C11;" onclick="changeColor('beard_3', 18)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>

                                <div class="item-sub-color-selector" style="background: #8b6444;" onclick="changeColor('beard_3', 8)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #c4ab75;" onclick="changeColor('beard_3', 10)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #c21111;" onclick="changeColor('beard_3', 21)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #696969;" onclick="changeColor('beard_3', 27)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #a8a8a8;" onclick="changeColor('beard_3', 28)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #ff0178;" onclick="changeColor('beard_3', 34)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                
                                <div class="item-sub-color-selector" style="background: #fc9aff;" onclick="changeColor('beard_3', 35)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #185579;" onclick="changeColor('beard_3', 37)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #11288f;" onclick="changeColor('beard_3', 38)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #269b60;" onclick="changeColor('beard_3', 39)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #32ad13;" onclick="changeColor('beard_3', 43)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #eec614;" onclick="changeColor('beard_3', 46)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['hairs'].eyebrow) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_eyebrow}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_eyebrows_1}</p>
                                        <p class="item-value" id="eyebrows_1-value">${currentValue['eyebrows_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['eyebrows_1'].min}" max="${currentValue['eyebrows_1'].max}" value="${currentValue['eyebrows_1'].value}" data-excluded="${currentValue['eyebrows_1'].excluded}" class="input-value-radius" id="eyebrows_1-range" oninput="changeRange('eyebrows_1')">
                                    </div>
                                </div>
                                <div class="item-option" ${skinManager == 'qb-clothing' && `style="display:none"`}>
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_eyebrows_2}</p>
                                        <p class="item-value" id="eyebrows_2-value">${currentValue['eyebrows_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['eyebrows_2'].min}" max="${currentValue['eyebrows_2'].max}" value="${currentValue['eyebrows_2'].value}" class="input-value-radius" id="eyebrows_2-range" oninput="changeRange('eyebrows_2')">
                                    </div>
                                </div>
                            </div>
                            <p class="item-subname">${translate.sub_eyebrows_3}</p>
                            <div class="color-selector-bar">
                                <div class="item-sub-color-selector" style="background: #060606;" onclick="changeColor('eyebrows_3', 0)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #303230;" onclick="changeColor('eyebrows_3', 2)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #1e0f0a;" onclick="changeColor('eyebrows_3', 3)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #4e2a1d;" onclick="changeColor('eyebrows_3', 4)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #42332d;" onclick="changeColor('eyebrows_3', 58)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #EA3C11;" onclick="changeColor('eyebrows_3', 18)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>

                                <div class="item-sub-color-selector" style="background: #8b6444;" onclick="changeColor('eyebrows_3', 8)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #c4ab75;" onclick="changeColor('eyebrows_3', 10)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #ad0903;" onclick="changeColor('eyebrows_3', 53)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #696969;" onclick="changeColor('eyebrows_3', 27)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #a8a8a8;" onclick="changeColor('eyebrows_3', 28)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #ff0178;" onclick="changeColor('eyebrows_3', 34)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                
                                <div class="item-sub-color-selector" style="background: #fc9aff;" onclick="changeColor('eyebrows_3', 35)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #185579;" onclick="changeColor('eyebrows_3', 37)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #11288f;" onclick="changeColor('eyebrows_3', 38)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #269b60;" onclick="changeColor('eyebrows_3', 39)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #32ad13;" onclick="changeColor('eyebrows_3', 43)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #eec614;" onclick="changeColor('eyebrows_3', 46)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['hairs'].chesthair) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_chesthair}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_chest_1}</p>
                                        <p class="item-value" id="chest_1-value">${currentValue['chest_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['chest_1'].min}" max="${currentValue['chest_1'].max}" value="${currentValue['chest_1'].value}" data-excluded="${currentValue['chest_1'].excluded}" class="input-value-radius" id="chest_1-range" oninput="changeRange('chest_1')">
                                    </div>
                                </div>
                                <div class="item-option" ${skinManager == 'qb-clothing' && `style="display:none"`}>
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_chest_2}</p>
                                        <p class="item-value" id="chest_2-value">${currentValue['chest_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['chest_2'].min}" max="${currentValue['chest_2'].max}" value="${currentValue['chest_2'].value}" class="input-value-radius" id="chest_2-range" oninput="changeRange('chest_2')">
                                    </div>
                                </div>
                            </div>
                            <p class="item-subname">${translate.sub_chest_3}</p>
                            <div class="color-selector-bar">
                                <div class="item-sub-color-selector" style="background: #060606;" onclick="changeColor('chest_3', 0)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #303230;" onclick="changeColor('chest_3', 2)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #1e0f0a;" onclick="changeColor('chest_3', 3)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #4e2a1d;" onclick="changeColor('chest_3', 4)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #42332d;" onclick="changeColor('chest_3', 58)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #EA3C11;" onclick="changeColor('chest_3', 18)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>

                                <div class="item-sub-color-selector" style="background: #8b6444;" onclick="changeColor('chest_3', 8)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #c4ab75;" onclick="changeColor('chest_3', 10)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #c21111;" onclick="changeColor('chest_3', 21)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #696969;" onclick="changeColor('chest_3', 27)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #a8a8a8;" onclick="changeColor('chest_3', 28)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #ff0178;" onclick="changeColor('chest_3', 34)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                
                                <div class="item-sub-color-selector" style="background: #fc9aff;" onclick="changeColor('chest_3', 35)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #185579;" onclick="changeColor('chest_3', 37)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #11288f;" onclick="changeColor('chest_3', 38)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #269b60;" onclick="changeColor('chest_3', 39)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #32ad13;" onclick="changeColor('chest_3', 43)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #eec614;" onclick="changeColor('chest_3', 46)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                            </div>
                        </div>
                    </div>
                `
            }
            $('.panel').html(values)
            break;
        case "makeup":
            if (items['makeup'].makeup) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_makeup}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_makeup_1}</p>
                                        <p class="item-value" id="makeup_1-value">${currentValue['makeup_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['makeup_1'].min}" max="${currentValue['makeup_1'].max}" value="${currentValue['makeup_1'].value}" data-excluded="${currentValue['makeup_1'].excluded}" class="input-value-radius" id="makeup_1-range" oninput="changeRange('makeup_1')">
                                    </div>
                                </div>
                                <div class="item-option" ${skinManager == 'qb-clothing' && `style="display:none"`}>
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_makeup_2}</p>
                                        <p class="item-value" id="makeup_2-value">${currentValue['makeup_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['makeup_2'].min}" max="${currentValue['makeup_2'].max}" value="${currentValue['makeup_2'].value}" class="input-value-radius" id="makeup_2-range" oninput="changeRange('makeup_2')">
                                    </div>
                                </div>
                            </div>
                            <p class="item-subname">${translate.sub_makeup_3}</p>
                            <div class="color-selector-bar">
                                <div class="item-sub-color-selector" style="background: #e775a4;" onclick="changeColor('makeup_3', 17)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #de3e81;" onclick="changeColor('makeup_3', 18)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #cf0813;" onclick="changeColor('makeup_3', 24)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #992532;" onclick="changeColor('makeup_3', 0)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #712739;" onclick="changeColor('makeup_3', 20)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #180e0e;" onclick="changeColor('makeup_3', 56)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>

                                <div class="item-sub-color-selector" style="background: #ffdd26;" onclick="changeColor('makeup_3', 45)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #f78a27;" onclick="changeColor('makeup_3', 47)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #25c2d2;" onclick="changeColor('makeup_3', 37)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #1d4ea7;" onclick="changeColor('makeup_3', 34)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #1b9c32;" onclick="changeColor('makeup_3', 40)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #6d1a9d;" onclick="changeColor('makeup_3', 32)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['makeup'].blush) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_blush}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_blush_1}</p>
                                        <p class="item-value" id="blush_1-value">${currentValue['blush_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['blush_1'].min}" max="${currentValue['blush_1'].max}" value="${currentValue['blush_1'].value}" data-excluded="${currentValue['blush_1'].excluded}" class="input-value-radius" id="blush_1-range" oninput="changeRange('blush_1')">
                                    </div>
                                </div>
                                <div class="item-option" ${skinManager == 'qb-clothing' && `style="display:none"`}>
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_blush_2}</p>
                                        <p class="item-value" id="blush_2-value">${currentValue['blush_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['blush_2'].min}" max="${currentValue['blush_2'].max}" value="${currentValue['blush_2'].value}" class="input-value-radius" id="blush_2-range" oninput="changeRange('blush_2')">
                                    </div>
                                </div>
                            </div>
                            <p class="item-subname">${translate.sub_blush_3}</p>
                            <div class="color-selector-bar">
                                <div class="item-sub-color-selector" style="background: #de3e81" onclick="changeColor('blush_3', 18)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #712739" onclick="changeColor('blush_3', 20)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #4f1f2a" onclick="changeColor('blush_3', 21)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #a4645d" onclick="changeColor('blush_3', 7)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #a84c33" onclick="changeColor('blush_3', 13)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #cf0813" onclick="changeColor('blush_3', 24)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                            </div>
                        </div>
                    </div>
                `
            }
            if (items['makeup'].lipstick) {
                values = values + `
                    <div class="item-block">
                        <p class="item-title">${translate.title_lipstick}</p>
                        <div class="item-bar">
                            <div class="second-item-bar">
                                <div class="item-option">
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_lipstick_1}</p>
                                        <p class="item-value" id="lipstick_1-value">${currentValue['lipstick_1'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['lipstick_1'].min}" max="${currentValue['lipstick_1'].max}" value="${currentValue['lipstick_1'].value}" data-excluded="${currentValue['lipstick_1'].excluded}" class="input-value-radius" id="lipstick_1-range" oninput="changeRange('lipstick_1')">
                                    </div>
                                </div>
                                <div class="item-option" ${skinManager == 'qb-clothing' && `style="display:none"`}>
                                    <div class="item-values">
                                        <p class="item-subname">${translate.sub_lipstick_2}</p>
                                        <p class="item-value" id="lipstick_2-value">${currentValue['lipstick_2'].value}</p>
                                    </div>
                                    <div class="item-suboptions">
                                        <input type="range" min="${currentValue['lipstick_2'].min}" max="${currentValue['lipstick_2'].max}" value="${currentValue['lipstick_2'].value}" class="input-value-radius" id="lipstick_2-range" oninput="changeRange('lipstick_2')">
                                    </div>
                                </div>
                            </div>
                            <p class="item-subname">${translate.sub_lipstick_3}</p>
                            <div class="color-selector-bar">
                                <div class="item-sub-color-selector" style="background: #880302" onclick="changeColor('lipstick_3', 54)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #ff0505" onclick="changeColor('lipstick_3', 53)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #d1593c" onclick="changeColor('lipstick_3', 51)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #eb4b93" onclick="changeColor('lipstick_3', 34)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #023974" onclick="changeColor('lipstick_3', 38)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                                <div class="item-sub-color-selector" style="background: #3fa16a" onclick="changeColor('lipstick_3', 39)"><i class="fa-solid fa-check" style="opacity:0.0"></i></div>
                            </div>
                        </div>
                    </div>
                `
            }
            $('.panel').html(values)
            break;
    }
});

function previousClotheSets() {
    if (clotheSets[currentValue['clotheset'].value-1]) {
        currentValue['clotheset'].value -= 1
        $(`.item-label`).html(clotheSets[currentValue['clotheset'].value].name)
    }
    $.post('https://hp_charcreator/change', JSON.stringify({
        type: 'clotheset', 
        new: currentValue['clotheset'].value
    }));
}

function nextClotheSets() {
    if (clotheSets[currentValue['clotheset'].value+1]) {
        currentValue['clotheset'].value += 1
        $(`.item-label`).html(clotheSets[currentValue['clotheset'].value].name)
    }
    $.post('https://hp_charcreator/change', JSON.stringify({
        type: 'clotheset', 
        new: currentValue['clotheset'].value
    }));
}

function previous(item) {
    if (currentValue[item].value > currentValue[item].min) {
        if (item == 'mom') {
            if (currentValue[item].value === 45) {
                currentValue[item].value = 41
            } else {
                currentValue[item].value -= 1
            }
            $(`#${item}-label`).text(translate.parentsNames[item][currentValue[item].value])
            $(`#${item}-photo`).css(`background-image`, `url(./parents/${item}-${currentValue[item].value}.png)`)
        } else if (item == 'dad') {
            if (currentValue[item].value === 42) {
                currentValue[item].value = 20
            } else {
                currentValue[item].value -= 1
            }
            $(`#${item}-label`).text(translate.parentsNames[item][currentValue[item].value])
            $(`#${item}-photo`).css(`background-image`, `url(./parents/${item}-${currentValue[item].value}.png)`)
        } else {
            currentValue[item].value -= 1
            $(`#${item}-label`).html(currentValue[item].value)
        }
    }
    $.post('https://hp_charcreator/change', JSON.stringify({
        type: item, 
        new: currentValue[item].value
    }));
}

function next(item) {
    if (currentValue[item].value < currentValue[item].max) {
        if (item == 'mom') {
            if (currentValue[item].value === 41) {
                currentValue[item].value = 45
            } else {
                currentValue[item].value += 1
            }
            $(`#${item}-label`).text(translate.parentsNames[item][currentValue[item].value])
            $(`#${item}-photo`).css(`background-image`, `url(./parents/${item}-${currentValue[item].value}.png)`)
        } else if (item == 'dad') {
            if (currentValue[item].value === 20) {
                currentValue[item].value = 42
            } else {
                currentValue[item].value += 1
            }
            $(`#${item}-label`).text(translate.parentsNames[item][currentValue[item].value])
            $(`#${item}-photo`).css(`background-image`, `url(./parents/${item}-${currentValue[item].value}.png)`)
        } else {
            currentValue[item].value = currentValue[item].value + 1
            $(`#${item}-value`).html(currentValue[item].value)
        }
    }
    $.post('https://hp_charcreator/change', JSON.stringify({
        type: item, 
        new: currentValue[item].value
    }));
}

function changeColor(item, dataId) {
    $.post('https://hp_charcreator/change', JSON.stringify({
        type: item,
        new: dataId
    }));
    currentValue[item].value = dataId
}

function changeHeight() {
    var changedHeight = document.getElementById('height-input').value
    $.post('https://hp_charcreator/change_height', JSON.stringify({height: changedHeight}));
}

function changeRotate() {
    var changedRotate = document.getElementById('rotate-input').value
    $.post('https://hp_charcreator/change_rotate', JSON.stringify({rotate: changedRotate}));
}

function changeDistance() {
    var changedDistance = document.getElementById('distance-input').value
    $.post('https://hp_charcreator/change_distance', JSON.stringify({distance: changedDistance}));
}

function changeCamera(type) {
    $.post('https://hp_charcreator/change_camera', JSON.stringify({type: type}));
}

function changeRange(item) {
    let inputValue = parseInt($(`#${item}-range`).val())
    let result = inputValue
    if ($(`#${item}-range`).data('excluded')) {
        var excludedValues = $(`#${item}-range`).data('excluded').split(',').map(Number)
        if (excludedValues.includes(inputValue)) {
            result = findClosestValue(inputValue, excludedValues);
            $(`#${item}-range`).val(result);
        }
    }
    if (result != currentValue[item].value) {
        currentValue[item].value = result
        $.post('https://hp_charcreator/change', JSON.stringify({
            type: item,
            new: Number(result)
        }));
        $(`#${item}-value`).html(currentValue[item].value)
    }
}

function findClosestValue(value, excludedValues) {
    var closestValue = value;
    while (excludedValues.includes(closestValue)) {
        if (direction == "left") {
            closestValue--;
        } else {
            closestValue++;
        }
    }
    return closestValue;
}

$(document).on("keydown", function (event) {
    if (event.keyCode == 37) {
        direction = "left"
    } else if (event.keyCode == 39) {
        direction = "right"
    } else if (event.key == handsUpKey) {
        $.post('https://hp_charcreator/hands_up')
    }
});