// ==UserScript==
// @name         SingleFile - 单文件保存网页
// @namespace    SingleFile
// @version      0.2
// @description  try to take over the world!
// @author       PY-DNG
// @include      *
// @grant        GM_xmlhttpRequest
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    // User Swiches
    const developer = true;

    // variants
    let i, j;

    // Get HTML
    const HTML_ORGINAL = document.lastChild.outerHTML;
    let HTMLDOC = new DOMParser().parseFromString(HTML_ORGINAL, 'text/html');
    if (developer) {console.log('HTML_ORGINAL', HTML_ORGINAL, HTMLDOC);};

    // Remove <script>s
    const scripts = HTMLDOC.querySelectorAll('script');
    for (i = 0; i < scripts.length; i++) {
        scripts[i].parentElement.removeChild(scripts[i]);
    }
    if (developer) {console.log('<script> DEALED', HTMLDOC, scripts);};

    // Deal CSS <link>s
    let CSSs = {loaded: [], style: []};
    let CSSLinks = HTMLDOC.querySelectorAll('link[rel="stylesheet"]');
    for (i = 0; i < CSSLinks.length; i++) {
        CSSs.loaded[i] = null;
        getCSSFromLink(CSSLinks, CSSs, i);
    }
    if (developer) {wait();};

    // Deal background pictures
    let PICs = {loaded: [], picture: []};
    const allEms = document.querySelectorAll('*');
    for (let i = 0; i < allEms.length; i++) {
        const style = getComputedStyle(allEms[i]);
        if (style.backgroundImage !== 'none') {
            PICs.loaded[i] = null;
        }
    }




    // Function: Log in console while css dealing finished
    function wait() {
        if(CSSs.loaded.includes(null)) {
            setTimeout(wait, 100);
            console.log('css dealing');
        } else {
            console.log('CSS DEALED', HTMLDOC, CSSs);
        }
    };

    function getCSSFromLink(CSSLinks, CSSs, index) {
        GM_xmlhttpRequest({
            method: 'GET',
            url: CSSLinks[index].href,
            responseType: 'text',
            onload: function(re) {
                if (re.readyState === 4) {
                    // request success
                    CSSs.loaded[index] = true;
                    CSSs.style[index] = re.responseText;
                    CSSLinks[index].outerHTML = '<style>' + CSSs.style[index] + '</style>';
                    CSSLinks[index].outerHTML = CSSLinks[index].outerHTML.replace(/(<\/style>)+$/, '</style>')
                } else {
                    // request failed
                    console.log('XMLHttpRequest get CSS error:', CSSLinks, CSSs, index, re);
                    if (developer) {debugger};
                    CSSs.loaded[index] = false;
                }
            },
            onabort : function() {CSSs.loaded[index] = false;}
        })
    }

    function getPICFromLink(PICLinks, PICs, index) {
        GM_xmlhttpRequest({
            method: 'GET',
            url: PICLinks[index].src,
            responseType: 'blob',
            onload: function(re) {
                if (re.readyState === 4) {
                    // request success
                    PICs.loaded[index] = true;
                    PICs.picture[index] = re.response;
                    HTML = HTML.replaceAll(PICLinks[index].outerHTML, '<style>' + PICs.picture[index] + '</style>');
                    //if (developer) {console.log('CSS DEALED', index, [HTML, PICs]);};
                } else {
                    // request failed
                    console.log('XMLHttpRequest get CSS error:', PICLinks, PICs, index, re);
                    if (developer) {debugger};
                    PICs.loaded[index] = false;
                }
            },
            onabort : function() {PICs.loaded[index] = false;}
        })
        //console.log('request', index, PICLinks);
    }

    function getBASE64FromPic(img) {
        if (typeof(img) === 'string') {
            //
        }
    }
})();