/*
 * taggingtext.js
 * This file is part of Extraction-interface.
 *
 * Extraction-interface is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * Extraction-interface is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Extraction-interface.  If not, see <http://www.gnu.org/licenses/>.
*/

/*! \file
 * There are javscript functions for Extractapp.
 * It is included by views/Extractapp/maintemplate.php and maintemplate_local.php.
*/

// === for taggingtext.php ===
var stringBeforeChange="";
var stringBeforeChangeStack = [];
var lastAddTag="";

var regex_element_index = 0;

window.onbeforeunload = function() {
    //return "Unsaved data will be lost.";
};

function setCookie(value) {
    document.cookie = "cookie-msg-test=" + value + "; path=/";
    return true;
}

function getCookie() {
    var cname = "cookie-msg-test=";
    var ca = document.cookie.split(';');

    for (var i=0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(cname) == 0) {
            return c.substring(cname.length, c.length);
        }
    }
    return null;
}

/*
$(document).on("mouseup", function (e) {
    e.stopPropagation();
    $('.questionMarkClass').remove();
    $('.tagItemDivClass').remove();
    $.bootstrapGrowl("Remove");
});


$(document).on("click", '.questionMarkClass', function (e) {
    e.stopPropagation();
});
*/
function tagTime() {
    saveUndoText();
    var el = document.getElementById("editable-area");
    var str="" + el.innerHTML;

    var regexText=/(<?php echo $wordlistArray[0][2]; ?>)(○?)(一|二|三|四|五|六|七|八|九)?(○?)(十)?(○?)(一|二|三|四|五|六|七|八|九|元|十)(○?)(年)/g;
    var replaceText="<time>$1$2$3$4$5$6$7$8$9</time>";
    var matchedCount = str.match(regexText).length;
    str = str.replace(regexText, replaceText);

    var regexText=/(?!(>))(<?php echo $wordlistArray[0][2]; ?>)/g;
    var replaceText="<time>$1$2</time>";
    matchedCount += str.match(regexText).length;
    el.innerHTML = str.replace(regexText, replaceText);

    var regexText=/(一|二|三|四|五|六|七|八|九)?(○?)(十)?(○?)(一|二|三|四|五|六|七|八|九|元|十)(○?)(年)(?!(<))/g;
    var replaceText="<time>$1$2$3$4$5$6$7</time>";
    matchedCount += str.match(regexText).length;
    el.innerHTML = str.replace(regexText, replaceText);

    $.bootstrapGrowl( "Tagged "+matchedCount+" entities!" );
}

function removeEmptyNodes( node ) {
    if (node.hasChildNodes()) {
        var children = node.childNodes;
        for (var i = 0; i < children.length; i++) {
            if (children[i].textContent == "" && children[i].innerHTML == "" && children[i].nodeName != "BR") {
                //console.log("removing child: "+children[i].nodeName+", its parent: "+node.nodeName);
                node.removeChild(children[i]);
            } else {
                //console.log("recursive to "+children[i].nodeName+"("+children[i].textContent+")")
                removeEmptyNodes(children[i]);  // recursive
            }

        };
    } else {
        //console.log(node.nodeName+" ("+node.textContent+") has no childNodes.");
    }

}


function removeTagTitle( range, container ) {
    saveUndoText();
    range.deleteContents();

    lastAddTag = $('#RemoveTitletagType').val();

    var stringtemp = container.innerHTML;

    if ( $('#RemoveTitletagName').val() == "" ) {
        var regexText="<"+lastAddTag+">〈(.*?)〉</"+lastAddTag+">";
        var replaceText="";
        stringtemp = stringtemp.replace(new RegExp(regexText, "g"), replaceText);

        var regexText="<"+lastAddTag+">(.*?)</"+lastAddTag+">";
        var replaceText="$1";
        stringtemp = stringtemp.replace(new RegExp(regexText, "g"), replaceText);
    } else {
        var regexText="<"+lastAddTag+">〈"+$('#RemoveTitletagName').val()+"〉</"+lastAddTag+">";
        var replaceText="";
        stringtemp = stringtemp.replace(new RegExp(regexText, "g"), replaceText);

        var regexText="<"+lastAddTag+">("+$('#RemoveTitletagName').val()+")</"+lastAddTag+">";
        var replaceText="$1";
        stringtemp = stringtemp.replace(new RegExp(regexText, "g"), replaceText);
    }

    var newdiv = document.createElement("aaaa");
    newdiv.innerHTML = stringtemp;
    range.insertNode(newdiv);

    var el = document.getElementById("editable-area");

    var regexText=/<aaaa>/gi;
    var replaceText='';
    el.innerHTML = el.innerHTML.replace(regexText, replaceText);

    var regexText=/<\/aaaa>/gi;
    var replaceText='';
    el.innerHTML = el.innerHTML.replace(regexText, replaceText);

    $('.tagItemDivClass').remove();
}

function addTagTitle( range, container ) {
    // TODO: bug: here generate self-closing tag when the end of text with tag on it

    saveUndoText();

    var el = document.getElementById("editable-area");

    lastAddTag = $('#TitletagType').val();
    var tag = "<"+$('#TitletagType').val()+">〈"+$('#TitletagName').val()+"〉</"+$('#TitletagType').val()+">";

    range.deleteContents(); // may causes self-closing tag

    var stringtemp = container.innerHTML;

    var regexText=/<br>/g;
    var replaceText="<br>"+tag;
    stringtemp = stringtemp.replace(regexText, replaceText);

    var newdiv = document.createElement("aaaa");
    newdiv.innerHTML = tag+stringtemp;

    range.insertNode(newdiv);


    var regexText=/<aaaa>/gi;
    var replaceText='';
    el.innerHTML = el.innerHTML.replace(regexText, replaceText);

    var regexText=/<\/aaaa>/gi;
    var replaceText='';
    el.innerHTML = el.innerHTML.replace(regexText, replaceText);

    $('.tagItemDivClass').remove();

    removeEmptyNodes(el);   // removing self-closing tags

}

function cleanUpTextArea() {
    var el = document.getElementById("editable-area");

    var regexText=/<div>/gi;
    var replaceText='<br>';
    el.innerHTML = el.innerHTML.replace(regexText, replaceText);

    var regexText=/<\/div>/gi;
    var replaceText='';
    el.innerHTML = el.innerHTML.replace(regexText, replaceText);


    var regexText=/<span style="(.*?)">/gi;
    var replaceText='';
    el.innerHTML = el.innerHTML.replace(regexText, replaceText);

    var regexText=/<\/span>/gi;
    var replaceText='';
    el.innerHTML = el.innerHTML.replace(regexText, replaceText);
}

function Undo() {
    $("#loading").show();

    if ( stringBeforeChangeStack.length > 0 ) {
        var el = document.getElementById("editable-area");
        el.innerHTML = stringBeforeChangeStack.pop();
    } else {
        var el = document.getElementById("buttonUndo");
        el.disabled = true;
    }

    $("#loading").hide();
}

function saveUndoText() {
    var el = document.getElementById("editable-area");
    //stringBeforeChange = el.innerHTML;
    stringBeforeChangeStack.push(el.innerHTML);
    var el = document.getElementById("buttonUndo");
    el.disabled = false;
}

var EditingMode = "tagging";

function switchToEditingMode(ele, new_mode){

  if(EditingMode === new_mode) return;

  EditingMode = new_mode;

  saveUndoText();
  document.getElementById("editable-area").contentEditable = true;

  // disable/close functions
  $("button").attr("disabled", true);
  $("#editTextId").attr("disabled", false);
  $("#popups").css("display","none"); // close the popup windows
  $("input").attr('disabled', true); // disable input
  // clean editable-area
  $('.questionMarkClass').remove();
  $('.tagItemDivClass').remove();

  $('#smart-regex-area').css("display","none");
  $('#tag-function-area').css("display","none");

  $('#editable-area-wraper').parent().toggleClass("EditingMode");
}

function switchToTaggingMode(ele, new_mode){

  if(EditingMode === new_mode) return;

  EditingMode = new_mode;

  document.getElementById("editable-area").contentEditable = false;
  cleanUpTextArea();
  $("button").attr("disabled", false);
  $("#popups").css("display","block"); // open the popup windows
  $("input").attr('disabled', false); // enable input
  $("#editTextId").html("Edit text");

  $('#smart-regex-area').css("display","block");
  $('#tag-function-area').css("display","block");

  $('#editable-area-wraper').parent().toggleClass("EditingMode");

}
/*
function editText() {
    var el = document.getElementById("editable-area");
    if ( $("#editTextId").html() == "Edit text" ) {
        // --- in editing mode ---
        saveUndoText();
        el.contentEditable = true;

        // disable/close functions
        $("button").attr("disabled", true);
        $("#editTextId").attr("disabled", false);
        $("#popups").css("display","none"); // close the popup windows
        $("input").attr('disabled', true); // disable input
        // clean editable-area
        $('.questionMarkClass').remove();
        $('.tagItemDivClass').remove();

        $("#editTextId").html("Edit completed!");
    } else {
        // --- not editing mode ---
        el.contentEditable = false;
        cleanUpTextArea();
        $("button").attr("disabled", false);
        $("#popups").css("display","block"); // open the popup windows
        $("input").attr('disabled', false); // enable input
        $("#editTextId").html("Edit text");
    }
}
*/

var removeTagEngName;

function removeTagNewDiv( eventObject, tag, tagObject ) {

    saveUndoText();

    removeTagEngName = tag;

    var newdiv = document.createElement("div");
    //$(newdiv).id = "questionMarkId";
    $(newdiv).attr("class", "questionMarkClass");

    // set z-index to 3 to bring popup tag windwo to front

    var pageY = eventObject.pageY,
        topPosi = pageY + ( (window.innerHeight - pageY < 145 ) ? -140 : 0) - 55;

    newdiv.style.cssText = 'top:'+ topPosi + '; left:'+ (eventObject.pageX - 10) +';height:140px';

    // find tag displaying name by tagName then showing in the innerHTML

    var tag_name = getTagNameByTag(tag);
    // newdiv.innerHTML = "Tag: "+tag_name+"<br>Value: "+tagObject.text()+"<br>";

    // TODO maybe also shown tag itself?
    newdiv.innerHTML = "Tag: "+tag_name+"<span class='removeTagText'>Value: "+tagObject.text()
                     + "</span>";

    var newbutton = $('<button class="btn btn-primary">Remove this</button>').mouseup(onRemoveThisTag);
    newbutton.appendTo(newdiv);

    var newbutton = $('<button class="btn btn-default">Remove this(with line break)</button>').mouseup(onRemoveThisTag);
    newbutton.appendTo(newdiv);
    $('<br>').appendTo(newdiv);

    var newbutton = $('<button class="btn btn-primary">Remove all</button>').mouseup(onRemoveAllTag);

    newbutton.appendTo(newdiv);

    var newbutton = $('<button class="btn btn-default">Remove all(with line break)</button>').mouseup(onRemoveAllTag);
    newbutton.appendTo(newdiv);

    tagObject.append(newdiv);

}

function onRemoveThisTag(e) {

    var isWithBR = (e.target.innerText.indexOf("with line break") > 0);

    var textKeep = $(this).parent().parent().html();
    var regexText=/<div(.*?)<\/div>/g;
    var replaceText="";
    textKeep = textKeep.replace(regexText, replaceText);

    if(isWithBR){

        var newLineBefore = $(this).parent().parent().prev();
        if ( newLineBefore.prop("tagName") == "BR" ) {
            $(this).parent().parent().prev().replaceWith( );
        }
    }

    $(this).parent().parent().replaceWith( textKeep );
}

function onRemoveAllTag(e) {

    var isWithBR = (e.target.innerText.indexOf("with line break") > 0);

    var textKeep = $(this).parent().parent().html();
    var regexText=/<div(.*?)<\/div>/g;
    var replaceText="";
    textKeep = textKeep.replace(regexText, replaceText);

    if(isWithBR){
        $(this).parent().remove();
    }
    else {
        $(this).parent().parent().replaceWith( textKeep );
    }

    var regexPattern = "<"+removeTagEngName+">("+textKeep+")</"+removeTagEngName+">";

    if(isWithBR){ regexPattern = "<br>" + regexPattern}

    var el = document.getElementById("editable-area") ,
        regexText=new RegExp(regexPattern, "g"),
        replaceText="$1",
        str= "" + el.innerHTML,
        occurrences = (str.match(regexText) || []).length;

    if(occurrences == 0){
        $.bootstrapGrowl( (isWithBR) ? "No entity found" : "Removed 1 entity" );
    }
    else{
        $.bootstrapGrowl( "Removed "+ (occurrences + 1) +" entities!" );
        el.innerHTML = str.replace(regexText, replaceText);
    }
}

function saveText(section_id) {
    var el = document.getElementById("editable-area");
    $.ajax({
        url : './'+section_id,
        async : false,
        type : 'POST',
        data : 'func=SaveFullText'+'&text='+encodeURIComponent(el.innerHTML)+'&filename='+section_id,
        // data : 'func=SaveFullText'+'&text='+el.innerHTML+'&filename='+section_id
        success: function (e) {
            $.bootstrapGrowl("Saved!");
        },
        error: function (e) {
            $.bootstrapGrowl("Haven't saved!");
        }
    }).done(function(result) {
    });


}

function preg_quote (str, delimiter) {
  // http://kevin.vanzonneveld.net
  // +   original by: booeyOH
  // +   improved by: Ates Goral (http://magnetiq.com)
  // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   bugfixed by: Onno Marsman
  // +   improved by: Brett Zamir (http://brett-zamir.me)
  // *     example 1: preg_quote("$40");
  // *     returns 1: '\$40'
  // *     example 2: preg_quote("*RRRING* Hello?");
  // *     returns 2: '\*RRRING\* Hello\?'
  // *     example 3: preg_quote("\\.+*?[^]$(){}=!<>|:");
  // *     returns 3: '\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:'
  return (str + '').replace(new RegExp('[.\\\\+*?\\[\\^\\]$(){}=!<>|:\\' + (delimiter || '') + '-]', 'g'), '\\$&');
}

function replaceRegex() {
    saveUndoText();

    var startPage = $('#regexPageStart2').val();
    var endPage = $('#regexPageEnd2').val();
    var el = document.getElementById("editable-area");
    var str="" + el.innerHTML;

    var regexText=document.getElementById("regexText").value;
    var replaceText=document.getElementById("replaceText").value;
    var str="" + el.innerHTML;

    if ( startPage == "" ) {
        $.bootstrapGrowl( "Tagged "+str.match(new RegExp(regexText, "g")).length+" entities!" );
        el.innerHTML = str.replace(new RegExp(regexText, "g"), replaceText);
    } else {
        var regexText2="【<a([^<>]*?)>"+startPage+"</a>】(.*?)【<a([^<>]*?)>"+endPage+"</a>】";
        var partString = ""+str.match(new RegExp(regexText2, "g"));
        $.bootstrapGrowl(partString);

        $.bootstrapGrowl( "Tagged "+partString.match(new RegExp(regexText, "g")).length+" entities!" );
        var resultString = partString.replace(new RegExp(regexText, "g"), replaceText);

        str="" + el.innerHTML;
        el.innerHTML = str.replace(new RegExp(regexText, "g"), resultString);
    }

    //document.styleSheets[0].addRule("tag001", "color:green;")
}

//Tagging Items
function getSelected() {
    if(window.getSelection) {   // all browsers, except IE before version 9
        return window.getSelection();
    } else if (document.getSelection) {
        return document.getSelection();
    } else {    // IE
        var selection = document.selection && document.selection.createRange();
        if(selection.text) {
            return selection.text;
        }

        return false;
    }
    return false;
}

function tagStringWithTag( stringValue, tag ) {
    $('#loading').show();

    saveUndoText();
    var el = document.getElementById("editable-area");

    // TODO: bug? when stringValue contain already tag, it should be preserved

    //console.log(stringValue);


    var regexText="("+String(stringValue)+")";
    if ( tag=="person") {
        var replaceText="<br><"+tag+">$1</"+tag+">";
    } else {
        var replaceText="<"+tag+">$1</"+tag+">";
    }
    var str="" + el.innerHTML;

    $('.tagItemDivClass').remove();
    $.bootstrapGrowl( "Tagged "+str.match(new RegExp(regexText, "g")).length+" entities!" );
    el.innerHTML = str.replace(new RegExp(regexText, "g"), replaceText);

    $('#loading').hide();
}


function tagwithtitle( range, stringSelection ) {
    saveUndoText();
    range.deleteContents();
    //var newdiv = document.createElement("br");
    //range.insertNode(newdiv);
    range.insertNode(document.createTextNode("〈"+stringSelection+"〉"));
    var newdiv = document.createElement("br");
    range.insertNode(newdiv);

    $('.tagItemDivClass').remove();
}

function tagNameWithLastName() {
    saveUndoText();
    var el = document.getElementById("editable-area");
    var regexText=/(○|】|^)(王|李|張|趙|劉|陳|楊|吳|黃|黄|朱|孫|郭|胡|呂|高|宋|徐|程|林|鄭|范|何|韓|曹|馬|許|田|馮|杜|周|曾|汪|蘇|董|方|蔡|梁|石|謝|賈|薛|彭|崔|唐|潘|鄧|史|錢|侯|魏|羅|葉|沈|孟|姚|傅|丁|章|蕭|蔣|盧|陸|袁|晁|譚|邵|歐陽|孔|詹|俞|尹|廖|閻|洪|夏|雷|葛|文|柳|陶|毛|丘|龔|蒲|邢|郝|龐|安|裴|折|施|游|金|鄒|湯|虞|嚴|鍾)([^○(舉人|縣人|歲貢|間任)]{1,3}|○[^○])(?=(○|$))/g;
    var replaceText="$1<br><person>$2$3</person>$4";
    var str="" + el.innerHTML;

    $.bootstrapGrowl( "Tagged "+str.match(regexText).length+" entities!" );
    el.innerHTML = str.replace(regexText, replaceText);
}

function tagNameWithLastName2() {
    saveUndoText();
    var el = document.getElementById("editable-area");
    var regexText="(○|】|^)("+$('#surname').val()+")([^○(舉人|縣人|歲貢|間任)]{1,3}|○[^○])(?=(○|$))";
    var replaceText="$1<br><person>$2$3</person>$4";
    var str="" + el.innerHTML;

    $.bootstrapGrowl( "Tagged "+str.match(new RegExp(regexText, "g")).length+" entities!" );
    el.innerHTML = str.replace(new RegExp(regexText, "g"), replaceText);
}

function tagBiogAddr() {
    saveUndoText();
    var el = document.getElementById("editable-area");
    var str="" + el.innerHTML;

    var regexText=/(○)([^○]{1,6})(○?)(人)/g;
    var replaceText="$1<biog_addr>$2</biog_addr>$3$4";
    el.innerHTML = str.replace(regexText, replaceText);

    $.bootstrapGrowl( "Tagged "+str.match(regexText).length+" entities!" );
}

function smartRegexNew() {

    var popup_status = $('#smartRegexPopUpDiv').css("display");
    if (popup_status == "block") {
        $('#smartRegexPopUpDiv').css("display", "none");
    } else {
        $('#smartRegexPopUpDiv').css("display", "block");
    }


    $('#smartRegexPopUpAdd').attr("disabled", false);
    $('#smartRegexPopUpEdit').attr("disabled", false);
    $('#smartRegexPopUpDel').attr("disabled", false);
    $('#smartRegexPopUpBack').attr("disabled", false);
    $('#smartRegexPopUpFor').attr("disabled", false);

    if(popup_status == "none"){

        $("#smartRegexPopUpName").val("no name");

        replaceSmartAdd();

        $('#smartRegexPopUpDiv').attr("editID", "regex_elem_"+regex_element_index);
    }

}

function replaceSmartClose() {

    if($("#smartRegexPopUpText").val().trim() == ''){

        doReplaceSmartRemove();
    }

    $('#smartRegexShowDiv > span').css("border","1px solid black");
    $('#smartRegexPopUpDiv').css("display", "none");
    $("#smartRegexPopUpSelectWord").val("NULL");
    $("#smartRegexPopUpText").val("");
    $("#smartRegexPopUpName").val("");

}

function replaceSmartEdit(){
    thisObject = $('#smartRegexPopUpDiv').attr("editID");

    $('#smartRegexShowDiv > #'+thisObject).attr("class", "span_"+$("#smartRegexPopUpSelectTag").val());
    $('#smartRegexShowDiv > #'+thisObject).attr("regexText", $("#smartRegexPopUpText").val());
    $('#smartRegexShowDiv > #'+thisObject).attr("regexReplace", $("#smartRegexPopUpSelectTag").val());
    $('#smartRegexShowDiv > #'+thisObject).text($("#smartRegexPopUpName").val());  // smartRgextPopUpName.val() is the name of this regex
    // id should be the same as it was
}

function replaceSmartRemove() {

    doReplaceSmartRemove();

    replaceSmartClose();
}

function doReplaceSmartRemove() {

    thisObject = $('#smartRegexPopUpDiv').attr("editID");

    $('#smartRegexShowDiv > #'+thisObject).remove();
}

function replaceSmartFor() {

    var nowEleId = $('#smartRegexPopUpDiv').attr("editID");
    var nowEle = $('#smartRegexShowDiv > #' + nowEleId );

    nowEle.insertAfter(nowEle.next());
}

function replaceSmartBack() {

    var nowEleId = $('#smartRegexPopUpDiv').attr("editID");
    var nowEle = $('#smartRegexShowDiv > #' + nowEleId );

    nowEle.insertBefore(nowEle.prev());
}


function replaceSmartAdd() {
    var newdiv = document.createElement("span");
    //newdiv.innerHTML = " "+$("#smartRegexPopUpName").val()+" ";
    //newdiv.innerHTML = $("#smartRegexPopUpName").val();
    $(newdiv).text($("#smartRegexPopUpName").val());

    $(newdiv).css("border", "1px solid black");
    $(newdiv).css("width", "100px");

    $(newdiv).attr("class", "span_"+$("#smartRegexPopUpSelectTag").val());

    // id is the name from user's input, which dose not guarantee to be unique
    // id should be unique
    regex_element_index += 1;
    $(newdiv).attr("id", "regex_elem_"+regex_element_index);
    // $(newdiv).attr("id", "span_"+$("#smartRegexPopUpName").val());
    $(newdiv).attr("regexText", $("#smartRegexPopUpText").val());
    $(newdiv).attr("regexReplace", $("#smartRegexPopUpSelectTag").val());

    $('#smartRegexShowDiv').append(newdiv);

    //replaceSmartClose();
}

$(document).keyup(function(e) {
     if (e.keyCode == 27) { // escape key maps to keycode `27`
        // close popups
        $('#load_topic_div').css("display", "none");
        $('#new_topic_div').css("display", "none");
        $('#load_regex_div').css("display", "none");
        $('#regex_generator').css("display", "none");
        $('#smartRegexPopUpDiv').css("display", "none");
        $('.questionMarkClass').css("display", "none");
        $('.tagItemDivClass').css("display", "none");
    }
});

$(document).on("click", '#smartRegexShowDiv > span', function (e) {

    $('#smartRegexPopUpDiv').css("display", "block");

    $('#smartRegexPopUpDiv').attr("editID", $(this).attr("id"));

    $('#smartRegexPopUpName').val($(this).text());
    // $('#smartRegexPopUpName').val($(this).html());

    $('#smartRegexPopUpText').val($(this).attr("regexText"));
    $('#smartRegexPopUpSelectTag').val($(this).attr("regexReplace"));

    $('#smartRegexPopUpAdd').attr("disabled", "disabled");
    $('#smartRegexPopUpEdit').attr("disabled", false);
    $('#smartRegexPopUpDel').attr("disabled", false);
    $('#smartRegexPopUpBack').attr("disabled", false);
    $('#smartRegexPopUpFor').attr("disabled", false);
});

function genRegexWindowOpen(){
    var btn_state = $('#regex_generator').css('display');
    if (btn_state == "block") {
        genRegexWindowClose();
    } else {
        $('#regex_generator').css("display", "block");
        $("#gen_regex_window_open_id").text("Close Gen Regex");
    }
}

function genRegexWindowClose(){
    $('#regex_generator').css("display", "none");
    $("#gen_regex_window_open_id").text("Open Gen Regex");
}

function sharedStart_(array){
    var A= array.concat().sort(),
    a1= A[0], a2= A[A.length-1], L= a1.length, i= 0;
    while(i<L && a1.charAt(i)=== a2.charAt(i)) i++;
    return a1.substring(0, i);
}

function getTagNameByTag(tag){
    var name = "";
    // taglistArray is a global variable
    for (var i = 0; i < taglistArray.length; i++) {
        var taglistValue = taglistArray[i];

        var _tag = taglistValue[2];
        var _name = taglistValue[1];
        if (_tag == tag) {
            name = _name;
        }
    }

    return name;
}

function genRegexAddToSmartRegex() {
    // append blocks of generated regex to smart regex

    smartRegexEmpty();  // clear

    var reg_obj = getSuggestedRegex();
    //console.log(reg_obj);

    for (var i = 0; i < reg_obj.length; i++) {
        if (reg_obj[i].txt != "") {

            var newdiv = document.createElement("span");

            $(newdiv).css("border", "1px solid black");
            $(newdiv).css("width", "100px");

            if (reg_obj[i].tag == null) {
                if (reg_obj[i].txt == "○") {
                    $(newdiv).text("空白");
                } else {
                    $(newdiv).text(reg_obj[i].txt);
                }
                $(newdiv).attr("class", "span_NOTAG");
                $(newdiv).attr("regexReplace","NOTAG");
            } else {

                var name = getTagNameByTag(reg_obj[i].tag);
                $(newdiv).text(name+"名");

                $(newdiv).attr("class", "span_"+reg_obj[i].tag);
                $(newdiv).attr("regexReplace", reg_obj[i].tag);

            }

            regex_element_index += 1;
            $(newdiv).attr("id", "regex_elem_"+regex_element_index);

            $(newdiv).attr("regexText", reg_obj[i].txt);

            $('#smartRegexShowDiv').append(newdiv);

        }
    }

}

function longestCommonSubstring_(string1, string2){
    // init max value
    var longestCommonSubstring = 0;
    // init 2D array with 0
    var table = [],
        len1 = string1.length,
        len2 = string2.length,
        row, col;

    for(row = 0; row <= len1; row++){
        table[row] = [];
        for(col = 0; col <= len2; col++){
            table[row][col] = 0;
        }
    }
    // fill table
    var i, j;
    for(i = 0; i < len1; i++){
        for(j = 0; j < len2; j++){
            if(string1[i]==string2[j]){
                if(table[i][j] == 0){
                    table[i+1][j+1] = 1;
                } else {
                    table[i+1][j+1] = table[i][j] + 1;
                }
                if(table[i+1][j+1] > longestCommonSubstring){
                    longestCommonSubstring = table[i+1][j+1];
                }
            } else {
                table[i+1][j+1] = 0;
            }
        }
    }
    return longestCommonSubstring;
}

function longestCommonSubstring(s1, s2) {

    var start_idx = 0;
    var max_len = 0;
    for (var i = 0; i < s1.length; i++)
    {
        for (var j = 0; j < s2.length; j++)
        {
            var x = 0;
            while (s1.charAt(i + x) == s2.charAt(j + x))
            {
                x++;
                if ((i + x) >= s1.length || ((j + x) >= s2.length))
                    break;
            }
            if (x > max_len)
            {
                max_len = x;
                start_idx = i;
            }
         }
    }
    return s1.substring(start_idx, (start_idx + max_len));

}

var suggestedRegex = [];

function setSuggestedRegex(_pattern) {
    /*
    console.log(_pattern[0]);
    console.log(_pattern[1]);
    */
    var p0 = _pattern[0];
    var p1 = _pattern[1];

    // TODO: find common pattern
    suggestedRegex = [];    // it's a global variable

    if (p0.length > p1.length) {
        suggestedRegex = p0;
    } else if(p0.length < p1.length) {
        suggestedRegex = p1;
    } else {    // equal length
        // find matching string
        var cnt = p0.length;
        for (var i = 0;  i < cnt; i++) {
            if (p1[i].tag != null) {
                suggestedRegex.push({tag:p1[i].tag, txt:"[^○如即而之有<>〈〉【】]{1,"+p1[i].txt.length+"}"});
            } else if (p0[i].tag != null) {
                suggestedRegex.push({tag:p0[i].tag, txt:"[^○如即而之有<>〈〉【】]{1,"+p0[i].txt.length+"}"});
            } else {
                // find matching for text in each corresponding position
                var texts = [p0[i].txt, p1[i].txt];
                var common = longestCommonSubstring(p0[i].txt, p1[i].txt);

                /*
                var reg_for_common = "[";
                for (var i = 0; i < common.length; i++) {
                    common[i];
                    reg_for_common += common[i]+"|";
                };
                reg_for_common += "]";
                */
                suggestedRegex.push({tag:null, txt:common});
            }
        };
    }


}

function getSuggestedRegex(){
    return suggestedRegex;
}

var pattern_obj = [];  // record pattern array for regex generator. only contain pattern1 and pattern2

function genRegexBySelection(tag_item_div, _selection) {
    var add_gen_regex_button = document.createElement("button");
    $(add_gen_regex_button).id = "addToGenRegex";
    $(add_gen_regex_button).addClass("btn btn-xs btn-default");
    $(add_gen_regex_button).click( function(){
        // popup for selected words regex gen
        /*
        console.log("Debug: ");
        console.log(_selection);
        */

        if (_selection.type == "Range") {
            // select words, not just click on text
            var anchor_node = _selection.anchorNode;
            var focus_node = _selection.focusNode;
            var sibling_node = anchor_node.nextElementSibling;


            if (anchor_node && sibling_node && focus_node && container.innerHTML.indexOf( "br" ) == -1) {
                // Chrome can work on this.
                // Safari does not support some of the member in selection object
                // container.innerHTML.indexOf( "br" ) == -1: selection does not contain br.

                var seleted_div = document.createElement("div");
                var seleted_obj = [];   // array for selected text as well as its tag if it has any

                if (anchor_node == focus_node ) {
                    // selected text in plain text
                    var text_all = anchor_node.textContent;
                    var text_ = text_all.substring(_selection.anchorOffset, _selection.focusOffset);
                    $(seleted_div).text(text_);
                    seleted_obj.push({tag:null, txt:text_});    // push object into array

                } else {
                    // selected text contain tags
                    var text_before = anchor_node.textContent.substring(_selection.anchorOffset, anchor_node.length);
                    var tag_name = sibling_node.nodeName.toLowerCase();
                    var tagged_text = sibling_node.textContent;

                    var text_after = _selection.focusNode.textContent.substring(0, _selection.focusOffset);

                    $(seleted_div).text(text_before+tagged_text+text_after);
                    seleted_obj.push({tag:null, txt:text_before});
                    seleted_obj.push({tag:tag_name, txt:tagged_text});
                    seleted_obj.push({tag:null, txt:text_after});
                    /*
                    console.log(text_before);
                    console.log(tag_name);
                    console.log(tagged_text);
                    console.log(text_after);
                    */
                }



                var generated_regex_plaintext = "";
                // show generate regex window
                $('#regex_generator').css("display", "block");
                $("#gen_regex_window_open_id").text("Close Gen Regex");

                //var seleted_text = String(_selection).replace(/^\s+|\s+$/g,'');
                var pattern1 = $('#regex_pattern1');
                var pattern2 = $('#regex_pattern2');
                if (pattern1.children().length == 0) {
                    pattern1.append(seleted_div);
                    pattern_obj.push(seleted_obj);
                    // pattern1.text(seleted_div.text());
                } else if (pattern2.children().length == 0) {
                    pattern2.append(seleted_div);
                    pattern_obj.push(seleted_obj);

                    setSuggestedRegex(pattern_obj);
                    var generated_regex = getSuggestedRegex();

                    // get plaintext from generated_regex obj
                    for (var i = 0; i < generated_regex.length; i++) {
                        generated_regex_plaintext += generated_regex[i].txt;
                    }

                } else {
                    // pattern1 and pattern2 are already having text
                    pattern1.children().remove();
                    pattern1.append(pattern2.children());

                    pattern2.children().remove();
                    pattern2.append(seleted_div);

                    pattern_obj.shift();
                    pattern_obj.push(seleted_obj);

                    setSuggestedRegex(pattern_obj);
                    var generated_regex = getSuggestedRegex();

                    // get plaintext from generated_regex obj
                    for (var i = 0; i < generated_regex.length; i++) {
                        generated_regex_plaintext += generated_regex[i].txt;
                    }


                }
                //$('#generated_regex').text(generated_regex);
                $('#generated_regex').text(generated_regex_plaintext);
                // ---

                $('#regex_generator_error_msg').text("");
            } else {
                $('#regex_generator_error_msg').text("Note: Not a valid selection for regex generator.");
            }

            $('.tagItemDivClass').remove(); // close the tag window

        } else if (_selection.type == "Caret") {
            // TODO: click on tagged text case rather than select
            // If do this process, also need to consider between browers since not all of them support
            // and also need to modify pop_remove_tag_window
        }
    });

    $(add_gen_regex_button).text("Add to Gen Regex (developing...)");
    tag_item_div.appendChild(add_gen_regex_button);
}

var tagMode = "default";

function onTagModeChanged(ele){
    tagMode = ele.value;
}

function startToTag(){

    switch(tagMode){

       case "default":
          replaceSmartRun();
          break;
       case "with_line_break":
          replaceSmartRunWithBr();
          break;
       case "space_within_block":
          replaceSmartRunSpace();
          break;
      //  case "xxx" :
      //     replaceSmartRunSpace() //Allow space between Group
      //     break;
    }
}

function smartRegexEmpty() {
    $('#smartRegexShowDiv').html("");
    regex_element_index = 0;
}

function replaceSmartRunWithBr() {

    $("#loading").show();

    var replaceSmartRegexString = "";
    var replaceSmartReplaceString = "";
    var count=1;

    saveUndoText();

    // skip everything inside "【】", including "【】". // (【([^【】])*】) //(【.*】)
    replaceSmartRegexString += "(【[^【】]+(?!.*})】)*";
    replaceSmartReplaceString += "$"+count;
    count ++;
    // ---

    $('#smartRegexShowDiv').children('span').each(function () {
        replaceSmartRegexString += "(" + $(this).attr("regexText") + ")";
        if ( $(this).attr("regexReplace") == "notag" || $(this).attr("regexReplace") == "NOTAG") {
            replaceSmartReplaceString += "$" + count;
        } else if ( $(this).attr("regexReplace") == "title" ) {
            replaceSmartReplaceString += "<br>〈" + "$" + count + "〉<br>";
        } else {
            // with <br> before
            replaceSmartReplaceString += "<br><" + $(this).attr("regexReplace") + ">" + "$" + count + "</"+ $(this).attr("regexReplace") +">";
        }
        count++;
    });


    var startPage = $('#regexPageStart').val();
    var endPage = $('#regexPageEnd').val();
    var el = document.getElementById("editable-area");
    var str="" + el.innerHTML;

    // if there's no match || the it's a null object..
    if (str.match(new RegExp(replaceSmartRegexString, "g")) == null) {
        $.bootstrapGrowl( "Tagged 0 entity!" );

    } else if ( startPage == "" ) {
        $.bootstrapGrowl( "Tagged "+str.match(new RegExp(replaceSmartRegexString, "g")).length+" entities!" );
        el.innerHTML = str.replace(new RegExp(replaceSmartRegexString, "g"), replaceSmartReplaceString);
    } else {
        var regexText="【<a([^<>]*?)>"+startPage+"</a>】(.*?)【<a([^<>]*?)>"+endPage+"</a>】";
        var partString = ""+str.match(new RegExp(regexText, "g"));
        $.bootstrapGrowl(partString);

        $.bootstrapGrowl( "Tagged "+partString.match(new RegExp(replaceSmartRegexString, "g")).length+" entities!" );
        var resultString = partString.replace(new RegExp(replaceSmartRegexString, "g"), replaceSmartReplaceString);

        str="" + el.innerHTML;
        el.innerHTML = str.replace(new RegExp(regexText, "g"), resultString);
    }

    $("#loading").hide();

}

function replaceSmartRun() {

    $("#loading").show();

    var replaceSmartRegexString = "";
    var replaceSmartReplaceString = "";
    var count=1;

    saveUndoText();

    // skip everything inside "【】", including "【】".
    replaceSmartRegexString += "(【[^【】]+(?!.*})】)*";
    replaceSmartReplaceString += "$"+count;
    count ++;
    // ---

    $('#smartRegexShowDiv').children('span').each(function () {
        replaceSmartRegexString += "(" + $(this).attr("regexText") + ")";
        if ( $(this).attr("regexReplace") == "notag" || $(this).attr("regexReplace") == "NOTAG" ) {
            replaceSmartReplaceString += "$" + count;
        } else if ( $(this).attr("regexReplace") == "title" ) {
            replaceSmartReplaceString += "<br>〈" + "$" + count + "〉<br>";
        } else {
            replaceSmartReplaceString += "<" + $(this).attr("regexReplace") + ">" + "$" + count + "</"+ $(this).attr("regexReplace") +">";
        }
        count++;
    });


    var startPage = $('#regexPageStart').val();
    var endPage = $('#regexPageEnd').val();
    var el = document.getElementById("editable-area");
    var str="" + el.innerHTML;

    // if there's no match || the it's a null object..
    if (str.match(new RegExp(replaceSmartRegexString, "g")) == null) {
        $.bootstrapGrowl( "Tagged 0 entity!" );

    } else if ( startPage == "" ) {
        $.bootstrapGrowl( "Tagged "+str.match(new RegExp(replaceSmartRegexString, "g")).length+" entities!" );

        el.innerHTML = str.replace(new RegExp(replaceSmartRegexString, "g"), replaceSmartReplaceString);
    } else {
        var regexText="【<a([^<>]*?)>"+startPage+"</a>】(.*?)【<a([^<>]*?)>"+endPage+"</a>】";
        var partString = ""+str.match(new RegExp(regexText, "g"));
        $.bootstrapGrowl(partString);

        $.bootstrapGrowl( "Tagged "+partString.match(new RegExp(replaceSmartRegexString, "g")).length+" entities!" );
        var resultString = partString.replace(new RegExp(replaceSmartRegexString, "g"), replaceSmartReplaceString);

        str="" + el.innerHTML;
        el.innerHTML = str.replace(new RegExp(regexText, "g"), resultString);
    }

    $("#loading").hide();
}

function replaceSmartRunSpace() {

    $("#loading").show();

    var replaceSmartRegexString = "";
    var replaceSmartReplaceString = "";
    var count=1;
    saveUndoText();

    $('#smartRegexShowDiv').children('span').each(function () {
        //$.bootstrapGrowl($(this).attr("regexText"));
        replaceSmartRegexString += "(" + $(this).attr("regexText") + ")(○*)";
        if ( $(this).attr("regexReplace") == "notag" || $(this).attr("regexReplace") == "NOTAG") {
            replaceSmartReplaceString += "$" + count;
        } else if ( $(this).attr("regexReplace") == "title" ) {
            replaceSmartReplaceString += "<br>〈" + "$" + count + "〉<br>";
        } else {
            replaceSmartReplaceString += "<" + $(this).attr("regexReplace") + ">" + "$" + count + "</"+ $(this).attr("regexReplace") +">";
        }
        count++;
        replaceSmartReplaceString += "$" + count;
        count++;
    });

    var startPage = $('#regexPageStart').val();
    var endPage = $('#regexPageEnd').val();
    var el = document.getElementById("editable-area");
    var str="" + el.innerHTML;

    // if there's no match || the it's a null object..
    if (str.match(new RegExp(replaceSmartRegexString, "g")) == null) {
        $.bootstrapGrowl( "Tagged 0 entity!" );

    } else if ( startPage == "" ) {
        $.bootstrapGrowl( "Tagged "+str.match(new RegExp(replaceSmartRegexString, "g")).length+" entities!" );
        el.innerHTML = str.replace(new RegExp(replaceSmartRegexString, "g"), replaceSmartReplaceString);
    } else {
        var regexText="【<a([^<>]*?)>"+startPage+"</a>】(.*?)【<a([^<>]*?)>"+endPage+"</a>】";
        var partString = ""+str.match(new RegExp(regexText, "g"));
        $.bootstrapGrowl(partString);

        $.bootstrapGrowl( "Tagged "+partString.match(new RegExp(replaceSmartRegexString, "g")).length+" entities!" );
        var resultString = partString.replace(new RegExp(replaceSmartRegexString, "g"), replaceSmartReplaceString);

        str="" + el.innerHTML;
        el.innerHTML = str.replace(new RegExp(regexText, "g"), resultString);
    }

    //$.bootstrapGrowl( "Tagged "+str.match(new RegExp(replaceSmartRegexString, "g")).length+" entities!" );
    //el.innerHTML = str.replace(new RegExp(replaceSmartRegexString, "g"), replaceSmartReplaceString);

    $("#loading").hide();
}

function smartRegexSave(topic_id) {
    //console.log("topic_id"+topic_id);

    var today = new Date();
    var minute = today.getMinutes();
    var hour = today.getHours();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();

    if(dd<10) {
        dd='0'+dd
    }
    if(mm<10) {
        mm='0'+mm
    }
    if (hour<10) {
        hour='0'+hour;
    }
    if (minute<10) {
        minute='0'+minute;
    }
    today = hour+'_'+minute+'_'+dd+'_'+mm+'_'+yyyy;

    var name=prompt("Please enter this Regex name", RegexLoadedName+"_"+today);



    if (name!=null && name != ''){

        // the name not allowed to contain " ", "(", ")"
        if (name.indexOf(' ') >= 0 || name.indexOf('(') >= 0 || name.indexOf(')') >= 0) {

            $.bootstrapGrowl("Save Regex Failed.\nPlease don't use space or '(' or ')' in the name. Consider to use '-' or '_' instead. ");
            return;
        }

        $.ajax({
            type : 'POST',
            url : './TaggingText',
            async : false,
            data : 'func=SmartRegexSave'+'&text='+encodeURIComponent($('#smartRegexShowDiv').html())+'&filename='+name+'&topic_id='+topic_id,
            error: function (result) {
                $.bootstrapGrowl("Error");
            },
            success: function (result) {
                var obj = jQuery.parseJSON(result);

                if (obj == "ErrorDB") {
                    $.bootstrapGrowl("Error when saving to database!!");

                } else if (obj == "ForceSave") {
                    var retVal = confirm("Danger! You will over write the previous regex file. Do you want to proceed?");

                    if( retVal == true ){
                        // update regex file
                        $.ajax({
                            type : 'POST',
                            url : './TaggingText',
                            async : false,
                            data : 'func=SmartRegexSave'+'&text='+encodeURIComponent($('#smartRegexShowDiv').html())+'&filename='+name+'&topic_id='+topic_id+'&forcesave=1',
                            error: function (result) {
                                $.bootstrapGrowl("Error");
                            },
                            success: function (result) {
                                $.bootstrapGrowl("Update regex file.");
                            }
                        });
                    }else{
                        $.bootstrapGrowl("You have not saved the regex file.");
                    }

                } else {
                    $.bootstrapGrowl("Saved!");
                }
            }
        }).done(function(result) {
        });
    } else {
        $.bootstrapGrowl("You haven't saved it.");
    }
}

function smartRegexLoad(topic_id) {

    $('#load_regex_div').html("");

    var popup_status = $('#load_regex_div').css("display");
    if (popup_status == "block") {
        $('#load_regex_div').css("display", "none");
    } else {
        $('#load_regex_div').css("display", "block");
    }

    var newselect = document.createElement("select");
    newselect.id = "loadRegexSelect";

    $.ajax({
        type: 'POST',
        url: './TaggingText',
        dataType: 'json',
        data: "func=SmartRegexLoad&topic_id="+topic_id,
        //cache: false,
        success: function (data) {
            $.each(data, function(index, element) {
                // index is the filename (without '.txt')
                // element is the content in the file
                newselect.innerHTML += "<option value=\""+index+"\">"+index+"</option>\n";
                //$.bootstrapGrowl(index);
                //$.bootstrapGrowl(element);
                var newdiv = document.createElement("div");
                $(newdiv).css("display", "none");
                $(newdiv).html(element);

                $(newdiv).attr("id", "div_"+index);
                $('#load_regex_div').append(newdiv);
            });


        },
        error: function (data) {
            console.log("SmartRegexLoad fails");
        }

    });

    /*
    $.ajax({
        type: 'POST',
        url: '../models/_extractapp_func.php',
        dataType: 'json',
        data: "func=SmartRegexLoad",
        //cache: false,
        success: function (data) {
            $.each(data, function(index, element) {
                newselect.innerHTML += "<option value=\""+index+"\">"+index+"</option>\n";
                //$.bootstrapGrowl(index);
                //$.bootstrapGrowl(element);
                var newdiv = document.createElement("div");
                $(newdiv).css("display", "none");
                $(newdiv).html(element);
                $(newdiv).attr("id", "div_"+index);
                $('#load_regex_div').append(newdiv);
            });

        },
        error: function (data) {
            console.log("SmartRegexLoad fails");
        }

    });
    */

    var loadBtn = document.createElement("button");
    $(loadBtn).html("Load");
    $(loadBtn).addClass("btn btn-sm btn-info");
    $(loadBtn).attr("onclick", "loadRegexAdd()");

    var closeBtn = document.createElement("button");
    $(closeBtn).html('<span aria-hidden=\"true\">×</span>');
    $(closeBtn).addClass("btn btn-xs btn-default close-btn");
    $(closeBtn).attr("onclick", "$('#load_regex_div').css(\"display\", \"none\");");

    var emptyRow = document.createElement("div");
    $(emptyRow).addClass("emptyRow");

    var emptyRow2 = document.createElement("div");
    $(emptyRow2).addClass("emptyRow");

    emptyRow2.append(loadBtn);

    $('#load_regex_div').append(closeBtn);
    $('#load_regex_div').append(emptyRow);
    $('#load_regex_div').append(newselect);
    $('#load_regex_div').append(emptyRow2);
}

var RegexLoadedName = "";
function loadRegexAdd() {
    RegexLoadedName = $('#loadRegexSelect').val();
    var divName = "#div_"+RegexLoadedName;
    var regex_content = $(divName).html();

    $('#smartRegexShowDiv').html(regex_content);
    $('#load_regex_div').css("display", "none");

    // get the largest regex element index in the regex file
    // for all children (span) in #smartRegexShowDiv, find MAX(id)
    var regex_elem = $('#smartRegexShowDiv').children();
    var max_id = 0;
    for (var i = 0; i < regex_elem.length; i++) {
        var r_id = parseInt(regex_elem[i].id.slice(11));    // cut the first 11 char out: "regex_elem_"
        if (r_id > max_id) {
            max_id = r_id;
        }

    }
    regex_element_index = max_id;


    // hover on #smartRegexShowDiv > span, change border width
    $("#smartRegexShowDiv > span").hover( function() {
        // hover in
        $(this).css("border","3px solid black");
        }, function() {
        // hover out
        // TODO: if this is clicked...
        $(this).css("border","1px solid black");
    });

    /*
    // TODO: click
    $("#smartRegexShowDiv > span").click( function() {
        $(this).css("border","3px double black");
        console.log("Debug: clicked");
    });


    $('#smartRegexShowDiv > span').on({
        mouseover: function(){
            $(this).css("border","3px solid black");
        },
        mouseleave: function(){
            $(this).css("border","1px solid black");
        },
        click: function(){
            $(this).off('mouseleave');
        }
    });
    */
}



// ===


// === for editwordlist.php ===
function addNewList() {
    var el = document.getElementById("listNameText");
    $.ajax({
        //url : '../../models/_extractapp_func.php',
        url : './EditWordlist',
        async : false,
        type : 'POST',
        data : 'func=AddNewList'+'&text='+el.value,
        success: function (e) {
            $.bootstrapGrowl("Added!");
            document.location.reload(true);
        },
        error: function (e) {
            console.log("error when add new list");
            $.bootstrapGrowl("Haven't added new list!!");
        }
    }).done(function(result) {

    });
}

function saveWordlist(id ) {
    var el = document.getElementById("editable-area");
    $.ajax({
        url : './EditWordlist',
        async : false,
        type : 'POST',
        data : 'func=SaveWordlist'+'&text='+el.innerHTML+'&filename='+id,
        success: function (e) {
            $.bootstrapGrowl("Saved!");
        },
        error: function (e) {
            $.bootstrapGrowl("Haven't saved!");
        }
    }).done(function(result) {

    });

}

function editWordlistText( id ) {
    var el = document.getElementById("editable-area");
    el.contentEditable = true;
}

function replaceRegex() {
    var el = document.getElementById("editable-area");
    var regexText=document.getElementById("regexText").value;
    var replaceText=document.getElementById("replaceText").value;
    var str="" + el.innerHTML;
    el.innerHTML = str.replace(new RegExp(regexText, "g"), replaceText);
}

function showListContent( id ) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = process;
    xhr.open("POST", "../data/wordlist/"+id+".txt?t=" + Math.random(), true);
    // TODO: should show the latest wordlist file. eg. id_timestamp.txt, rather than open the original id.txt file


    xhr.send();

    function process() {
        if (xhr.readyState == 4) {
            var el = document.getElementById("editable-area");
            var str = xhr.responseText
            var regexText=/\n/g;
            var replaceText="<br>\n";
            el.innerHTML = str.replace(regexText, replaceText);

            document.getElementById("button-area").innerHTML=
            "<form action=\"javascript:void(0);\"> \
                <fieldset><legend>Edit:</legend> \
                    <button id=\"buttonEditText\" onclick=\"editWordlistText("+id+")\" style=\"height: 30px; width: 220px\">Edit text</button></br> \
                    <button id=\"buttonSaveText\" onclick=\"saveWordlist("+id+")\" style=\"height: 30px; width: 220px\">Save the text</button> \
                </fieldset> \
                <fieldset><legend>Replace By Regex:</legend> \
                    Regex: <input type=\"text\" size=\"30\" id=\"regexText\"></br> \
                    Replace: <input type=\"text\" size=\"30\" id=\"replaceText\"><br> \
                    <button onclick=\"replaceRegex()\">Replace!</button> \
                </fieldset> \
            </form>";
        }
    }
}

// ============

// === for edittaglist.php ===
function editTaglist(topic_id) {
    var form = document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action", "./EditTaglist");
    form.setAttribute("target", "_blank");

    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("name", "topic_id");
    hiddenField.setAttribute("value", topic_id);
    form.appendChild(hiddenField);

    if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);
    } else {
        //form.submit(); // works under IE and Chrome, but not FF
        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);
    }
}


// ============
//