(function() {
    let divChooseImg = document.getElementById('divChooseImg'),
        divDecodedImg = document.getElementById('divDecodedImg'), 
        html = document.getElementsByTagName('html')[0],
        imgs = Object.values(document.getElementsByTagName('img'));
    if(!divDecodedImg) {
        divChooseImg = document.createElement('div');
        divDecodedImg = document.createElement('div');
        html.appendChild(divChooseImg);
        html.appendChild(divDecodedImg);
    };
    divChooseImg.textContent = '';
    imgs.map((img, pImg)=>{
        let tmpImg = document.createElement('img');
        tmpImg.setAttribute('style', 'width:100px; height:100px; border:2px solid yellow');
        tmpImg.src = img.src;
        divChooseImg.appendChild(tmpImg)
        tmpImg.addEventListener('click', (function(img){
            divDecodedImg.textContent = '';
            console.log('bit plane over ...', img.src);
            ['R', 'G', 'B'].map((oName, oPos)=>{
                divDecodedImg.appendChild(document.createElement('p'));
                '0'.repeat(8).split('').map((bit, bitPos)=>{
                    let tmpCanvas = document.createElement('canvas'), context = null;
                        bin = null, test = null, binPos = null,
                        newImg = document.createElement('img');
                    tmpCanvas.width  = img.offsetWidth;
                    tmpCanvas.height = img.offsetHeight;
                    context = tmpCanvas.getContext('2d');
                    context.fillStyle='#FFF';
                    context.fillRect(0, 0, tmpCanvas.width , tmpCanvas.height);
                    context.drawImage(img, 0, 0);
                    datas = context.getImageData(0,0, tmpCanvas.width, tmpCanvas.height);
                    try {
                        for (let i = 0; i <= datas.data.length-1; i+=4) {
                            bin  = datas.data[i+oPos].toString(2).split('');
                            binPos = bin.length - bitPos;
                            test = bin[binPos > 1 ? binPos : 0] == '1' ? true : false;
                            for (var p = 0; p <= 2;p++) 
                                datas.data[i+p] = test ? 255 : 0;
                        };
                    } catch(e) { console.log(e) };
                    context.fillStyle='#FFF';
                    context.fillRect(0, 0, tmpCanvas.width , tmpCanvas.height);
                    context.putImageData(datas, 0, 0);
                    newImg.src = tmpCanvas.toDataURL();
                    newImg.setAttribute('style', 'width:100px; height:100px; border:1px solid rgb('.concat(['255,0,0','0,255,0','0,0,255'][oPos], ')'));
                    divDecodedImg.appendChild(newImg);
                    delete tmpCanvas;
                    delete context;
                });
            });
        }).bind(null, img));
    });
})();