//// COMMENT FOR EDO: THIS SCRIPT IS PRE-CHANGE
//// MAIN SCRIPT ~~~
/// SET TAGS
function highlightElem(elem, color, background, border) {
    if (elem) {
        elem.style.color = color;
        elem.style.background = background;
        elem.style.border = border;
    }
}
/// INSPECT IFRAMES
function highlightItems(ids, color, background, border) {
    for (let v = 0; v < ids.length; v++) {
        var mainElements = document.querySelectorAll(`[value="${ids[v]}"]`);
        for (let i = 0; i < mainElements.length; i++) {
            highlightElem(mainElements[i], color, background, border);
            if (mainElements[i].value === "4804") {
                // SPECIFIC VALUE IS FOUND. NOW IT NEEDS TO GRAB ANOTHER ID LIST FROM CHROME.STORAGE AND HIGHLIGHT ID'S WITH A
                // BORDER PROPERTY
                console.log("4804 catched");
                chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
                    console.log("sent msg bc 4804");
                });
            }
        }
        var iframes = document.querySelectorAll('iframe');
        for (let i = 0; i < iframes.length; i++) {
            try {
                var content = iframes[i].contentDocument || iframes[i].contentWindow.document;
                var elems = content.querySelectorAll(`[value="${ids[v]}"]`);
                for (let j = 0; j < elems.length; j++) {
                    highlightElem(elems[j], color, background, border);
                    if (elems[j].value === "1234") {
                        // SPECIFIC VALUE IS FOUND. NOW IT NEEDS TO GRAB ANOTHER ID LIST FROM CHROME.STORAGE AND HIGHLIGHT ID'S WITH A
                        // BORDER PROPERTY
                        console.log("4804 catched2");
                        chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
                            console.log("sent msg bc 1234");
                        });
                    }
                }
            } catch (ex) {
                console.log('Caught Error', ex);
                continue;
            }
        }
    }
}

function highlightAll(lists) {
    for (let i = 0; i < lists.length; i++) {
        highlightItems(lists[i].ids, lists[i].color, lists[i].background, lists[i].border);
    }
}

itemList = [
    {
        index: 0,
        description: 'TEST1',
        ids: ['000-ABC12-00009',
        '000-ABC12-00011',
        '000-ABC12-00012',
        '000-ABC12-00013'],
        color: 'white',
        background: 'orange',
        border: 'medium solid #0c182b'
    },
    {
        index: 1,
        description: 'TEST2',
        ids: ['000-ABC12-00014',
        '000-ABC12-00015',
        '000-ABC12-00016',
        '000-ABC12-00017'],
        color: 'white',
        background: 'orange',
        border: 'medium solid #0c182b'
    },
    {
        index: 2,
        description: 'TEST3',
        ids: ['000-ABC12-00018',
        '000-ABC12-00019',
        '000-ABC12-00020',
        '000-ABC12-00021'],
        color: 'white',
        background: 'orange',
        border: 'medium solid #0c182b'
    },
    {
        index: 3,
        description: 'TEST4',
        ids: ['000-ABC12-00021',
        '000-ABC12-00022',
        '000-ABC12-00023',
        '000-ABC12-00024'],
        color: 'white',
        background: 'orange',
        border: 'medium solid #0c182b'
    },
    {
        index: 4,
        description: 'TEST5',
        ids: ['000-ABC12-00025',
        '000-ABC12-00026',
        '000-ABC12-00027',
        '000-ABC12-00028'],
        color: 'white',
        background: 'orange',
        border: 'medium solid #0c182b'
    },
    {
        index: 5,
        description: 'TEST6',
        ids: ['000-ABC12-00025',
        '000-ABC12-00026',
        '000-ABC12-00027',
        '000-ABC12-00028'],
        color: 'white',
        background: 'orange',
        border: 'medium solid #0c182b'
    },
    {
        index: 6,
        description: 'TEST7',
        ids: ['000-ABC12-00025',
        '000-ABC12-00026',
        '000-ABC12-00027',
        '000-ABC12-00028'],
        color: 'white',
        background: 'orange',
        border: 'medium solid #0c182b'
    },
    {
        index: 7,
        description: 'TEST8',
        ids: ['000-ABC12-00025',
        '000-ABC12-00026',
        '000-ABC12-00027',
        '000-ABC12-00028'],
        color: 'white',
        background: 'orange',
        border: 'medium solid #0c182b'
    },
    {
        index: 8,
        description: 'TEST9',
        ids: ['000-ABC12-00025',
        '000-ABC12-00026',
        '000-ABC12-00027',
        '000-ABC12-00028'],
        color: 'white',
        background: 'orange',
        border: 'medium solid #0c182b'
    },
    {
        index: 9,
        description: 'TEST10',
        ids: ['000-ABC12-00025',
        '000-ABC12-00026',
        '000-ABC12-00027',
        '000-ABC12-00028'],
        color: 'white',
        background: 'orange',
        border: 'medium solid #0c182b'
    },
];

/// GET SAVED COLORS
chrome.storage.sync.get(["cpicker1","cpicker2","cpicker3","cpicker4","cpicker5","cpicker6","cpicker7","cpicker8","cpicker9","cpicker10",
    "idList1","idList2","idList3","idList4","idList5","idList6","idList7","idList8","idList9","idList10"],
    function(data) {
        var border = [data.bpicker1, data.bpicker2, data.bpicker3];
        var colors = [data.cpicker1, data.cpicker2, data.cpicker3, data.cpicker4, data.cpicker5, data.cpicker6, data.cpicker7, data.cpicker8, data.cpicker9, data.cpicker10];
        var ids = [(data.idList1).split('\n'), (data.idList2).split('\n'), (data.idList3).split('\n'), (data.idList4).split('\n'), (data.idList5).split('\n'),
        (data.idList6).split('\n'),(data.idList7).split('\n'),(data.idList8).split('\n'),(data.idList9).split('\n'),(data.idList10).split('\n')];
    itemList.forEach(function(item, index) {
      item.background = colors[index];
            item.ids = ids[index];
    });
    // Retrieve all iFrames and attach a function to the iframe load event
    // which parses the iframe content for values
    var frames = document.querySelectorAll('iframe');
    for (let i = 0; i < frames.length; i++) {
        try {
            frames[i].addEventListener('load', function() {
                highlightAll(itemList);
            });
        } catch (ex) {
            console.log('Error Processing IFrame', ex);
            continue;
        }
    }
    //Run highlight all on main window area of webpage that is not an iframe.
    try {
        highlightAll(itemList);
    } catch (ex) {
        console.log('Error Processing Main Window', ex);
    }
});
//// ~~ END MAIN SCRIPT