// ==UserScript==
// @name                Instagram为关注用户添加备注
// @name:en             Instagram - Add a note to the user
// @name:zh-CN          Instagram - 为用户添加备注
// @name:zh-TW          Instagram - 為使用者新增備註
// @name:ja             Instagram - ユーザーに備考を加える
// @name:ko             Instagram - 사용자에 대한 주석 추가
// @namespace           https://greasyfork.org/zh-CN/users/193133-pana
// @homepage            https://www.sailboatweb.com
// @icon                data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMCwxNSBMMjAsNCBMNCw0IEw0LDIwIEwxNSwyMCBMMTUsMTcgQzE1LDE1Ljg5NTQzMDUgMTUuODk1NDMwNSwxNSAxNywxNSBMMjAsMTUgWiBNMTkuNTg1Nzg2NCwxNyBMMTcsMTcgTDE3LDE5LjU4NTc4NjQgTDE5LjU4NTc4NjQsMTcgWiBNNCwyMiBDMi44OTU0MzA1LDIyIDIsMjEuMTA0NTY5NSAyLDIwIEwyLDQgQzIsMi44OTU0MzA1IDIuODk1NDMwNSwyIDQsMiBMMjAsMiBDMjEuMTA0NTY5NSwyIDIyLDIuODk1NDMwNSAyMiw0IEwyMiwxNy40MTQyMTM2IEwxNy40MTQyMTM2LDIyIEw0LDIyIFogTTcsMTcgTDcsMTUgTDEzLDE1IEwxMywxNyBMNywxNyBaIE03LDEzIEw3LDExIEwxNywxMSBMMTcsMTMgTDcsMTMgWiBNNyw5IEw3LDcgTDE3LDcgTDE3LDkgTDcsOSBaIi8+Cjwvc3ZnPgo=
// @version             3.1.0
// @description         为用户添加备注功能，以帮助识别和搜索
// @description:en      Add a note for users to help identify and search
// @description:zh-CN   为用户添加备注功能，以帮助识别和搜索
// @description:zh-TW   為使用者新增備註功能，以幫助識別和搜尋
// @description:ja      ユーザーに備考機能を追加し、識別と検索を助ける
// @description:ko      식별 및 검색에 도움이 되는 사용자에 대한 주석 추가 기능
// @license             GNU General Public License v3.0 or later
// @author              pana
// @include             http*://*instagram.com/*
// @require             https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js
// @grant               GM_getValue
// @grant               GM_setValue
// @grant               GM_deleteValue
// @grant               GM_listValues
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
    const LANG = {
        'ZH': {
            'div_title': '备注',
            'input_placeholder': '(请输入备注，置空时删除；按下Enter键保存)',
            'save_button_text': '保存',
            'clear_button_text': '清除',
            'cancel_button_text': '取消',
            'search_placeholder': '搜索备注',
            'add_button_title': '为用户添加备注',
            'modify_button_title': '为用户修改备注'
        },
        'ZH_TW': {
            'div_title': '備註',
            'input_placeholder': '(請輸入備註，置空時刪除；按下Enter鍵儲存)',
            'save_button_text': '儲存',
            'clear_button_text': '清除',
            'cancel_button_text': '取消',
            'search_placeholder': '搜尋備註',
            'add_button_title': '為使用者新增備註',
            'modify_button_title': '為使用者修改備註'
        },
        'EN': {
            'div_title': 'Note',
            'input_placeholder': '(Enter a note, delete it when blanked; press Enter to save)',
            'save_button_text': 'Save',
            'clear_button_text': 'Clear',
            'cancel_button_text': 'Cancel',
            'search_placeholder': 'Search notes',
            'add_button_title': 'Add notes to the user',
            'modify_button_title': 'Modify notes for the user'
        },
        'JA': {
            'div_title': '備考',
            'input_placeholder': '(注を入力して、空にした時に削除してください。)',
            'save_button_text': '保存する',
            'clear_button_text': 'クリア',
            'cancel_button_text': 'キャンセル',
            'search_placeholder': '検索備考',
            'add_button_title': 'ユーザーに備考を追加する',
            'modify_button_title': 'ユーザーのために備考を修正する'
        },
        'KO': {
            'div_title': '주석',
            'input_placeholder': '(메모를 입력하십시오. 비어 있을 때 삭제하십시오.)',
            'save_button_text': '보존',
            'clear_button_text': '제거',
            'cancel_button_text': '취소',
            'search_placeholder': '검색 노트',
            'add_button_title': '사용자에 대한 주석 추가',
            'modify_button_title': '사용자에 대한 주석 수정'
        }
    };
    const ICON = {
        'TAGS': 'url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMCwxNSBMMjAsNCBMNCw0IEw0LDIwIEwxNSwyMCBMMTUsMTcgQzE1LDE1Ljg5NTQzMDUgMTUuODk1NDMwNSwxNSAxNywxNSBMMjAsMTUgWiBNMTkuNTg1Nzg2NCwxNyBMMTcsMTcgTDE3LDE5LjU4NTc4NjQgTDE5LjU4NTc4NjQsMTcgWiBNNCwyMiBDMi44OTU0MzA1LDIyIDIsMjEuMTA0NTY5NSAyLDIwIEwyLDQgQzIsMi44OTU0MzA1IDIuODk1NDMwNSwyIDQsMiBMMjAsMiBDMjEuMTA0NTY5NSwyIDIyLDIuODk1NDMwNSAyMiw0IEwyMiwxNy40MTQyMTM2IEwxNy40MTQyMTM2LDIyIEw0LDIyIFogTTcsMTcgTDcsMTUgTDEzLDE1IEwxMywxNyBMNywxNyBaIE03LDEzIEw3LDExIEwxNywxMSBMMTcsMTMgTDcsMTMgWiBNNyw5IEw3LDcgTDE3LDcgTDE3LDkgTDcsOSBaIi8+Cjwvc3ZnPgo=)',
        'DOWN_ARROW': 'url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0OTEuOTk2IDQ5MS45OTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ5MS45OTYgNDkxLjk5NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik00ODQuMTMyLDEyNC45ODZsLTE2LjExNi0xNi4yMjhjLTUuMDcyLTUuMDY4LTExLjgyLTcuODYtMTkuMDMyLTcuODZjLTcuMjA4LDAtMTMuOTY0LDIuNzkyLTE5LjAzNiw3Ljg2bC0xODMuODQsMTgzLjg0OCAgICBMNjIuMDU2LDEwOC41NTRjLTUuMDY0LTUuMDY4LTExLjgyLTcuODU2LTE5LjAyOC03Ljg1NnMtMTMuOTY4LDIuNzg4LTE5LjAzNiw3Ljg1NmwtMTYuMTIsMTYuMTI4ICAgIGMtMTAuNDk2LDEwLjQ4OC0xMC40OTYsMjcuNTcyLDAsMzguMDZsMjE5LjEzNiwyMTkuOTI0YzUuMDY0LDUuMDY0LDExLjgxMiw4LjYzMiwxOS4wODQsOC42MzJoMC4wODQgICAgYzcuMjEyLDAsMTMuOTYtMy41NzIsMTkuMDI0LTguNjMybDIxOC45MzItMjE5LjMyOGM1LjA3Mi01LjA2NCw3Ljg1Ni0xMi4wMTYsNy44NjQtMTkuMjI0ICAgIEM0OTEuOTk2LDEzNi45MDIsNDg5LjIwNCwxMzAuMDQ2LDQ4NC4xMzIsMTI0Ljk4NnoiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K)',
        'UP_ARROW': 'url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0OTIuMDAyIDQ5Mi4wMDIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ5Mi4wMDIgNDkyLjAwMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik00ODQuMTM2LDMyOC40NzNMMjY0Ljk4OCwxMDkuMzI5Yy01LjA2NC01LjA2NC0xMS44MTYtNy44NDQtMTkuMTcyLTcuODQ0Yy03LjIwOCwwLTEzLjk2NCwyLjc4LTE5LjAyLDcuODQ0ICAgIEw3Ljg1MiwzMjguMjY1QzIuNzg4LDMzMy4zMzMsMCwzNDAuMDg5LDAsMzQ3LjI5N2MwLDcuMjA4LDIuNzg0LDEzLjk2OCw3Ljg1MiwxOS4wMzJsMTYuMTI0LDE2LjEyNCAgICBjNS4wNjQsNS4wNjQsMTEuODI0LDcuODYsMTkuMDMyLDcuODZzMTMuOTY0LTIuNzk2LDE5LjAzMi03Ljg2bDE4My44NTItMTgzLjg1MmwxODQuMDU2LDE4NC4wNjQgICAgYzUuMDY0LDUuMDYsMTEuODIsNy44NTIsMTkuMDMyLDcuODUyYzcuMjA4LDAsMTMuOTYtMi43OTIsMTkuMDI4LTcuODUybDE2LjEyOC0xNi4xMzIgICAgQzQ5NC42MjQsMzU2LjA0MSw0OTQuNjI0LDMzOC45NjUsNDg0LjEzNiwzMjguNDczeiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)',
        'SEARCH': 'url(data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiBhcmlhLWxhYmVsbGVkYnk9InNlYXJjaEljb25UaXRsZSIgc3Ryb2tlPSJyZ2JhKDI5LDE2MSwyNDIsMS4wMCkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgZmlsbD0ibm9uZSIgY29sb3I9InJnYmEoMjksMTYxLDI0MiwxLjAwKSI+IDx0aXRsZSBpZD0ic2VhcmNoSWNvblRpdGxlIj5TZWFyY2g8L3RpdGxlPiA8cGF0aCBkPSJNMTQuNDEyMTEyMiwxNC40MTIxMTIyIEwyMCwyMCIvPiA8Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSI2Ii8+IDwvc3ZnPg==)'
    };
    const STYLE_VALUE = `
        .ins_visible {
            overflow: visible !important;
        }
        .ins_tag_p {
            margin-left: 5px;
            color: #336699;
            white-space: nowrap;
        }
        .ins_tag_a {
            background-image: ${ICON.TAGS};
            background-repeat: no-repeat;
            background-position: center;
            margin-left: 5px;
            cursor: pointer;
        }
        .ins_homepage_icon {
            width: 24px;
            height: 24px;
            background-size: 24px;
            margin-top: 8px;
        }
        .ins_user_page_icon {
            width: 24px;
            height: 24px;
            background-size: 24px;
            margin-top: 2px;
        }
        #presentation_div_for_user {
            display: flex;
            position: fixed;
            background-color: rgba(0, 0, 0, .5);
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1;
            align-items: center;
            justify-content: center;
        }
        .dialog_div_for_user {
            position: relative;
            width: 400px;
            background-color: #fff;
            border: 0 solid #000;
            border-radius: 12px;
        }
        .user_title_span_for_user {
            min-height: 48px;
            text-align: center;
            border: 1px solid #efefef;
            color: #003399;
            font-weight: bold;
            background-color: rgba(0, 0, 0, 0);
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            white-space: pre-wrap;
            cursor: text;
            user-select: text;
            line-height: 24px;
        }
        .tag_input_for_user {
            min-height: 32px;
            margin: 5px;
            border: 1px solid #cc6666;
            padding-left: 5px;
        }
        .button_for_user {
            min-height: 48px;
            cursor: pointer;
            border: 1px solid #efefef;
            background-color: rgba(0, 0, 0, 0);
        }
        .button_for_user:hover {
            color: #1da1f2;
        }
        .cancel_button_for_user {
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
        }
        #searchFrame {
            position: relative;
            margin-left: 15px;
        }
        #myInputSearch {
            width: 200px;
            height: 26px;
            border: 1px solid #999;
            border-radius: 3px;
            padding: 0 3px;
            position: relative;
        }
        #dropDowns {
            width: 15px;
            height: 15px;
            background-repeat: no-repeat;
            background-size: 12px auto;
            position: absolute;
            top: 8px;
            right: 2px;
        }
        .ins_down_arrow {
            background-image: ${ICON.DOWN_ARROW};
        }
        .ins_up_arrow {
            background-image: ${ICON.UP_ARROW};
        }
        .tags_list {
            width: 208px;
            height: 250px;
            overflow-y: scroll;
            text-align: left;
            border: 1px solid #999;
            display: none;
            position: absolute;
            top: 30px;
            background-color: #fff;
        }
        .tags_mobile_list {
            width: 350px;
            height: 250px;
            overflow-y: scroll;
            text-align: left;
            display: none;
            position: absolute;
            margin: 0 20px;
            z-index: 100;
            background-color: rgb(37, 51, 65);
            border: 1px solid rgba(29, 161, 242, 0.1);
            top: 45px;
        }
        .ins_list_item {
            cursor: pointer;
            padding-left: 5px;
            height: 25px;
            line-height: 25px;
            white-space: nowrap;
            overflow: hidden;
        }
        .ins_mobile_list_item {
            cursor: pointer;
            color: #fff;
            padding-left: 5px;
            height: 25px;
            line-height: 25px;
            white-space: nowrap;
            overflow: hidden;
        }
        .ins_highlight {
            background-color: #6699cc;
        }
        .ins_hide {
            display: none;
        }
        .ins_tag_div {
            color: #336699;
            margin-bottom: 20px;
            font-size: 18px;
        }
        .ins_tag_span {
            margin-left: 5px;
            color: #336699;
        }
        .font_size_14 {
            font-size: 14px;
        }
        .font_blue_color {
            color: #336699 !important;
        }
        .list_show {
            display: block !important;
        }
        #my_search_bottom_layer_div {
            display: flex;
            position: fixed;
            background-color: rgba(0, 0, 0, .5);
            top: -50vh;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 100;
            align-items: center;
            justify-content: center;
        }
        #floatSearchFrame {
            position: relative;
        }
        #myFloatInputSearch {
            width: 350px;
            height: 40px;
            border: 2px solid #000;
            border-radius: 40px;
            padding: 0 20px;
            position: relative;
            background-color: rgb(37, 51, 65);
            color: #fff;
            outline: none;
        }
        #mobileSearchButton {
            height: 45px;
            width: 45px;
            display: block;
            background-image: ${ICON.SEARCH};
            background-repeat: no-repeat;
            background-size: 24px auto;
            background-position: center;
        }
    `;
    var selector = {
        'body': 'body',
        'root': '#react-root',
        'search': {
            'frame': '.LWmhU'
        },
        'homepage': {
            'article': 'article',
            'id': '.e1e1d a',
            'id_shell': '.e1e1d',
            'icon': 'span.wmtNn',
            'comment_id': '.FPmhX',
            'comment_at': '._8Pl3R .notranslate'
        },
        'homepage_stories': {
            'id': '.eebAO',
            'id_shell': '.Fd_fQ',
        },
        'homepage_recommend': {
            'id': '.fDxYl a'
        },
        'user_page': {
            'frame': '.zwlfE',
            'id': '.KV-D4',
            'bar': '.AFWDX',
            'box': '.nZSzR',
            'common': 'span._32eiM',
            'suggest': '.Qj3-a'
        },
        'stories': {
            'id': '.FPmhX',
            'id_shell': '.yn6BW'
        },
        'watch_list': {
            'initial_item': '.isgrP li',
            'later_item': '.d7ByH',
            'id': 'a.FPmhX'
        },
        'dialog': {
            'frame': '._2dDPU article',
            'comment_id': '.EtaWk .ZIAjV',
            'comment_at': '.EtaWk .notranslate'
        },
        'request': {
            'follow': '.yrJyr'
        },
        'mobile': {
            'bottom_bar': '.BvyAW'
        }
    };
    class Instagram_Note {
        constructor(config, lang, show_list = []) {
            this.config = config;
            this.lang = lang;
            this.showList = show_list;
        }
        isMobilePage() {
            return /android|webos|iphone|ipod|blackberry/i.test(navigator.userAgent);
        }
        judgeUsers(user_id) {
            for (let key in this.config) {
                if (key == user_id) {
                    return true;
                }
            }
            return false;
        }
        writeUsers(user_id, tag_value) {
            if (this.judgeUsers(user_id)) {
                if (tag_value) {
                    this.config[user_id].tag = tag_value;
                } else {
                    delete this.config[user_id];
                }
            } else {
                if (tag_value) {
                    this.config[user_id] = {'tag': tag_value};
                }
            }
            if (this.judgeUsers(user_id)) {
                GM_setValue(user_id, this.config[user_id]);
            } else {
                GM_deleteValue(user_id);
            }
        }
        getUserTag(user_id) {
            if (this.judgeUsers(user_id)) {
                return this.config[user_id].tag;
            }
            return '';
        }
        getUserFormatTag(user_id) {
            if (this.judgeUsers(user_id)) {
                return '[' + this.getUserTag(user_id) + ']';
            }
            return '';
        }
        getUserAtTag(user_id) {
            if (this.judgeUsers(user_id)) {
                return '@' + this.getUserTag(user_id);
            }
            return '';
        }
        removeNoteFrame(frame_id = 'presentation_div_for_user') {
            let temp_ele = document.getElementById(frame_id);
            if (temp_ele) {
                temp_ele.parentNode.removeChild(temp_ele);
            }
        }
        createNoteFrame(user_id, callback) {
            let that = this;
            let presentation_div = document.createElement('div');
            presentation_div.id = 'presentation_div_for_user';
            presentation_div.addEventListener('click', function (event) {
                if (event.target === this) {
                    that.removeNoteFrame();
                }
            });
            let dialog_div = document.createElement('div');
            dialog_div.className = 'dialog_div_for_user';
            let user_title_p = document.createElement('button');
            user_title_p.className = 'user_title_span_for_user';
            user_title_p.textContent = 'ID: ' + user_id;
            let tag_input = document.createElement('input');
            tag_input.className = 'tag_input_for_user';
            tag_input.type = 'text';
            tag_input.placeholder = this.lang.input_placeholder;
            if (this.judgeUsers(user_id)) {
                tag_input.value = this.config[user_id].tag;
            } else {
                tag_input.value = '';
            }
            tag_input.addEventListener('keyup', (e) => {
                if (e.keyCode === 13) {
                    this.writeUsers(user_id, tag_input.value);
                    this.resetSearchFrame();
                    if (typeof(callback) == 'function') {
                        callback();
                    }
                    this.removeNoteFrame();
                }
            });
            setTimeout(function() {
                try {
                    tag_input.focus();
                    tag_input.select();
                } catch(e) {
                    console.error(e);
                }
            }, 200);
            let save_button = document.createElement('button');
            save_button.className = 'button_for_user';
            save_button.type = 'button';
            save_button.innerText = this.lang.save_button_text;
            save_button.addEventListener('click', () => {
                this.writeUsers(user_id, tag_input.value);
                this.resetSearchFrame();
                if (typeof(callback) == 'function') {
                    callback();
                }
                this.removeNoteFrame();
            });
            let clear_button = document.createElement('button');
            clear_button.className = 'button_for_user';
            clear_button.type = 'button';
            clear_button.innerText = this.lang.clear_button_text;
            clear_button.addEventListener('click', () => {
                this.writeUsers(user_id, '');
                this.resetSearchFrame();
                if (typeof(callback) == 'function') {
                    callback();
                }
                this.removeNoteFrame();
            });
            let cancel_button = document.createElement('button');
            cancel_button.className = 'button_for_user cancel_button_for_user';
            cancel_button.type = 'button';
            cancel_button.innerText = this.lang.cancel_button_text;
            cancel_button.addEventListener('click', () => {
                this.removeNoteFrame();
            });
            dialog_div.appendChild(user_title_p);
            dialog_div.appendChild(tag_input);
            dialog_div.appendChild(save_button);
            dialog_div.appendChild(clear_button);
            dialog_div.appendChild(cancel_button);
            presentation_div.appendChild(dialog_div);
            return presentation_div;
        }
        toggleList(status = "") {
            let tag_list = document.getElementById('tagsList');
            let arrow = document.getElementById('dropDowns');
            if (tag_list && arrow) {
                if (status == 'show') {
                    tag_list.classList.add('list_show');
                    arrow.classList.remove('ins_down_arrow');
                    arrow.classList.add('ins_up_arrow');
                } else if (status == 'hide') {
                    tag_list.classList.remove('list_show');
                    arrow.classList.remove('ins_up_arrow');
                    arrow.classList.add('ins_down_arrow');
                } else {
                    if (tag_list.classList.contains('list_show')) {
                        tag_list.classList.remove('list_show');
                        arrow.classList.remove('ins_up_arrow');
                        arrow.classList.add('ins_down_arrow');
                    } else {
                        tag_list.classList.add('list_show');
                        arrow.classList.remove('ins_down_arrow');
                        arrow.classList.add('ins_up_arrow');
                    }
                }
            }
        }
        resetSearchFrame() {
            let tags_list = document.getElementById('tagsList');
            if (tags_list) {
                tags_list.innerHTML = "";
                for (let key in this.config) {
                    tags_list.appendChild(this.createListDiv(key));
                }
            }
        }
        createSearchFrame() {
            let search_frame = document.createElement('div');
            search_frame.id = 'searchFrame';
            let search_input = document.createElement('input');
            search_input.id = 'myInputSearch';
            search_input.type = 'text';
            search_input.placeholder = this.lang.search_placeholder;
            search_input.value = "";
            search_input.addEventListener('focusin', () => {
                this.toggleList('show');
                this.searchEvent(search_input);
            });
            search_frame.appendChild(search_input);
            let dropdowns = document.createElement('div');
            dropdowns.id = 'dropDowns';
            dropdowns.className = 'ins_down_arrow';
            dropdowns.addEventListener('click', () => {
                this.toggleList();
            });
            search_frame.appendChild(dropdowns);
            let tags_list = document.createElement('div');
            tags_list.id = 'tagsList';
            tags_list.className = 'tags_list';
            for (let key in this.config) {
                tags_list.appendChild(this.createListDiv(key));
            }
            search_frame.appendChild(tags_list);
            document.body.onclick = (e) => {
                e = e || window.event;
                let target = e.target || e.srcElement;
                if(target !== document.getElementById('dropDowns') && target !== document.getElementById('tagsList') && target !== document.getElementById('myInputSearch')){
                    this.toggleList('hide');
                }
            };
            return search_frame;
        }
        removeFloatSearchFrame(frame_id = 'my_search_bottom_layer_div') {
            let search_frame = document.getElementById(frame_id);
            if (search_frame) {
                search_frame.parentNode.removeChild(search_frame);
            }
        }
        createFloatSearchFrame() {
            let that = this;
            let bottom_layer_div = document.createElement('div');
            bottom_layer_div.id = 'my_search_bottom_layer_div';
            bottom_layer_div.addEventListener('click', function(event) {
                if (event.target === this) {
                    that.removeFloatSearchFrame();
                }
            });
            let search_frame = document.createElement('div');
            search_frame.id = 'floatSearchFrame';
            bottom_layer_div.appendChild(search_frame);
            let search_input = document.createElement('input');
            search_input.id = 'myFloatInputSearch';
            search_input.type = 'text';
            search_input.placeholder = this.lang.search_placeholder;
            search_input.value = "";
            search_input.addEventListener('focusin', () => {
                document.getElementById('tagsList').classList.add('list_show');
                this.searchEvent(search_input);
            });
            setTimeout(function() {
                try {
                    search_input.focus();
                    search_input.select();
                } catch(e) {
                    console.error(e);
                }
            }, 200);
            search_frame.appendChild(search_input);
            let tags_list = document.createElement('div');
            tags_list.id = 'tagsList';
            tags_list.className = 'tags_mobile_list';
            for (let key in this.config) {
                tags_list.appendChild(this.createListDiv(key, true));
            }
            search_frame.appendChild(tags_list);
            return bottom_layer_div;
        }
        createMobileSearchButton() {
            let search_btn = document.createElement('div');
            search_btn.id = 'mobileSearchButton';
            search_btn.addEventListener('click', (event) => {
                event.stopPropagation();
                document.body.appendChild(this.createFloatSearchFrame());
            });
            return search_btn;
        }
        searchEvent(input_dom) {
            let list_arr = [];
            for (let ele of document.querySelectorAll('#tagsList div')) {
                let arr_obj = {
                    'eleContainer': ele.textContent,
                    'ele': ele
                };
                list_arr.push(arr_obj);
            }
            let current_index = 0;
            input_dom.addEventListener('keyup', (event) => {
                this.toggleList('show');
                let search_val;
                switch (event.keyCode) {
                    case 38:
                    case 40:
                    case 37:
                    case 39:
                        event.returnValue = false;
                        break;
                    case 13:
                        this.showList[current_index].click();
                        break;
                    default:
                        search_val = input_dom.value;
                        this.showList = [];
                        list_arr.forEach((item) => {
                            if (item.eleContainer.indexOf(search_val) !== -1) {
                                item.ele.classList.remove('ins_hide');
                                this.showList.push(item.ele);
                            } else {
                                item.ele.classList.add('ins_hide');
                            }
                        });
                        current_index = 0;
                        break;
                }
                this.showList.forEach(function(item, index) {
                    if (index === current_index) {
                        item.classList.add('ins_highlight');
                        document.getElementById('tagsList').scrollTop = item.offsetTop;
                    } else {
                        item.classList.remove('ins_highlight');
                    }
                });
                let list_height = 25 * this.showList.length;
                if (list_height < 250) {
                    document.getElementById('tagsList').style.height = list_height + 'px';
                } else {
                    document.getElementById('tagsList').style.height = '250px';
                }
            });
            input_dom.addEventListener('keydown', (event) => {
                if (event.keyCode === 38) {
                    current_index --;
                    if (current_index < 0) {
                        current_index = 0;
                    }
                } else if (event.keyCode === 40) {
                    current_index ++;
                    if (current_index >= this.showList.length) {
                        current_index = this.showList.length - 1;
                    }
                }
                this.showList.forEach(function(item, index) {
                    if (index === current_index) {
                        item.classList.add('ins_highlight');
                        document.getElementById('tagsList').scrollTop = item.offsetTop;
                    } else {
                        item.classList.remove('ins_highlight');
                    }
                });
            });
        }
        createNoteBtn(user_id, callback, an_class_name = "") {
            let btn = document.createElement('div');
            btn.className = 'ins_tag_a';
            if (an_class_name) {
                btn.classList.add(an_class_name);
            }
            if (this.judgeUsers(user_id)) {
                btn.title = this.lang.modify_button_title;
            } else {
                btn.title = this.lang.add_button_title;
            }
            btn.addEventListener('click', (event) => {
                event.stopPropagation();
                document.body.appendChild(this.createNoteFrame(user_id, () => {    
                    if (this.judgeUsers(user_id)) {
                        btn.title = this.lang.modify_button_title;
                    } else {
                        btn.title = this.lang.add_button_title;
                    }
                    if (typeof(callback) == 'function') {
                        callback();
                    }
                }));
            });
            return btn;
        }
        createNoteTag(user_id, tag = 'span', an_class_name = '') {
            let note_tag = document.createElement(tag);
            note_tag.className = 'ins_tag ins_tag_' + tag;
            if (an_class_name) {
                note_tag.classList.add(an_class_name);
            }
            note_tag.textContent = this.getUserFormatTag(user_id);
            return note_tag;
        }
        createListDiv(key_value, float_status = false) {
            let list_div = document.createElement('div');
            list_div.id = 'tags_' + key_value;
            list_div.className = 'ins_list_item';
            if (float_status) {
                list_div.className = 'ins_mobile_list_item';
            }
            list_div.textContent = this.config[key_value].tag;
            list_div.title = key_value + '\n' + this.config[key_value].tag;
            list_div.addEventListener('mouseenter', function() {
                for (let ele of document.querySelectorAll('#tagsList div')) {
                    ele.classList.remove('ins_highlight');
                }
                this.classList.add('ins_highlight');
            });
            list_div.addEventListener('click', function() {
                window.location.pathname = '/' + key_value + '/';
            });
            return list_div;
        }
        isUsersFromLink(link) {
            return /^\/[^/]+\/$/i.test(link.replace(location.origin, ""));
        }
        getUserIdFromLink(link) {
            return link.replace(location.origin + '/', '').replace(/\/$/, '');
        }
        doneHandle(user_id, ele, path_name, a = null, at = false, t = true) {
            if (a) {
                if (path_name) {
                    if (ele.querySelector(path_name)) {
                        let path_ele = ele.querySelector(path_name);
                        if (path_ele.querySelector('.ins_tag')) {
                            let tag_dom = path_ele.querySelector('.ins_tag');
                            if (this.judgeUsers(user_id)) {
                                tag_dom.textContent = this.getUserFormatTag(user_id);
                            } else {
                                path_ele.removeChild(tag_dom);
                            }
                        } else {
                            if (this.judgeUsers(user_id)) {
                                path_ele.appendChild(this.createNoteTag(user_id, a));
                            }
                        }
                    }
                } else {
                    if (ele.querySelector('.ins_tag')) {
                        let an_tag_dom = ele.querySelector('.ins_tag');
                        if (this.judgeUsers(user_id)) {
                            an_tag_dom.textContent = this.getUserFormatTag(user_id);
                        } else {
                            ele.removeChild(an_tag_dom);
                        }
                    } else {
                        if (this.judgeUsers(user_id)) {
                            ele.appendChild(this.createNoteTag(user_id, a));
                        }
                    }
                }
            } else {
                if (path_name) {
                    if (ele.querySelector(path_name)) {
                        let source_dom = ele.querySelector(path_name);
                        if (this.judgeUsers(user_id)) {
                            source_dom.textContent = at ? this.getUserAtTag(user_id) : this.getUserTag(user_id);
                            if (t) {
                                source_dom.title = user_id;
                            }
                            source_dom.classList.add('font_blue_color');
                        } else {
                            source_dom.textContent = at ? '@' + user_id : user_id;
                            if (t) {
                                source_dom.title = '';
                            }
                            source_dom.classList.remove('font_blue_color');
                        }
                    }
                } else {
                    if (this.judgeUsers(user_id)) {
                        ele.textContent = at ? this.getUserAtTag(user_id) : this.getUserTag(user_id);
                        if (t) {
                            ele.title = user_id;
                        }
                        ele.classList.add('font_blue_color');
                    } else {
                        ele.textContent = at ? '@' + user_id : user_id;
                        if (t) {
                            ele.title = '';
                        }
                        ele.classList.remove('font_blue_color');
                    }
                }
            }
        }
    }
    function save_Event(user_id, note_obj) {
        for (let article of document.querySelectorAll(selector.homepage.article)) {
            if (article.querySelector(selector.homepage.id)) {
                let article_user = article.querySelector(selector.homepage.id);
                let article_user_id = note_obj.getUserIdFromLink(article_user.href);
                if (article_user_id == user_id) {
                    note_obj.doneHandle(user_id, article_user);
                }
            }
            for (let comment of article.querySelectorAll(selector.homepage.comment_id)) {
                let comment_id = note_obj.getUserIdFromLink(comment.href);
                if (comment_id == user_id) {
                    note_obj.doneHandle(user_id, comment, null, null, false, false);
                }
            }
            for (let comment_at of article.querySelectorAll(selector.homepage.comment_at)) {
                let comment_at_id = note_obj.getUserIdFromLink(comment_at.href);
                if (comment_at_id == user_id) {
                    note_obj.doneHandle(user_id, comment_at);
                }
            }
            for (let pic_comment_user of (article.querySelectorAll(selector.dialog.comment_id))) {
                let pic_comment_id = note_obj.getUserIdFromLink(pic_comment_user.href);
                if (pic_comment_id == user_id) {
                    note_obj.doneHandle(user_id, pic_comment_user);
                }
            }
            for (let pic_comment_at of article.querySelectorAll(selector.dialog.comment_at)) {
                let pic_comment_at_id = note_obj.getUserIdFromLink(pic_comment_at.href);
                if (pic_comment_at_id == user_id) {
                    note_obj.doneHandle(user_id, pic_comment_at, null, null, true);
                }
            }
        }
        for (let homepage_stories of document.querySelectorAll(selector.homepage_stories.id_shell)) {
            if (homepage_stories.querySelector(selector.homepage_stories.id)) {
                let homepage_stories_id = homepage_stories.querySelector(selector.homepage_stories.id).textContent;
                if (homepage_stories_id == user_id) {
                    if (note_obj.judgeUsers(user_id)) {
                        homepage_stories.title = note_obj.getUserTag(user_id);
                    } else {
                        homepage_stories.title = '';
                    }
                }
            }
        }
        for (let user_page of document.querySelectorAll(selector.user_page.frame)) {
            if (user_page.querySelector(selector.user_page.id)) {
                let user_page_id = user_page.querySelector(selector.user_page.id).textContent;
                if (user_page_id == user_id) {
                    if (user_page.querySelector('.ins_tag_div')) {
                        let ins_tag_div = user_page.querySelector('.ins_tag_div');
                        if (note_obj.judgeUsers(user_id)) {
                            ins_tag_div.textContent = note_obj.getUserFormatTag(user_id);
                        } else {
                            ins_tag_div.parentNode.removeChild(ins_tag_div);
                        }
                    } else {
                        if (note_obj.judgeUsers(user_id)) {
                            user_page.querySelector(selector.user_page.box).after(note_obj.createNoteTag(user_id, 'div'));
                        }
                    }
                }
            }
        }
        for (let dialog of document.querySelectorAll(selector.dialog.frame)) {
            if (dialog.querySelector(selector.homepage.id)) {
                let dialog_a = dialog.querySelector(selector.homepage.id);
                let dialog_id = note_obj.getUserIdFromLink(dialog_a.href);
                if (dialog_id == user_id) {
                    note_obj.doneHandle(user_id, dialog_a);
                }
            }
            for (let comment_user of dialog.querySelectorAll(selector.dialog.comment_id)) {
                let comment_id = note_obj.getUserIdFromLink(comment_user.href);
                if (comment_id == user_id) {
                    note_obj.doneHandle(user_id, comment_user);
                }
            }
            for (let comment_at of dialog.querySelectorAll(selector.dialog.comment_at)) {
                let comment_at_id = note_obj.getUserIdFromLink(comment_at.href);
                if (comment_at_id == user_id) {
                    note_obj.doneHandle(user_id, comment_at, null, null, true);
                }
            }
        }
    }
    function init() {
        let instagram_config = {};
        let keys_array = GM_listValues();
        for (let key of keys_array) {
            if (key == 'instagram_config') {
                let old_data = GM_getValue('instagram_config');
                if (old_data !== undefined) {
                    for (let ele of old_data.user_array) {
                        let ele_id = ele.user_id;
                        instagram_config[ele_id] = {'tag': ele.user_tag};
                        GM_setValue(ele_id, instagram_config[ele_id]);
                    }
                }
                GM_deleteValue('instagram_config');
            } else {
                let key_data = GM_getValue(key);
                instagram_config[key] = key_data;
            }
        }
        let lang_str = document.documentElement.lang;
        let lang_value;
        switch (lang_str) {
            case 'zh':
            case 'zh-cn':
                lang_value = LANG.ZH;
                break;
            case 'zh-hk':
            case 'zh-tw':
                lang_value = LANG.ZH_TW;
                break;
            case 'ja':
                lang_value = LANG.JA;
                break;
            case 'ko':
                lang_value = LANG.KO;
                break;
            case 'en':
            default:
                lang_value = LANG.EN;
                break;
        }
        let note_obj = new Instagram_Note(instagram_config, lang_value);
        let arrive_option = {
            'fireOnAttributesModification': true,
            'existing': true
        };
        let style_dom = document.createElement('style');
        style_dom.type = 'text/css';
        style_dom.innerHTML = STYLE_VALUE;
        document.body.appendChild(style_dom);
        document.querySelector(selector.root).arrive(selector.search.frame, arrive_option, function() {
            this.after(note_obj.createSearchFrame());
        });
        if (note_obj.isMobilePage()) {
            document.querySelector(selector.root).arrive(selector.mobile.bottom_bar, arrive_option, function() {
                this.appendChild(note_obj.createMobileSearchButton());
            });
        }
        document.querySelector(selector.root).arrive(selector.homepage.article, arrive_option, function() {
            if (this.querySelector(selector.homepage.id)) {
                let homepage_id = this.querySelector(selector.homepage.id);
                let user_id = note_obj.getUserIdFromLink(homepage_id.href);
                if (note_obj.judgeUsers(user_id)) {
                    note_obj.doneHandle(user_id, homepage_id);
                }
                if (this.querySelector(selector.homepage.icon)) {
                    this.querySelector(selector.homepage.icon).insertAdjacentElement('beforebegin', note_obj.createNoteBtn(user_id, function() {
                        save_Event(user_id, note_obj);
                    }, 'ins_homepage_icon'));
                }
            }
            for (let comment of this.querySelectorAll(selector.homepage.comment_id)) {
                let comment_id = note_obj.getUserIdFromLink(comment.href);
                if (note_obj.judgeUsers(comment_id)) {
                    note_obj.doneHandle(comment_id, comment, null, null, false, false);
                }
            }
            this.arrive(selector.homepage.comment_at, arrive_option, (comment_at) => {
                let comment_at_id = note_obj.getUserIdFromLink(comment_at.href);
                if (note_obj.judgeUsers(comment_at_id)) {
                    note_obj.doneHandle(comment_at_id, comment_at, null, null, true);
                }
            });
            this.arrive(selector.dialog.comment_id, arrive_option, (pic_comment_user) => {
                let pic_comment_id = note_obj.getUserIdFromLink(pic_comment_user.href);
                if (note_obj.judgeUsers(pic_comment_id)) {
                    note_obj.doneHandle(pic_comment_id, pic_comment_user);
                }
            });
            this.arrive(selector.dialog.comment_at, arrive_option, (pic_comment_at) => {
                let pic_comment_at_id = note_obj.getUserIdFromLink(pic_comment_at.href);
                if (note_obj.judgeUsers(pic_comment_at_id)) {
                    note_obj.doneHandle(pic_comment_at_id, pic_comment_at, null, null, true);
                }
            });
        });
        document.querySelector(selector.root).arrive(selector.homepage_stories.id_shell, arrive_option, function() {
            if (this.querySelector(selector.homepage_stories.id)) {
                let user_id = this.querySelector(selector.homepage_stories.id).textContent;
                if (note_obj.judgeUsers(user_id)) {
                    this.title = note_obj.getUserTag(user_id);
                }
            }
        });
        document.querySelector(selector.root).arrive(selector.homepage_recommend.id, arrive_option, function() {
            let user_id = note_obj.getUserIdFromLink(this.href);
            if (note_obj.judgeUsers(user_id)) {
                note_obj.doneHandle(user_id, this, null, null, false, false);
            }
        });
        document.querySelector(selector.root).arrive(selector.user_page.frame, arrive_option, function() {
            if (this.querySelector(selector.user_page.id)) {
                let user_id = this.querySelector(selector.user_page.id).textContent;
                if (this.querySelector(selector.user_page.bar)) {
                    this.querySelector(selector.user_page.bar).after(note_obj.createNoteBtn(user_id, function() {
                        save_Event(user_id, note_obj);
                    }, 'ins_user_page_icon'));
                }
                if (note_obj.judgeUsers(user_id)) {
                    this.querySelector(selector.user_page.box).after(note_obj.createNoteTag(user_id, 'div'));
                }
            }
            for (let common_user of this.querySelectorAll(selector.user_page.common)) {
                let common_user_id = common_user.textContent;
                if (note_obj.judgeUsers(common_user_id)) {
                    common_user.title = note_obj.getUserTag(common_user_id);
                    common_user.classList.add('font_blue_color');
                }
            }
        });
        document.querySelector(selector.root).arrive(selector.stories.id_shell, arrive_option, function() {
            if (this.querySelector(selector.stories.id)) {
                let stories = this.querySelector(selector.stories.id);
                let user_id = note_obj.getUserIdFromLink(stories.href);
                if (note_obj.judgeUsers(user_id)) {
                    note_obj.doneHandle(user_id, stories, null, null, false, false);
                }
            }
        });
        document.querySelector(selector.body).arrive(selector.watch_list.initial_item, arrive_option, function() {
            if (this.querySelector(selector.watch_list.id)) {
                let initial_item = this.querySelector(selector.watch_list.id);
                let user_id = note_obj.getUserIdFromLink(initial_item.href);
                if (note_obj.judgeUsers(user_id)) {
                    note_obj.doneHandle(user_id, initial_item, null, null, false, false);
                }
            }
        });
        document.querySelector(selector.body).arrive(selector.watch_list.later_item, arrive_option, function() {
            if (this.querySelector(selector.watch_list.id)) {
                let later_item = this.querySelector(selector.watch_list.id);
                let user_id = note_obj.getUserIdFromLink(later_item.href);
                if (note_obj.judgeUsers(user_id)) {
                    note_obj.doneHandle(user_id, later_item, null, null, false, false);
                }
            }
        });
        document.querySelector(selector.body).arrive(selector.dialog.frame, arrive_option, function() {
            if (this.querySelector(selector.homepage.id)) {
                let dialog_a = this.querySelector(selector.homepage.id);
                let user_id = note_obj.getUserIdFromLink(dialog_a.href);
                if (note_obj.judgeUsers(user_id)) {
                    note_obj.doneHandle(user_id, dialog_a);
                }
                if (this.querySelector(selector.homepage.icon)) {
                    this.querySelector(selector.homepage.icon).insertAdjacentElement('beforebegin', note_obj.createNoteBtn(user_id, function() {
                        save_Event(user_id, note_obj);
                    }, 'ins_homepage_icon'));
                }
            }
            for (let like of this.querySelectorAll(selector.homepage.comment_id)) {
                let like_id = note_obj.getUserIdFromLink(like.href);
                if (note_obj.judgeUsers(like_id)) {
                    note_obj.doneHandle(like_id, like, null, null, false, false);
                }
            }
            this.arrive(selector.dialog.comment_id, arrive_option, (comment_user) => {
                let comment_id = note_obj.getUserIdFromLink(comment_user.href);
                if (note_obj.judgeUsers(comment_id)) {
                    note_obj.doneHandle(comment_id, comment_user);
                }
            });
            this.arrive(selector.dialog.comment_at, arrive_option, (comment_at) => {
                let comment_at_id = note_obj.getUserIdFromLink(comment_at.href);
                if (note_obj.judgeUsers(comment_at_id)) {
                    note_obj.doneHandle(comment_at_id, comment_at, null, null, true);
                }
            });
        });
        document.querySelector(selector.root).arrive(selector.request.follow, arrive_option, function() {
            let user_id = note_obj.getUserIdFromLink(this.href);
            if (note_obj.judgeUsers(user_id)) {
                note_obj.doneHandle(user_id, this, null, null, false, false);
            }
        });
        document.querySelector(selector.root).arrive(selector.user_page.suggest, arrive_option, function() {
            let user_id = note_obj.getUserIdFromLink(this.href);
            if (note_obj.judgeUsers(user_id)) {
                note_obj.doneHandle(user_id, this, null, null, false, false);
            }
        });
    }
    init();
})();