//一次只 run 一次
var tagUserList = false;

$(document).ready(function() {
    $(".showMsgBox").on("click", function(e) {
        e.preventDefault();

        let pid = $(this).data('pid');
        $.ajax({
            url: '/ajax/account/check_login_status.php',
            type:'POST',
            success:function(data){
                var obj = JSON.parse(data);
                if (obj.link) {
                    login_confirm(obj.link);
                }

                if (obj['error-popup']) {
                    var link = '';
                    if (obj['error']['link'] && obj['error']['link'] != '') {
                        link = obj['error']['link'];
                    }
                    $.fancyAlert({
                        titlesize : 't4',
                        title     : obj.error.msg.title,
                        msgsize   : 'o-fSubMini',
                        message   : obj.error.msg.desc,
                        model     : true,
                        link      : link,
                        close     : '',
                    });
                }

                // 關閉其它編輯框
                $(".cancelBtn").trigger("click");
                $(".emotion").addClass('hidden');
                $(".msg-textarea-input").val("");
                $('.MsgBox-' + pid).find('.msg-word-count').html('0/100');
                $(".MsgBox-" + pid).toggleClass('hidden');

                // tag dom
                dealTagUserDOM();
            }
        });
    })

    $(".send_msg").on("click", function() {
        $('.emotion').addClass('hidden');
        $(".MsgBox").addClass('hidden');

        let that = $(this);
        if (that.attr('disabled') == 'disabled') {
            return false;
        }
        that.attr('disabled', true);
        var tag_uid = $(this).attr("data-tagid");
        var tag_uname = $(this).attr("data-taguname");
        var pid = $(this).data('pid');
        var tid = $(this).data('tid');
        var page = $(this).data('p');
        var msg_pid = '#msg_'+pid;

        var msg = stripHtml($(msg_pid).val());
        var msg_area = get_msg_area($(this));

        //tag user
        if (tag_uid > 0 && tag_uname != '') {
            msg = msg.replace("@" + tag_uname, "@" + tag_uid);
        }

        var msg_obj = check_msg(msg, tag_uname.length+1);
        if ( ! msg_obj['status']) {
            msg_area.removeClass('hidden');
            msg_area.addClass('is-error');
            msg_area.find('.o-formError span').html(msg_obj['err_msg']);
            $(msg_pid).focus();
            that.removeAttr('disabled');
            return false;
        }

        localStorageEmotion();

        var post_obj = {
            'mode' : 'add',
            'pid'  : pid,
            'tid'  : tid,
            'msg'  : msg,
            'page' : page,
            'tag_uid' : tag_uid,
            'tag_uname' : tag_uname
        }

        $.post('/ajax/forum/message.php', post_obj, function(result) {
            that.removeAttr('disabled');
            if (result['status'] == 'success') {
                if ($(".msg-"+pid).length == 0) {
                    build_msg_area(msg_pid, pid);
                }
                $(msg_pid).val('');
                var cnt = build_content(pid, tid, result['data'], 1, 0, 1);
                if ($(".msg-"+pid).html().indexOf('floor-show') == -1) {
                    cnt = cnt.replace('floor-show', '');
                }
                cnt = styleSmileFormat(cnt);
                $(".msg-"+pid).append(cnt);
            } else if (result['status'] == 'fail') {
                if (result['link']) {
                    login_confirm(result['link']);
                } else if (result['error-popup']) {
                    var link = '';
                    if (result['error']['link'] && result['error']['link'] != '') {
                        link = result['error']['link'];
                    }
                    form_popup(result['error']['msg'], link);
                } else if (result['popForceAd']) {
                    $('.addForceAd').remove();
                    $('body').append($('<div class="addForceAd"></div>').html(result['popForceAd']));
                } else {
                    $.fancyAlert({
                        popUpsize : 'c-popUp--sm',
                        icon      : 'c-icon--lightboxMsg c-icon--clapGn',
                        titlesize : 't4',
                        title     : result['error'],
                        msgsize   : 'o-fSubMini',
                        message   : '',
                        smallBtn  : true,
                        model     : true,
                        close     : ''
                    });
                }
            }
        }, "json");
    })

    $(".showMsg").on("click", function(e) {
        e.preventDefault();

        //關閉其它編輯框
        $(".cancelBtn").trigger("click");

        var listtotal = $(this).data('magtotal');
        var pid = $(this).data('pid');
        var tid = $(this).data('tid');
        var Msg = ".msg-" + pid;
        $(this).toggleClass('is-open');

        if ($(Msg + " > .floor-show").length == 0 && $(Msg + " > .floor-hide").length == 0) {
            var post_obj = {
                'pid' : pid
            }

            $.post('/ajax/forum/message_list.php', post_obj, function(result) {
                if (result["status"] == "success") {
                    listtotal = result["data_total"];
                    msg_item_total = $(Msg).find('.msgItem').length;
                    var flag = listtotal - msg_item_total;
                    if (result["data"] != null || listtotal > 0) {
                        var cnt = "";
                        $.each(result["data"], function(index, value) {
                            cnt += build_content(pid, tid, value, index, listtotal, flag);
                        });
                        cnt = styleSmileFormat(cnt);
                        $(Msg).html(cnt);
                        if (listtotal > result["data"].length) {
                            $(Msg).attr('data-blackmsg-total', (listtotal - result["data"].length));
                        }
                    }
                }
            }, "json");

            $(this).find('span').text('收合留言');
            $(this).data( "magtotal", listtotal);
        } else {
            if ($(Msg + ' > .floor-hide').css("display") != "none"){
                $(Msg + ' > .floor-hide').hide();
                black_total = ($(Msg).data('blackmsg-total')) ? $(Msg).data('blackmsg-total') : 0;
                listtotal   = (listtotal+black_total);
                if (listtotal > 2) {
                    var total = listtotal - 2;
                    if (isMobile) {
                        $(this).find('span').text('更多(' + total + ')');
                    } else {
                        $(this).find('span').text('還有 ' + total + ' 則留言');
                    }
                }
            } else {
                $(Msg + ' > .floor-hide').show();
                $(this).find('span').text('收合留言');
            }
        }
    })

    //smile
    var dark = '';
    if ($('link[href^="https:\/\/attach2\.mobile01\.com\/css\/main-set-dark.css"]').length || $('link[href^="https:\/\/attach2\.mobile01\.com\/css\/mobile-main-set-dark.css"]').length) {
        dark = 'dark/';

        $(".emotionList .l-tab__container img").each(function() {
            var that = $(this);
            var srccontent = that.attr("src");
            if (typeof(srccontent) != 'undefined') {
                srccontent.replace(/\/\/attach2\.mobile01\.com\/images\/emotions\/(?!.*dark\/)(.*?).gif/ig, function(matched, p1) {
                    that.attr("src", '//attach2.mobile01.com/images/emotions/dark/'+p1+'.gif');
                });
            }
        });
    }

    var reg_str = $.map(smile_arr, function(val, key) {
      return key;
    }).join('|');

    var searchText = "\\[(" + reg_str + ")\\]";
    var regExp = new RegExp(searchText, 'g');
    $('.msgContent').each(function () {
        var html = $(this).html();
        var newhtml = styleSmileFormat(html);

        $(this).html(newhtml);
    });

    function styleSmileFormat(propertyName) {
        function replaceSmile(match, offset) {
           var index = offset.replace(/(\.|\+|\$|\^)/g, "\\$1");
           var img = '<img src="//attach2.mobile01.com/images/emotions/' + dark + smile_arr[index] + '" title="' +  offset + '" class="post-smile" />'
           return img;
        }
        return propertyName.replace(regExp, replaceSmile);
    }

    $(document).on("click", '.emotionBtn', function(e) {
        e.preventDefault();

        var html = $('.emotionList').html();

        if (isMobile) {
            $(this).closest('.l-replyItem__main').find('.emotion').html(html).toggleClass('hidden');

            new Swiper('[data-tab-slider="fixWidth"]', {
                slideClass: 'c-tabNav__item',
                wrapperClass: 'c-tabNav__wrap',
                slidesPerView: $('[data-tab-slider="fixWidth"] .c-tabNav__item').length >= 4 ? 4 : $('[data-tab-slider="fixWidth"] .c-tabNav__item').length,
                watchOverflow: true,
                spaceBetween: 0,
                navigation: {
                    nextEl: '.o-tabSwiperNav--next',
                    prevEl: '.o-tabSwiperNav--prev',
                    disabledClass: 'is-disabled'
                },
                breakpointsInverse: true,
                breakpoints: {
                    1024: {
                        slidesPerView: $('[data-tab-slider="fixWidth"] .c-tabNav__item').length >= 4 ? 4 : $('[data-tab-slider="fixWidth"] .c-tabNav__item').length
                    }
                }
            });
        } else {
            $(this).closest('.l-leaveMsg__msg').find('.emotion').html(html).toggleClass('hidden');
        }
    });

    $(document).on('click', '.emotion > .l-tab__container > a, .emotion > a', function(e) {
        if (isMobile) {
            var input_area = $(this).closest('.l-replyItem__main').find('.msg-textarea-input');
        } else {
            var input_area = $(this).closest('.l-leaveMsg__msg').find('.msg-textarea-input');
        }
        var add_text = '[' + $(this).find('img').attr('title') + ']';

        input_area.insertAtCaret(add_text);
    });

    $.fn.extend({
        insertAtCaret: function(myValue) {
            return this.each(function() {
                if (document.selection) { //For browsers like Internet Explorer
                    this.focus();
                    var sel = document.selection.createRange();
                    sel.text = myValue;
                    this.focus();
                } else if (this.selectionStart || this.selectionStart == '0') { //For browsers like Firefox and Webkit based
                    var startPos = this.selectionStart;
                    var endPos = this.selectionEnd;
                    var scrollTop = this.scrollTop;
                    this.value = this.value.substring(0, startPos) +
                    myValue + this.value.substring(endPos,this.value.length);
                    this.focus();
                    this.selectionStart = startPos + myValue.length;
                    this.selectionEnd = startPos + myValue.length;
                    this.scrollTop = scrollTop;
                } else {
                    this.value += myValue;
                    this.focus();
                }
            });
        }
    });

    if ( ! isMobile) {
        //留言回報
        build_fance_select("#msg_violation_type");
    }

    $(document).on("click touchstart", '.msgreport', function(e) {
        e.preventDefault();

        var mid = $(this).data('mid');
        var pid = $(this).data('pid');
        var page = $(this).data('page');
        $.fancybox.open({
            src  : '#popUpMsgReport',
            type : 'inline',
            opts : {
                beforeShow: function(instance, current) {
                   $("#popup_mid").val(mid);
                   $("#popup_pid").val(pid);
                   $("#popup_page").val(page);
                }
            }
        });
    });

    $(document).on("click", '#popup_msend', function() {
        var post_obj = {
            'pid': $("#popup_pid").val(),
            'mid' : $("#popup_mid").val(),
            'page' : $("#popup_page").val(),
            'report_type'  : $("#msg_violation_type").val()
        };

        form_post($(this), "ajax/forum/message_report.php", post_obj);
    });

    // 留言連結
    $(document).on("click touchstart", '.msgshare', function(e) {
        e.preventDefault();

        var mid = $(this).data('mid');
        share_url(mid);
    });

    //編輯
    $(document).on("click touchstart", '.msgedit', function(e) {
        e.preventDefault();

        //關閉其它編輯框
        $(".cancelBtn").trigger("click");
        $(".MsgBox").addClass('hidden');

        dealTagUserDOM();

        var pid = $(this).data('pid');
        var tid = $(this).data('tid');
        var mid = $(this).data('mid');
        var page = $(this).data('page');

        var thisDom = $(this).closest('.msgItem')

        //處理 smile
        var msg_temp = thisDom.find('.msgContent').html().trim();
        var re_smile = /<img src="\/\/attach2\.mobile01\.com\/images\/emotions\/[^"]*" title="([^"]*)" class="post-smile">/g;
        var msg = msg_temp.replace(re_smile, '[$1]');

        //處理 tag user
        var re_tagUser = /<a href="userinfo\.php\?id=([0-9]*)"[^>]*>([^<]*)<\/a>/i;
        var storageMsg = stripHtml(msg.replace(re_tagUser, '[@$1]-[@$2]'));

        var tag_id = 0;
        var tag_name = '';
        var uArray = msg.match(re_tagUser);
        if (Array.isArray(uArray)) {
            tag_id = uArray[1];
            tag_name = uArray[2];

            tagUserList = true;
        }

        msg = stripHtml(msg.replace(re_tagUser, '@$2'));
        var msgLight = msg.length;
        if (tag_name.length > 0) {
            msgLight = msgLight - tag_name.length - 1;
        }

        //暫存 localStorage
        window.localStorage.setItem('usermsg', storageMsg);

        if (isMobile) {
            var EditHtml = '<div class="msg-textarea-area">'+
                        '<textarea id="msgEdit_'+ mid +'" class="c-textarea msg-textarea-input" placeholder="請輸入" data-pid="'+ pid +'" onkeyup="checkEditLength(this);">'+ msg +'</textarea>'+
                        '</div>'+
                        '<div class="o-formError"><span></span></div>'+
                        '<div class="msg-box-tool l-replyItem__tool">'+
                        '<ul class="l-toolBar l-toolBar--fixWidth">'+
                        '<li class="l-toolBar__item">'+
                        '<label class="msg-word-count o-fNotes">'+ msgLight +'/100</label>'+
                        '</li>'+
                        '<li class="l-toolBar__item">'+
                        '<a class="emotionBtn">'+
                        '<i class="c-icon c-icon--fsm c-icon--emotion"></i>'+
                        '</a>'+
                        '</li>'+
                        '<li class="l-toolBar__item">'+
                        '<a class="cancelBtn">'+
                        '<i class="c-icon c-icon--fsm c-icon--cancel"></i>'+
                        '</a>'+
                        '</li>'+
                        '<li class="l-toolBar__item">'+
                        '<a class="send_edit_msg" data-mid="'+ mid +'" data-pid="'+ pid +'" data-tid="'+ tid +'" data-page="'+ page +'" data-tagid="'+ tag_id +'" data-taguname="'+ tag_name +'">'+
                        '<i class="c-icon c-icon--fsm c-icon--planeGn"></i>'+
                        '</a>'+
                        '</li>'+
                        '</ul>'+
                        '</div>' +
                        '<div class="emotion l-articleReply hidden"></div>';

            thisDom.find('.msgContent').html(EditHtml);
        } else {
            $('.messageList .msgContent').css({"max-height":"none"});

            var EditHtml =  '<div class="l-formRow">'+
                        '<div class="c-iconBox c-iconBox--suffix msg-textarea-area">'+
                        '<textarea id="msgEdit_'+ mid +'" class="c-textarea msg-textarea-input" placeholder="請輸入" data-pid="'+ pid +'" onkeyup="checkEditLength(this);">'+ msg +'</textarea>'+
                        '<span class="msg-word-count o-fNotes" style="right:55px">'+ msgLight +'/100</span>'+
                        '<a href="#" class="emotionBtn" style="right:30px"></a>'+
                        '<a href="#" class="cancelBtn"></a>'+
                        '</div>'+
                        '<div class="l-searchBar__item l-searchBar__item--btn">'+
                        '<a class="c-btn c-btn--primary c-btn--md send_edit_msg" data-mid="'+ mid +'" data-pid="'+ pid +'" data-tid="'+ tid +'" data-page="'+ page +'" data-tagid="'+ tag_id +'" data-taguname="'+ tag_name +'">確定</a>'+
                        '</div>'+
                        '</div>';

            thisDom.find('.msgContent').html(EditHtml).after('<div class="o-formError"><span></span></div><div class="emotion l-articleReply hidden"></div>');
        }

        //tool
        thisDom.find('.msgTool').hide();
    });

    $(document).on("click touchstart", '.send_edit_msg', function(e) {
        e.preventDefault();

        $('.emotion').addClass('hidden');

        var tag_uid = $(this).attr("data-tagid");
        var tag_uname = $(this).attr("data-taguname");
        var page = $(this).data('page');
        var pid = $(this).data('pid');
        var tid = $(this).data('tid');
        var mid = $(this).data('mid');
        var msg_mid = '#msgEdit_'+mid;
        var msg = stripHtml($(msg_mid).val());

        //tag user
        if (tag_uid > 0 && tag_uname != '') {
            msg = msg.replace("@" + tag_uname, "@" + tag_uid);
        }

        $('.msgItem').removeClass('is-error');
        var msg_area = $(this).closest('.msgItem');

        var msg_obj = check_msg(msg, tag_uname.length+1);
        if ( ! msg_obj['status']) {
            msg_area.addClass('is-error');
            msg_area.find('.o-formError span').html(msg_obj['err_msg']);
            $(msg_mid).focus();
            return false;
        }

        localStorageEmotion();

        var post_obj = {
            'mode' : 'edit',
            'page' : page,
            'tid'  : tid,
            'pid'  : pid,
            'mid'  : mid,
            'msg'  : msg,
            'tag_uid' : tag_uid,
            'tag_uname' : tag_uname
        }

        $.post('/ajax/forum/message.php', post_obj, function(result) {
            if (result['status'] == 'success') {
                var msg = styleSmileFormat(result['data']['msg']);
                //留言 DOM 處理
                editDom(msg_area, msg);
            } else if (result['status'] == 'fail') {
                if (result['link']) {
                    login_confirm(result['link']);
                } else {
                    $.fancyAlert({
                        popUpsize : 'c-popUp--sm',
                        icon      : 'c-icon--lightboxMsg c-icon--clapGn',
                        titlesize : 't4',
                        title     : result['error'],
                        msgsize   : 'o-fSubMini',
                        message   : '',
                        smallBtn  : true,
                        model     : true,
                        close     : ''
                    });
                }
            }
        }, "json");
    })

    //取消編輯
    $(document).on("click touchstart", '.cancelBtn', function(e) {
        e.preventDefault();

        $(".c-list-group").removeClass('is-active');

        //取出 msg 資料
        var msg = stripHtml(window.localStorage.getItem('usermsg'));

        //移除 localStorage
        window.localStorage.removeItem('usermsg');

        var thisDom = $(this).closest('.msgItem');
        //留言 DOM 處理

        //處理 tag user
        var tagUser = /\[@([0-9]*)\]-\[@([^\]]*)\]/g;
        msg = msg.replace(tagUser, '<a href="userinfo.php?id=$1" class="c-link c-link--gn">$2</a>');

        msg = styleSmileFormat(msg);
        editDom(thisDom, msg);
    });

    $(document).on('click', '.mag_user_link', function(e) {
        $(".c-list-group").removeClass('is-active');

        var id = $(this).data('id');

        if (isMobile) {
            var thisDom = $(this).closest('.l-replyItem__main');
            var input_area = thisDom.find('.msg-textarea-input');
        } else {
            var thisDom = $(this).closest('.l-leaveMsg__msg');
            var input_area = thisDom.find('.msg-textarea-input');
        }
        var uname = $(this).find(".uname").html();
        var add_text = uname + ' ';

        input_area.insertAtCaret(add_text);

        thisDom.find('.send_msg, .send_edit_msg').attr('data-tagid', id).attr('data-taguname', uname);
    });
});

//處理 tag user dom
function dealTagUserDOM() {
    tagUserList = false;
    $(".c-list-group").removeClass('is-active');
    $('.send_msg, .send_edit_msg').attr('data-tagid', '0');
    $('.send_msg, .send_edit_msg').attr('data-taguname', '');
}

//編輯和取消留言 DOM 處理
function editDom(thisDom, msg) {
    thisDom.find('.msgContent').html(msg);
    thisDom.find('.o-formError').remove();
    thisDom.find('.emotion').remove();
    thisDom.removeClass('is-error');
    //tool
    thisDom.find('.msgTool').show();

    if (!isMobile) {
        //恢復原本css
        $('.messageList .msgContent').css({"max-height":"4.2em"});
    }
}

function get_msg_area(that) {
    $('.MsgBox').removeClass('is-error');
    return that.closest('.MsgBox');
}

function date (time) {
    var date_time = new Date();
    time = time*1000;
    date_time.setTime(time);
    var year   = date_time.getFullYear();
    var month  = ('0'+ (date_time.getMonth() + 1)).substr(-2);
    var date   = ('0'+ date_time.getDate()).substr(-2);
    var hour   = ('0'+ date_time.getHours()).substr(-2);
    var minute = ('0'+ date_time.getMinutes()).substr(-2);
    return year + "-" + month + "-" + date+" "+hour+":"+minute;
};

function check_msg(msg, tag_uname_length) {
    if ($.trim(msg) == '') {
        return {'status': false, 'err_msg': '請輸入留言'};
    }
    // var chk_wording = check_wording(msg);
    // if (chk_wording != '') {
    //     return {'status': false, 'err_msg': '禁用注音符號：' + chk_wording};
    // }

    var msgLength = msg.length;
    if (tag_uname_length > 0) {
        msgLength = msgLength - tag_uname_length;
    }

    if (msgLength > 100) {
        return {'status': false, 'err_msg': '留言不得超過100個字'};
    }
    return {'status': true, 'content': msg};
}

function check_wording(text) {
    var regex = /[\u3105-\u3129\u02CA\u02C7\u02CB\u02D9]/;
    var match = regex.exec(text);
    if (match != null) {
        return match[0];
    }
    return '';
}

function stripHtml(html) {
   let doc = new DOMParser().parseFromString(html, 'text/html');
   return doc.body.textContent || "";
}

//自動縮放
function msgBoxHeight(msg, mode) {
    var msgboxH = 44;
    if (msg.scrollHeight >= msgboxH) {
        $(msg).css({"height": msg.scrollHeight + 'px'});
    }

    if (!isMobile) {
        var thisDom = $(msg).closest('.l-leaveMsg__msg');

        if (msg.scrollHeight < msgboxH) {
            thisDom.find('.msg-word-count').css({"top" : "25%"});
            thisDom.find('.emotionBtn').css({"top" : "25%"});
        }

        var adjustedHeight = msg.clientHeight;
        adjustedHeight = Math.max(msg.scrollHeight,adjustedHeight);
        if (adjustedHeight > msg.clientHeight){
            thisDom.find('.l-searchBar__item').css({"vertical-align" : "top"});
            thisDom.find('.msg-word-count').css({"top" : "8px"});
            thisDom.find('.emotionBtn').css({"top" : "8px"});
            if (mode == 'edit') {
                thisDom.find('.msg-textarea-input').css({"padding-right" : "110px"});
                thisDom.find('.cancelBtn').css({"top" : "8px"});
            }
        }
    }
}

//tag user list
function tagPerson(msg, mode) {
    var thisMsg = msg.value;

    if (isMobile) {
        var thisDom = $(msg).closest('.l-replyItem__main');
    } else {
        var thisDom = $(msg).closest('.l-leaveMsg__msg');
    }

    if (mode == 'add') {
        var thisboxDom = thisDom.find('.send_msg');
    } else {
        var thisboxDom = thisDom.find('.send_edit_msg');
    }

    //處理 tag name 刪除
    var taguname = thisboxDom.attr('data-taguname');
    var tagnameLength = taguname.length;
    var findtagname = taguname.substr(0, tagnameLength-1);
    if (tagnameLength > 0) {
        if (thisMsg.substr(thisMsg.length-tagnameLength,tagnameLength) == '@' + findtagname) {
            $(msg).val(thisMsg.replace('@' + findtagname, ""));

            // tag dom
            dealTagUserDOM();

            tagnameLength = 0;
        } else {
            tagnameLength = tagnameLength+1;
        }
        return tagnameLength;
    }

    var lastmag = msg.value.substr(msg.value.length-1,1)
    if (lastmag != '@') {
        // tag dom
        dealTagUserDOM();

        return false;
    }

    //一次只會run一次
    if (tagUserList) {
        return false;
    }

    //textarea position
    var element = msg;
    var coordinates = getCoordinates(element, element.selectionEnd);
    var left = coordinates.left;

    var pid = $(msg).data('pid');
    var post_obj = {
        'pid' : pid
    }

    var parentDom = $(msg).closest('.messageList');
    if (parentDom.find('.mag_users').length == 0) {
        $.post('/ajax/forum/message_users.php', post_obj, function(result) {
            if (result["status"] == "success") {
                if (result["data"] != null) {
                    var cnt = "";
                    $.each(result["data"], function(index, value) {
                        cnt += build_user_content(value);
                    });

                    //組成共用 users
                    parentDom.find('.MsgBox').after('<div class="mag_users hidden"><div class="c-group__options">' + cnt + '</div></div>');
                    //放到呼叫的位置
                    var html = parentDom.find('.mag_users').html();
                    var msg_user_html = '<div class="mag_user_list c-list-group is-active">' + html + '</div>';
                    thisDom.find('.o-formError').before(msg_user_html);
                    thisDom.find('.mag_user_list').css("margin-left",left + "px");
                }
            }
        }, "json");
    } else {
        if (thisDom.find('.mag_user_list').length == 0) {
            //放到呼叫的位置
            var html = parentDom.find('.mag_users').html();
            var msg_user_html = '<div class="mag_user_list c-list-group is-active">' + html + '</div>';
            thisDom.find('.o-formError').before(msg_user_html);
        } else {
            thisDom.find('.mag_user_list').addClass('is-active');
        }

        thisDom.find('.mag_user_list').css("margin-left",left + "px");
    }

    tagUserList = true;

    return 0;
}

function build_user_content(data) {
    var list = '<a class="c-group__link mag_user_link" data-id="' + data.uid + '">'+
                '<span><img class="c-memberPic c-memberPic--sm" src="' + data.avatar + '" alt="' + data.uname + '"></span>'+
                '<span class="u-gapLeft--sm uname">' + data.uname + '</span>' +
                '</a>';
    return list;
}

//顯示我要留言框字數
function checkLength(msg) {
    //處理 tag user
    var tagnameLength = tagPerson(msg, 'add');

    //自動縮放
    msgBoxHeight(msg);

    var maxChars = 100;
    var msg_area = get_msg_area($(msg));
    var wordLength = msg.value.length;
    if (wordLength > 0 && tagnameLength > 0) {
        wordLength = wordLength - tagnameLength;
        if (wordLength < 0) {
            wordLength = 0;
        }
    }

    if (isMobile) {
        $(msg).closest('.l-replyItem__main').find('.msg-word-count').html(wordLength + '/100');
    } else {
        $(msg).closest('.msg-textarea-area').find('.msg-word-count').html(wordLength + '/100');
    }

    if (msg.value.length > maxChars) {
        msg_area.addClass('is-error');
        msg_area.find('.o-formError span').html('留言不得超過100個字');
    } else {
        msg_area.removeClass('is-error');
    }
    return true;
}

//顯示編輯框字數
function checkEditLength(msg) {
    //處理 tag user
    var tagnameLength = tagPerson(msg, 'edit');

    //自動縮放
    msgBoxHeight(msg, 'edit');

    var maxChars = 100;
    $('.msgItem').removeClass('is-error');
    var msg_area = $(msg).closest('.msgItem');
    var wordLength = msg.value.length;
    if (wordLength > 0 && tagnameLength > 0) {
        wordLength = wordLength - tagnameLength;
        if (wordLength < 0) {
            wordLength = 0;
        }
    }
    $(msg).closest('.msgContent').find('.msg-word-count').html(wordLength + '/100');
    if (msg.value.length > maxChars) {
        msg_area.addClass('is-error');
        msg_area.find('.o-formError span').html('留言不得超過100個字');
    } else {
        msg_area.removeClass('is-error');
    }
    return true;
}

//處裡 textarea position
var properties = [
  'direction',
  'boxSizing',
  'width',
  'paddingTop',
  'paddingRight',
  'paddingBottom',
  'paddingLeft'
];
function getCoordinates(element, position) {
  var div = document.createElement('div');
  div.id = 'input-textarea-position-div';
  document.body.appendChild(div);

  var style = div.style;
  var computed = window.getComputedStyle ? window.getComputedStyle(element) : element.currentStyle;  // currentStyle for IE < 9

  style.wordWrap = 'break-word';

  properties.forEach(function (prop) {
    style[prop] = computed[prop];
  });

  div.textContent = element.value.substring(0, position);

  var span = document.createElement('span');
  span.textContent = element.value.substring(position) || '.';
  div.appendChild(span);

  var coordinates = {
    left: span.offsetLeft
  };

  document.body.removeChild(div);

  return coordinates;
}