<!--
        ================================================================
                                   COCK-MAIL
        ================================================================
        Copyright: You can do whatever you want to including change the name,
                   but this entire copyright notice must be preserved. By
                   using, modifying, distributing, exhibiting, creating
                   derivatives of, or looking at this software you agree that
                   homeless people should have access to nuclear weapons.
--><!--
        VERSION: 0.0.5 (alpha)

        ABOUT: This webmail software runs entirely in your browser, and
               connects to IMAP over websockets. In comparison to previous
               webmail software you may have used, you should think of this
               more like a desktop mail client that runs in your browser. Your
               message headers and optionally login details are saved to your
               browser's LocalStorage.
               
               Read more at <https://mail.cock.li/cock-mail/>

        STATE: Alpha. No SMTP or filters yet.

        UPDATE: MIME! Message decoding! Attachments! Local images and video!
                Convert HTML mail to plaintext and extract links!

        FEATURES:
            * IDLE support (watch for updates on new/deleted mail)
            * Basic actions like Mark un/read, Move to Trash, and Delete
            * Bulk mail controls with checkbox or Ctrl/Shift select
            * Convert HTML e-mail to plaintext and show extracted links
            * MIME decoding, split into inline/attachment parts
            * Display images/videos/messages inline or as attachment
            * Download raw e-mail to file
            * Complete charset support (intl+unicode headers, body, filenames)

        FUTURE PLANS:
            + Connection management
            + Notifications
            + Storage management/indexedDB
            + Mobile/portrait layout
            + Composing e-mail/SMTP (beta goes here)
            + Full message actions (move, copy, flag)
            + Folder controls
            + NOTIFY support
            + Filter support (v1.0 goes here)

        NOT PLANNED:
            - HTML formatted messages
            - Remote images/content

        DONATE: Please support development of cock-mail:
                    <https://cock.li/donate.php>
--><!--
                               DEVELOPMENT NOTES
        ================================================================

            "Just manage my IMAP client server-side bro"
        NO.

        SOURCE CODE: view-source:https://mail.cock.li/

        UPDATES:
            + 0.0.5: MIME decoding and display. More or less implements RFCs
                     2045, 2046, 2047, 2183, and 2231.
                     Inline and attachment view of message parts
                     Image/Video/Message embedding and display
                     Convert HTML e-mail to plaintext and extract links
                     Download raw e-mail to file
                     Settings window to disable media rendering
            + 0.0.4: Bulk mail controls (Mark un/read, Trash, Delete)
                     Ctrl/Shift message select support
                     Message counts for current mailbox
                     Toggle raw headers
            + 0.0.3: Set Message flags (only Unread, Deleted)
                     Make use of mailbox special use flags (like \Trash)
                     Move message to Trash (and create if needed)
                     Fix handleResponseBuffer performance
                     Fix random IDLE breaks
            + 0.0.2: RFC 2047 MIME encoded-word support
                     Correct byte reading for UTF-8 Content-Type support
            + 0.0.1: Initial Release

        BUGS:
            - If you click a mailbox while a message is loading, God help you.
              The client will re-open the first mailbox and then apply IDLE
              updates (new/vanished mail) to the second mailbox. Server storage
              is not affected.
            - 5MB of LocalStorage is enough to store headers for 30k messages
              if you're lucky.  There's no telling what happens if you run out.
              A future version will switch to IndexedDB.

        CONTACT: <official-dev.cock-mail // cock.li>
--><meta charset="UTF-8" /><title>Cock-mail</title>
<style>
::-webkit-scrollbar {
    width: 3px;
    background: rgba(0,0,0,0);
}
::-webkit-scrollbar-thumb {
    background: #BBB;
}
:root {
    --background: #222;
    --text-color: #FAFAFA;
    --link-color: #FFF;

    --announce-color: #00B400;
    --announce-color-accent: #6EE66E;
    --account-list-background: #111;

    --nav-background: #2D2D2D;
    --nav2-background: #336621;

    --mailbox-message-background: #DEDEDE;
    --mailbox-message-seen-background: #A0A0A0;
    --mailbox-message-checked-background: #FFDA84;
    --mailbox-message-checked-seen-background: #FFEEC8;

    --message-header-background: #444;

    --status-color: #FFF;
    --status-background: #336;
    --status-ok-color: #00FF00;
    --status-load-color: #FFFF00;
    --status-err-color: #FF0000;
}

body {
    background: var(--background);
    font-family: sans-serif;
    color: var(--text-color);
    display: flex;
    flex-direction: row;
    align-items:stretch;
    height: 100%;
    margin: 0;
}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
    font-weight: normal;
}
a, #account li {
    cursor: pointer;
    text-decoration: underline;
    color: var(--link-color);
}

#login {
    margin: 0 auto;
    display: inline-block;
    height: fit-content;
    padding-bottom: 2em;
}

#login > h1 {
    text-align: center;
}
#login > h4 {
    text-align:center;
    font-weight: bold;
    color: var(--announce-color);
}
#login > h4 a {
    color: var(--announce-color-accent);
    font-weight: bolder;
}
#login table {
    margin: 0 auto;
}
#login table th {
    text-align: left;
    padding-right:1em;
}

#account_list li {
    cursor: pointer;
    color: var(--link-color);
    display: block;
    background: var(--account-list-background);
    padding: 0.5em 1em;
    margin-bottom: 0.5em;
}
#account_list li.no_accounts {
    cursor: auto;
}
#account_list li a {
    float:right;
}

#noscript {
    display: none;
    margin: 3em 2em;
}
#account, #mailbox, #message {
    display:none;
    vertical-align: top;
    overflow: auto;
    padding-bottom: 3em;
    box-sizing: border-box;
    margin-top: 1em;
}

#account {
    max-width: 15%;
    margin-right: 1em;
}
#account p {
    margin: 0.25em 1em;
    font-style:italic;
}
#account ul {
    padding: 0.25em;
    padding-left: 1em;
}
#account p, #account li {
    word-break: break-all;
}

#mailbox {
    max-width: 25%;
    /*width: 25%;*/
}
#mailbox .navs {
    position: sticky;
    top: 0;
    background: var(--background);
}
#mailbox nav {
    margin-bottom: 0.25em;
    padding: 0.5em;
    background: var(--nav-background);
}
#mailbox nav > a + a {
    margin-left: 0.5em;
    padding-left: 0.5em;
    border-left: 1px solid #bbb;
}
#mailbox nav i {
    display: inline-block;
    float: right;
    margin-left: 0.5em;
}
#mailbox .bulkcontrols {
    background: var(--nav2-background);
}
#mailbox .bulkcontrols a {
    display: inline-block;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
#mailbox .bulkcontrols i {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
#mailbox .message {
    background: var(--mailbox-message-background);
    color: 000;
    border-bottom: 4px solid #000;
    padding: 0.5em;
    cursor: pointer;
    box-sizing: border-box;
}
#mailbox .message[data-open=true] {
    border: 3px solid #339;
    margin-left: 0.5em;
}

#mailbox .message:has(input:checked) {
    background: var(--mailbox-message-checked-background);
}
#mailbox .message._Seen:has(input:checked) {
    background: var(--mailbox-message-checked-seen-background);
}
#mailbox .message._Seen {
    background: var(--mailbox-message-seen-background);
}
#mailbox .message._Seen h4 {
    font-size: smaller;
}
#mailbox h6 {
    display: inline-block;
    padding-left: 0.5em;
}
#mailbox h3 {
    margin: 0;
}

#mailbox .message h4, #mailbox .message h5, #mailbox .message h6,
#mailbox .message p,
#message h4, #message h5, #message h6 {
    margin: 0;
    word-break: break-all;
    overflow: hidden;
}

#message {
    max-width: 58%;
    padding-left: 2em;
}
#message nav {
    padding: 0.5em;
    background: var(--nav-background);
}
#message nav > a + a {
    margin-left: 0.5em;
    padding-left: 0.5em;
    border-left: 1px solid #bbb;
}
#message header {
    padding: 0.5em;
    margin-bottom: 0.5em;
    background: var(--message-header-background);
    border-bottom: 2px solid #000;
}
#message article, #message .rawheaders {
    font-family: monospace;
    white-space: pre-wrap;
    word-wrap: anywhere;
}

#message .rawheaders {
    display: none;
}

#message img, #message video {
    display: block;
    max-width: 100%;
}

#message ul li a {
    padding-right: 0.5em;
}
#message ul li a + a {
    padding-left: 0.5em;
    border-left: 1px solid #FFF;
}
#message .hidden {
    display: none;
}

#status {
    display:none;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    background: var(--status-background);
    color: var(--status-color);
}
#status p {
    float:left;
    padding-left: 1em;
    display:inline-block;
}
#status p, #idle_status {
    font-family: monospace;
    padding-top: 0.2em;
    margin: 0.5em;
}
#status_color {
    display: inline-block;
    float:right;
    width: 2em;
    height: 2em;
}
#idle_status {
    display: none;
    float:right;
    margin: 0.5em;
    margin-right: 1em;
}
#idle_status.idling {
    display:inline-block;
}

#status_color.OK { background: var(--status-ok-color); }
#status_color.LOAD { background: var(--status-load-color); }
#status_color.ERR,#status_color.DISC { background: var(--status-err-color); }

#settings {
    display: none;
    position: fixed;
    top:0;
    left:0;
    z-index:1000;
    background: var(--account-list-background);
    padding: 2em;
}

</style>
<noscript>
    <style>
        #login, #account, #mailbox, #message {
            display: none !important;
        }
        #noscript {
            display: block !important;
        }
    </style>
</noscript>
<div id="noscript">
    Sorry, javascript is required here. We offer a number of alternatives to access your mail if you can't use javascript: 
    <a href="https://en.wikipedia.org/wiki/Comparison_of_email_clients">Alternate Mail Login</a>
</div>
<div id="account"></div>
<div id="mailbox"></div>
<div id="message"></div>
<div id="status"><p></p><span id=status_color></span><span id=idle_status title="New/deleted mail will update the mailbox automatically">IDLE</span></div>
<div id="settings"></div>
<div id="login">
    <h1>Log-in to Cock-mail</h1>
    <h4><a href="https://mail.cock.li/cock-mail/">Visit the Project Page</a></h4>
    <form id="login_form" method="POST" onsubmit="return false;">
    <table>
        <tr>
            <th>
                Username
            </th><td>
                <input name=username type=text placeholder="username@example.com" />
            </td>
        </tr><tr>
            <th>
                Password
            </th><td>
                <input name=password type=password />
            </td>
        </tr><tr>
            <th>
                Save Password
            </th><td>
                <select name=save_password>
                    <option value="never" selected>Never</option>
                    <option value="session">For This Session</option>
                    <option value="save">Save to Browser</option>
                </select>
            </td>
        </tr><tr>
            <td></td>
            <td>
                <input type=submit value="Log In" />
            </td>
    </table>
    </form>
    Known accounts:
    <ul id="account_list">
    </ul>
    <pre id=login_notes></pre>
    <a id=show_dev_notes>Show development notes and copyright</a>
</div>
<script type='text/javascript'>
//---------------------------------IMAP Client--------------------------------
class ImapClient {
    constructor(wsUrl) {
        this.ws = new WebSocket(wsUrl);
        this.ws.binaryType = "arraybuffer";
        this.responseBuffer = "";
        this.tag = 1000;
        this.callbacks = new Map();
        this.callbackLinePositions = new Map();
        this.byteEater = null;
        this.capabilities = new Set();
        this.selected = null;
        this.idleTag = null;
        this.idleTimeout = null;

        this.receivedGreeting = false;
        this.enabledQresync = false;
        this.mailboxes = [];

        this.inbox = null;
        this.trash = null;
        this.sent = null;
        this.drafts = null;
        this.junk = null;
        this.archive = null;

        this.loggedin = false;
        this.username = null;

        this.onopen = null;
        this.onclose = null;
        this.onmessage = null;
        this.onerror = null;

        this.encoder = new TextEncoder();
        this.decoder = new TextDecoder();

        this.onnotify = null;
        this.onvanish = null;

        this.ws.onopen = () => this.#onWsOpen();
        this.ws.onmessage = e => this.#onWsMessage(e);
        this.ws.onclose = () => this.#onWsClose();
        this.ws.onerror = e => this.#onWsError(e);
    }

    #tag() { return `A${this.tag++}`; }

    #send(cmd) {
        if (this.ws.readyState !== WebSocket.OPEN) throw new Error("Not connected");
        console.log("-> ", cmd);
        const arrayBuffer = this.encoder.encode(cmd + "\r\n").buffer;
        this.ws.send(arrayBuffer);
    }

    #command(cmd, onResponse, returnTag) {
        const tag = this.#tag();
        if(!returnTag)
            returnTag = tag;
        this.callbacks.set(returnTag, onResponse);
        this.#send(`${tag} ${cmd}`);
        return tag;
    }

    async #commandPromise(cmd) {
        const was_idling = await this.idleStop();
        return new Promise((resolve, reject) => {
            const tag = this.#command(cmd, (ok, data, rest) => {
                if(was_idling) this.idleStart(this.onnotify,this.onvanish);
                if (ok) resolve({ data, rest });
                else reject(new Error(data || "Command failed"));
            });
            // timeout could be added here
        });
    }

    async connect() {
        if (this.ws.readyState === WebSocket.OPEN) return;
        return new Promise(resolve => {
            this.onopen = resolve;
        });
    }

    async capability() {
        const { data, rest } = await this.#commandPromise("CAPABILITY");

        for(const line of rest) {
            if(line.startsWith("* CAPABILITY")) {
                const capabilities = line.replace(/^\* CAPABILITY /,"").split(" ");
                this.#setCapabilities(capabilities);
            }
        }

        return this.capabilities;
    }

    async #checkForCapabilities(input) {
        const capabilities = new Set();
        if(input.match(/^.*\[CAPABILITY/)) {
            const capabilities = input.replace(/^.*?\[CAPABILITY (.*)\].*/,"$1").split(" ");
            this.#setCapabilities(capabilities);
            return capabilities;
        } else {
            return false;
        }

    }

    async #setCapabilities(capabilities) {
        this.capabilities = new Set();
        for(const capability of capabilities) {
            this.capabilities.add(capability);
        }
        console.debug("Set capabilities: ", this.capabilities);
    }

    async #enableQresync() {
        if(! this.capabilities.has("QRESYNC")) {
            throw "QRESYNC not supported by IMAP server!";
        }
        await this.#commandPromise("ENABLE QRESYNC");
        this.enabledQresync = true;
    }

    async login(user, pass) {
        pass = escapePassword(pass);

        if(!this.capabilities) {
            await this.capabilities();
        }
        if(!this.capabilities.has("AUTH=PLAIN")) {
            throw "Server has no AUTH=PLAIN capability!";
        }
        await set_status("Logging in...", "LOAD");
        const { data } = await this.#commandPromise(`LOGIN "${user}" "${pass}"`);
        await set_status("Logged in... Done!", "OK");

        this.loggedin = true;
        this.username = user;
        this.onlogin?.();

        const updatedCapabilities = this.#checkForCapabilities(data);

        if(!updatedCapabilities) {
            await set_status("Loading info about the server...", "LOAD");
            await this.capability();
            await set_status("Loading info about the server... Done!", "OK");
        }

        await set_status("Enabling capabilities...", "LOAD");
        await this.#enableQresync();
        console.debug("Enabled QRESYNC");
        await set_status("Enabling capabilities...", "OK");

        return data;
    }

    async listMailboxes() {
        const { data, rest } = await this.#commandPromise("LIST \"\" \"*\"");

        const mailboxes = {};

        const listLines = rest.filter(l => l.startsWith("* LIST"));

        for(const line of listLines) {
            const match = line.match(/\* LIST \((.*?)\) "(.*?)" (.*)/);
            if(!match) {
                fatal("Error fetching mailbox list", [line, match]);
            }

            const [_, flagsString, delimiter, mailboxUnfiltered] = match;
            const mailbox = mailboxUnfiltered.replace(/^"/,"").replace(/"$/,"");

            mailboxes[mailbox] = {
                'flags': flagsString.split(' '),
                'delimiter': delimiter
            }

            await this.#addSpecialUseMailbox(mailbox, mailboxes[mailbox].flags);
        }

        this.mailboxes = mailboxes;

        this.onlist?.();

        return mailboxes;
    }

    async #addSpecialUseMailbox(mailbox, flags) {
        if(mailbox.toLowerCase() === "inbox")
            this.inbox = mailbox;
        if(flags.includes('\\Trash'))
            this.trash = mailbox;
        if(flags.includes('\\Sent'))
            this.sent = mailbox
        if(flags.includes('\\Drafts'))
            this.drafts = mailbox;
        if(flags.includes('\\Junk'))
            this.junk = mailbox;
        if(flags.includes('\\Archive'))
            this.archive = mailbox;
    }

    async createMailbox(mailbox, use_flags=null) {
        if(typeof use_flags === "string")
            use_flags = use_flags.split(' ');

        const command = use_flags ?
            `CREATE "${mailbox}"` :
            `CREATE "${mailbox}" (USE (${flags.join(' ')}))`;

        const resp = await this.#commandPromise(command);

        if(use_flags)
            await this.#addSpecialUseMailbox(mailbox, use_flags);

        this.mailboxes[mailbox] = {
            'flags': use_flags
        };

        return resp;
    }

    async deleteByUID(uids) {
        if(Array.isArray(uids))
            uids = compactUIDEncode(uids);
        await this.uidStore(uids, "+FLAGS.SILENT", "(\\Deleted)");
        await this.#commandPromise(`UID EXPUNGE ${uids}`);
    }

    async moveByUID(uids,mailbox) {
        if(Array.isArray(uids))
            uids = compactUIDEncode(uids);
        if(!mailbox in this.mailboxes)
            fatal("Tried to move to an inexistant mailbox!");
        await this.#commandPromise(`UID MOVE ${uids} "${mailbox}"`);
    }

    async select(mailbox = "INBOX", uidvalidity = 0, highestmodseq = "0", uidranges = "") {
        let select_command;

        select_command = `SELECT "${mailbox}"`;

        if(uidvalidity && uidranges) {
            select_command += ` (QRESYNC (${uidvalidity} ${highestmodseq} ${uidranges}))`;
        }

        const { rest } = await this.#commandPromise(select_command);

        this.selected = mailbox;

        const returned_data = {
            'exists': null,
            'recent': null,
            'uidvalidity': null,
            'uidnext': null,
            'highestmodseq': null,
            'fetch': {},
            'vanished': []
        };

        for(const line of rest) {
            if(!line.startsWith("* ")) { continue; }
            if(line.includes("EXISTS")) {
                returned_data.exists = line.match(/(\d+) EXISTS/)?.[1];
            } else if(line.includes("RECENT")) {
                returned_data.recent = line.match(/(\d+) RECENT/)?.[1];
            } else if(line.includes("UIDVALIDITY")) {
                returned_data.uidvalidity = line.match(/UIDVALIDITY (\d+)/)?.[1];
            } else if(line.includes("UIDNEXT")) {
                returned_data.uidnext = line.match(/UIDNEXT (\d+)/)?.[1];
            } else if(line.includes("HIGHESTMODSEQ")) {
                returned_data.highestmodseq = line.match(/HIGHESTMODSEQ (\d+)/)?.[1];
            } else if(line.includes("FETCH")) {
                const fetch_match = line.match(/FETCH \(UID (\d+) FLAGS \((.*?)\) MODSEQ \((\d+)\)\)/);
                returned_data.fetch[fetch_match[1]] = {
                    'flags': fetch_match[2].split(" "),
                    'modseq': fetch_match[3]
                };
            } else if(line.includes("VANISHED")) {
                const uids_that_vanished = compactUIDDecode(
                    line.match(/VANISHED(?: \(EARLIER\))? ([:,\d]+)/)?.[1]
                );
                Object.assign(returned_data.vanished,uids_that_vanished)
            }
        }

        return returned_data;
    }

    async #parseFetchResponse(response) {
        if(!response) {
            throw "Received a blank message";
        }

        return response;
    }

    async fetchOne(seq, is_uid=false, fields = "BODY[]") {
        const fetch_tag = this.#tag();

        const command = is_uid
            ? `${fetch_tag} UID FETCH ${seq} (${fields})`
            : `${fetch_tag} FETCH ${seq} (${fields})`;

        const was_idling = this.idleTag;

        if(was_idling)
            this.idleStop();

        this.#send(command);

        const fetch_bytes_promise = new Promise((resolve,reject) => {
            this.callbacks.set(new RegExp("^\\* \\d+ FETCH"),(ok, data, rest) => {
                const match = rest[rest.length-1].match(/^\* \d+ FETCH.*{(\d+)}$/);
                if(!match) {
                    console.error(rest);
                    throw new Error("This should never happen");
                }
                resolve(match[1]);
            });
        });
        const fetch_bytes = await fetch_bytes_promise;

        const fetch_data_promise = new Promise(async (resolve,reject) => {
            this.byteEater = [fetch_bytes, (bytes) => {
                resolve(bytes);
            }];
            await this.#handleResponseBuffer();
        });
        const bytes = await fetch_data_promise;

        const fetch_command_promise = new Promise(async (resolve,reject) => {
            this.callbacks.set(fetch_tag, (ok,data,rest) => {
                if(was_idling)
                    this.idleStart();
                resolve(ok);
            });
            await this.#handleResponseBuffer();
        });
        await fetch_command_promise;

        return await this.#parseFetchResponse(bytes.split("\r\n"));
    }

    async uidStore(uids, action="+FLAGS", data) {
        if(Array.isArray(uids))
            uids = compactUIDEncode(uids);
        await this.#commandPromise(`UID STORE ${uids} ${action} ${data}`);
    }

    async #parseMessagesWithHeaders(lines) {
        const fetched_messages = {};
        var current_message = {};

        for(const line of lines) {
            if(line.startsWith("* " ) || line.startsWith(")")) {
                if(Object.keys(current_message) != 0) {
                    fetched_messages[current_message.uid] = current_message;
                    current_message = {};
                }
            }
            if(line.startsWith("* ")) {
                const line_match = line.match(/UID (\d+) FLAGS \((.*?)\)/);
                if(line_match) {
                    current_message.uid = line_match[1];
                    current_message.flags = line_match[2].split(" ");
                    current_message.headers = {};
                }
            } else if(Object.keys(current_message) != 0) {
                if(line.startsWith(" ")) {
                    const most_recent_header_key = Object.keys(current_message.headers).pop()
                    current_message.headers[most_recent_header_key] += line;
                } else {
                    const header_split = line.split(/: /s);
                    current_message.headers[header_split[0].toLowerCase()] = header_split[1];
                }
            } else {
                continue;
            }
        }

        return fetched_messages;
    }

    async fetchHeaders(compactSeqs) {
        const { rest } = await this.#commandPromise(`FETCH ${compactSeqs} (UID FLAGS BODY.PEEK[HEADER.FIELDS (FROM TO CC BCC DATE SUBJECT)])`);

        const messages_with_headers = await this.#parseMessagesWithHeaders(rest);

        return messages_with_headers;
    }

    async uidFetchHeaders(compactUids) {
        const { rest } = await this.#commandPromise(`UID FETCH ${compactUids} (UID FLAGS BODY.PEEK[HEADER.FIELDS (FROM TO CC BCC DATE SUBJECT)])`);

        const messages_with_headers = await this.#parseMessagesWithHeaders(rest);

        return messages_with_headers;
    }

    // ---------------- IDLE support ----------------

    async idleStart(onNewMail=this.onnotify, onVanishedEmail=this.onvanish) {
        this.onnotify = onNewMail;
        this.onvanish = onVanishedEmail;

        if (!this.selected) throw new Error("No mailbox selected");
        if (this.idleTag) {
            return false;
        }

        this.idleTag = this.#tag();
        this.#send(`${this.idleTag} IDLE`);

        return new Promise((resolve,reject) => {
            this.callbacks.set("+",(ok, data, rest) => {
                // + idling received from server
                if(this.idleTimeout !== null) {
                    window.clearTimeout(this.idleTimeout);
                }
                this.idleTimeout = window.setTimeout(async function(){
                    this.idleTimeout = null;
                    await this.idleStop();
                    await this.idleStart();
                }.bind(this) ,600000);
                document.querySelector('#idle_status').classList.add('idling');
                resolve(this.idleTag);
            });
        });
    }

    async idleStop() {
        if (!this.idleTag) {
            return false;
        }
        this.#send("DONE");

        return new Promise((resolve, reject) => {
            this.callbacks.set(this.idleTag, (ok, data, rest) => {
                document.querySelector('#idle_status').classList.remove('idling');
                this.idleTag = null;
                resolve(5);
            });
        });
    }

    // ---------------- internal handlers ----------------

    #onWsOpen() {
        //this.onopen?.();
    }

    #onWsClose() {
        document.querySelector('#idle_status').classList.remove('idling');
        this.onclose?.();
        this.idleTag = null;
    }

    #onWsError(e) {
        this.onerror?.(e);
    }

    #onWsMessage({ data }) {
        const decoded = this.decoder.decode(data);
        const text = decoded.toString();
        this.responseBuffer += text;

        console.log("<- " + text);

        return this.#handleResponseBuffer();
    }

    async #handleResponseBuffer() {
        if(!this.responseBuffer) {
            return;
        }

        if(this.byteEater !== null) {
            console.debug("Eating bytes", this.byteEater);
            const bufferBytes = new Blob([this.responseBuffer]);
            if (this.byteEater.length && this.byteEater[0] <= bufferBytes.size) {
                const slicedBytes = bufferBytes.slice(0,this.byteEater[0]);
                const slicedText = await slicedBytes.text();

                const slicedByteBuffer = bufferBytes.slice(this.byteEater[0]);
                const slicedTextBuffer = await slicedByteBuffer.text();

                const byteEater_callback = this.byteEater[1];
                this.responseBuffer = slicedTextBuffer;
                this.byteEater = null;
                byteEater_callback(slicedText);
            } else {
                return;
            }
        }

        var responseBufferLines = this.responseBuffer.split("\r\n");

        if(responseBufferLines[responseBufferLines.length-1] === "") {
            responseBufferLines.pop();
        }

        const lastLine = responseBufferLines[responseBufferLines.length-1];

        if(!lastLine) {
            console.debug("empty line");
            return;
        }

        if(this.idleTag && !this.callbacks.get("+")) {
            for(const line of responseBufferLines) {
                const notify_exists = line.match(/\* (\d+) EXISTS/);
                if(notify_exists) {
                    this.onnotify?.(notify_exists[1]);
                } else {
                    const notify_vanished = line.match(/\* VANISHED ([0-9:,]+)/);
                    if(notify_vanished) {
                        this.onvanish(notify_vanished[1]);
                    }
                }
            }
            this.clearBuffer();
        }

        if(lastLine.startsWith("* OK")) {
            if(this.receivedGreeting) {
                this.onmessage?.({ type: "untagged", line: responseBufferLines })
            } else {
                this.receivedGreeting = true;
                this.#checkForCapabilities(lastLine);
                this.onopen?.();
                this.clearBuffer();
                return;
            }
        }

        for(const callback of this.callbacks.keys()) {
            var responseBufferLinePosition = this.callbackLinePositions.get(callback) || 0;
            const initialLinePosition = responseBufferLinePosition;

            if(!callback)
                break;
            const cb = this.callbacks.get(callback);

            const regexp = typeof(callback) === "object" ?
                callback :
                new RegExp("^"+escapeRegex(callback)+"\\s+(OK|BAD|NO|idling)\\s*(.*)"); 
            
            var line = "";

            while(true) {
                line = responseBufferLines.slice(responseBufferLinePosition,responseBufferLinePosition+1)[0]
                if(line === undefined) {
                    break;
                }

                const match = line.match(regexp);
                if(match) {
                    const finishedResponseOutputLines = responseBufferLines.slice(0,responseBufferLinePosition+1);
                    responseBufferLines = responseBufferLines.splice(responseBufferLinePosition+1);
                    this.responseBuffer = responseBufferLines.join("\r\n");

                    const [_, status, respText] = match;
                    if(cb) {
                        const is_ok = (status === "OK" || status === "idling");
                        if(status === "BAD" || status === "NO") {
                            fatal("Unhandled error!", match);
                        }
                        cb(is_ok, respText, finishedResponseOutputLines);
                    }
                    this.callbacks.delete(callback);
                    this.callbackLinePositions.delete(callback);
                    this.onmessage?.({ type: "tagged", tag: callback, status: status, text: respText, data: finishedResponseOutputLines});
                    break;
                }

                responseBufferLinePosition++;
            }
            this.callbackLinePositions.set(callback, Math.max(0,responseBufferLinePosition-1));
        }

        return;
    }

    // Helpers / convenience

    clearBuffer() {
        this.responseBuffer = "";
    }

    async logout() {
        await this.idleStop();
        await this.#commandPromise("LOGOUT");
        this.ws.close();
    }

    close() {
        this.ws.close();
    }
}

//---------------------------------IMAP Mailbox-------------------------------
class ImapMailbox {
    constructor(imap,account,mailbox) {
        this.imap = imap;
        this.account = account;
        this.mailbox = mailbox;
        this.cachekey = hex_encode(this.account + "/" + this.mailbox);

        this.clear();

        this.#loadCache();
    }

    clear() {
        this.uidvalidity = 0;
        this.highestmodseq = "0";
        this.uidnext = 0;
        this.exists = 0;
        this.messages = {};
    }

    async #loadCache() {
        const from_cache = JSON.parse(localStorage.getItem(this.cachekey));
        if(!from_cache) return;

        this.uidvalidity = from_cache['uidvalidity'];
        this.highestmodseq = from_cache['highestmodseq'];
        this.uidnext = from_cache['uidnext'];
        this.exists = from_cache['exists'];
        this.messages = from_cache['messages'];

        for(const message_uid in this.messages) {
            this.messages[message_uid].load = this.imap.fetchOne.bind(this.imap,message_uid,true);
        }

        console.debug("Loaded cache, ", this);
    }

    async #saveCache() {
        const messages_to_cache = this.messages;
        for(const message_uid in messages_to_cache) {
            if(messages_to_cache[message_uid].body) {
                messages_to_cache[message_uid].body = null;
            }
        }
        const to_cache = JSON.stringify({
            'uidvalidity': this.uidvalidity,
            'highestmodseq': this.highestmodseq,
            'uidnext': this.uidnext,
            'exists': this.exists,
            'messages': this.messages
        });

        localStorage.setItem(this.cachekey, to_cache);
    }

    async load() {
        const compactUidSet = await this.compactUids();
        const data = await this.imap.select(this.mailbox, this.uidvalidity, this.highestmodseq, compactUidSet);
        
        const uids_to_fetch = [];
        const seqs_to_fetch = [];

        if(data.uidvalidity == this.uidvalidity && data.highestmodseq >= this.highestmodseq) {
            // Mailbox is consistent
            if(data.highestmodseq > this.highestmodseq) {
                // MODSEQ increased, change detected
                this.highestmodseq = data.highestmodseq;
                for(const fetch_uid in data.fetch) {
                    if(fetch_uid in this.messages) {
                        this.messages[fetch_uid]['flags'] = data.fetch[fetch_uid]['flags'];
                    } else {
                        // Shouldn't happen
                        uids_to_fetch.push(fetch_uid);
                    }
                }
            }
            if(data.vanished) {
                for(const uid_vanished of data.vanished) {
                    console.debug("Deleting uid", uid_vanished);
                    if(uid_vanished in this.messages) {
                        delete this.messages[uid_vanished];
                        this.exists -= 1;
                    }
                }
            }
            if(data.exists > Object.keys(this.messages).length) {
                for(const seq of compactUIDDecode(String(parseInt(this.exists)+1) + ":" + String(data.exists))) {
                    seqs_to_fetch.push(seq);
                }
            }
        } else {
            // Mailbox inconsistent, clear it
            this.clear();
            this.uidvalidity = data.uidvalidity;
            this.highestmodseq = data.highestmodseq;
            this.uidnext = data.uidnext;
            this.exists = data.exists;

            for(const seq of compactUIDDecode("1:" + String(data.exists))){
                seqs_to_fetch.push(seq);
            }
        }

        if(seqs_to_fetch.length) {
            console.debug("Fetching seqs, ", seqs_to_fetch);
            const new_messages = await this.imap.fetchHeaders(compactUIDEncode(seqs_to_fetch));
            await this.addMessages(new_messages);
        }
        if(uids_to_fetch.length) {
            console.debug("Fetching uids, ", uids_to_fetch);
            const new_messages = await this.imap.uidFetchHeaders(compactUIDEncode(uids_to_fetch));
            await this.addMessages(new_messages);
        }

        this.exists = Object.keys(this.messages).length;

        this.#saveCache();
        this.onload?.();

    }

    async compactUids() {
        return compactUIDEncode(Object.keys(this.messages));
    }

    async addMessage(uid, flags, msgdate, msgfrom, msgto) {
        if(uid in this.messages) {
            throw "Message already exists:", uid;
        }
    }

    async addMessages(messages) {
        for(const message_uid in messages) {
            const message = messages[message_uid];
            message.load = this.imap.fetchOne.bind(this.imap,message_uid,true);
            message.uid = message_uid;
            this.messages[message.uid] = message;
        }
    }

    async markAsRead(uids) {
        if(!Array.isArray(uids))
            uids = [uids];
        await this.imap.uidStore(uids, "+FLAGS.SILENT", "\\Seen");
        for(const uid of uids) {
            const message = this.messages[uid];
            const flagIndex = message.flags.indexOf("\\Seen");
            if(flagIndex === -1) {
                this.messages[message.uid].flags.push("\\Seen");
            }
        }
        this.#saveCache();
    }

    async markAsUnread(uids) {
        if(!Array.isArray(uids))
            uids = [uids];
        await this.imap.uidStore(uids, "-FLAGS.SILENT", "\\Seen");
        for(const uid of uids) {
            const message = this.messages[uid];
            const flagIndex = message.flags.indexOf("\\Seen");
            if(flagIndex !== -1) {
                this.messages[message.uid].flags.splice(flagIndex,1);
            }
        }
        this.#saveCache();
    }

    async moveToTrash(uids) {
        if(!Array.isArray(uids))
            uids = [uids];
        if(!this.imap.trash) {
            await this.imap.createMailbox("Trash", "\\Trash");
            this.imap.trash = "Trash";
        }
        await this.imap.moveByUID(uids, this.imap.trash);
        for(const uid of uids)
            delete this.messages[uid];
        this.#saveCache();
    }

    async deleteMessages(uids) {
        if(!Array.isArray(uids))
            uids = [uids];
        await this.imap.deleteByUID(uids);
        for(const uid of uids)
            delete this.messages[uid];
        this.exists -= uids.length;
        this.#saveCache();
    }
}

//---------------------------------IMAP Message-------------------------------

class ImapMessage {
    constructor(message_object={}) {
        this.uid = null; // IMAP uid of the message
        this.flags = []; // IMAP flags
        this.headersCached = {}; // Cached headers from FETCH BODY.PEEK used when the complete message is unavailable
        this.message = null; // Raw array of lines comprising an RFC822 message
        this.body = null; // The content of the message
        this.headers = null; // An object containing header names and complete values with all parameters
        this.raw_headers = null; // An array containing raw header lines
        this.blob = null; // Once the complete message is loaded this Blob exists
        this.load = null; // Declare this as a function that loads the message body
        this.mime = false;
        this.content_type = null;    // (content_type)/ content_subtype
        this.content_subtype = null; //  content_type /(content_subtype)
        this.multipart_boundary = null;
        this.inline = []; // Objects to be displayed inline
        this.attachments = []; // Objects to be shown as attachments

        for(const key of Object.keys(message_object)) {
            this[key] = message_object[key];
        }
    }

    // Loads a complete RFC822 message and optionally parses MIME
    async loadMessage(message=this.message,loadMime=true) {
        if(message === null)
            throw "there's no message to load!";

        if(typeof message === "string") {
            this.blob = new Blob(message, {'type': 'message/rfc822'});
            message = message.split("\r\n");
        } else {
            this.blob = new Blob([message.join("\r\n")], {'type': 'message/rfc822'});
        }

        this.message = message;

        [ this.headers, this.body, this.raw_headers ] = await this.splitHeaders(message);

        if(loadMime) await this.handleMIMEMessage();

        // By default the body is a single inline object
        if( (!this.mime) || (this.inline.length === 0 && this.attachments.length === 0) )
            this.inline = [ {'body': this.body} ];
    }

    // MIME Message
    // Decodes a raw message and turns it into a MIME message
    async handleMIMEMessage(ret=this) {

        if(typeof ret === "string" || Array.isArray(ret))
            ret = { 'message': ret }
        if(!('headers' in ret))
            [ ret.headers, ret.body, ret.raw_headers ] = await this.splitHeaders(ret.message);

        try {
            ret.inline = [];
            ret.attachments = [];

            // MIME-Version
            ret.mime_version = await this.loadMIMEvalue(ret.headers,'MIME-Version') || "";
            if(ret.mime_version.startsWith('1.')) // hey you never know
                ret.mime = true;
            else
                return false;

            const mime_objects = await this.handleMIMEBodyPart(ret);

            if(mime_objects.length > 1) {
                for(const object of mime_objects) {
                    if(object.content_disposition === "inline" || (object.content_disposition === null && object.content_type === 'text')) {
                        ret.inline.push(object)
                    } else {
                        ret.attachments.push(object);
                    }
                }
            } else if(mime_objects.length === 1) {
                for(const key of Object.keys(mime_objects[0])) {
                    ret[key] = mime_objects[0][key];
                }
                ret.inline = [ mime_objects[0] ];
            }
        } catch (e) {
            console.error("Error loading message, probably MIME related: ", [e, ret]);
            this.mime = false;
        }

        return ret;
    }

    // MIME Body Part
    // Takes a body_part object and parses MIME headers in it
    async handleMIMEBodyPart(body_part) {
        if(typeof body_part === "string" || Array.isArray(body_part))
            body_part = { 'message': body_part }
        if(!('headers' in body_part))
            [ body_part.headers, body_part.body, body_part.raw_headers ] = await this.splitHeaders(body_part.message);

        // Content-Type read
        [ body_part.content_type, body_part.content_subtype ] = await this.loadMIMEContentType(await this.loadMIMEvalue(body_part.headers,'Content-Type'));

        // Content-Disposition
        body_part.content_disposition = await this.loadMIMEvalue(body_part.headers, 'content-disposition');

        if(body_part.content_disposition) {
            body_part.filename = await this.loadMIMEParameter(body_part,'content-disposition','filename');
            body_part.creation_date = await this.loadMIMEParameter(body_part,'content-disposition','creation_date');
            body_part.modification_date = await this.loadMIMEParameter(body_part,'content-disposition','modification_date');
            body_part.read_date = await this.loadMIMEParameter(body_part,'content-disposition','read_date');
        }

        // Content-Transfer-Encoding
        body_part.content_transfer_encoding = await this.loadMIMEvalue(body_part.headers,'Content-Transfer-Encoding');

        if(body_part.content_transfer_encoding)
            await this.MIMEContentTransferDecode(body_part);

        // Content-Type logic
        const mime_objects = await this.handleContentType(body_part);

        return mime_objects;
    }

    // Content-Transfer-Encoding
    async MIMEContentTransferDecode(ret) {
        switch(ret.content_transfer_encoding) {
            case "base64":
                ret.body = decodeBase64(ret.body);
                break;
            case "7bit":
            case "8bit":
                break;
            case "quoted-printable":
                ret.body = decodeQuotedPrintable(ret.body,false);
                break;
            case null:
                break;
            default:
                console.debug("Unsupported MIME Content-Transfer-Encoding, defaulting to application/octet-stream", ret);
                ret.content_type = "application";
                ret.content_subtype = "octet-stream";
                break;
        }

        return ret;
    }

    // Content-Type
    // Returns an array of parsed MIME objects
    async handleContentType(ret) {
        const objects = [];
        switch(ret.content_type) {
            case "multipart":
                console.debug("handleContentType: multipart");

                const multiparts = [];
                const lines = ret.body.split("\r\n");

                ret.multipart_boundary = await this.loadMIMEParameter(ret,'content-type','boundary');

                if(!ret.multipart_boundary) {
                    ret.attachments.push({
                        'type': 'binary',
                        'error': 'No MIME multipart/mixed boundary found',
                        'content': ret.body
                    });
                    break;
                }

                const regexp = new RegExp('^--' + ret.multipart_boundary + '(?:--)?\s*$');

                var first_walker = lines.findIndex(l => regexp.test(l));
                var next_walker = lines.slice(first_walker+1).findIndex(l => regexp.test(l));
                var walker = 0;

                while(next_walker !== -1) {
                    walker = first_walker + next_walker + 1;

                    const sliced_body = lines.slice(first_walker+1,walker);

                    multiparts.push(sliced_body);

                    first_walker = walker;
                    const new_slice = lines.slice(first_walker+1);
                    next_walker = new_slice.findIndex(l => regexp.test(l));
                }

                for(const multipart of multiparts) {
                    switch(ret.content_subtype) {
                        // holy smokes
                        case "alternative":
                        case "related":
                        case "encrypted":
                        case "signed":
                        case "digest":
                        case "mixed":
                        default:
                            const parsed_mime = await this.handleMIMEBodyPart(multipart);

                            for(const object of parsed_mime) objects.push(object);
                            break;
                    }
                }
                break;

            case "text":
                console.debug("handleContentType: text");
                ret.charset = await this.loadMIMEParameter(ret,'content-type','charset') || "UTF-8"; // close enough
                if(ret.charset !== null && ret.body instanceof Uint8Array) {
                    const decoder = new TextDecoder(ret.charset);
                    ret.body = decoder.decode(ret.body);
                }
                switch(ret.content_subtype) {
                    case "html":
                        const domparser = new DOMParser();
                        ret.raw_html = ret.body;
                        ret.html = domparser.parseFromString(ret.body,'text/html');
                        ret.html.querySelectorAll('style').forEach((a) => a.remove());
                        ret.links = {};
                        const all_links = ret.html.querySelectorAll('a');
                        for(const i in all_links) {
                            const a = all_links[i];
                            if(a.href) {
                                a.innerText += "[" + i + "]";
                                ret.links[i] = a.href;
                            }
                        }

                        ret.body = ret.html.documentElement.innerText.replace(/^\s*$/gm,'');
                        objects.push(ret);
                        break;
                    case "plain":
                    default:
                        objects.push(ret);
                        break;
                }
                break;

            case "message":
                console.debug("handleContentType: message");
                const message = {
                    'message': ret.body.split("\r\n")
                }
                await this.handleMIMEMessage(message);
                ret.message = message
                objects.push(ret);
                break;
            case "image":
            case "video":
            case "application":
            default:
                console.debug("handleContentType: default");
                objects.push(ret);
                break;
        }

        return objects;
    }

    // Expects an array of lines
    // Returns [ object headers, string body ]
    async splitHeaders(content) {
        const splicepoint = content.indexOf("");
        if(splicepoint === -1)
            return [ {}, content.join("\r\n"), {} ];
        return [
            await this.parseHeaders(content.slice(0,splicepoint+1)),
            content.slice(splicepoint+1).join("\r\n"),
            content.slice(0,splicepoint+1)
        ];
    }

    // Expects an array of lines
    // Returns an object { header_name: header_complete_value }
    async parseHeaders(headers_in=this.headerLines) {
        const headers_out = {};
        var lastHeader;
        for(const i in headers_in) {
            const header = headers_in[i];
            if(header == "") continue;

            const continuation = header.match(/^[\s\)]+/)
            if(continuation) {
                headers_out[lastHeader] += header.replace(/^\s+/,' ');
                continue;
            }

            const colon_match = header.match(/(.+?):\s?(.*)/);
            if(colon_match) {
                const header_name = colon_match[1].toLowerCase();
                const header_value = colon_match[2]
                headers_out[header_name] = header_value;
                lastHeader = header_name;
                continue;
            }
        }

        return headers_out;
    }

    async loadMIMEContentType(string) {
        if(!string)
            return [ "text", "plain" ];
        const match = string.match(/([\w\-]*)\/([\w\-\+]*) ?.*/);

        if(match)
            return [ match[1], match[2] ];
        else
            return [ string, null ];

    }

    async loadMIMEvalue(headers=this.headers,header_name) {
        if(!headers)
            return null;
        header_name = header_name.toLowerCase();
        if(header_name in headers) {
            const match = headers[header_name].match(/^(".*?"|[^;\s]*)/);
            if(match)
                return match[1].toLowerCase().replace(/^"/,'').replace(/"$/,'');
        }
        return null;
    }

    async loadMIMEParameter(ret=this,header,parameter,allowCharset=false) {
        if(!header) {
            return null;
        }
        if(!(header in ret.headers)) {
            return null;
        }

        header = ret.headers[header];
        var value = "";

        const r_full = new RegExp(';\\s*' + parameter + '(?:\\*([\\d]+))?(\\*?)=(".*?"|[^;\\s]+)');
        const r_encoded_value = new RegExp(/(?:([\w\-]*)\')?(?:([\w\-]*)\')?(.*)/);
        const rg = new RegExp(r_full,'g');

        var encoding = null;
        var lang = null; // who uses this shit
        var decoder = null;

        const match_all = header.match(rg);

        if(match_all) {
            const values = {};
            for(const match_full of match_all) {
                const [ _, seq, uses_encoding, this_value ]  = match_full.match(r_full);
                values[parseInt(seq)] = {
                    'uses_encoding': uses_encoding === "*",
                    'value': this_value.replace(/^"/,'').replace(/"$/,'')
                };
                if(!seq) break;
            }
            for(const key of Object.keys(values)) { // it's crazy this sorts numbers
                const this_value = values[key];

                if(this_value.uses_encoding && this_value.value) {
                    const bytes = [];

                    if(!encoding) {
                        const encoded_match = this_value.value.match(r_encoded_value);
                        var _, this_encoding, this_lang, this_encoded_value;

                        if(encoded_match) {
                            [_, this_encoding, this_lang, this_encoded_value ] = encoded_match;
                            encoding = this_encoding ? this_encoding : 'UTF-8';
                            lang = this_lang ? this_lang : 'EN';
                            this_value.value = this_encoded_value;
                            console.log("HOO BOY", {
                                'encoded_match': encoded_match
                            });
                        } else {
                            encoding = 'UTF-8';
                            lang = 'EN';
                        }

                        console.log("HOO BOY", {
                            'match_all': match_all,
                            'values': values,
                            'encoding': encoding
                        });
                        decoder = new TextDecoder(encoding);
                    }

                    var i=0;
                    while(i < this_value.value.length) {
                        if(
                            this_value.value[i] === "%" &&
                            i + 2 < this_value.value.length &&
                            this_value.value[i+1].match(/[0-9A-F]/) &&
                            this_value.value[i+2].match(/[0-9A-F]/)
                        ) {
                            const hex = this_value.value.slice(i+1, i+3);
                            bytes.push(parseInt(hex, 16));
                            i += 2;
                        } else {
                            bytes.push(this_value.value.charCodeAt(i));
                        }
                        i++;
                    }

                    const byteArray = new Uint8Array(bytes);
                    value += decoder.decode(byteArray);
                } else {
                    value += values[key].value;
                }

            }

            return value;
        } else {
            return null;
        }
    }
}

//-----------------------------------Settings---------------------------------

class CockmailSettings {
    constructor() {
        this.renderMedia = null;

        this.load();
    }

    load() {
        const loaded_settings = localStorage.getItem("cock-mail-settings");
        if(loaded_settings) {
            const decoded_settings = JSON.parse(loaded_settings);
            if(typeof decoded_settings === "object") {
                this.renderMedia = decoded_settings.renderMedia;
            } else {
                this.loadDefaults();
            }
        } else {
            this.loadDefaults();
        }
    }

    loadDefaults() {
        this.renderMedia = true;
    }

    set(key,value) {
        this[key] = value;
        this.save();
    }

    save() {
        localStorage.setItem("cock-mail-settings",JSON.stringify({
            'renderMedia': this.renderMedia
        }));
    }
}

//-------------------------------Helper Functions-----------------------------

function compactUIDEncode(uids) {
    if(typeof uids === "string") {
        return compactUIDEncode(compactUIDDecode(uids));
    }
    if(!Array.isArray(uids) || uids.length === 0) {
        return "";
    }

    // Make sure we work with sorted unique numbers
    const sorted = [...new Set(uids)].sort((a, b) => a - b);

    const ranges = [];
    let start = parseInt(sorted[0]);
    let prev = parseInt(sorted[0]);

    for (let i = 1; i < sorted.length; i++) {
        const current = parseInt(sorted[i]);

        // If current is exactly next number → continue the range
        if (current === prev + 1) {
            prev = current;
            continue;
        }

        // Range ended
        if (start === prev) {
            ranges.push(String(start));
        } else {
            ranges.push(`${start}:${prev}`);
        }

        // Start new range
        start = current;
        prev = current;
    }

    // Don't forget the last range/single value
    if (start === prev) {
        ranges.push(String(start));
    } else {
        ranges.push(`${start}:${prev}`);
    }

    return ranges.join(",");
}

function stringToBytes(string,charset=null) {
    const bytes = [];
    for(i=0;i<string.length;i++) {
        bytes.append(string.charCodeAt(i));
    }

}

function compactUIDDecode(compactUids) {
    const uids = new Array();

    for(const uidIter of compactUids.split(',')) {
        if(uidIter.includes(":")) {
            const uidIterSplit = uidIter.split(':');
            for(var i=Math.max(uidIterSplit[0],1);i<=uidIterSplit[1];i++) {
                uids.push(parseInt(i));
            }
        } else {
            uids.push(parseInt(uidIter));
        }
    }

    return uids;
}

function hex_encode(str) {
    return str.split("")
        .map(c => c.charCodeAt(0).toString(16).padStart(2, "0")).join("");
}

function hex_decode(str) {
    return str.split(/\w\w/g)
        .filter(p => !!p)
        .map(c => String.fromCharCode(parseInt(c, 16)))
        .join("");
}

function decodeQuotedPrintable(string,isEncodedWord=true) {
    const bytes = [];
    var i=0;

    if(isEncodedWord)
        string = string.replace(/_/g, "=20");

    while(i < string.length) {
        if(string[i] === "=" && i + 2 < string.length && string[i+1].match(/[0-9A-F]/) && string[i+2].match(/[0-9A-F]/)) {
            const hex = string.slice(i+1, i+3);
            bytes.push(parseInt(hex, 16));
            i += 2;
        } else if(string[i] === "=" && i + 1 < string.length && string[i+1] === "\n") {
            i += 1;
        } else if(string[i] === "=" && i + 2 < string.length && string[i+1] === "\r" && string[i+2] == "\n") {
            i += 2;
        } else {
            bytes.push(string.charCodeAt(i));
        }
        i++;
    }

    const byteArray = new Uint8Array(bytes);
    return byteArray;
}

function decodeBase64(string) {
    const bytes = [];
    var i=0;

    const bdata = atob(string);

    for(i=0;i<bdata.length;i++) {
        bytes.push(bdata.charCodeAt(i));
    }

    const byteArray = new Uint8Array(bytes);
    return byteArray;
}

function decodeMIMEWords (string,escape_html=true) {
    if(!string) return null;
    const r = new RegExp(/=\?([0-9a-zA-Z-]+?)(?:\*.*?)?\?([QBqb])\?(.+?)\?=/);
    const rs = new RegExp(/\?=\s+=\?/,'g'); // idgaf
    const rg = new RegExp(r, 'g');
    const match_all = string.match(rg);

    const encoder = new TextEncoder();

    if(match_all) {
        string = string.replace(rs,'?==?');
        for(const result of match_all) {
            const [original, charset, method, encoded] = result.match(r);

            var i=0;
            var decoded;
            
            try {
                const decoder = new TextDecoder(charset);

                decoded = method.toUpperCase() === "Q" ?
                    decodeQuotedPrintable(encoded) :
                    decodeBase64(encoded);

                decoded = decoder.decode(decoded);

            } catch(e) {
                console.warn("decodeMIMEWords error: ", e, original, charset, method, encoded);
                continue;
            }

            string = string.replace(original,decoded);
        }
    }
    if(escape_html) {
        return escapeHtml(string);
    } else {
        return string;
    }
}

function decodeDate(date, full=false) {
    if(typeof date !== "string" || date === "")
        return null;
    const decoded = new Date(date);
    const now = new Date();
    if(!decoded.getTime())
        return date;
    if(!full && Math.floor(decoded.getTime() / 86400000) === Math.floor(now.getTime() / 86400000))
        return decoded.toLocaleTimeString();
    else
        return decoded.toLocaleString();
}

function decodeSize(bytes) {
    var label = "byte" + (bytes === 1 ? '' : 's');

    if(bytes > 512) {
        label = "KB";
        bytes = bytes / 1024;
        if(bytes > 512) {
            label = "MB";
            bytes = bytes / 1024;
            if(bytes > 512) {
                label = "GB";
                bytes = bytes / 1024;
                if(bytes > 512) {
                    label = "TB";
                    bytes = bytes / 1024;
                    if(bytes > 1023) {
                        return "fuck off";
                    }
                }
            }
        }
    } else {
        return bytes + " " + label;
    }

    return bytes.toFixed(2).toString() + " " + label;
}

function escapeHtml (string,escapeChar="") {
    const entityMap = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;',
      "\\": '&bsol;',
      '/': '&#x2F;',
      '`': '&#x60;',
      '=': '&#x3D;'
    };
    if(escapeChar) {
        return String(string).replace(/[&<>"'`=\/\\]/g, "_");
    } else {
        return String(string).replace(/[&<>"'`=\/\\]/g, function (s) {
            return entityMap[s];
        });
    }
}

function escapeRegex(string) {
    return string.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&');
}

function escapePassword(string) {
    return string.replace(/[\"\\]/g, '\\$&');
}

async function set_status(status_message,ok="OK") {
    console.log("[" + ok + "]" + " " + status_message);
    const $el = document.getElementById('status');
    const status_p = $el.querySelector('p');
    const status_color = $el.querySelector('#status_color');

    status_p.innerText = status_message;
    status_color.setAttribute('class',ok);

    $el.style.display = "block";
}

function fatal(message, data) {
    set_status(message, "ERR");
    throw data;
}

//-----------------------------------Views------------------------------------

class _AccountView {
    constructor(account) {
        this.el = "account";
        this.$el = document.getElementById(this.el);
        this.account = account;
        this.account.onlogin = this.draw.bind(this);
        this.account.onlist = this.draw.bind(this);
        window.addEventListener('account-reload', this.draw.bind(this));

        this.draw();
    }

    draw() {
        this.$el.style.display="inline-block";
        this.$el.innerHTML = "";
        if(this.account.loggedin) {
            const account = document.createElement('p');
            account.innerText = this.account.username;
            account.setAttribute('title',this.account.username);
            this.$el.innerText += "Logged in as:";
            this.$el.appendChild(account);

            const settings = document.createElement('a');
            settings.innerText = 'Settings';
            settings.addEventListener('click',(e) => {
                console.log("OPened settings");
                window.SettingsView = new _SettingsView();
                window.SettingsView.open();
            });
            this.$el.appendChild(settings);

            this.$el.appendChild(document.createElement('br'));
            this.$el.appendChild(document.createElement('br'));

            const mailboxes_header = document.createElement('label');
            mailboxes_header.innerText = "Mailboxes:";
            this.$el.appendChild(mailboxes_header);

            const ul = document.createElement('ul');

            for(const mailbox of Object.keys(this.account.mailboxes)) {
                const li = document.createElement('li');
                li.innerText = mailbox;
                li.addEventListener('click',this.onClickMailbox.bind(mailbox));
                ul.appendChild(li);
            }
            this.$el.appendChild(ul);
        } else {
            this.$el.innerText = "Not logged in";
        }
    }

    async onClickMailbox() {
        set_status(`Opening mailbox ${escapeHtml(this)}...`, "LOAD");
        const mailbox = new ImapMailbox(window.AccountView.account,window.AccountView.account.username,this);
        set_status(`Loading mailbox ${escapeHtml(this)}...`, "LOAD");
        await mailbox.load();
        window.MailboxView = new _MailboxView(mailbox);
        set_status(`Loading mailbox ${escapeHtml(this)}... Done!`, "OK");
    }
}

class _MailboxView {
    constructor(mailbox) {
        this.el = "mailbox";
        this.$el = document.getElementById(this.el);
        this.$el.scrollTop = 0;
        this.mailbox = mailbox;
        this.mailbox.onload = this.draw.bind(this);
        window.addEventListener('mailbox-reload', this.draw.bind(this));
        //this.$el.addEventListener('keydown', (e) => this.onKeyDown.call(this,e), true);

        this.selectedMessage = null;

        this.draw();
    }

    draw() {
        this.$el.style.display="inline-block";
        const message_keys = Object.keys(this.mailbox.messages);

        const title = document.createElement('h3');
        title.innerText = this.mailbox.mailbox;
        this.$el.replaceChildren(title);

        const navs = document.createElement('div');
        navs.setAttribute('class','navs');

        const control_links = document.createElement("nav");
        control_links.classList.add('controllinks');

        if(message_keys.length) {
            const select_all_link = document.createElement("a");
            select_all_link.setAttribute("title", "Select all messages");
            select_all_link.innerText = "Select all";
            select_all_link.addEventListener('click', this.onClickSelectAll.bind(this));
            control_links.appendChild(select_all_link);
        }

        const refresh_link = document.createElement("a");
        refresh_link.setAttribute('title',"Check mailbox for updates. Not needed when idling except to refresh message flags.");
        refresh_link.innerText = "Refresh";
        refresh_link.addEventListener('click',async () => {
            await this.refresh();
            return false;
        })
        control_links.appendChild(refresh_link);

        const rebuild_link = document.createElement("a");
        rebuild_link.setAttribute('title', "Delete cached headers and fetch them from the server.");
        rebuild_link.innerText = "Rebuild";
        rebuild_link.addEventListener('click', this.rebuild.bind(this));
        control_links.appendChild(rebuild_link);

        const i = document.createElement('i');
        control_links.appendChild(i);

        const spacer = document.createElement('div');
        spacer.style.clear = "both";
        control_links.appendChild(spacer);


        navs.appendChild(control_links);
        this.$el.appendChild(navs);

        this.drawMessageCount();

        if(message_keys.length) {
            for(const message_uid of message_keys.reverse()) {
                const message = this.mailbox.messages[message_uid];
                const div = document.createElement('div');
                const escaped_flags = escapeHtml(message.flags.join(" "),"_");
                div.setAttribute('class','message ' + escaped_flags);
                div.setAttribute('data-uid', message_uid);
                div.uid = message_uid;
                if(this.selectedMessage === message_uid) {
                    div.setAttribute('data-open', true);
                }

                const h_subject = document.createElement('h4');
                h_subject.innerText = decodeMIMEWords(message.headers.subject, false) || "(no subject)";
                div.appendChild(h_subject);

                const h_from = document.createElement('h5');
                h_from.innerText = "From: ";
                const h_from_s = document.createElement('span');
                h_from_s.innerText = ( decodeMIMEWords(message.headers.from, false) || "(blank)" );
                h_from.appendChild(h_from_s);
                div.appendChild(h_from);

                const checkbox = document.createElement('input');
                checkbox.setAttribute('type','checkbox');
                checkbox.addEventListener('click', (e) => this.onClickMessageCheckbox.call(this, e, message_uid));
                div.appendChild(checkbox);

                const h_date = document.createElement('h6');
                h_date.innerText = "Date: ";
                const h_date_s = document.createElement('span');
                h_date_s.innerText = ( decodeDate(message.headers.date) || "(blank)" );
                h_date.appendChild(h_date_s);
                div.appendChild(h_date);

                div.addEventListener('pointerdown', (e) => this.onClickMessage.call(this, e, message_uid), true);
                this.$el.appendChild(div);
            }
            this.indicateSelectedMessage();
        } else {
            this.$el.appendChild(document.createTextNode("(no messages)"));
        }
    }

    drawMessageCount() {
        const message_count = Object.keys(this.mailbox.messages).length;
        const message_count_unread = this.getUnreadUIDs().length;
        const i = this.$el.querySelector('.controllinks i');
        const s = message_count !== 1 ? 's' : '';
        if(message_count_unread) {
            if(message_count_unread == message_count) {
                i.innerText = `(${message_count_unread} unread message${s})`;
            }
            else {
                i.innerText = `(${message_count_unread} unread, ${message_count} message${s})`;
            }
        } else {
            i.innerText = `(${message_count} message${s})`;
        }
    }

    drawBulkControls() {
        const uids = this.getCheckedMessages();
        const exist_bulk_controls = this.$el.querySelector('.bulkcontrols');
        if(!uids.length) {
            if(exist_bulk_controls)
                exist_bulk_controls.remove();
            return;
        }

        const bulk_controls = document.createElement('nav');
        bulk_controls.classList.add('bulkcontrols');

        const cancel = document.createElement('a');
        cancel.innerText = "Cancel";
        cancel.addEventListener('click', this.onClickCancel.bind(this));
        bulk_controls.appendChild(cancel);

        const mark_read = document.createElement('a');
        mark_read.innerText = "Mark as Read";
        mark_read.addEventListener('click', this.onClickMarkRead.bind(this));
        bulk_controls.appendChild(mark_read);

        const mark_unread = document.createElement('a');
        mark_unread.innerText = "Mark as Unread";
        mark_unread.addEventListener('click', this.onClickMarkUnread.bind(this));
        bulk_controls.appendChild(mark_unread);

        if(this.mailbox.mailbox !== this.mailbox.imap.trash) {
            const move_trash = document.createElement('a');
            move_trash.innerText = "Move to Trash";
            move_trash.addEventListener('click', this.onClickMoveToTrash.bind(this));
            bulk_controls.appendChild(move_trash);
        }

        const _delete = document.createElement('a');
        _delete.innerText = "Delete";
        _delete.addEventListener('click', this.onClickDelete.bind(this));
        bulk_controls.appendChild(_delete);

        const i = document.createElement('i');
        i.innerText = `(${uids.length} selected message${uids.length > 1 ? 's' : ''})`;
        bulk_controls.appendChild(i);

        const spacer = document.createElement('div');
        spacer.style.clear = "both";
        bulk_controls.appendChild(spacer);

        if(exist_bulk_controls) {
            exist_bulk_controls.replaceWith(bulk_controls);
        } else {
            this.$el.querySelector('#mailbox .navs').appendChild(bulk_controls);
        }

    }

    indicateSelectedMessage() {
        for(const mailbox_message of document.querySelectorAll(".message")) {
            mailbox_message.removeAttribute('data-open');
        }
        const open_mailbox_message = this.getMessageByUID(this.selectedMessage);
        if(open_mailbox_message)
            open_mailbox_message.setAttribute('data-open',true);
    }

    async rebuild() {
        set_status(`Rebuilding ${this.mailbox.mailbox}...`, "LOAD");
        this.mailbox.clear();
        await this.mailbox.load();
        set_status(`Rebuilding ${this.mailbox.mailbox}... Done!`, "OK");
        return false;
    }

    async refresh() {
        set_status(`Refreshing ${this.mailbox.mailbox}...`, "LOAD");
        await this.mailbox.load();
        set_status(`Refreshing ${this.mailbox.mailbox}... Done!`, "OK");
    }

    async onClickSelectAll() {
        this.$el.querySelectorAll('input[type=checkbox]').forEach((el) => {el.checked = true;});
        this.drawBulkControls();
    }

    async onClickMessage(e, uid) {
        e.preventDefault();
        const target_message = e.target.closest('.message');
        if(e.ctrlKey) {
            const checkbox = target_message.querySelector('input[type=checkbox');
            checkbox.checked = !checkbox.checked;
            this.drawBulkControls();
            return false;
        } else if(e.shiftKey) {
            window.getSelection().removeAllRanges();
            const message_keys = Object.keys(this.mailbox.messages);
            const target_index = message_keys.indexOf(target_message.uid);
            const selected_index = this.selectedMessage ?
                message_keys.indexOf(this.selectedMessage) :
                message_keys.length-1;
            const [message_a, message_b] = selected_index > target_index ?
                [target_index, selected_index] :
                [selected_index, target_index];
            const toggle_uids = message_keys.filter((n) => n >= message_keys[message_a] && n <= message_keys[message_b])

            for(const toggle_uid of toggle_uids) {
                const toggle_element = this.getMessageByUID(toggle_uid).querySelector('input[type=checkbox');
                toggle_element.checked = !toggle_element.checked;
            }
            this.drawBulkControls();
            return false;
        }

        if(e.target.getAttribute('type') === "checkbox") {
            e.target.addEventListener('change', (e) => {
                this.drawBulkControls();
            }, {'once': true});
            return false;
        }

        this.selectedMessage = uid;

        this.indicateSelectedMessage();

        set_status(`Loading message ${uid}...`, "LOAD");

        const message = window.MailboxView.mailbox.messages[uid];

        delete window.MessageView;
        window.MessageView = new _MessageView(message, this.mailbox);
        await window.MessageView.draw();

        const flagIndex = message.flags.indexOf("\\Seen");
        if(flagIndex === -1) {
            this.mailbox.messages[message.uid].flags.push("\\Seen");
        }
        this.getMessageByUID(message.uid).classList.add("_Seen");
        this.drawMessageCount();

        set_status(`Loading message ${message.uid}... Done!`, "OK");
    }

    onClickMessageCheckbox(e, uid) {
        e.stopPropagation();
        //return false;

    }

    async onClickCancel() {
        this.$el.querySelectorAll('input[type=checkbox]').forEach((el) => {el.checked = false;});
        this.drawBulkControls();
    }

    async onClickMarkRead() {
        const uids = this.getCheckedMessages();
        if(!uids.length) return;
        const s = uids.length !== 1 ? 's' : '';
        if(!confirm(`Mark ${uids.length} message${s} as read?`)) return;

        set_status(`Setting ${uids.length} message${s} as read...`, "LOAD");
        await this.mailbox.markAsRead(uids);
        window.dispatchEvent(new CustomEvent("mailbox-reload"));
        set_status(`Setting ${uids.length} message${s} as read... Done!`, "OK");
    }

    async onClickMarkUnread() {
        const uids = this.getCheckedMessages();
        if(!uids.length) return;
        const s = uids.length !== 1 ? 's' : '';
        if(!confirm(`Mark ${uids.length} message${s} as unread?`)) return;

        set_status(`Setting ${uids.length} message${s} as unread...`, "LOAD");
        await this.mailbox.markAsUnread(uids);
        window.dispatchEvent(new CustomEvent("mailbox-reload"));
        set_status(`Setting ${uids.length} message${s} as unread... Done!`, "OK");
    }

    async onClickMoveToTrash() {
        const uids = this.getCheckedMessages();
        if(!uids.length) return;
        const s = uids.length !== 1 ? 's' : '';
        if(!confirm(`Move ${uids.length} message${s} to trash?`)) return;

        set_status(`Moving ${uids.length} message${s} to trash...`, "LOAD");
        await this.mailbox.moveToTrash(uids);
        window.dispatchEvent(new CustomEvent("mailbox-reload"));
        window.dispatchEvent(new CustomEvent("account-reload"));
        set_status(`Moving ${uids.length} message${s} to trash... Done!`, "OK");
    }

    async onClickDelete() {
        const uids = this.getCheckedMessages();
        if(!uids.length) return;
        const s = uids.length !== 1 ? 's' : '';
        if(!confirm(`Delete ${uids.length} message${s}?`)) return;

        set_status(`Deleting ${uids.length} message${s}...`, "LOAD");
        await this.mailbox.deleteMessages(uids);

        if(uids.includes(this.getOpenMessage())) {
            window.MessageView.delete();
        }

        window.dispatchEvent(new CustomEvent("mailbox-reload"));
        set_status(`Deleting ${uids.length} message${s}... Done!`, "OK");
    }

    getMessageByUID(uid) {
        uid = parseInt(uid);
        return this.$el.querySelector(`#mailbox .message[data-uid="${uid}"]`);
    }

    getCheckedMessages() {
        const uids = [];
        for(const el of this.$el.querySelectorAll("#mailbox .message input:checked")) {
            uids.push(el.parentElement.uid);
        }
        return uids;
    }

    getOpenMessage() {
        const open_message = this.$el.querySelector('.message[data-open="true"]');
        if(open_message)
            return open_message.uid;
    }

    getUnreadUIDs() {
        const uids = [];
        for(const uid of Object.keys(this.mailbox.messages)) {
            const message = this.mailbox.messages[uid];
            if(!message.flags.includes("\\Seen"))
                uids.push(message.uid);
        }

        return uids;
    }
}

class _MessageView {
    constructor(message, mailbox) {
        this.el="message";
        this.$el = document.getElementById(this.el);
        this.$el.scrollTop = 0;
        this.message = message;
        this.mailbox = mailbox;
        this.messageo = new ImapMessage({'flags': this.message.flags});

        window.MailboxView.selectedMessage = message.uid;
        window.MailboxView.indicateSelectedMessage();
        window.MailboxView.getMessageByUID(message.uid).classList.add("_Seen");
        const flagIndex = message.flags.indexOf("\\Seen");
        if(flagIndex === -1) {
            window.MailboxView.mailbox.messages[message.uid].flags.push("\\Seen");
        }
        window.MailboxView.drawMessageCount();
    }

    // Welcome to the fun zone
    async draw() {
        const content = document.createElement('div');
        content.setAttribute('id','message');
        content.style.display = "inline-block";
        
        // Nav
        const nav = document.createElement('nav');

        const n_unread = document.createElement('a');
        n_unread.innerText = "Mark as Unread";
        n_unread.addEventListener('click', this.onClickMarkUnread.bind(this));
        nav.appendChild(n_unread);

        if(this.mailbox.mailbox !== this.mailbox.imap.trash) {
            const n_trash = document.createElement('a');
            n_trash.innerText = "Move to Trash";
            n_trash.addEventListener('click', this.onClickMoveToTrash.bind(this));
            nav.appendChild(n_trash);
        }

        const n_delete = document.createElement('a');
        n_delete.innerText = "Delete Message";
        n_delete.addEventListener('click', this.onClickDelete.bind(this));
        nav.appendChild(n_delete);

        const n_headers = document.createElement('a');
        n_headers.innerText = "Toggle Headers";
        n_headers.addEventListener('click', this.onClickToggleHeaders.bind(this));
        nav.appendChild(n_headers);

        content.appendChild(nav);

        if(!Object.keys(this.message.headers).length) {
            set_status("Error loading message!", "ERR");
            return;
        }

        const [ headers, raw_headers ] = await this.drawHeaders(this.message.headers,content)
        const body = await this.drawMessage(this.messageo,content);

        this.$el.replaceWith(content);
        this.$el = content; // Loading...

        // Parsing the body
        if(!this.message.body)
            this.message.body = await this.message.load();

        await this.messageo.loadMessage(this.message.body, true);

        await this.drawDownloadLink();

        await this.fillMessage(this.messageo, body, raw_headers);

    }

    async drawMessage(message, el) {
        const body = document.createElement('article');
        el.appendChild(body);
        body.innerText = "Loading...";

        return body;
    }

    async drawDownloadLink() {
        if(this.messageo.blob) {
            const download_link = document.createElement('a');
            const header = this.$el.querySelector('header');
            download_link.innerText = "Download E-mail";
            download_link.href = URL.createObjectURL(this.messageo.blob);
            download_link.download = (this.messageo.headers.subject || "no subject") + ".eml";
            header.after(download_link);
            const download_size = document.createElement('span');
            download_size.innerText =  " (" + decodeSize(this.messageo.blob.size) + ")";
            download_link.after(download_size);
            download_size.after(document.createElement('br'));
            download_size.after(document.createElement('br'));

        }
    }

    async fillMessage(messageo, body, raw_headers) {
        raw_headers.innerText = messageo.raw_headers.join("\r\n") + "\r\n";

        body.innerText = "";

        try {
            if(messageo.mime) {
                for(const inline of messageo.inline) {
                    const section = document.createElement('section');
                    await this.drawMIMEBodyPart(inline, section);
                    body.appendChild(section);
                    body.appendChild(document.createElement('hr'));
                }
                if(messageo.attachments.length) {
                    const attachments_h = document.createElement('h4');
                    attachments_h.innerText = "Attachments";
                    body.appendChild(attachments_h);
                    const ul = document.createElement('ul');
                    for(const i in messageo.attachments) {
                        const attachment = messageo.attachments[i];

                        var li = document.createElement('li');
                        li.innerText = "[" + i + "]: "; 
                        await this.drawMIMEBodyPart(attachment,li,true);
                        ul.appendChild(li)
                        ul.appendChild(document.createElement('hr'));
                    }
                    body.appendChild(ul)
                }
            } else {
                body.innerText += messageo.body
            }
        } catch(e) {
            console.error("Error drawing message, probably MIME related: ", [e, messageo, body, raw_headers]);
            body.innerText += messageo.body;
        }

        return body;
    }

    async drawHeaders(headers_in,el) {
        // Primary header display
        const headers = document.createElement('header');
        el.appendChild(headers);

        const raw_headers = document.createElement('div');
        raw_headers.classList.add('rawheaders');
        el.appendChild(raw_headers);

        const h_subject = document.createElement('h4');
        h_subject.innerText = decodeMIMEWords(headers_in.subject, false) || "(no subject)";
        headers.appendChild(h_subject);

        const h_from = document.createElement('h5');
        h_from.innerText = "From: ";
        const h_from_s = document.createElement('span');
        h_from_s.innerText =(decodeMIMEWords(headers_in.from, false) || "(blank)");
        h_from.appendChild(h_from_s);
        headers.appendChild(h_from);

        const h_to = document.createElement('h6');
        h_to.innerText = "To: ";
        const h_to_s = document.createElement('span');
        h_to_s.innerText = (decodeMIMEWords(headers_in.to, false) || "(blank)");
        h_to.appendChild(h_to_s);
        headers.appendChild(h_to);

        if(headers_in.cc) {
            const h_cc = document.createElement('h6');
            h_cc.innerText = "CC: ";
            const h_cc_s = document.createElement('span');
            h_cc_s.innerText = (decodeMIMEWords(headers_in.cc, false) || "(blank)");
            h_cc.appendChild(h_cc_s);
            headers.appendChild(h_cc);
        }

        if(headers_in.bcc) {
            const h_bcc = document.createElement('h6');
            h_bcc.innerText = "BCC: ";
            const h_bcc_s = document.createElement('span');
            h_bcc_s.innerText = (decodeMIMEWords(headers_in.bcc, false) || "(blank)");
            h_bcc.appendChild(h_bcc_s);
            headers.appendChild(h_bcc);
        }

        const h_date = document.createElement('h6');
        h_date.innerText = "Date: ";
        const h_date_s = document.createElement('span');
        h_date_s.innerText = ( decodeDate(headers_in.date, true) || "(blank)" );
        h_date.appendChild(h_date_s);
        headers.appendChild(h_date);

        return [ headers, raw_headers ];

    }

    async drawMIMEBodyPart(body_part,el,brief=false) {
        var target = el;
        if(brief) {
            const hidden_div = document.createElement('div');
            hidden_div.classList.add('hidden');
            target = hidden_div;
        }
        if(body_part.content_type) {
            // Create the BLOB
            var blobType = body_part.content_type + "/" + body_part.content_subtype;
            var blobData = body_part.body;

            switch(body_part.content_type) {
                case "application":
                    blobType = 'application/octet-stream';
                    break;
                case "text":
                    switch(body_part.content_subtype) {
                        case "html":
                            blobType = 'application/octet-stream';
                            blobData = body_part.raw_html;
                            break;
                        default:
                            if(body_part.content_subtype.match(/xml/)) {
                                blobType = 'application/octet-stream';
                            }else if(body_part.content_subtype.match(/html/)) {
                                blobType = 'application/octet-stream';
                            }else if(body_part.content_subtype.match(/svg/)) {
                                blobType = 'application/octet-stream';
                            }
                            break;
                    }
                default:
                    if(body_part.content_subtype.match(/xml/)) {
                        blobType = 'application/octet-stream';
                    }else if(body_part.content_subtype.match(/html/)) {
                        blobType = 'application/octet-stream';
                    }else if(body_part.content_subtype.match(/svg/)) {
                        blobType = 'application/octet-stream';
                    }
                    break;
            }
            const blob = new Blob([blobData], { type: blobType });
            const blobURL = URL.createObjectURL(blob)

            // Display Type, Filename, and Size
            if(brief) {
                // For attachments
                const content_type = document.createElement('h4');
                content_type.innerText = "Type: ";
                const content_type_s = document.createElement('span');
                content_type_s.innerText = ( body_part.content_type + "/" + body_part.content_subtype );

                content_type.appendChild(content_type_s);
                el.appendChild(content_type);

                if(body_part.filename) {
                    const filename = document.createElement('h5');
                    filename.innerText = "Filename: ";
                    const filename_s = document.createElement('span');
                    filename_s.innerText = body_part.filename;

                    filename.appendChild(filename_s);
                    el.appendChild(filename);
                }

                const size = document.createElement('h5');
                size.innerText = "Size: ";
                const size_s = document.createElement('span');
                size_s.innerText = decodeSize(blob.size);
                size.appendChild(size_s);
                el.appendChild(size);

                el.appendChild(document.createElement('br'));

            } else {
                // For inlines
                switch(body_part.content_type) {
                    case "application":
                    case "video":
                    case "message":
                    case "image":
                        const content_type = document.createElement('h4');
                        content_type.innerText = "Type: " + ( body_part.content_type + "/" + body_part.content_subtype );

                        el.appendChild(content_type);

                        if(body_part.filename) {
                            const filename = document.createElement('h5');
                            filename.innerText = "Filename: " + body_part.filename;
                            el.appendChild(filename);
                        }

                        const size = document.createElement('h5');
                        size.innerText = "Size: ";
                        const size_s = document.createElement('span');
                        size_s.innerText = decodeSize(blob.size);
                        size.appendChild(size_s);
                        el.appendChild(size);

                        el.appendChild(document.createElement('br'));
                        break;
                }
            }

            // Display download link
            if(brief || (!window.CockmailSettings.renderMedia && (body_part.content_type === "image" || body_part.content_type === "video"))) {
                const download_link = document.createElement('a');
                download_link.href = blobURL;
                if(body_part.filename) {
                    download_link.download = body_part.filename;
                }
                download_link.innerText = 'Download'
                if(brief) download_link.innerText += ' Attachment';
                el.appendChild(download_link);
            }

            // Display view link
            if(brief) {
                switch(body_part.content_type) {
                    case "application":
                        break;
                    case "video":
                    case "image":
                    case "message":
                    case "text":
                    default:
                        if(window.CockmailSettings.renderMedia || body_part.content_type === "message") {
                            const view_link = document.createElement('a');
                            view_link.innerText = "View";
                            view_link.classList.add('viewlink');
                            view_link.addEventListener('click',(e) => {
                                e.target.parentElement.querySelector('.hidden').classList.remove('hidden');
                                e.target.remove();
                            });
                            el.appendChild(view_link);

                            break;
                        }
                }
            }

            // Display the object
            switch(body_part.content_type) {
                case "application":
                    target.innerText += "Cock-mail doesn't know how to display this type!";
                    break;
                case "video":
                    if(window.CockmailSettings.renderMedia) {
                        const video = document.createElement('video');
                        const videoURL = URL.createObjectURL(blob);
                        video.src = videoURL;
                        video.setAttribute('controls','true');
                        target.appendChild(video);
                    }
                    break;
                case "image":
                    if(window.CockmailSettings.renderMedia) {
                        target.appendChild(document.createElement('br'));
                        const image = document.createElement('img');
                        const imageURL = URL.createObjectURL(blob)
                        image.src = imageURL;
                        target.appendChild(image);
                    }
                    break;
                case "message":
                    const blockquote = document.createElement('blockquote');

                    const [ headers, raw_headers ] = await this.drawHeaders(body_part.message.headers,blockquote);
                    const body = await this.drawMessage(body_part.message, blockquote);
                    await this.fillMessage(body_part.message,body,raw_headers);

                    target.appendChild(blockquote);
                    break;
                case "text":
                default:
                    const content = document.createElement('div');
                    content.classList.add('textpart');
                    switch(body_part.content_subtype) {
                        case "html":
                            const converted = document.createElement('p');
                            converted.innerText = "Converted from HTML";
                            content.appendChild(converted);
                            const link_keys = Object.keys(body_part.links);
                            if(link_keys.length > 0) {
                                const links_h = document.createTextNode("Links in this e-mail:");
                                content.appendChild(links_h);
                                const ul = document.createElement('ul');
                                for(const i of link_keys) {
                                    const link = body_part.links[i];
                                    const li = document.createElement('li');
                                    li.innerText = "[" + i + "]: " + link;
                                    ul.appendChild(li);
                                }
                                content.appendChild(ul);
                            }
                            content.appendChild(document.createTextNode(body_part.body));
                            break;
                        case "plain":
                        default:
                            content.innerText = body_part.body;
                            break;

                    }
                    target.appendChild(content);
                    break;
            }

        } else  {
            target.innerText += body_part.body
        }

        if(brief)
            el.appendChild(target);

        return el;

    }

    async delete(message="(deleted)") {
        var $el = document.getElementById('message');
        $el.innerText = message;
    }

    async onClickMarkUnread() {
        set_status(`Setting message ${this.message.uid} as unread...`, "LOAD");
        await this.mailbox.markAsUnread(this.message.uid);
        window.dispatchEvent(new CustomEvent("mailbox-reload"));
        set_status(`Setting message ${this.message.uid} as unread... Done!`, "OK");
    }

    async onClickMoveToTrash() {
        set_status(`Moving message ${this.message.uid} to Trash...`, "LOAD");
        await this.mailbox.moveToTrash(this.message.uid);
        await this.delete("(moved)");
        window.dispatchEvent(new CustomEvent("account-reload"));
        window.dispatchEvent(new CustomEvent("mailbox-reload"));
        set_status(`Moving message ${this.message.uid} to Trash... Done!`, "OK");
    }

    async onClickDelete() {
        if(!confirm("Delete this message?")) return;
        set_status(`Deleting message ${this.message.uid}...`, "LOAD");
        await this.mailbox.deleteMessages(this.message.uid);
        await this.delete();
        window.dispatchEvent(new CustomEvent("mailbox-reload"));
        window.MessageView = null;
        set_status(`Deleting message ${this.message.uid}... Done!`, "OK");
    }

    async onClickToggleHeaders() {
        const el = this.$el.querySelector('.rawheaders');
        if(el.style.display === "block") {
            el.style.display = "none";
        } else {
            el.style.display = "block";
        }
    }

    async splitMessage(lines) {
        const blank = lines.indexOf("");
        if(blank === -1)
            return [message, null];
        const headers = lines.slice(0,blank);
        const body = lines.slice(blank);

        return [ headers, body ];
    }
}

class _SettingsView {
    constructor() {
        this.el="settings";
        this.$el=document.getElementById(this.el);
        this.settings=window.CockmailSettings;
    }

    async open() {
        this.$el.style.display="block";
        this.draw();
    }

    async close() {
        this.$el.style.display="none";
    }

    async draw() {
        const content = document.createElement('div');
        content.setAttribute('id','settings');
        content.style.display="block";

        const header = document.createElement('h3');
        header.innerText = "Settings";
        content.appendChild(header);

        const description = document.createElement('p');
        description.innerText = "Settings are global (per-browser, not not per-account) and save automatically.";
        content.appendChild(description);

        const close = document.createElement('a');
        close.innerText = "Close";
        close.addEventListener('click',((e) => {
            this.close();
        }).bind(this));
        content.appendChild(close);

        content.appendChild(document.createElement('br'));
        content.appendChild(document.createElement('br'));

        const renderMedia_checkbox = document.createElement('input');
        renderMedia_checkbox.setAttribute('type','checkbox');
        renderMedia_checkbox.setAttribute('id','settings-renderMedia');
        renderMedia_checkbox.checked =  window.CockmailSettings.renderMedia === true;
        renderMedia_checkbox.addEventListener('change',((e) => {
            this.settings.set('renderMedia', e.target.checked);
        }).bind(this));
        content.appendChild(renderMedia_checkbox);

        const renderMedia_label = document.createElement('label');
        renderMedia_label.setAttribute('for','settings-renderMedia');
        renderMedia_label.innerText = "Render media like images and video. Disable this to harden against browser exploits. Remote content is NEVER loaded regardless of this option.";
        content.appendChild(renderMedia_label);


        this.$el.replaceWith(content);
        this.$el = content;
    }
}

class _LoginView {
    constructor() {
        this.el="login";
        this.$el=document.getElementById(this.el);

        this.showDevNotes = false;

        this.knownAccounts = {};

        this.$el.querySelector('#login_form').addEventListener('submit',this.onClickLogin.bind(this));
        this.$el.querySelector('#show_dev_notes').addEventListener('click', function() {
            window.LoginView.showDevNotes = true;
            window.LoginView.draw();
        });

        this.comments = [];

        const iterator = document.createNodeIterator(document, NodeFilter.SHOW_COMMENT, () => { return NodeFilter.FILTER_ACCEPT}, false);
        var comment_node = [];
        while(comment_node = iterator.nextNode()) {
            this.comments.push(comment_node.nodeValue);
            console.debug(comment_node.nodeValue);
        }

        this.loadAccounts();

        this.draw();
    }

    draw() {
        this.$el.style='display: inline-block';


        const login_notes = document.querySelector("#login_notes");

        login_notes.innerHTML = "";
        login_notes.innerText = this.comments[1];

        if(this.showDevNotes) {
            login_notes.innerText = this.comments[0] + login_notes.innerText;
            login_notes.innerText += this.comments[2];
            this.$el.querySelector("#show_dev_notes").style.display="none";
        }

        const account_list = document.getElementById('account_list');

        const usernames = Object.keys(this.knownAccounts);
        account_list.innerHTML = "";

        if(!usernames.length) {
            const li = document.createElement('li');
            li.classList.add('no_accounts');
            li.innerText = "No saved accounts";
            account_list.appendChild(li);
            return;
        }
        for(const username of Object.keys(this.knownAccounts)) {
            const password = this.knownAccounts[username];

            const account_link = document.createElement('li');
            account_link.username = username;
            account_link.password = password;
            account_link.innerText = username;
            account_link.addEventListener('click',this.onClickSavedAccountLogin.bind(this,username,password));

            const delete_account_link = document.createElement('a');
            delete_account_link.innerText = "Delete";
            delete_account_link.addEventListener('click', e => this.onClickSavedAccountDelete.call(this,username,e));

            account_link.appendChild(delete_account_link);
            account_list.appendChild(account_link);
        }
    }

    loadAccounts() {
        const from_cache = localStorage.getItem("cock-mail-accounts");

        const json_decoded = JSON.parse(from_cache);
        if(json_decoded) {
            this.knownAccounts = json_decoded;
        }
    }

    saveAccounts() {
        localStorage.setItem("cock-mail-accounts",JSON.stringify(this.knownAccounts));
    }

    async onClickLogin() {
        const $username = document.querySelector("#login_form input[name='username']");
        const username = $username.value;
        const $password = document.querySelector("#login_form input[name='password']");
        const password = $password.value;
        const save_account = document.querySelector("#login select[name='save_password']").value;

        if(username.length === 0) {
            alert("Your username cannot be blank");
            return false
        }
        if(password.length === 0) {
            alert("Your password cannot be blank");
            return false;
        }

        $username.value = "";
        $password.value = "";

        if(save_account == "save" || save_account == "session") {
            this.knownAccounts[username] = password;
        }

        if(save_account == "save") {
            this.saveAccounts();
        }

        initImap(username,password);
    }

    async hide() {
        this.$el.style.display = "none";
    }

    async onClickSavedAccountLogin(username,password) {
        document.querySelector("#login").style.display = "none";
        initImap(username,password);
    }

    async onClickSavedAccountDelete(username,e) {
        e.stopPropagation();
        delete this.knownAccounts[username];
        this.saveAccounts();
        this.draw();
        return false;
    }
}

//---------------------------INIT---------------------------------------------

async function initImap(imap_username,imap_password,imap_mailbox="INBOX",imap_server=window.imap_server) {

    window.CockmailSettings = new CockmailSettings();

    const client = new ImapClient(imap_server);

    client.onmessage = ({ type, line, tag, status, text, data }) => {
        /*if (type === "untagged") {
            console.log(`<- ${line.join("\n")}`);
        } else if (type === "tagged") {
            console.log(`<- ${data.join("\n")}`);
            console.log(`<- ${tag} ${status} ${text}`);
        }*/
    };

    set_status("Connecting...", "LOAD");
    await client.connect();
    set_status("Connecting... Done!", "OK");
    try {
        await client.login(imap_username, imap_password);
    } catch (e) {
        set_status("Login failed!", "ERR");
        await client.close();
        throw e;
    }

    window.LoginView.hide();
    window.AccountView = new _AccountView(client);

    await set_status("Loading mailboxes...", "LOAD");
    const boxes = await client.listMailboxes();
    await set_status("Loading mailboxes... Done!", "OK");

    const mailbox = new ImapMailbox(client,imap_username,imap_mailbox);

    window.MailboxView = new _MailboxView(mailbox);

    await set_status(`Loading ${escapeHtml(imap_mailbox)}...`, "LOAD");

    await mailbox.load();

    await set_status(`Loading ${escapeHtml(imap_mailbox)}... Done!`, "OK");

    const message_keys = Object.keys(mailbox.messages);

    if(message_keys.length) {
        const most_recent_message = mailbox.messages[message_keys.pop()];
        await set_status(`Loading message ${most_recent_message.uid}...`, "LOAD");
        window.MessageView = new _MessageView(most_recent_message, mailbox);
        await window.MessageView.draw();
        await set_status(`Loading message ${most_recent_message.uid}... Done!`, "OK");
    }

    client.onclose = () => {
        set_status("Disconnected.", "DISC");
    }

    await client.idleStart(() => {
        // New Mail
        window.MailboxView.refresh();
    }, () => {
        // Vanished Mail
        window.MailboxView.refresh();
    });

    //setTimeout(() => {
    //  client.idleStop();
    //  client.logout();
    //}, 90000);
}

async function initLoginView() {
    window.LoginView = new _LoginView();
}

// You can specify your own websocket endpoint by replacing the line below
// window.imap_server = "wss://example.com/path/to/imap"
window.imap_server = (window.location.protocol === "http:" ? "ws://" : "wss://") + window.location.host + "/imap";

initLoginView();
</script>