setTimeout(function( elem ){
    document.body.appendChild(elem=document.getElementById("sananvapaus-ctrl")||document.createElement("div"));
    elem.id        = "sananvapaus-ctrl";
    elem.innerHTML = "<button onclick='window.mdwifos()'>Sananvapaus: <b class='on'>Paljastettu</b><b class='off'>Turvattu</b></button><img id='exportImgBtn' onclick='exportAsImage()' style='float:right' width='21' height='21' />";
    elem.style     = "padding:1em;position:absolute;top:0px;left:50%;transform:translate(-50%,0%);"

    document.body.appendChild(elem=document.getElementById("sananvapaus-css")||document.createElement("style"));
    elem.id          = "sananvapaus-css";
    elem.type        = "text/css";
    elem.textContent =
    "body.sananvapaus #items.yt-live-chat-item-list-renderer>.yt-live-chat-item-list-renderer{ display: none!important;}"+
    "body.sananvapaus #items.yt-live-chat-item-list-renderer>.yt-live-chat-item-list-renderer[is-deleted] { display: flex!important;}"+
    "body.sananvapaus #items.yt-live-chat-item-list-renderer>.yt-live-chat-item-list-renderer[is-deleted]:not([show-original]) #message.yt-live-chat-text-message-renderer { display:initial!important;color:initial;font-style:initial;padding-right:0.4em;}"+
    "body.sananvapaus #sananvapaus-ctrl button>.off,body #sananvapaus-ctrl button>.on { display: none!important; }"+
    "body.sananvapaus #sananvapaus-ctrl button>.on { display: inline!important; }";

    window.mdwifos = function( v ){
        window.sananvapaus=v==null?!window.sananvapaus:!!v;
        document.body.classList[window.sananvapaus?"add":"remove"]("sananvapaus");
    };

    window.exportAsImage = function(){
        exportImage( window.deldata, function( img ){
            document.getElementById( "exportImgBtn" ).src = img.src;
        });
    };

    revealSananvapaus();
});

/* Reveal */

function revealSananvapaus( delkey ){
    window.sananvapausInterval = window.sananvapausInterval || setInterval( revealSananvapaus, 15000 );

    delkey = delkey || revealSananvapaus.getKey();
    var deldata = revealSananvapaus.load( delkey ) || {}, deldata_ids = [];

    var alldata = window.alldata = window.alldata || {};
    for( var elem of document.querySelectorAll("#items > yt-live-chat-text-message-renderer")){
        alldata[ elem.id ] = revealSananvapaus.parseMsgElemToArr(elem);
    }

    for( var elem of document.querySelectorAll("#items > yt-live-chat-text-message-renderer[is-deleted]")){
        deldata_ids.push( elem.id );
        deldata[ elem.id ] = alldata[ elem.id ];
    }
    revealSananvapaus.save( delkey, window.deldata = deldata, window.deldata_ids = deldata_ids );
    revealSananvapaus.print( deldata );

    return deldata;
}
revealSananvapaus.parseMsgElemToArr = function( elem ){
    var time = elem.querySelector("#timestamp").textContent.match(/(\d+):(\d+) (AM|PM)/);

    return [
        elem.querySelector("#img").src,
        60*((time[3]=="PM"?12:0)+parseInt(time[1]))+parseInt(time[2]),
        elem.querySelector("#author-name").textContent,
        elem.querySelector("#message").textContent,
        (elem.querySelector("#deleted-state")||{}).textContent
    ];
};
revealSananvapaus.print = function( deldata ){
    console.log( Object.keys( deldata ).map(function(id){ return deldata[id][1]+" "+deldata[id][2]+": "+deldata[id][3]+" -> "+deldata[id][4]; }).join("\n"));
    console.log( "Sananvapaus koskettanut tässä chatissa "+Object.keys(deldata).length+" viestiä" );
};
revealSananvapaus.getKey = function(){
    return "yt-deldata-"+ location.href.match(/\?(?:.*?)v=([^&]+)/)[1];
};
revealSananvapaus.load = function( key ){
    try {
        return JSON.parse( localStorage.getItem( key ));
    } catch( err ) { console.error( err ); }
};
revealSananvapaus.save = function( key, deldata, order ){
    try {
        localStorage.setItem( key, JSON.stringify( deldata ));
        if( order ) localStorage.setItem( key+"-order", order.join(","));
    } catch( err ) { console.error( err ); }
};

/* Export */

function exportHTML( data, html ){
    html = html || "";
    data = data || window.deldata;
    data = Object.keys(data).map(v=>(v=data[v]));
    data = data.sort((a,b)=>parseInt(a[1])-parseInt(b[1]));
    data = data.map(v=>((v[1]=[parseInt(v[1]/60),v[1]%60]),v));

    for( var a of data ){
        a[1][0] = (a[1][0] < 10 ? "0" : "") + a[1][0];
        a[1][1] = (a[1][1] < 10 ? "0" : "") + a[1][1];
        var e = "";
        e += "<img style='width:24px;border-radius:50%;float:left;margin-right:16px' src='"+a[0]+"'>";

        // timestamp
        e += "<span style='color:rgba(17,17,17,0.4);margin-right:8px'>"+a[1][0]+":"+a[1][1]+"</span>";

        // handle
        e += "<span style='color:rgba(17,17,17,0.6);font-weight:bold;margin-right:8px'>"+a[2]+"</span>";

        // msg
        e += "<span style=''>"+a[3]+"</span>";
        e += "<span style='color:rgba(0,0,0,0.5);font-style:italic'> -> "+a[4]+"</span>";
        html += "<div style='line-height:24px;padding:0px 24px;font-size:13px'>"+e+"</div>";
    }
    return html;
}
exportHTML.prependBody = (function( celem ){
    var pelem = document.createElement("div");
    pelem.append( celem = document.createElement("div") );
    pelem.style.position="absolute";
    pelem.style.left=pelem.style.right=pelem.style.top=pelem.style.bottom="0px";
    pelem.style.overflowY="auto";
    pelem.style.zIndex="9001";
    pelem.style.backgroundColor="#ffffff";

    return function( data, html ){
        document.body.prepend( pelem );
        pelem.style.display = "block";
        celem.innerHTML = exportHTML( data, html );
        return celem;
    };
})();

function elementToCanvas( element, callback ){
    var script = document.createElement("script");
    script.onload = function(){
        try {
            html2canvas( element ).then(callback);
        } catch( error ){
            console.error( error );
        }
    }
    script.src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js";
    document.body.append( script );
}

function exportImage( data, callback ){
    var celem = exportHTML.prependBody( window.deldata );
    setTimeout(function(){
        elementToCanvas( celem, function( canvas ){
            var img = new Image();
            img.onload = function(){
                celem.parentElement.style.display = "none";
                callback( img );
            };
            img.src = canvas.toDataURL();
        });
    }, 1000);
}