# HG changeset patch
# User Calvin Yeh <cyeh@mpiwg-berlin.mpg.de>
# Date 1506630408 -7200
# Node ID a36bb5a48af4cc28ded76bfa6aa1e7f1f01c0089
# Parent  21e89eca0b84f0a18708228dc7a9a48de21a7a70
1. remove redundancy server side code.
2. All pop up sub-windows are made with dialog component of bootstrap v3.3.2

diff -r 21e89eca0b84 -r a36bb5a48af4 views/Extractapp/TaggingText.php
--- a/views/Extractapp/TaggingText.php	Thu Sep 28 17:51:53 2017 +0200
+++ b/views/Extractapp/TaggingText.php	Thu Sep 28 22:26:48 2017 +0200
@@ -17,18 +17,18 @@
  * along with Extraction-interface.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-/*! \file 
+/*! \file
  * This is the view for TaggingText.
  * It shows the extraction-interface application itself.
  * The input data for this view come from models/extractapp.php which is handled by controllers/extractapp.php.
- * Input data for example, are (1)text string (containing tags if there are any), 
+ * Input data for example, are (1)text string (containing tags if there are any),
  * (2)taglist for the current topic, (3)book and section information, etc.
  * The output data are passed to backend by controller to corresponding method in model/extractapp.php.
  * Output data is the tagged text string.
- * 
+ *
  * The user interface contains tagging area on the left side, and toolbox on the right side.
  * There are popup windows to assist the tagging task, for example RegEx-editors, tag-window, remove-tag-window, etc.
- * 
+ *
 */
 
 // --- initialize config file and input text ---
@@ -41,7 +41,7 @@
 $topic_name = $viewmodel['topic_name']; // array of names
 $topic_tag = $viewmodel['topic_tag'];
 $topic_tag_ch = $viewmodel['topic_tag_ch'];
-$info = $viewmodel['info']; 
+$info = $viewmodel['info'];
 $messages = $viewmodel['messages'];
 
 $taglist_infile = $viewmodel['taglist_infile'];
@@ -57,6 +57,8 @@
     <meta http-equiv="no-cache">
     <meta http-equiv="Expires" content="-1">
     <meta http-equiv="Cache-Control" content="no-cache">
+    <?php include 'views/maintemplate.php'; ?>
+    <script src="../js/jquery.bootstrap-growl.min.js"></script>
 
 <style>
 dynasty
@@ -71,17 +73,33 @@
 {
 	color:orange;
 }
+
+body {
+  overflow: hidden;
+  padding: 15px;
+}
+
+#editable-area-wraper {
+  height: 90vh;
+  overflow: auto;
+}
+
 #editable-area {
 	line-height:160%;
 	letter-spacing:1.5px;
 	font-size:21px;
+    word-wrap: break-word;
 }
 
+
 <?php
 // color on the tags
 foreach ( $taglistArray as $taglistValue ) {
+
     echo $taglistValue[2]."\n{\ncolor:".$taglistValue[3]."; cursor: hand;\n}\n";
-    
+
+    echo ".EditingMode ".$taglistValue[2]."\n{\ncursor: initial;\n}\n";
+
     echo ".span_".$taglistValue[2]."\n{\nbackground-color:".$taglistValue[3]."\n}\n";
 }
 
@@ -108,7 +126,7 @@
 
     for (var i = 0; i < taglistArray.length; i++) {
         var taglistValue = taglistArray[i];
-        
+
         $(taglistValue[2]).css('color', taglistValue[3]);
         /*var element = document.querySelectorAll(taglistValue[2]);
         for (var j = 0; j < element.length; j++) {
@@ -119,11 +137,10 @@
 }
 
 
-// ---- use cookie to save text and reload page for the up-to-date taglist 
+// ---- use cookie to save text and reload page for the up-to-date taglist
 function updatePage() {
     var text = getCookie();
     //document.forms['receiver'].elements['message'].value = text;
-    console.log(text);
     if (text == "reload") {
         setCookie("");
         saveTextToLGService();
@@ -151,13 +168,13 @@
     form.setAttribute("action", "./TaggingText");  // hand to controller
     form.setAttribute("target", "_blank");
 
-    var hiddenField = document.createElement("input");      
+    var hiddenField = document.createElement("input");
     hiddenField.setAttribute("name", "topic");
     var topic_id = JSON.parse('<?php echo json_encode($default_topic_id) ?>');
     hiddenField.setAttribute("value", topic_id);
     form.appendChild(hiddenField);
 
-    var hiddenField = document.createElement("input");      
+    var hiddenField = document.createElement("input");
     hiddenField.setAttribute("name", "func");
     hiddenField.setAttribute("value", "ReloadText");
     form.appendChild(hiddenField);
@@ -177,7 +194,7 @@
         return;
     }
     return;
-    
+
 }
 
 // on click on tagged words, call removeTagNewDiv() for the popup window
@@ -186,46 +203,35 @@
 var taglistArray = JSON.parse('<?php echo json_encode($taglistArray) ?>');
 for (var i = 0; i < taglistArray.length; i++) {
     var taglistValue = taglistArray[i];
-    
-  
+
+
     $(document).on("click", taglistValue[2], function (e, taglistValue) {
-        if ($("#editTextId").html() != "Edit text") return 0;
+        //if ($("#editTextId").html() != "Edit text") return 0;
+        if(EditingMode === "editing") return 0;
         var tag = $(this).prop("tagName").toLowerCase();
         //if (tagName != taglistValue[2]) return 0;
-    
+
         // pop_remove_tag_window is a global variable which indicates if to show the remove-popup-window
         if (pop_remove_tag_window) {
             removeTagNewDiv( e, tag , $(this));
-    
+
         };
-        return false;  
+        return false;
   });
-  
+
 
 
 };
 
-/*
-<?php 
-foreach ( $taglistArray as $taglistValue ) {
-	echo '$(document).on("click", "'.$taglistValue[2].'", function (e) {'."\n";
-	echo "\t".'if ( $(this).prop("tagName").toLowerCase() != "'.$taglistValue[2].'" ) return 0;'."\n";
-	echo "\t".'if ( $("#editTextId").html() != "Edit text" ) return 0;'."\n";
-	echo "\tremoveTagNewDiv( e, \"".$taglistValue[2]."\", $(this) );\n";
-	echo "});\n";
-}
-?>
-*/
-
 $(document).ready(function(){
 
     $("#loading").hide();
 
-    // --- for sidebar--- 
+    // --- for sidebar---
     //run once
     var el=$('#follow-scroll');
     var originalelpos=el.offset().top; // take it where it originally is on the page
-    
+
     //run on scroll
     $(window).scroll(function(){
         var el = $('#follow-scroll'); // important! (local)
@@ -242,7 +248,7 @@
     //run once
     var el=$('#popups');
     var originalelpos=el.offset().top; // take it where it originally is on the page
-    
+
     //run on scroll
     $(window).scroll(function(){
         var el = $('#popups'); // important! (local)
@@ -255,7 +261,7 @@
     // ---
 
 
-    // === This case only be possible for developing on local machine ==== 
+    // === This case only be possible for developing on local machine ====
     var _GET = JSON.parse('<?php echo json_encode($_GET) ?>');
     if (_GET['id']) {
         var info = JSON.parse('<?php echo json_encode($info) ?>');
@@ -267,7 +273,7 @@
             '</form>');
             $('body').append(form);
             $(form).submit();
-    } 
+    }
     // --------
 
     // --- handle file version conflict ---
@@ -283,6 +289,7 @@
     var taglist_infile = JSON.parse('<?php echo json_encode($taglist_infile) ?>');
     var taglistArray = JSON.parse('<?php echo json_encode($taglistArray) ?>');
 
+    /*
     if (taglist_infile == "") {
         console.log("Debug: taglist_infile is empty which means taglist_infile is equal to taglist in db.");
     } else {
@@ -294,76 +301,100 @@
         // TOOD: ask user to modify/decide tags (?)
         // showing taglist_infile and taglistArray
     }
-
+    */
+    //prevent user paste rich text which means html tag with attributes
+    $('[contenteditable]').on('paste', function(e) {
+        e.preventDefault();
+        var text = '';
+        if (e.clipboardData || e.originalEvent.clipboardData) {
+          text = (e.originalEvent || e).clipboardData.getData('text/plain');
+        } else if (window.clipboardData) {
+          text = window.clipboardData.getData('Text');
+        }
+        if (document.queryCommandSupported('insertText')) {
+          document.execCommand('insertText', false, text);
+        } else {
+          document.execCommand('paste', false, text);
+        }
+    });
 });
 
 $(document).on("mouseup", '#editable-area', function (e) {
+
     $('.questionMarkClass').remove();
     $('.tagItemDivClass').remove();
-   
-    if ( $("#editTextId").html() != "Edit text" ) return 0;
-    
+
+    //if ( $("#editTextId").html() != "Edit text" ) return 0;
+    if(EditingMode === "editing") return 0;
+
     //var selection = getSelected();
     selection = getSelected();  // selection is a global variable
 
     range = selection.getRangeAt(0);    // range is a global variable
-    
+
     container = document.createElement("div");
     container.appendChild(selection.getRangeAt(0).cloneContents());
 
+    let userTags = {};
+
+    <?php
+        foreach ( $taglistArray as $taglistValue ) {
+            echo "userTags['".$taglistValue[1]."']='".$taglistValue[2]."';\n";
+        }
+    ?>
 
     if(selection && (selection_plain = new String(selection).replace(/^\s+|\s+$/g,''))) {
-        try{
+        //try{
         	var newdiv = document.createElement("div");
             //newdiv.id = "tagItemDivId";
             //newdiv.setAttribute("class", "tagItemDivClass");
             $(newdiv).id = "tagItemDivId";
             $(newdiv).addClass("tagItemDivClass");
-            newdiv.style.cssText = 'top:'+e.pageY+'; left:'+e.pageX+';';
-            //console.log(selection.getRangeAt(0).cloneContents());
+
             if ( container.innerHTML.indexOf( "br" ) != -1 ) {
-                // when selected words containing tags (i.e. has 'br' in the selected string), 
+
+                // when selected words containing tags (i.e. has 'br' in the selected string),
                 // which means user want to apply Title / or tags all in once at each line
                 // This may not be the best checking solution, since 'br' also appears between not-tagged words
 
                 var newselect = document.createElement("select");
                 newselect.id = "TitletagType";
-                //console.log(JSON.parse('<?php echo json_encode($taglistArray) ?>'));
+                let strTagOpts = '';
+
+                for(let key in userTags){
 
-                <?php 
-                    foreach ( $taglistArray as $taglistValue ) {
-                        echo "newselect.innerHTML += \"<option value='".$taglistValue[2]."'>".$taglistValue[1]."</option>\";\n";
-                    }
-                ?>
+                     strTagOpts += (`<option value='${userTags[key]}'>${key}</option>`);
+                }
+
+                newselect.innerHTML = strTagOpts;
+
                 newdiv.appendChild(newselect);
-                
+
                 //matchValue =  .match();
                 myRegexp = new RegExp("〈(.*?)〉", "g")
                 matchValue = myRegexp.exec(String(selection));
-                
-                if ( matchValue != null ) {
-                    newdiv.innerHTML += "<input id=\"TitletagName\" value=\""+ matchValue[1] +"\"></br>";
-                } else {
-                    newdiv.innerHTML += "<input id=\"TitletagName\" value=\"\"></br>";
-                }
-                newdiv.innerHTML += "<button onclick=\"addTagTitle( range, container )\">Add Title Tag To Each Line</button></br>";
-                
+
+                newdiv.innerHTML += `<input id='TitletagName' value='${(matchValue) ? matchValue[1] : ''}'>`;
+                newdiv.innerHTML += "<div style='text-align:right;margin:3px 0px 8px;'><button class='btn btn-sm btn-primary' onclick=\"addTagTitle(range, container)\">Add Title Tag To Each Line</button><div>";
+
                 /*
                 newdiv.innerHTML += "<button onclick=\"exportTable( range, container )\">Export As A Table</button></br></br>";
                 */
 
                 var newselect = document.createElement("select");
                 newselect.id = "RemoveTitletagType";
-                <?php 
-                    foreach ( $taglistArray as $taglistValue ) {
-                        echo "newselect.innerHTML += \"<option value='".$taglistValue[2]."'>".$taglistValue[1]."</option>\";\n";
-                    }
-                ?>
+                newselect.innerHTML = strTagOpts;
                 newdiv.appendChild(newselect);
-                
-                newdiv.innerHTML += "<input id=\"RemoveTitletagName\" value=\"\"></br>";
-                newdiv.innerHTML += "<button onclick=\"removeTagTitle( range, container )\">Remove</button></br>";
+
+                newdiv.innerHTML += "<input id=\"RemoveTitletagName\" value=\"\"><br>";
+                newdiv.innerHTML += "<div style='text-align:right;margin:3px 0px;'><button class='btn btn-sm btn-default' onclick=\"removeTagTitle( range, container )\">Remove</button></br>";
+
+                let pageY = e.pageY,
+                    topPosi = pageY - ( (window.innerHeight - pageY < 145 ) ? 145 : 0);
+                newdiv.style.cssText = 'top:'+ topPosi +'; left:'+e.pageX+';';
+
             } else {
+
      			// for pop up window on edit-area for tag list
                 // newdiv.innerHTML = "Tagging word: "+String(selection)+"<br>";
                 var tagging_words = document.createElement("div");
@@ -376,57 +407,74 @@
                 $(tagging_tags).addClass("bg-white");
                 $(tagging_tags).text("Tag as: ");
 
-                tagging_tags.innerHTML += "<button accesskey=\"2\" onclick=\"tagwithtitle( range, '"+String(selection_plain)+"' )\">Title</button></br>";
-               
+                tagging_tags.innerHTML += "<button class='btn btn-sm btn-primary' accesskey=\"2\" onclick=\"tagwithtitle( range, '"+String(selection_plain)+"' )\">Title</button>";
 
-                console.log(selection);
+                var tagBtns_area = document.createElement("div");
+                $(tagBtns_area).addClass("tagBtns-area");
 
-                console.log(JSON.parse('<?php echo json_encode($taglistArray) ?>'));
-                
-                console.log(JSON.parse('<?php echo json_encode($topic_tag) ?>'));
-
+                let tagVal,
+                    tagging_btns = {R1:[], R2:[], R3:[], R4:[]},
+                    aryMainTaggingBtns = [],
+                    aryTaggingBtns = [],
+                    <?php echo "defaultTopicTag='".$topic_tag."';\n" ?>;
 
-                <?php 
+                for(let key in userTags){
+
+                    tagVal = userTags[key];
 
-                foreach ( $taglistArray as $taglistValue ) {
-                    if ($taglistValue[2] == $topic_tag) {
-                    	echo "tagging_tags.innerHTML += \"<button accesskey=\\\"1\\\" onclick=\\\"tagwithOnlytag( range, selection, '".$taglistValue[2]."2' )\\\">".$taglistValue[1]."</button>\";\n";
-                        echo "tagging_tags.innerHTML += \"<button accesskey=\\\"1\\\" onclick=\\\"tagwithOnlytag( range, selection, '".$taglistValue[2]."' )\\\">".$taglistValue[1]."(without new line)</button>\";\n";
-                        echo "tagging_tags.innerHTML += \"<button onclick=\\\"tagStringWithTag( '\"+String(selection_plain)+\"', '".$taglistValue[2]."' )\\\">".$taglistValue[1]."(ALL)</button></br>\";\n";
-                        break;
-                	}
+                    if (tagVal == defaultTopicTag) {
+                        aryMainTaggingBtns.push(`<button class='btn btn-primary' accesskey="1" onclick="tagwithOnlytag(range, selection, '${tagVal}2')">${key}</button>`);
+                        aryMainTaggingBtns.push(`<button class='btn btn-default' onclick="tagStringWithTag('${String(selection_plain)}', '${tagVal}')">${key}(ALL)</button>`);
+                        aryMainTaggingBtns.push(`<button class='btn btn-default' accesskey="1" onclick="tagwithOnlytag(range, selection, '${tagVal}')">${key}(without new line)</button>`);
+                    }
+                    else{
+                        aryTaggingBtns.push(`<button class='btn btn-primary' onclick="tagwithOnlytag(range, selection, '${tagVal}')">${key}</button>`);
+                        aryTaggingBtns.push(`<button class='btn btn-default' onclick="tagStringWithTag('${String(selection)}', '${tagVal}')">${key}(ALL)</button>`);
+                    }
                 }
-			    foreach ( $taglistArray as $taglistValue ) {
-                    if ($taglistValue[2] == $topic_tag) { 
-                		// pass
-                	} else if ($taglistValue[2] == "post_time") {
-                        // this case could be deprecated
-                        echo "tagging_tags.innerHTML += \"<button accesskey=\\\"3\\\" onclick=\\\"tagwithOnlytag( range, selection, '".$taglistValue[2]."' )\\\">Tag as:".$taglistValue[1]."</button>\";\n";
-                        echo "tagging_tags.innerHTML += \"<button onclick=\\\"tagStringWithTag( '\"+String(selection)+\"', '".$taglistValue[2]."' )\\\">Tag as:".$taglistValue[1]."(ALL)</button></br>\";\n";
-                    } else if ($taglistValue[2] == "office") {
-                        // this case could be deprecated
-                        echo "tagging_tags.innerHTML += \"<button accesskey=\\\"4\\\" onclick=\\\"tagwithOnlytag( range, selection, '".$taglistValue[2]."' )\\\">".$taglistValue[1]."</button>\";\n";
-                        echo "tagging_tags.innerHTML += \"<button onclick=\\\"tagStringWithTag( '\"+String(selection)+\"', '".$taglistValue[2]."' )\\\">".$taglistValue[1]."(ALL)</button></br>\";\n";
-                    } else {
-                        echo "tagging_tags.innerHTML += \"<button onclick=\\\"tagwithOnlytag(range, selection, '".$taglistValue[2]."')\\\">".$taglistValue[1]."</button>\";\n";
-                        echo "tagging_tags.innerHTML += \"<button onclick=\\\"tagStringWithTag( '\"+String(selection)+\"', '".$taglistValue[2]."' )\\\">".$taglistValue[1]."(ALL)</button></br>\";\n";
+
+               var remainder, btnRow;
+               for(let idx = 0, len = aryTaggingBtns.length - 1; idx < len; idx = idx + 2){
+
+                   remainder = (idx / 2 % 4) + 1;
+
+                   btnRow = tagging_btns["R" + remainder];
+                   btnRow.push(aryTaggingBtns[idx]);
+                   btnRow.push(aryTaggingBtns[idx+1]);
+               }
+
+               var str_tagging_btns = "";
+
+               if(aryMainTaggingBtns.length > 0){
+                  str_tagging_btns = "<tr><td>"
+                                    + aryMainTaggingBtns[0] + "</td><td>"
+                                    + aryMainTaggingBtns[1] + "</td><td colspan='2'>"
+                                    + aryMainTaggingBtns[2] + "</td></tr>";
+               }
+
+               for(let idx = 1, len = 4; idx <= len; idx++){
 
-                        /* testing... backup the original one
+                   btnRow = tagging_btns["R" + idx];
+
+                   if(btnRow.length > 0){
 
-                        echo "tagging_tags.innerHTML += \"<button onclick=\\\"tagwithOnlytag( range, '\"+String(selection)+\"', '".$taglistValue[2]."' )\\\">".$taglistValue[1]."</button>\";\n";
-                        echo "tagging_tags.innerHTML += \"<button onclick=\\\"tagStringWithTag( '\"+String(selection)+\"', '".$taglistValue[2]."' )\\\">".$taglistValue[1]."(ALL)</button></br>\";\n";
-                        */
+                       str_tagging_btns += ("<tr><td>" + btnRow.join("</td><td>") + "</td></tr>");
+                   }
+               }
+
+               str_tagging_btns = "<table>" + str_tagging_btns + "</table>";
 
-                    } 
-                }
-                ?>
+               tagBtns_area.innerHTML = str_tagging_btns;
+
+               newdiv.appendChild(tagging_tags);
+               newdiv.appendChild(tagBtns_area);
 
-                newdiv.appendChild(tagging_tags);
+               let tagCnt = aryTaggingBtns.length / 2,
+                   heightLimit = 109 + ( (tagCnt >= 4) ? 4 : ( tagCnt % 4 ) ) * 32,
+                   pageY = e.pageY,
+                   topPosi = pageY - ( (window.innerHeight - pageY < heightLimit ) ? heightLimit : 0);
 
-                
-                // add selected words to generator regex
-                // remove this feature...
-                // genRegexBySelection(newdiv, selection); // append button to newdiv and handle the selection words
+               newdiv.style.cssText = 'top:'+ topPosi +'; left:'+e.pageX+';max-height:280px;';
 
             }
 
@@ -436,11 +484,11 @@
 
             // selected some words, so hide popping up remove-tag-window
             pop_remove_tag_window = false;   // questionMarkID
-        }
-        catch(err){
-            pop_remove_tag_window = true;   // questionMarkID
-            
-        }
+        // }
+        // catch(err){
+        //     pop_remove_tag_window = true;   // questionMarkID
+        //
+        // }
     } else {
         // without selecting any word, so pop up remove-tag-window
         pop_remove_tag_window = true;
@@ -456,23 +504,23 @@
     form.setAttribute("method", "post");
     form.setAttribute("action", "./ExportTable");
     form.setAttribute("target", "_blank");
-    
-    var hiddenField = document.createElement("input");      
+
+    var hiddenField = document.createElement("input");
     hiddenField.setAttribute("name", "func");
     hiddenField.setAttribute("value", "exportFromExtractionInterface");
     form.appendChild(hiddenField);
 
-    var hiddenField = document.createElement("input");      
+    var hiddenField = document.createElement("input");
     hiddenField.setAttribute("name", "content");
     hiddenField.setAttribute("value", container.innerHTML);
     form.appendChild(hiddenField);
 
-    var hiddenField = document.createElement("input");      
+    var hiddenField = document.createElement("input");
     hiddenField.setAttribute("name", "sectionid");
     hiddenField.setAttribute("value", "<?php echo $section_id; ?>");
     form.appendChild(hiddenField);
-    
-    var hiddenField2 = document.createElement("input");      
+
+    var hiddenField2 = document.createElement("input");
     hiddenField2.setAttribute("name", "topic");
     hiddenField2.setAttribute("value", topic_id);
     form.appendChild(hiddenField2);
@@ -481,17 +529,17 @@
     var book_meta = JSON.parse( '<?php echo json_encode($book_meta) ?>');
 
     if (info) {
-        var hiddenField = document.createElement("input");      
+        var hiddenField = document.createElement("input");
         hiddenField.setAttribute("name", "bookId");
         hiddenField.setAttribute("value", info['book_id']);
-        form.appendChild(hiddenField);   
+        form.appendChild(hiddenField);
 
-        var hiddenField = document.createElement("input");      
+        var hiddenField = document.createElement("input");
         hiddenField.setAttribute("name", "bookName");
         hiddenField.setAttribute("value", info['book_name']);
-        form.appendChild(hiddenField);   
-        
-        var hiddenField = document.createElement("input");      
+        form.appendChild(hiddenField);
+
+        var hiddenField = document.createElement("input");
         hiddenField.setAttribute("name", "sectionName");
         hiddenField.setAttribute("value", info['section_name']);
         form.appendChild(hiddenField);
@@ -506,10 +554,28 @@
         document.body.appendChild(form);
         form.submit();
         document.body.removeChild(form);
-        //form.submit(); // works under IE and Chrome, but not FF  
+        //form.submit(); // works under IE and Chrome, but not FF
     }
 }
 
+var exportMode = "all";
+
+function onExportModeChanged(ele){
+     exportMode = ele.value
+}
+
+function startExport(topic_id){
+
+     switch(exportMode){
+         case "all" :
+             exportAll(topic_id);
+             break;
+         case "pages" :
+             exportPage(topic_id);
+             break;
+     }
+}
+
 function exportPage(topic_id) {
     var startPage = $('#exportPageStart').val();
     var endPage = $('#exportPageEnd').val();
@@ -518,53 +584,52 @@
     var str="" + el.innerHTML;
 
     var regexText="【<a([^<>]*?)>"+startPage+"</a>】(.*?)【<a([^<>]*?)>"+endPage+"</a>】";
-    
+
     var form = document.createElement("form");
     form.setAttribute("method", "post");
     form.setAttribute("action", "./ExportTable");
     form.setAttribute("target", "_blank");
-    
-    var hiddenField = document.createElement("input");      
+
+    var hiddenField = document.createElement("input");
     hiddenField.setAttribute("name", "func");
     hiddenField.setAttribute("value", "exportFromExtractionInterface");
-    form.appendChild(hiddenField); 
+    form.appendChild(hiddenField);
 
-    var hiddenField = document.createElement("input");      
+    var hiddenField = document.createElement("input");
     hiddenField.setAttribute("name", "content");
     hiddenField.setAttribute("value", str.match(new RegExp(regexText, "g")));
     form.appendChild(hiddenField);
 
-    var hiddenField = document.createElement("input");      
+    var hiddenField = document.createElement("input");
     hiddenField.setAttribute("name", "topic");
     hiddenField.setAttribute("value", topic_id);
     form.appendChild(hiddenField);
 
     _postForContineTagging(form);
-   
+
 
     /*
     var section_id = JSON.parse('<?php echo json_encode($section_id) ?>');
-    console.log("section_id: "+section_id+", topic_id: "+topic_id);
 
-    var hiddenField = document.createElement("input");      
+    var hiddenField = document.createElement("input");
     hiddenField.setAttribute("name", "sectionId");
     hiddenField.setAttribute("value", section_id);
-    form.appendChild(hiddenField);   
- 
+    form.appendChild(hiddenField);
+
     var info = JSON.parse( '<?php echo json_encode($info) ?>');
 
     if (info) {
-        var hiddenField = document.createElement("input");      
+        var hiddenField = document.createElement("input");
         hiddenField.setAttribute("name", "bookId");
         hiddenField.setAttribute("value", info['book_id']);
-        form.appendChild(hiddenField);   
+        form.appendChild(hiddenField);
 
-        var hiddenField = document.createElement("input");      
+        var hiddenField = document.createElement("input");
         hiddenField.setAttribute("name", "bookName");
         hiddenField.setAttribute("value", info['book_name']);
-        form.appendChild(hiddenField);   
-        
-        var hiddenField = document.createElement("input");      
+        form.appendChild(hiddenField);
+
+        var hiddenField = document.createElement("input");
         hiddenField.setAttribute("name", "sectionName");
         hiddenField.setAttribute("value", info['section_name']);
         form.appendChild(hiddenField);
@@ -576,7 +641,7 @@
         document.body.appendChild(form);
         form.submit();
     } else {
-        form.submit(); // works under IE and Chrome, but not FF  
+        form.submit(); // works under IE and Chrome, but not FF
     }
     */
 }
@@ -588,20 +653,20 @@
     form.setAttribute("method", "post");
     form.setAttribute("action", "./ExportTable");//+section_id);  // hand to controller
     form.setAttribute("target", "_blank");
-    
-    var hiddenField = document.createElement("input");      
+
+    var hiddenField = document.createElement("input");
     hiddenField.setAttribute("name", "func");
     hiddenField.setAttribute("value", "exportFromExtractionInterface");
-    form.appendChild(hiddenField); 
-  
+    form.appendChild(hiddenField);
 
 
-    var hiddenField = document.createElement("input");      
+
+    var hiddenField = document.createElement("input");
     hiddenField.setAttribute("name", "content");
     hiddenField.setAttribute("value", str);
     form.appendChild(hiddenField);
 
-    var hiddenField = document.createElement("input");      
+    var hiddenField = document.createElement("input");
     hiddenField.setAttribute("name", "topic");
     hiddenField.setAttribute("value", topic_id);
     form.appendChild(hiddenField);
@@ -610,10 +675,7 @@
 
 }
 
-
 function tagTestX(range, selection, tag) {
-    console.log("selection string: ");
-    console.log(String(selection));
 
     var stringSelection = String(selection);
 
@@ -627,23 +689,23 @@
 
     // ---
     var documentFragment = range.extractContents();
-        
-    
+
+
     var tmpStringSelection = ""
     var childNodes = documentFragment.childNodes
     for (var i = 0; i < childNodes.length; i++){
 
         if (childNodes[i].outerHTML == undefined) {
-            
+
             tmpStringSelection += childNodes[i].textContent
         } else {
-            
+
             tmpStringSelection += childNodes[i].outerHTML
         }
-        
+
     }
 
-    stringSelection = tmpStringSelection
+    stringSelection = tmpStringSelection;
 
     range.deleteContents();
 
@@ -663,95 +725,64 @@
 
     $('.tagItemDivClass').remove();
 
-
-    return
-
-
-    // ---
+    return;
 
-    console.log("the anchorNode: ");
-    console.log(selection.anchorNode);
+    // TODO if no fragment... bug
 
-    console.log("the anchorNode's nextSibling");
-    console.log(next);
-    
-        
-    // TODO if no fragment... bug 
-       
     if ( typeof selection !== 'string' ) {
         var next = selection.anchorNode.nextSibling;
 
-
-
         // TODO fragment at the beginning of selection: anchorNode
         var tmpStringSelection = ""
 
-        var startInx = selection.anchorOffset 
-        var endSelectionInx = startInx + stringSelection.length
-        var endInx = selection.anchorNode.length
-        console.log("startInx=" + startInx + " endInx= " + endInx + "; endSelectionInx= " + endSelectionInx)
+        var startInx = selection.anchorOffset;
+        var endSelectionInx = startInx + stringSelection.length;
+        var endInx = selection.anchorNode.length;
 
-        var anchorText = selection.anchorNode.textContent
-               
+        var anchorText = selection.anchorNode.textContent;
 
         /*
-        console.log("anchorNode...")
-        if (selection.anchorNode.nodeType == 3 && next.nodeName != "BR" && next.nodeName != "br") {  
-        // if (next != null && selection.anchorNode.nodeType == 3 && next.nodeName != "BR" && next.nodeName != "br") {  
+        if (selection.anchorNode.nodeType == 3 && next.nodeName != "BR" && next.nodeName != "br") {
+        // if (next != null && selection.anchorNode.nodeType == 3 && next.nodeName != "BR" && next.nodeName != "br") {
                 // here the anchor node is text
-                 
+
                 //tmpStringSelection += anchorText.substring(selection.anchorOffset, selection.anchorNode.length);
                 tmpStringSelection += anchorText.substring(startInx, endSelectionInx);
 
-                console.log("append anchorText to tmpStringSelection: " + tmpStringSelection)
-               
                 endInx += endSelectionInx - startInx;
-        
+
                 //endInx += (selection.anchorNode.length - selection.anchorOffset);
-        
+
 
         }
         */
 
         // TODO when anchorNode is not text, but a node
 
-        
+
         /*
         if (next != null) {
 
-            if (selection.anchorNode.nodeType == 3 && next.nodeName != "BR" && next.nodeName != "br") {  
+            if (selection.anchorNode.nodeType == 3 && next.nodeName != "BR" && next.nodeName != "br") {
                 var anchorText = selection.anchorNode.textContent
                 // never goes here?
                 tmpStringSelection += anchorText.substring(selection.anchorOffset, selection.anchorNode.length);
 
-                console.log("append anchorText to tmpStringSelection: " + tmpStringSelection)
-               
 
-            } 
+            }
         }
         */
 
         // TODO parsing stringSelection object in string, with the tagging strucutre
-        
+
         var checkExtentNode = true
 
-        while(next != null && next != undefined && next.nodeName != "BR" && next.nodeName != "br" ) {    
-            
-            /*
-            if (endInx >= endSelectionInx) {
-                console.log("startInx=" + startInx + " endInx= " + endInx + "; endSelectionInx= " + endSelectionInx)
-
-                console.log("debug: end of traverse. next=")
-                console.log(next)
-
-                break;
-            }
-            */
+        while(next != null && next != undefined && next.nodeName != "BR" && next.nodeName != "br" ) {
 
            startInx = endInx
 
             if (next.nodeType == 3) {   // text case
-                console.log("text case.")
+
 
                 endInx += next.textContent.length
 
@@ -760,8 +791,6 @@
                     /*
                     tmpStringSelection += next.textContent.substring(0, endSelectionInx-startInx)
 
-                    console.log("startInx=" + startInx + " endInx= " + endInx + "; endSelectionInx= " + endSelectionInx)
-                    console.log("appened next.textContent.substring tmpStringSelection (text case): " + tmpStringSelection)
                     */
 
                     //checkExtentNode = false
@@ -769,27 +798,20 @@
                     //break;
                 } else {
 
+                    tmpStringSelection += next.textContent;
 
-                    tmpStringSelection += next.textContent;
-                    console.log("appened tmpStringSelection (text case): " + tmpStringSelection)
-
-                
                 }
 
-    
-                
+
+
             } else if (next.nodeType == 1) { // node case
-                console.log("node case")
 
-                endInx += next.innerHTML.length 
+                endInx += next.innerHTML.length
 
                 if (endInx > endSelectionInx) {
 
                     // TODO do something about tmpStringSelection here?
 
-                    console.log("startInx=" + startInx + " endInx= " + endInx + "; endSelectionInx= " + endSelectionInx)
-
-
                     //checkExtentNode = false
 
                     //break;
@@ -797,72 +819,62 @@
 
 
                     tmpStringSelection += next.outerHTML;
-                    console.log("appened tmpStringSelection (node case): " + tmpStringSelection)
+
                 // endInx += next.outerHTML.length
                 }
 
 
             } else {
-                console.log("[debug] case: nodeType=" + next.nodeType)
+                //console.log("[debug] case: nodeType=" + next.nodeType)
             }
 
 
             /*
 
             } else if (next.innerHTML != undefined) {
-               
+
 
                 endInx += next.innerHTML.length;
                 if (endInx >= endSelectionInx) {
                     break;
                 }
-        
-            
+
+
             } else {
                 break
             }
-            console.log("startInx= " + startInx + "; endInx= " + endInx)
+
             if (next.outerHTML != undefined) {
                 tmpStringSelection += next.outerHTML;
-                console.log("appened tmpStringSelection: " + tmpStringSelection)
-
-            } 
+            }
             */
 
-            console.log("next: ");
-            console.log(next);
             next = next.nextSibling;
-            
+
         }
 
-        
-        // TODO 
+
+        // TODO
         // fragment at the end of selection: extentNode
-        
-        console.log("extentNode...")
-        console.log("startInx=" + startInx + " endInx= " + endInx + "; endSelectionInx= " + endSelectionInx)
-        
+
         var extentNode = selection.extentNode
 
-        
+
         if (checkExtentNode) {
 
             if (endInx < endSelectionInx && startInx < endSelectionInx ) {
                 tmpStringSelection += anchorText.substring(endInx, endSelectionInx);
-                console.log("append anchorText.substring(endInx, endSelectionInx) to tmpStringSelection: " + tmpStringSelection)
-        
+
             } else if (extentNode != null) {
                 var extentText = extentNode.textContent
-                
+
                 tmpStringSelection += extentText.substring(startInx, endSelectionInx);
 
-                console.log("append extentNode to tmpStringSelection: " + tmpStringSelection)
             } else {
                 tmpStringSelection += anchorText.substring(startInx, endSelectionInx);
-                console.log("append anchorText.substring(startInx, endSelectionInx) to tmpStringSelection: " + tmpStringSelection)
             }
         }
-        
+
         /*
         if (extentNode != null) {
             if (extentNode.nodeType == 3  ) { // text case
@@ -870,25 +882,18 @@
 
                 if (endInx >= endSelectionInx) {
 
-                    console.log("tmpStringSelection: " + tmpStringSelection)    
-
-                    console.log(extentText.substring(startInx, selection.extentOffset))
                     tmpStringSelection += extentText.substring(startInx, endSelectionInx);
-                 
-                    console.log("append extentNode to tmpStringSelection: " + tmpStringSelection)
 
                 } else {
                      tmpStringSelection += anchorText.substring(endInx, endSelectionInx);
 
                 }
-            } 
+            }
         }
         */
 
-        console.log("tmpStringSelection:")
-        console.log(tmpStringSelection)
         stringSelection = tmpStringSelection;
-    
+
     }
 
     range.deleteContents();
@@ -913,7 +918,7 @@
 }
 
 function tagwithOnlytag( range, selection, tag ) {
-    
+
     $('#loading').show();
 
     saveUndoText();
@@ -921,8 +926,6 @@
     var topic_tag2 = topic_tag+"2";
 
     var documentFragment = range.extractContents();
-    
-    console.log("topic_tag: "+ topic_tag + ", topic_tag2: " + topic_tag2);
 
     var stringSelection = ""
     var childNodes = documentFragment.childNodes
@@ -932,13 +935,9 @@
         } else {
             stringSelection += childNodes[i].outerHTML
         }
-        
+
     }
 
-
-    //console.log("stringSelection: " + stringSelection);
-
-
     range.deleteContents();
 
     if ( tag==topic_tag2) {
@@ -989,11 +988,11 @@
     saveUndoText();
     var startPage = $('#regexPageStart2').val();
     var endPage = $('#regexPageEnd2').val();
-    
+
     var el = document.getElementById("editable-area");
     var regexText=document.getElementById("regexText").value;
-    
-    <?php 
+
+    <?php
     foreach ( $wordlistArray as $wordlistValue ) {
         echo "\tvar regexText1=\"List ".$wordlistValue[1]."\";\n";
         echo "\tregexText1 = preg_quote(regexText1);\n";
@@ -1001,24 +1000,39 @@
         echo "\tregexText = regexText.replace(new RegExp(regexText1, \"g\"), replaceText1);\n\n";
     }
     ?>
-    
+
     var replaceText=document.getElementById("replaceText").value;
     var str="" + el.innerHTML;
-    
+    var objReg1 = new RegExp(regexText, "g");
+    var occurrences, info;
     if ( startPage == "" ) {
-        alert( "Tagged "+str.match(new RegExp(regexText, "g")).length+" entities!" );
-        el.innerHTML = str.replace(new RegExp(regexText, "g"), replaceText);
+
+        occurrences = (str.match(objReg1)||[]).length;
+
+        if(occurrences > 0){
+            info = "Replaced "+ occurrences +" entities.";
+            el.innerHTML = str.replace(objReg1, replaceText);
+        }
     } else {
         var regexText2="【<a([^<>]*?)>"+startPage+"</a>】(.*?)【<a([^<>]*?)>"+endPage+"</a>】";
-        var partString = ""+str.match(new RegExp(regexText2, "g"));
-        alert(partString);
-        
-        alert( "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(regexText2, "g"), resultString);
+        var objReg2 = new RegExp(regexText2, "g");
+        var partString = "" + str.match(objReg2);
+        //alert(partString);
+
+        occurrences = (partString.match(objReg1)||[]).length;
+
+        if(occurrences > 0){
+            info = "Replaced "+ occurrences +" entities.";
+            var resultString = partString.replace(objReg1, replaceText);
+
+            str = "" + el.innerHTML;
+            el.innerHTML = str.replace(objReg2, resultString);
+        }
     }
+
+    if(occurrences == 0) info = "Found 0 occurrence.";
+
+    $.bootstrapGrowl(info);
     //document.styleSheets[0].addRule("tag001", "color:green;")
 }
 
@@ -1026,7 +1040,7 @@
     // clean editable-area
     $('.questionMarkClass').remove();
     $('.tagItemDivClass').remove();
- 
+
     // -------------
     var info = JSON.parse('<?php echo json_encode($info) ?>');
     var topic_id = JSON.parse('<?php echo json_encode($default_topic_id) ?>');
@@ -1042,10 +1056,10 @@
 
         if(dd<10) {
             dd='0'+dd
-        } 
+        }
         if(mm<10) {
             mm='0'+mm
-        } 
+        }
         today = dd+'.'+mm+'.'+yyyy;
         var book_name = info['book_name'];
         var section_name = info['section_name'];
@@ -1057,38 +1071,38 @@
         } else {
             default_label = book_name + "(" + cjst.chineseToPinyin(book_name).join(' ') + ")_"
                             + period + "(" + cjst.chineseToPinyin(period).join(' ') + ")_"
-                            + section_name + "(" + cjst.chineseToPinyin(section_name).join(' ') + ")_" 
+                            + section_name + "(" + cjst.chineseToPinyin(section_name).join(' ') + ")_"
                             + today;
         }
-        
+
 
         var label = prompt("Please enter your label for this new task", default_label);
         while (label == null) {
             alert("You haven't saved your editing.");
             return;
-        }    
+        }
     };
-    
+
     var form = document.createElement("form");
     form.setAttribute("method", "post");
     form.setAttribute("action", "./TaggingText");  // hand to controller
     form.setAttribute("target", "_self");
-    
-    var hiddenField = document.createElement("input");      
+
+    var hiddenField = document.createElement("input");
     hiddenField.setAttribute("name", "func");
     hiddenField.setAttribute("value", "SaveFullTextToLGService");
-    form.appendChild(hiddenField); 
-    
+    form.appendChild(hiddenField);
 
-    var hiddenField = document.createElement("input");      
+
+    var hiddenField = document.createElement("input");
     hiddenField.setAttribute("name", "label");
     hiddenField.setAttribute("value", label);
     form.appendChild(hiddenField);
-    
-    var hiddenField = document.createElement("input");      
+
+    var hiddenField = document.createElement("input");
     hiddenField.setAttribute("name", "topic");
     hiddenField.setAttribute("value", topic_id);
-    form.appendChild(hiddenField); 
+    form.appendChild(hiddenField);
 
     _postForContineTagging(form);
 
@@ -1096,8 +1110,6 @@
     var value = 1;
     document.cookie = "saveTextToLGService=" + value + "; path=/LGServices/pages";
 
-    console.log("complete saving to LGService");
-
 }
 
 function createTopic(default_topic_id) {
@@ -1109,52 +1121,52 @@
     }
 
     var newtopic = document.getElementById("newTopicSubmit");
-    
+
     newtopic.onclick = function(){
         // check if all fields are filled in
-        if ($("#newTopicNameEn").val()==""|| $("#newTopicNameCh").val()=="" || $("#newTopicNamePi").val()=="" || 
+        if ($("#newTopicNameEn").val()==""|| $("#newTopicNameCh").val()=="" || $("#newTopicNamePi").val()=="" ||
             $("#newTopicTag").val()=="" || $("#newTopicTagName").val()=="") {
             alert("Please fill in all the fields for the new topic.");
             return;
-        } 
+        }
 
 
         var form = document.createElement("form");
         form.setAttribute("method", "post");
         form.setAttribute("action", "./TaggingText");  // hand to controller
-        form.setAttribute("target", "_self");   
+        form.setAttribute("target", "_self");
 
-        var hiddenField = document.createElement("input");      
+        var hiddenField = document.createElement("input");
         hiddenField.setAttribute("name", "func");
         hiddenField.setAttribute("value", "CreateNewTopic");
         form.appendChild(hiddenField);
-        
-        var hiddenField = document.createElement("input");     
+
+        var hiddenField = document.createElement("input");
         hiddenField.setAttribute("name", "new_topic_name_en");
         hiddenField.setAttribute("value", $("#newTopicNameEn").val());
         form.appendChild(hiddenField);
-        var hiddenField = document.createElement("input");     
+        var hiddenField = document.createElement("input");
         hiddenField.setAttribute("name", "new_topic_name_ch");
         hiddenField.setAttribute("value", $("#newTopicNameCh").val());
         form.appendChild(hiddenField);
-        var hiddenField = document.createElement("input");     
+        var hiddenField = document.createElement("input");
         hiddenField.setAttribute("name", "new_topic_name_pi");
         hiddenField.setAttribute("value", $("#newTopicNamePi").val());
         form.appendChild(hiddenField);
-        var hiddenField = document.createElement("input");     
+        var hiddenField = document.createElement("input");
         hiddenField.setAttribute("name", "new_topic_tag");
         hiddenField.setAttribute("value", $("#newTopicTag").val());
         form.appendChild(hiddenField);
-        var hiddenField = document.createElement("input");     
+        var hiddenField = document.createElement("input");
         hiddenField.setAttribute("name", "new_topic_tag_name");
         hiddenField.setAttribute("value", $("#newTopicTagName").val());
         form.appendChild(hiddenField);
 
-        
+
         _postForContineTagging(form);
 
     }
-    
+
     $("#newTopicCancel").attr("onclick", "$('#new_topic_div').css(\"display\", \"none\");");
 
 }
@@ -1189,7 +1201,6 @@
         if (changeConfirm) {
 
         	selected_topic = topic_select.options[topic_select.selectedIndex];
-        	console.log(selected_topic.text);
 
         	var topic_id = selected_topic.value;
 
@@ -1198,22 +1209,22 @@
             form.setAttribute("action", "./TaggingText");  // hand to controller
             form.setAttribute("target", "_self");
 
-            var hiddenField = document.createElement("input");      
+            var hiddenField = document.createElement("input");
             hiddenField.setAttribute("name", "topic");
             hiddenField.setAttribute("value", topic_id);
             form.appendChild(hiddenField);
 
-            var hiddenField = document.createElement("input");      
+            var hiddenField = document.createElement("input");
             hiddenField.setAttribute("name", "func");
             hiddenField.setAttribute("value", "ContinueTagging");
             form.appendChild(hiddenField);
-        
+
     	    _postForContineTagging(form);
 
-    
+
         } else {
-            return 
-        }           
+            return
+        }
     };
 
 
@@ -1228,19 +1239,18 @@
 	    topic_select.appendChild(option);
 	}
 
-    $('#load_topic_div').append(topic_select);
-
     var newbutton = document.createElement("button");
-    $(newbutton).html("Close");
-    $(newbutton).addClass("btn btn-xs btn-default");
+    $(newbutton).html('<span aria-hidden=\"true\">×</span>');
+    $(newbutton).addClass("btn btn-xs btn-default close-btn");
     $(newbutton).attr("onclick", "$('#load_topic_div').css(\"display\", \"none\");");
     $('#load_topic_div').append(newbutton);
-  
+
+    $('#load_topic_div').append(topic_select);
+
 }
 
-
 function _postForContineTagging(form) {
-    var hiddenField = document.createElement("input");      
+    var hiddenField = document.createElement("input");
     hiddenField.setAttribute("name", "text");
     var el = document.getElementById("editable-area");
     var text = el.innerHTML;
@@ -1248,9 +1258,9 @@
     form.appendChild(hiddenField);
 
     // pass taglist
-    var hiddenField = document.createElement("input");      
+    var hiddenField = document.createElement("input");
     hiddenField.setAttribute("name", "taglistArray");
-    
+
     // use json_encode($taglistArray), which is the up-to-date taglist (in db) instead,
     // so replace the follwoing code
     /*
@@ -1263,103 +1273,135 @@
     }
     taglistArray = JSON.stringify(taglistObj);
     */
-    
+
 
     var taglistArray = JSON.parse('<?php echo json_encode($taglistArray) ?>');
     hiddenField.setAttribute("value", taglistArray);
     form.appendChild(hiddenField);
 
     // pass book_meta
-    var hiddenField = document.createElement("input");      
+    var hiddenField = document.createElement("input");
     hiddenField.setAttribute("name", "book_meta");
     var book_metaObj = JSON.parse('<?php echo json_encode($book_meta) ?>');
     book_metaArray = JSON.stringify(book_metaObj);
 
     hiddenField.setAttribute("value", book_metaArray);
-    form.appendChild(hiddenField);    
+    form.appendChild(hiddenField);
 
 
     var info = JSON.parse( '<?php echo json_encode($info) ?>');
 
     if (info) {
         if (info['file_id']) {
-            var hiddenField = document.createElement("input");      
+            var hiddenField = document.createElement("input");
             hiddenField.setAttribute("name", "fileId");
             hiddenField.setAttribute("value", info['file_id']);
             form.appendChild(hiddenField);
         };
         if (info['branch_id']) {
-            var hiddenField = document.createElement("input");      
+            var hiddenField = document.createElement("input");
             hiddenField.setAttribute("name", "branchId");
             hiddenField.setAttribute("value", info['branch_id']);
             form.appendChild(hiddenField);
         };
         if (info['user_id']) {
-            var hiddenField = document.createElement("input");      
+            var hiddenField = document.createElement("input");
             hiddenField.setAttribute("name", "userId");
             hiddenField.setAttribute("value", info['user_id']);
             form.appendChild(hiddenField);
         };
         if (info['section_id']) {
-            var hiddenField = document.createElement("input");      
+            var hiddenField = document.createElement("input");
             hiddenField.setAttribute("name", "sectionId");
             hiddenField.setAttribute("value", info['section_id']);
             form.appendChild(hiddenField);
         };
         if (info['book_id']) {
-            var hiddenField = document.createElement("input");      
+            var hiddenField = document.createElement("input");
             hiddenField.setAttribute("name", "bookId");
             hiddenField.setAttribute("value", info['book_id']);
             form.appendChild(hiddenField);
         };
         if (info['section_name']) {
-            var hiddenField = document.createElement("input");      
+            var hiddenField = document.createElement("input");
             hiddenField.setAttribute("name", "sectionName");
             hiddenField.setAttribute("value", info['section_name']);
             form.appendChild(hiddenField);
         };
         if (info['book_name']) {
-            var hiddenField = document.createElement("input");      
+            var hiddenField = document.createElement("input");
             hiddenField.setAttribute("name", "bookName");
             hiddenField.setAttribute("value", info['book_name']);
             form.appendChild(hiddenField);
         };
         if (info['current_fileId']) {
-            var hiddenField = document.createElement("input");      
+            var hiddenField = document.createElement("input");
             hiddenField.setAttribute("name", "currentFileId");
             hiddenField.setAttribute("value", info['current_fileId']);
             form.appendChild(hiddenField);
         };
 
     }
-    if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
-        document.body.appendChild(form);
-        form.submit();
-	document.body.removeChild(form);
-    } else {
+
         document.body.appendChild(form);
         form.submit();
         document.body.removeChild(form);
-        //form.submit(); // works under IE and Chrome, but not FF  
-    }
+
 
 }
 
 function configTagsInTopic(topic_id) {
     var form = document.createElement("form");
-    
+
     form.setAttribute("method", "post");
     form.setAttribute("action", "./ConfigTagsInTopic");  // hand to controller
     form.setAttribute("target", "_blank");
-    
-    var hiddenField = document.createElement("input");      
+
+    var hiddenField = document.createElement("input");
     hiddenField.setAttribute("name", "topic");
     hiddenField.setAttribute("value", topic_id);
     form.appendChild(hiddenField);
 
     _postForContineTagging(form);
-    
-        
+
+
+}
+
+var toolPanelPosition = "right";
+
+function moveToolPanel(toWhere){
+
+  if(toolPanelPosition == toWhere) return;
+
+  var oldAreaId, newAreaId, oldBtn, newBtn;
+  if(toWhere == "left"){
+     oldAreaId = 'right-tool-bar-area';
+     newAreaId = 'left-tool-bar-area';
+     oldBtn = 'toLeft';
+     newBtn = 'toRight';
+  }
+  else{
+     oldAreaId = 'left-tool-bar-area';
+     newAreaId = 'right-tool-bar-area';
+     oldBtn = 'toRight';
+     newBtn = 'toLeft';
+  }
+
+  var oldParent = document.getElementById(oldAreaId),
+      newParent = document.getElementById(newAreaId);
+
+  while (oldParent.hasChildNodes()){
+    newParent.appendChild(oldParent.firstChild);
+  }
+
+  newParent.style.display = "block";
+  oldParent.style.display = "none";
+
+  document.getElementById(newBtn).firstChild.style.display = "block";
+  document.getElementById(oldBtn).firstChild.style.display = "none";
+
+  toolPanelPosition = toWhere;
+
 }
 
 $(document).on("change", '#smartRegexPopUpSelectWord', function (e) {
@@ -1367,7 +1409,7 @@
 
     for (var i = 0; i < wordlistArray.length; i++) {
         var wordlistValue = wordlistArray[i];   // wordlistValue is array(id, name, listString)
-        if ($('#smartRegexPopUpSelectWord').val() == wordlistValue[0]) {    
+        if ($('#smartRegexPopUpSelectWord').val() == wordlistValue[0]) {
             var textarea_text = $('#smartRegexPopUpText').val();
             // insert selected wordlist into textarea at cursor position
             var cursorPosition = $('#smartRegexPopUpText').prop("selectionStart");
@@ -1381,43 +1423,29 @@
     }
 });
 
-
 </script>
 
-
-<!--
-<fieldset class="info-board">
-    <legend><h5 class="tool-topic" data-toggle="collapse" data-target="#info_board">Information <span class="caret"></span></h5></legend>
-    <div id="info_board" class="collapse in">
-        <div class="bg-danger"><strong><?php echo $messages['error']; ?> </strong></div>
-        <div class="bg-warning"> <?php echo $messages['warning']; ?> 
-            <button id="reloadTextButton" onclick="reloadText(<?php echo $default_topic_id; ?>)" style="display:none;">Latest Version</button>
-        </div>
-        <div class="bg-info"> <?php echo $messages['info']; ?> </div>
-        <div class="bg-default"> <?php echo $messages['debug']; ?> </div>
-    </div>
-</fieldset>
-
--->
 <div id="loading">...</div>
 
-<div class="info-board">
-    <div class="bg-danger"><strong><?php echo $messages['error']; ?> </strong></div>
-    <div class="bg-warning"> <?php echo $messages['warning']; ?> 
-        <button id="reloadTextButton" onclick="reloadText(<?php echo $default_topic_id; ?>)" style="display:none;">Latest Version</button>
+<div class="container-fluid info-board">
+    <div class="row">
+      <div class="bg-danger"><strong><?php echo $messages['error']; ?> </strong></div>
+      <div class="bg-warning"> <?php echo $messages['warning']; ?>
+          <button id="reloadTextButton" onclick="reloadText(<?php echo $default_topic_id; ?>)" style="display:none;">Latest Version</button>
+      </div>
+      <div class="bg-info"> <?php echo $messages['info']; ?> </div>
     </div>
-    <div class="bg-info"> <?php echo $messages['info']; ?> </div>
-    <!-- 
-    <div class="bg-default"> <?php echo $messages['debug']; ?> </div>
-    -->
 </div>
 
-<table border="1" style="margin:10 30 30 30; width:100%; max-width:1270px; min-width:680px">
-    <tr>
-        <td style="padding:0 5 0 5; margin: 0 5 0 5;">
-            <div id="editable-area" class="area" style="max-width:980px; min-width:400px"><?php echo $stringInput; ?></div>
-        </td>
-        <td valign="top" style="min-width:280px; padding:0 5 0 5; margin:0 5 0 5;">
+<div class="container-fluid">
+    <div class="row">
+        <div id="left-tool-bar-area" class="col-md-3 tool-col" style="display:none"></div>
+        <div class="col-md-9 content-col">
+          <div id="editable-area-wraper">
+            <div id="editable-area" class="area" contenteditable="false"><?php echo $stringInput; ?></div>
+          </div>
+        </div>
+        <div id="right-tool-bar-area" class="col-md-3 tool-col">
             <div id="popups" style="position:absolute; width:300px; ">
                 <div id="load_topic_div" class="popup-topic popup-frame"></div>
                 <div id="new_topic_div" class="popup-newtopic popup-frame">
@@ -1441,7 +1469,7 @@
                                 <input type="text" class="form-control" id="newTopicNamePi" placeholder="e.g. wu chan">
                             </div>
                         </div>
-                        
+
 
                         <h4 class="text-info">Define the topic tag for the new topic:</h4>
                         <div class="form-group form-group-sm">
@@ -1471,13 +1499,13 @@
                 <div id="load_regex_div" class="popup-loadregex popup-frame"></div>
                 <div id="regex_generator" class="popup-frame">
                     <h3>Gen Regex</h3>
-                    <div>Pattern 1: 
+                    <div>Pattern 1:
                         <div id="regex_pattern1" class="bg-info"></div>
                     </div>
                     <div>Pattern 2:
                         <div id="regex_pattern2" class="bg-info"></div>
                     </div>
-                    <div>Suggested Regex: 
+                    <div>Suggested Regex:
                         <div id="generated_regex" class="bg-success"></div>
                     </div>
                     <button onclick="genRegexAddToSmartRegex()" class="btn btn-info">Add it to SmartRegex</button>
@@ -1485,8 +1513,10 @@
                     <div id="regex_generator_error_msg" class="bg-white"></div>
                 </div>
                 <div id="smartRegexPopUpDiv" class="popup-frame">
-                    Name: <input id="smartRegexPopUpName"></input><br><br>
-                    Word List: 
+
+                    Name: <input id="smartRegexPopUpName"></input>
+                    <button onclick="replaceSmartClose()" class="btn btn-sm btn-default close-btn" ><span aria-hidden="true">×</span></button><br><br>
+                    Word List:
                     <select id="smartRegexPopUpSelectWord">
                     <option value="NULL" selected>無</option>
                     <?php
@@ -1496,11 +1526,11 @@
                     ?>
                     </select>
                     <!-- edit wordlist -->
-                    <button onclick="window.open('./EditWordlist')" class="btn btn-default">Edit WordList</button></br> 
+                    <button onclick="window.open('./EditWordlist')" class="btn btn-sm btn-default">Edit WordList</button></br>
 
                     <br>
                     OR (USE "|" TO SEPARATE WORDS):<br>
-                    <TEXTAREA id="smartRegexPopUpText" COLS=30 ROWS=4></TEXTAREA><br><br>
+                    <TEXTAREA id="smartRegexPopUpText" COLS=59 ROWS=4 style="width:100%;"></TEXTAREA><br><br>
                     Tag:
                     <select id="smartRegexPopUpSelectTag">
                     <?php
@@ -1510,132 +1540,162 @@
                         echo "<option value=\"title\">Title</option>\n";
                     ?>
                     <option value="NOTAG">不標記</option>
-                    </select><br>
-                    <button id="smartRegexPopUpAdd" onclick="replaceSmartAdd()" class="btn btn-info">Add</button>
-                    <button id="smartRegexPopUpEdit" onclick="replaceSmartEdit()" class="btn btn-success">Edit/Update</button>
-                    <button id="smartRegexPopUpDel" onclick="replaceSmartDel()" class="btn btn-danger">Delete</button>
-                    <button id="smartRegexPopUpBack" onclick="replaceSmartBack()" class="btn btn-default"><<</button>
-                    <button id="smartRegexPopUpFor" onclick="replaceSmartFor()" class="btn btn-default">>></button>
-                    <button onclick="replaceSmartClose()" class="btn btn-default" >Close</button>
+                    </select><br><br>
+                    <button id="smartRegexPopUpBack" onclick="replaceSmartBack()" class="btn btn-sm btn-default"><<</button>
+                    <button id="smartRegexPopUpAdd" onclick="replaceSmartAdd()" class="btn btn-sm btn-info" style="display:none">Add</button>
+                    <button id="smartRegexPopUpDel" onclick="replaceSmartRemove()" class="btn btn-sm btn-danger">Remove</button>
+                    <button id="smartRegexPopUpEdit" onclick="replaceSmartEdit()" class="btn btn-sm btn-success">Edit/Update</button>
+                    <button id="smartRegexPopUpFor" onclick="replaceSmartFor()" class="btn btn-sm btn-default">>></button>
                 </div>
             </div>
-
+            <div id="toLeft" onclick="moveToolPanel('left')"><span class="glyphicon glyphicon-arrow-left switch-btn"></span></div>
             <div id="follow-scroll">
-                <form action="javascript:void(0);">   
-                    <fieldset class="tool-frame">
-                        <legend><h5 class="tool-topic" data-toggle="collapse" data-target="#tool_topic"> Topic and Tags: <span class="caret"></span></h5></legend>
-                        <div id="tool_topic" class="collapse in">
-                            <div> Current topic is:
-                                    <?php echo $topic_name['name_en']; ?> (<?php echo $topic_name['name_ch']; ?>, <?php echo $topic_name['name_pinyin']; ?>)
-                                <button onclick="chooseTopic(<?php echo $default_topic_id;?>)" class="btn btn-default btn-block">Change Topic</button>
-                                <!-- 
-                                <button onclick="createTopic(<?php echo $default_topic_id;?>)" class="btn btn-default btn-block">Create a New Topic</button>
-                                -->
-                            </div>
-                        
-                            <div>Main tag: <?php echo $topic_tag_ch;?>
-                                <p class="text-muted">(Only the lines with the tag will be in the exported table.)</p>
-                            </div>
-                            <button onclick="editTaglist(<?php echo $default_topic_id; ?>)" class="btn btn-default btn-block">Edit Tag List</button>
-                            <button onclick="configTagsInTopic(<?php echo $default_topic_id;?>)" class="btn btn-default btn-block">Select Existing Tags (testing)</button>
-                        
+              <div class="panel panel-default" style="margin-bottom: 10px;">
+                  <div class="panel-body" style="padding:5px;">
+                    Current topic is : <?php echo $topic_name['name_en']; ?> (<?php echo $topic_name['name_ch']; ?>, <?php echo $topic_name['name_pinyin']; ?>)
+                  </div>
+              </div>
+
+              <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+                <div class="panel panel-default">
+                  <div class="panel-heading" role="tab" id="headingOne">
+                    <h4 class="panel-title">
+                      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                        Change Topic and Tags: <span class="caret"></span>
+                      </a>
+                    </h4>
+                  </div>
+                  <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
+                    <div class="panel-body">
+                      <button onclick="chooseTopic(<?php echo $default_topic_id;?>)" class="btn btn-info btn-block">Change Topic</button>
+                      <br>
+
+                      <div>Main tag: <?php echo $topic_tag_ch;?>
+                          <p class="text-muted">(Only the lines with the tag will be in the exported table.)</p>
+                      </div>
+                      <button onclick="editTaglist(<?php echo $default_topic_id; ?>)" class="btn btn-primary btn-block">Edit Tag List</button>
+                      <!-- <button onclick="configTagsInTopic(< ?php echo $default_topic_id;? >)" class="btn btn-default btn-block">Select Existing Tags (testing)</button> -->
+                    </div>
+                  </div>
+                </div>
+
+                <div class="panel panel-default">
+                  <div class="panel-heading" role="tab" id="headingTwo">
+                    <h4 class="panel-title">
+                      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                        Edit, Tag, Save text : <span class="caret"></span>
+                      </a>
+                    </h4>
+                  </div>
+                  <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
+                    <div class="panel-body">
+
+                        <!-- <button onclick="editText()" id="editTextId" class="btn btn-default">Edit text</button> -->
+                        <div class="btn-group" data-toggle="buttons">
+                          <label class="btn btn-default btn-sm active" onclick="switchToTaggingMode(this, 'tagging')">
+                            <input type="radio" name="EditMode" value="tagging" autocomplete="off" checked> Tagging
+                          </label>
+                          <label class="btn btn-default btn-sm" onclick="switchToEditingMode(this, 'editing')">
+                            <input type="radio" name="EditMode" value="editing" autocomplete="off"> Editing
+                          </label>
                         </div>
-                    </fieldset>
-                    <!--
-                    <fieldset class="tool-frame">
-                        <legend><h5 class="tool-topic" data-toggle="collapse" data-target="#tool_tag"> Tag: <span class="caret"></span></h5></legend>
-                        <div id="tool_tag" class="collapse in">
-                            <div>The topic tag is: <?php echo $topic_tag_ch;?>
-                                <p class="text-muted">(Only the lines with the tag will be in the exported table.)</p>
-                            </div>
-                            <button onclick="editTaglist(<?php echo $default_topic_id; ?>)" class="btn btn-default btn-block">Edit Tag List</button>
-                            <button onclick="configTagsInTopic(<?php echo $default_topic_id;?>)" class="btn btn-default btn-block">Select Existing Tags</button>
-                        
-                        </div>
-                    </fieldset>
-                    -->
-                    <fieldset class="tool-frame">
-                        <legend><h5 class="tool-topic" data-toggle="collapse" data-target="#tool_edit"> Edit, Save, and Export: <span class="caret"></span></h5></legend>
-                        <!--<button onclick="cleanUpTextArea()" style="height: 30px; width: 220px">Reform the text</button></br>-->
-                        <!-- save text in local. replaced by saveTextToLGService, which is also saving on copy in local in development stage -->
-                        <!-- 
-                        <button onclick="saveText(<?php echo $section_id; ?>)" style="height: 30px; width: 220px">Save the text</button></br>
-                        -->
-                        <div class="collapse in" id="tool_edit">
-                            <button onclick="editText()" id="editTextId" class="btn btn-default">Edit text</button>
-                            <button onclick="Undo()" class="btn btn-default" id="buttonUndo" disabled="true">Undo changes</button>
-                    
-                            <button onclick="saveTextToLGService()" id="save_text_to_LGService_id" class="btn btn-default btn-block">Save to LGService</button>
-                            <button onclick="exportAll(<?php echo $default_topic_id;?>)" class="btn btn-default btn-block">Export All</button>
-                            Page: <input type="text" size="5" id="exportPageStart">to<input type="text" size="5" id="exportPageEnd">
-                            <button onclick="exportPage(<?php echo $default_topic_id;?>)" class="btn btn-default btn-sm">Export</button></br>
-                        </div>
+                        <button onclick="Undo()" class="btn btn-sm btn-default" id="buttonUndo" disabled="true" style="float:right;">Undo changes</button>
 
-
-                    </fieldset>
-
-                    <fieldset class="tool-frame">
-                        <legend><h5 class="tool-topic" data-toggle="collapse" data-target="#tool_regex"> Tag by <i><b>Smart Regex</b></i>©:<span class="caret"></span></h5></legend>
-                        <!-- rename: "Replace By <i><b>Smart Regex</b></i>©:" to "Tag by Smart Regex" -->
+                        <div id="smart-regex-area" class="sub-group-area"><span><i><b>Smart Regex</b></i>©</span>
+                             <div id="smartRegexShowDiv"></div>
+                             <!-- <button onclick="smartRegexNew()" class="btn-lg">Add Regex Group</button></br> -->
+                               <button onclick="smartRegexNew()" id="smart_regex_new_id" class="btn btn-sm btn-info">Compose</button>
+                               <button onclick="smartRegexLoad(<?php echo $default_topic_id; ?>)" class="btn btn-sm btn-info">Load</button>
+                               <button onclick="smartRegexSave(<?php echo $default_topic_id; ?>)" class="btn btn-sm btn-default" style="float:right;">Save</button>
+                               <button onclick="smartRegexEmpty()" class="btn btn-sm btn-danger" style="float:right;margin-right:4px">Clear</button>
+                             </div>
+                         <div>
+                        <div id="tag-function-area" class="sub-group-area">
+                            Tag only for this range:
+                            <input type="text" size="5" id="regexPageStart"> to <input type="text" size="5" id="regexPageEnd"><br><br>
 
-                        <div id="tool_regex" class="collapse in">
-                            <div id="smartRegexShowDiv"></div><br>
-                            <!-- <button onclick="smartRegexNew()" class="btn-lg">Add Regex Group</button></br>
+                            <div>
+                              <label>
+                                 <input type="radio" name="tagging_mode" onclick="onTagModeChanged(this)" value="default" checked> Default
+                              </label>
+                            </div>
+                            <div>
+                              <label>
+                                 <input type="radio" name="tagging_mode" onclick="onTagModeChanged(this)" value="with_line_break"> With line break
+                              </label>
+                            </div>
+                            <!--
+                            <div>
+                              <label>
+                                 <input type="radio" name="tagging_mode" onclick="onTagModeChanged(this)" value="space_within_block"> Allow space within block
+                              </label>
+                            </div>
                             -->
-                            <button onclick="smartRegexNew()" id="smart_regex_new_id" class="btn btn-default btn-block">Compile a new Regex</button>
-                            <!-- rename "Search by Patterns (Smart Regex)" to "Compile a new Regex"-->
-                        
-                            <button onclick="smartRegexLoad(<?php echo $default_topic_id; ?>)" class="btn btn-default">Load</button>
-                            <button onclick="smartRegexSave(<?php echo $default_topic_id; ?>)" class="btn btn-default">Save</button>
-                            <button onclick="smartRegexEmpty()" class="btn btn-default">Clear</button></br></br>
-                            Tag only for this range: </br>
-                            <input type="text" size="5" id="regexPageStart">to<input type="text" size="5" id="regexPageEnd"></br>
-                            <button onclick="replaceSmartRun()" class="btn btn-default">Tag</button>
-                            <button onclick="replaceSmartRunWithBr()" class="btn btn-default">Tag (with line break)</button>
-                            <!-- <button onclick="replaceSmartRunSpace()" class="btn-lg">Run(Allow space between Group)</button></br>
-                            -->
-                            <button onclick="replaceSmartRunSpace()" class="btn btn-default btn-block">Tag (Allow space within block)</button></br>
+                            <div style="text-align:right"><button onclick="startToTag()" class="btn btn-primary">Tag</button></div>
+                        </div>
+                        <button onclick="saveTextToLGService()" id="save_text_to_LGService_id" class="btn btn-primary btn-block" style="margin-top:10px;">Save text</button>
 
-                            <!-- developing...-->
-                            <!-- 
-                            <button onclick="genRegexWindowOpen()" id="gen_regex_window_open_id" class="btn btn-default btn-block btn-xs">Open GenRegex (developing...)</button></br>
-                            -->
-                        </div>
-                    </fieldset>
-                    
+                    </div>
+                  </div>
+                </div>
 
-                    <?php
-                    if ($default_topic_id == 1) {
-                    ?>
-                    <fieldset class="tool-frame">
-                        <legend><h5 class="tool-topic" data-toggle="collapse" data-target="#tool_rule"> Tag by rule: <span class="caret"></span></h5></legend>
-                        <div id="tool_rule" class="collapse out">
-                            <button onclick="tagNameWithLastName()" class="btn btn-default">Tag Word Begin With Surname</button></br>
-                            <button onclick="tagNameWithLastName2()" class="btn btn-default btn-sm">Tag Word Begin With</button> <input type="text" size="2" id="surname">
-                        </div>
-                        <!--<button onclick="tagTime()" style="height: 30px; width: 220px">Tag Time</button></br>-->
-                        <!--<button onclick="tagBiogAddr()" style="height: 30px; width: 220px">Tag BiogAddr</button></br>-->
-                    </fieldset>
+                <div class="panel panel-default">
+                  <div class="panel-heading" role="tab" id="headingThree">
+                    <h4 class="panel-title">
+                      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                        Replace By <i><b>Regex</b></i>: <span class="caret"></span>
+                      </a>
+                    </h4>
+                  </div>
+                  <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
+                    <div class="panel-body">
+                      Range: <input type="text" size="5" id="regexPageStart2"> to <input type="text" size="5" id="regexPageEnd2"><br><br>
+                      Regex: <input type="text" size="23" id="regexText"><br><br>
+                      Replace: <input type="text" size="23" id="replaceText"><br><br>
+                      <div style="text-align:right"><button onclick="replaceSmartRegex()" class="btn btn-primary btn-sm">Replace</button></div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="panel panel-default">
+                  <div class="panel-heading" role="tab" id="headingFour">
+                    <h4 class="panel-title">
 
-                    <?php }?>
-                                     
-                    
-                
-                    <fieldset class="tool-frame">
-                        <legend><h5 class="tool-topic" data-toggle="collapse" data-target="#tool_replace_by"> Replace By <i><b>Regex</b></i>: <span class="caret"></span></h5></legend>
-                        <div class="collapse out" id="tool_replace_by">
-                            Range: <input type="text" size="5" id="regexPageStart2">to<input type="text" size="5" id="regexPageEnd2"><br>
-                            Regex: <input type="text" size="23" id="regexText"></br>
-                            Replace: <input type="text" size="23" id="replaceText"><br>
-                            <button onclick="replaceSmartRegex()" class="btn btn-default btn-sm">Replace!</button>
-                        </div>
-                    </fieldset>
-                </form>
+                      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+                        <!-- Tag by <i><b>Smart Regex</b></i>©:<span class="caret"></span> -->
+                        Preview<span class="caret"></span>
+                      </a>
+                    </h4>
+                  </div>
+                  <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
+                    <div class="panel-body">
+
+                      <div>
+                        <label>
+                           <input type="radio" name="export_mode" onclick="onExportModeChanged(this)" value="all" checked> All
+                        </label>
+                      </div>
+                      <div>
+                        <label>
+                           <input type="radio" name="export_mode" onclick="onExportModeChanged(this)" value="pages">
+                           Page: <input type="text" size="5" id="exportPageStart"> to <input type="text" size="5" id="exportPageEnd">
+                      </div>
+
+                      <div style="text-align:right"><button onclick="startExport(<?php echo $default_topic_id;?>)" class="btn btn-primary btn-sm">Preview</button></div>
+                    </div>
+
+                  </div>
+                </div>
+
+              </div>
+
             </div>
-        </td>
-    </tr>
+            <div id="toRight" onclick="moveToolPanel('right')"><span class="glyphicon glyphicon-arrow-right switch-btn" style="display:none"></span></div>
+        </div>
 
-</table>
+    </div>
+
+</div>