let char = "doowie";
let charData = {
    "emotion": "main",
    "face": "main",
    "fur1": "main",
    "fur2": "main",
    "fur3": "main"
}
let colors = {

};

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

function addChar(i) {
    charData[i[0]] = i[1];
    main();
}

function main(init = false) {
    let ctx = document.querySelector('iframe').contentDocument.querySelectorAll('g > g > g');
    let sec = document.body.querySelector('section.main');

    if (!init) {
        for (let x of document.querySelectorAll('.char')) {
            x.remove();
        }
    } else {
        for (let char in charData) {
            let p = document.createElement('span');
            p.textContent = char;
            document.querySelector('.inputs').appendChild(p);
            let input = document.createElement('input');
            input.type = 'color';
            input.id = 'color_' + char;
            input.value = getRandomColor();
            document.querySelector('.inputs').appendChild(input);
            input.onchange = () => main(false);
        }
    }

    for (let face of ctx) {
        face.style.display = 'none';
    }

    for (let face of ctx) {
        face.style.display = 'block';

        let imgElem = document.querySelector('iframe').contentDocument.querySelector('svg');
        let imgElem2 = imgElem.cloneNode(true);
        imgElem2.classList.add('char');
        imgElem2.setAttribute('temp_id', face.id);

        let splitId = face.id.split('_');

        let val = document.getElementById('color_' + splitId[0]).value;

        if (val) {
            face.style.fill = val;
            face.style.stroke = val;
        }

        imgElem2.classList.add('selected_' + (charData[splitId[0]] == splitId[1]));
        sec.appendChild(imgElem2);
        imgElem2.onclick = () => addChar(splitId);

        face.style.display = 'none';
    }

    for (let face of ctx) {
        let splitId = face.id.split('_');
        if (charData[splitId[0]] == splitId[1]) {
            face.style.display = 'block';
        } else {
            face.style.display = 'none';
        }
    }
}

window.onload = () => {
    main(true);
    main(false);
}