--- a/js/taggingtext.js	Thu Apr 30 10:52:05 2015 +0200
+++ b/js/taggingtext.js	Tue Jun 02 16:52:05 2015 +0200
@@ -238,16 +238,19 @@
 
 
 function removeTagNewDiv( eventObject, tagName, tagObject ) {
+    // TODO: nesting tag representaion
+
     saveUndoText();
     var newdiv = document.createElement("div");
-    newdiv.id = "questionMarkId";
-    newdiv.setAttribute("class", "questionMarkClass");
+    $(newdiv).id = "questionMarkId";
+    $(newdiv).attr("class", "questionMarkClass");
 
     // set z-index to 3 to bring popup tag windwo to front
-    newdiv.style.cssText = 'top:'+eventObject.pageY+'; left:'+eventObject.pageX+'; position:absolute; background-color: white; border:1px solid black; padding: 5px; z-index:3';
+    newdiv.style.cssText = 'top:'+eventObject.pageY+'; left:'+eventObject.pageX+';';
+    
     newdiv.innerHTML = "Tag: "+tagName+"<br>Value: "+tagObject.text()+"<br>";
     
-    var newbutton = $('<button>Remove this</button>').mouseup(function (e2) {
+    var newbutton = $('<button class="btn btn-default">Remove this</button>').mouseup(function (e2) {
         var textKeep = $(this).parent().parent().html();
         var regexText=/<div(.*?)<\/div>/g;
         var replaceText="";
@@ -257,7 +260,7 @@
     });
     newbutton.appendTo(newdiv);
     
-    var newbutton = $('<button>Remove this(with newline)</button>').mouseup(function (e2) {
+    var newbutton = $('<button class="btn btn-default">Remove this(with newline)</button>').mouseup(function (e2) {
         var textKeep = $(this).parent().parent().html();
         var regexText=/<div(.*?)<\/div>/g;
         var replaceText="";
@@ -271,7 +274,7 @@
     });
     newbutton.appendTo(newdiv);
     
-    var newbutton = $('<button>Remove all</button>').mouseup(function (e2) {
+    var newbutton = $('<button class="btn btn-default">Remove all</button>').mouseup(function (e2) {
         var textKeep = $(this).parent().parent().html();
         var regexText=/<div(.*?)<\/div>/g;
         var replaceText="";
@@ -293,7 +296,7 @@
     });
     newbutton.appendTo(newdiv);
     
-    var newbutton = $('<button>Remove all(with newline)</button>').mouseup(function (e2) {
+    var newbutton = $('<button class="btn btn-default">Remove all(with newline)</button>').mouseup(function (e2) {
         var textKeep = $(this).parent().parent().html();
         var regexText=/<div(.*?)<\/div>/g;
         var replaceText="";
@@ -464,7 +467,14 @@
 }
 
 function smartRegexNew() {
-    $('#smartRegexPopUpDiv').css("display", "block");
+
+    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", "disabled");
@@ -476,8 +486,6 @@
 
 function replaceSmartClose() {
     $('#smartRegexShowDiv > span').css("border","1px solid black");
-
-
     $('#smartRegexPopUpDiv').css("display", "none");
     $("#smartRegexPopUpSelectWord").val("NULL");
     $("#smartRegexPopUpText").val("");
@@ -545,6 +553,7 @@
     replaceSmartClose();
 }
 
+
 $(document).on("click", '#smartRegexShowDiv > span', function (e) {
     
     
@@ -566,6 +575,247 @@
     $('#smartRegexPopUpFor').attr("disabled", false);
 });
 
+function genRegexWindowOpen(){
+    var btn_state = $('#regex_generator').css('display');
+    if (btn_state == "block") {
+        $("#regex_generator").css("display", "none");
+        $("#gen_regex_window_open_id").text("Open Gen Regex");
+    } else { 
+        $('#regex_generator').css("display", "block");
+        $("#gen_regex_window_open_id").text("Close Gen Regex");
+    }
+}
+function genRegexWindowClose(){
+    $('#regex_generator').css("display", "none");
+}
+
+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 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));
+
+}
+
+function getRegex(_pattern) {
+    console.log(_pattern[0]);
+    console.log(_pattern[1]);
+    var p0 = _pattern[0];
+    var p1 = _pattern[1];
+
+    // TODO: find common pattern
+    var reg_str = "";
+    // _p1 = 測試
+    // _p2 = 測<tag_name>試</tag_name>一下
+    var combined = [];
+    if (p0.length > p1.length) {
+        combined = p0;
+    } else if(p0.length < p1.length) {
+        combined = p1;
+    } else {    // equal length
+        // find matching string
+        var cnt = p0.length;
+        for (var i = 0;  i < cnt; i++) {
+            if (p1[i].tag != null) {
+                combined.push({tag:p1[i].tag, txt:"[^○如即而之有<>〈〉【】]{1,"+p1[i].txt.length+"}"});
+            } else if (p0[i].tag != null) {
+                combined.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 += "]";
+                */
+                combined.push({tag:null, txt:common});
+            }
+        };
+    }
+
+    for (var i = 0; i < combined.length; i++) {
+       reg_str += combined[i].txt;
+    };
+
+    return reg_str;
+}
+
+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-md");
+    $(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 = "";
+                // 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);
+                    //pattern2.text(seleted_div.text());
+                    generated_regex = getRegex(pattern_obj);
+
+                } 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);
+
+                    //pattern1.text(pattern2.text());
+                    //pattern2.text(seleted_div);
+                    generated_regex = getRegex(pattern_obj);
+
+                }
+                $('#generated_regex').text(generated_regex);
+                // ---
+
+                $('#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");
+    tag_item_div.appendChild(add_gen_regex_button);    
+}
+
+
 function smartRegexEmpty() {
     $('#smartRegexShowDiv').html("");
     regex_element_index = 0;
@@ -789,7 +1039,12 @@
 
 function smartRegexLoad(topic_id) {
     $('#load_regex_div').html("");
-    $('#load_regex_div').css("display", "block");
+    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";