# HG changeset patch
# User Zoe Hong <zhong@mpiwg-berlin.mpg.de>
# Date 1447066824 -3600
# Node ID b0cecc1046397c957a596ddc972cf3ff2fa6424d
# Parent  a05491461199d8b5a300ee23d657ca1bd3b59aaa
new: modified tags can work on tagged text

diff -r a05491461199 -r b0cecc104639 controllers/extractapp.php
--- a/controllers/extractapp.php	Fri Oct 02 12:18:34 2015 +0200
+++ b/controllers/extractapp.php	Mon Nov 09 12:00:24 2015 +0100
@@ -280,6 +280,9 @@
             case 'Update':
                 $viewmodel->UpdateTagsInTopic($this->postdata);
                 break;
+            case 'CreateNewTopic':
+                $this->ReturnView($viewmodel->CreateNewTopic($this->postdata), true);  
+                break;
             default:    
                 $this->ReturnView($viewmodel->ConfigTagsInTopic($this->postdata), true);  
                 break;
diff -r a05491461199 -r b0cecc104639 css/taggingtext.css
--- a/css/taggingtext.css	Fri Oct 02 12:18:34 2015 +0200
+++ b/css/taggingtext.css	Mon Nov 09 12:00:24 2015 +0100
@@ -23,25 +23,7 @@
 	background-color: white;
 	margin: 5 5 5 5;
 }
-/*
-.btn-xs{
-	height: 25px;
-	width: 60px;
-}
-.btn-sm{
-	height: 35px; 
-	width: 70px;
-}
-.btn-md{
-	height: 35px;
-	width: 110px;
-}
-.btn-lg{
-	height: 35px; 
-	width: 220px;
-}
 
-*/
 .tool-frame .btn{
 	background-color: #F4F4F4;
 }
@@ -70,8 +52,9 @@
 	position:absolute; 
 	height:680px; 
 	overflow:scroll; 
-	margin:0 5 15 5; 
-	max-width:280px; 
+	margin:5 0 15 0; 
+	padding: 0 0 30 0;
+	max-width:270px; 
 }
 
 .tool-frame{
@@ -83,6 +66,7 @@
 .tool-topic {
 	background-color: #E7F3FF;
 	border-radius: 3px;
+	cursor: hand;
 }
 
 .popup-frame {
@@ -129,7 +113,15 @@
 	top: 20px;
 	z-index: 2;
 }
-
+.popup-newtopic {
+	left: -340px;
+	width: 340px;
+	height: 340px;
+	top: 100px;
+	z-index: 2;
+	overflow:scroll;
+	overflow-x:hidden; 
+}
 .tagItemDivClass {
 	position:absolute; 
 	background-color: white; 
@@ -147,3 +139,7 @@
 	padding: 5px; 
 	z-index:4;
 }
+
+.editable {
+	cursor: hand;
+}
diff -r a05491461199 -r b0cecc104639 js/taggingtext.js
--- a/js/taggingtext.js	Fri Oct 02 12:18:34 2015 +0200
+++ b/js/taggingtext.js	Mon Nov 09 12:00:24 2015 +0100
@@ -237,7 +237,7 @@
 }
 
 
-function removeTagNewDiv( eventObject, tagName, tagObject ) {
+function removeTagNewDiv( eventObject, tag, tagObject ) {
     saveUndoText();
 
     var newdiv = document.createElement("div");
@@ -248,8 +248,11 @@
     // set z-index to 3 to bring popup tag windwo to front
     newdiv.style.cssText = 'top:'+eventObject.pageY+'; left:'+eventObject.pageX+';';
     
-    newdiv.innerHTML = "Tag: "+tagName+"<br>Value: "+tagObject.text()+"<br>";
+    // find tag displaying name by tagName then showing in the innerHTML
+    var tag_name = getTagNameByTag(tag);
+    newdiv.innerHTML = "Tag: "+tag_name+"<br>Value: "+tagObject.text()+"<br>";
     
+
     var newbutton = $('<button class="btn btn-default">Remove this</button>').mouseup(function (e2) {
         var textKeep = $(this).parent().parent().html();
         var regexText=/<div(.*?)<\/div>/g;
@@ -283,7 +286,7 @@
         $(this).parent().parent().replaceWith( textKeep );
         
         var el = document.getElementById("editable-area");
-        var regexText=new RegExp("<"+tagName+">("+textKeep+")</"+tagName+">", "g");
+        var regexText=new RegExp("<"+tag+">("+textKeep+")</"+tag+">", "g");
         var replaceText="$1";
         var str="" + el.innerHTML;
         
@@ -305,7 +308,7 @@
         $(this).parent().remove();
         
         var el = document.getElementById("editable-area");
-        var regexText=new RegExp("<br><"+tagName+">("+textKeep+")</"+tagName+">", "g");
+        var regexText=new RegExp("<br><"+tag+">("+textKeep+")</"+tag+">", "g");
         var replaceText="$1";
         var str="" + el.innerHTML;
         
@@ -777,7 +780,7 @@
 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).addClass("btn btn-xs btn-default");
     $(add_gen_regex_button).click( function(){
         // popup for selected words regex gen
         /*
@@ -892,7 +895,7 @@
         }       
     });
 
-    $(add_gen_regex_button).text("Add to Gen Regex");
+    $(add_gen_regex_button).text("Add to Gen Regex (developing...)");
     tag_item_div.appendChild(add_gen_regex_button);    
 }
 
diff -r a05491461199 -r b0cecc104639 models/extractapp.php
--- a/models/extractapp.php	Fri Oct 02 12:18:34 2015 +0200
+++ b/models/extractapp.php	Mon Nov 09 12:00:24 2015 +0100
@@ -250,6 +250,58 @@
     }
     
     // === for tagging ===
+    private function ReplaceLgTextWithLatestTag() {
+        // modify $this->lg_text with the latest tags from database
+        // can do it by getting the tag's id using tag's information in the file, then by the id to get latest tag (in db)
+        $lg_text = $this->lg_text;
+
+        $taglist_indb = $this->GetTaglistByTopicId($this->GetTopic());
+        $taglist_infile = $this->taglist_infile;
+
+        if ($taglist_infile == "") return;
+        
+        $count_tag_indb = count($taglist_indb);
+
+        foreach ($taglist_infile as $t1) {
+            $id = $t1[0];
+            $tag = $t1[2];
+            $latest_tag = "";
+
+            $cnt = 0;
+            foreach ($taglist_indb as $t2) {
+                if ($t2[0] == $id) {
+                    $latest_tag = $t2[2];
+                }
+               
+                if ($tag != $t2[2]) {
+                    // not match with this t2
+                    $cnt += 1;
+                } else {
+                    break;
+                }
+
+            }
+            if ($cnt == $count_tag_indb) {
+                if ($latest_tag == "") {
+                    // tag has been deleted in the db
+                    // delele the tag in $this->lg_text
+                    //echo "tag been deleted";
+
+                    $lg_text = preg_replace("/<\/".$tag.">/u", "", $lg_text);
+                    $lg_text = preg_replace("/<".$tag.">/u", "", $lg_text);
+
+                } else {
+                    // replace all tags $tag into $latest_tag in $this->lg_text
+                    //echo "replace tag: ".$tag." into ".$latest_tag."<br>";
+                    $lg_text = preg_replace("/".$tag."/u", $latest_tag, $lg_text);
+                }
+            }
+        }
+
+
+        $this->lg_text = $lg_text;
+
+    }
     public function StartTagging() {
         /**
          * This is the main method for tagging text. It passes all the information to "views/Extractapp/TaggingText.php" view.
@@ -257,11 +309,9 @@
          */
        
         $section_id = $this->section_id;
-        $stringInput = $this->lg_text;
-
+        
         $data = array();    // data array to be passed to view
 
-        //$taglistArray = $this->GetTaglistArray();
         //for GetTaglistByTopicId: 
         $taglistArray = $this->GetTaglistByTopicId($this->GetTopic());
 
@@ -269,9 +319,18 @@
         // $this->taglist_infile is the most up-to-date taglist decided by user. Should be written into file.
         if( $this->TaglistSubsetIn($this->taglist_infile, $taglistArray) ) {    // TaglistSubsetIn($l1,$l2): $l1 is a subset of $l2 or not
             $this->taglist_infile = "";
-        } 
+            
+        } else {
+            // taglist_infile is out-to-date
+            // replace all the old tag with new ones in database
+            // replace old tags for $this->lg_text with the latest tags from db
+            $this->ReplaceLgTextWithLatestTag();
+
+        }
+        $stringInput = $this->lg_text;
+
+
         $data['taglist_infile'] = $this->taglist_infile;    // if taglist_infile == "" means taglist in file is up-to-date (will use taglist in db), otherwise means the taglist in file
-
         
         // book_meta
         $data['book_meta'] = $this->book_meta;
@@ -424,6 +483,10 @@
         // ---- taglist ---
         // $taglist = $this->taglist_infile;
         // obtain the latest taglist from db
+        // TDOO: possible bug: when taglist is modified by other user, the latest taglist from db of course will be changed.
+        // As the result, here the taglist we get from db will be inconsistent with the tag in file.
+        // which means the information in <tagitem> nodes are inconsistent with the text in <text_content> node.
+
         $taglist = $this->GetTaglistByTopicId($this->GetTopic());
 
         foreach ($taglist as $tagitem) {
@@ -875,10 +938,19 @@
 
     public function DeleteTag($postdata) {
         if ($postdata['id']) {
-            $queryInsert = sprintf("DELETE FROM `taglist` WHERE `id` = %s", stripslashes($postdata['id']));
-            $resultInsert = mysql_query($queryInsert);
+            $tag_id = $postdata['id'];
+
+            // delete record in 'taglist' table
+            $query = sprintf("DELETE FROM `taglist` WHERE `id` = %s", stripslashes($tag_id));
+            $result = mysql_query($query);
+
+            // delete record in 'topic_tag_relation' table
+            $topic_id = $postdata['topic_id'];
+            $query = sprintf("DELETE FROM `topic_tag_relation` WHERE `tag_id` = %s and `topic_id` = %s", stripslashes($tag_id), stripcslashes($topic_id));
+            $result = mysql_query($query);
+
         }
-
+       
     }
 
     // === for config topic ===
@@ -974,6 +1046,10 @@
         return $data;
     }
 
+    public function CreateNewTopic($_postdata) {
+
+        
+    }
 
     public function UpdateTagsInTopic($_postdata) {
         $topic_id = $_postdata['topic_id'];
@@ -1307,7 +1383,7 @@
         }
         */
         // -----
-        // TODO: get section_id, section_name from file
+        // get section_id, section_name from file
         if ($this->section_id == 0 && isset($xml->section)) {
             if ($xml->section) {
                 $this->section_id = (string)$xml->section->id;
@@ -1327,6 +1403,7 @@
         $removed_str = array("<text_content>","</text_content>");
         $new_contentString = str_replace($removed_str, "", $contentString);
 
+
         return $new_contentString;
     }
 
diff -r a05491461199 -r b0cecc104639 views/Extractapp/EditTaglist.php
--- a/views/Extractapp/EditTaglist.php	Fri Oct 02 12:18:34 2015 +0200
+++ b/views/Extractapp/EditTaglist.php	Mon Nov 09 12:00:24 2015 +0100
@@ -62,7 +62,8 @@
 	var row = tableMain.insertBefore(document.createElement("tr"), document.getElementById("trAddTag") );
 	row.setAttribute("height","50");
 	row.id = "tr"+largestId;
-	
+	row.setAttribute("class", "bg-warning");		
+
 	var newcolumn = document.createElement("td");
 	newcolumn.id = "tdId"+largestId;
 	newcolumn.setAttribute("width","150");
@@ -81,6 +82,8 @@
 	newcolumn.setAttribute("idnum",largestId);
 	newcolumn.setAttribute("name","tdTag");
 	row.appendChild(newcolumn).innerHTML="";
+	// ---
+
 	
 	var newcolumn = document.createElement("td");
 	newcolumn.setAttribute("width","150");
@@ -150,13 +153,20 @@
 		return 0;
 	}
 
+
 	var row = tableMain.appendChild(document.createElement("tr"));
 	row.setAttribute("height","50");
 	row.id = "tr"+id;
-	
+		
+	if (id == "ID") {
+		row.setAttribute("class", "bg-info");	
+	}
+
+
 	var newcolumn = document.createElement("td");
 	newcolumn.id = "tdId"+id;
 	newcolumn.setAttribute("width","150");
+	newcolumn.setAttribute("class","text-muted");
 	row.appendChild(newcolumn).innerHTML=id;
 	
 	var newcolumn = document.createElement("td");
@@ -164,6 +174,9 @@
 	newcolumn.id = "tdName"+id;
 	newcolumn.setAttribute("idnum",id);
 	newcolumn.setAttribute("name","tdName");
+	if (id != "ID" && id != topic_tag_id) {
+		newcolumn.setAttribute("class","editable");
+	}
 	row.appendChild(newcolumn).innerHTML=name;
 	
 	var newcolumn = document.createElement("td");
@@ -171,6 +184,9 @@
 	newcolumn.id = "tdTag"+id;
 	newcolumn.setAttribute("idnum",id);
 	newcolumn.setAttribute("name","tdTag");
+	if (id != "ID" && id != topic_tag_id) {
+		newcolumn.setAttribute("class","editable");
+	}
 	row.appendChild(newcolumn).innerHTML=tag;
 	
 	var newcolumn = document.createElement("td");
@@ -178,47 +194,44 @@
 	if ( color=="Color") {
 		row.appendChild(newcolumn).innerHTML="Color";
 	} else {
+		newcolumn.setAttribute("class","editable");
 		row.appendChild(newcolumn).innerHTML="<div id=\"colorSelector"+id+"\"><div id=\"colorSelectorB"+id+"\" style=\"background-color: "+color+"\"></div></div>";
 	}
 
 
-	if (id == topic_tag_id) {
-		// pass
-	} else {	
-
-		var newcolumn = document.createElement("td");
-		newcolumn.setAttribute("width","50");
-		if ( color=="Color") {
-			row.appendChild(newcolumn).innerHTML="Save";
-		} else {
-			row.appendChild(newcolumn).innerHTML="<button onclick=\"saveTag("+id+", 'update')\">Save</button>";
-		}
+	var newcolumn = document.createElement("td");
+	newcolumn.setAttribute("width","50");
+	if ( color=="Color") {
+		row.appendChild(newcolumn).innerHTML="Save";
+	} else {
+		row.appendChild(newcolumn).innerHTML="<button onclick=\"saveTag("+id+", 'update')\">Save</button>";
+	}
 
-		
-		var newcolumn = document.createElement("td");
-		newcolumn.setAttribute("width","50");
-		if ( color=="Color") {
-			row.appendChild(newcolumn).innerHTML="Delete";
-		} else {
-			row.appendChild(newcolumn).innerHTML="<button onclick=\"DeleteTag("+id+")\">Delete</button>";
-		}
-		
+	
+	var newcolumn = document.createElement("td");
+	newcolumn.setAttribute("width","50");
+	if ( color=="Color") {
+		row.appendChild(newcolumn).innerHTML="Delete";
+	} else {
+		row.appendChild(newcolumn).innerHTML="<button onclick=\"DeleteTag("+id+")\">Delete</button>";
+	}
 	
-		$('#colorSelector'+id).ColorPicker({
-			color: color,
-			onShow: function (colpkr) {
-				$(colpkr).fadeIn(500);
-				return false;
-			},
-			onHide: function (colpkr) {
-				$(colpkr).fadeOut(500);
-				return false;
-			},
-			onChange: function (hsb, hex, rgb) {
-				$('#colorSelector'+id+' div').css('backgroundColor', '#' + hex);
-			}
-		});
-	}
+
+	$('#colorSelector'+id).ColorPicker({
+		color: color,
+		onShow: function (colpkr) {
+			$(colpkr).fadeIn(500);
+			return false;
+		},
+		onHide: function (colpkr) {
+			$(colpkr).fadeOut(500);
+			return false;
+		},
+		onChange: function (hsb, hex, rgb) {
+			$('#colorSelector'+id+' div').css('backgroundColor', '#' + hex);
+		}
+	});
+
 
 	// insertRule works in IE9, FF, Saf, Chrome, Opera
 	var x = document.styleSheets[0];
@@ -303,11 +316,12 @@
 
 function DeleteTag( id ) {	
 	$("#tr"+id).remove();
+	var topic_id = JSON.parse('<?php echo json_encode($topic_id) ?>');
 	$.ajax({
 		url : './EditTaglist',
 		async : false,
 		type : 'POST',
-		data : 'func=DeleteTag'+'&id='+id+'&type=delete'
+		data : 'func=DeleteTag'+'&id='+id+'&type=delete&topic_id='+topic_id
 	}).done(function(result) {
 		alert("Saved!");
 	});
@@ -319,7 +333,7 @@
 		return;
 	}
 	var topic_tag_id = JSON.parse('<?php echo json_encode($topic_tag_id) ?>');
-	if (this.id == "tdName"+topic_tag_id) {
+	if (this.id == "tdName"+topic_tag_id || this.id == "tdNameID") {
 		return;
 	}
 	//var startPageValue = this.innerHTML;
@@ -339,9 +353,11 @@
 	if ( $("#input"+this.id).length > 0 ) {
 		return;
 	}
-	if (this.id == "tdTag"+topic_tag_id) {
+	
+	if (this.id == "tdTag"+topic_tag_id || this.id == "tdTagID") {
 		return;
 	}
+
 	//var startPageValue = this.innerHTML;
 	var startPageValue = this.textContent;
 	this.innerHTML="";
@@ -355,24 +371,28 @@
 	$("#input"+this.id).focus();
 } );
 
+
 $(document).on("keypress", "[name=tdName]", function () {
 	if (event.keyCode == 13) {
 		$(this).focusout();
 	}
 });
 
+
 $(document).on("keypress", "[name=tdTag]", function () {
 	if (event.keyCode == 13) {
 		$(this).focusout();
 	}
 });
 
+
 $(document).on("focusout", "[name=tdName]", function () {
 	var value=$("#input"+this.id).val();
 	$(this).html($(this).html() + value);
 	$("#input"+this.id).remove();
 });
 
+
 $(document).on("focusout", "[name=tdTag]", function () {
 	var value=$("#input"+this.id).val();
 	$(this).html($(this).html() + value);
diff -r a05491461199 -r b0cecc104639 views/Extractapp/ExportTabDelimited.php
--- a/views/Extractapp/ExportTabDelimited.php	Fri Oct 02 12:18:34 2015 +0200
+++ b/views/Extractapp/ExportTabDelimited.php	Mon Nov 09 12:00:24 2015 +0100
@@ -42,6 +42,8 @@
 			echo "Address\t";
 			echo "Longitude\t";	// longitude
 			echo "Latitude\t";	// latitude
+			echo "Description\t";	// description
+
 		} else {
 			echo $count++."\t";
 			echo $bookId."\t";
@@ -51,6 +53,8 @@
 			echo $bookMeta->place_name."\t";
 			echo $bookMeta->x."\t";
 			echo $bookMeta->y."\t";
+			echo $bookName."_".$sectionName."\t";	// description for LGMap
+			
 		}
 		if ( isset( $trValue["page"] ) ) {
 			echo $trValue["page"]."\t";
diff -r a05491461199 -r b0cecc104639 views/Extractapp/ExportTable.php
--- a/views/Extractapp/ExportTable.php	Fri Oct 02 12:18:34 2015 +0200
+++ b/views/Extractapp/ExportTable.php	Mon Nov 09 12:00:24 2015 +0100
@@ -53,6 +53,8 @@
 			echo "<td>方志地點</td>";
 			echo "<td>經度(x)</td>";	// longitude
 			echo "<td>緯度(y)</td>";	// latitude
+			echo "<td>Description</td>";	// description
+			
 		} else {
 			echo "<td>".$count++."</td>";
 			echo "<td>".$bookId."</td>";
@@ -62,6 +64,8 @@
 			echo "<td>".$bookMeta->place_name."</td>";
 			echo "<td>".$bookMeta->x."</td>";
 			echo "<td>".$bookMeta->y."</td>";
+			echo "<td>".$bookName."_".$sectionName."</td>";	// description for LGMap
+			
 		}
 		if ( isset( $trValue["page"] ) ) {
 			echo "<td>".$trValue["page"]."</td>";
@@ -94,6 +98,8 @@
 				}
 			}
 		}
+		
+
 		if ( isset( $trValue["other"] ) ) {
 			echo "<td>".$trValue["other"]."</td>";
 		} else {
@@ -104,6 +110,8 @@
 		} else {
 			echo "<td>&nbsp;</td>";
 		}
+	
+
 		echo "</tr>";
 	}
 ?>
diff -r a05491461199 -r b0cecc104639 views/Extractapp/TaggingText.php
--- a/views/Extractapp/TaggingText.php	Fri Oct 02 12:18:34 2015 +0200
+++ b/views/Extractapp/TaggingText.php	Mon Nov 09 12:00:24 2015 +0100
@@ -80,7 +80,7 @@
 <?php
 // color on the tags
 foreach ( $taglistArray as $taglistValue ) {
-    echo $taglistValue[2]."\n{\ncolor:".$taglistValue[3]."\n}\n";
+    echo $taglistValue[2]."\n{\ncolor:".$taglistValue[3]."; cursor: hand;\n}\n";
     
     echo ".span_".$taglistValue[2]."\n{\nbackground-color:".$taglistValue[3]."\n}\n";
 }
@@ -172,14 +172,15 @@
     var taglistValue = taglistArray[i];
     
   
-    $(document).on("click", taglistValue[2], function (e) {
+    $(document).on("click", taglistValue[2], function (e, taglistValue) {
         if ($("#editTextId").html() != "Edit the text") return 0;
-        var tagName = $(this).prop("tagName").toLowerCase();
+        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, tagName , $(this));
+            removeTagNewDiv( e, tag , $(this));
+    
         };
         return false;  
   });
@@ -266,18 +267,15 @@
     if (taglist_infile == "") {
         console.log("Debug: taglist_infile is empty which means taglist_infile is equal to taglist in db.");
     } else {
-        console.log("Debug: taglist_infile length=" + taglist_infile.length);
+        console.log("Debug: taglist in file, length=" + taglist_infile.length);
         console.log(taglist_infile);
-        console.log("Debug: taglistArray length=" + taglistArray.length);
+        console.log("Debug: taglist in db, length=" + taglistArray.length);
         console.log(taglistArray);
 
-        // TOOD: ask user to modify/decide tags
+        // TOOD: ask user to modify/decide tags (?)
         // showing taglist_infile and taglistArray
-        //alert("Warning: taglist is deprecated in the current file.");
-
     }
 
-
 });
 
 $(document).on("mouseup", '#editable-area', function (e) {
@@ -384,6 +382,7 @@
                 ?>
 
                 newdiv.appendChild(tagging_tags);
+
                 // add selected words to generator regex
                 genRegexBySelection(newdiv, selection); // append button to newdiv and handle the selection words
 
@@ -660,8 +659,10 @@
         if (book_name == "" || section_name == "" || period == "") {
             default_label = today;
         } else {
-            default_label = book_name+"("+cjst.chineseToPinyin(book_name).join(' ')+")_"+period+ "_"+section_name
-                        + "("+ cjst.chineseToPinyin(section_name).join(' ') + ")_" + today;
+            default_label = book_name + "(" + cjst.chineseToPinyin(book_name).join(' ') + ")_"
+                            + period + "(" + cjst.chineseToPinyin(period).join(' ') + ")_"
+                            + section_name + "(" + cjst.chineseToPinyin(section_name).join(' ') + ")_" 
+                            + today;
         }
         
 
@@ -699,6 +700,80 @@
 
 }
 
+function createTopic(default_topic_id) {
+    var popup_status = $('#new_topic_div').css("display");
+    if (popup_status == "block") {
+        $('#new_topic_div').css("display", "none");
+    } else {
+        $('#new_topic_div').css("display", "block");
+    }
+
+
+
+
+    // TODO input new topic
+    /* In table:
+          taglist: name, tag, color (default, user can change later in the editing page)
+          topics: tag, name_en, name_ch, name_pinyin
+     
+      need transaction for the following actions:
+        taglist.name: topic_tag name in chinese 
+        taglist.tag: topic_tag name in eng
+        topics.tag: (the same a taglist.tag)
+        topics.name_en:
+        topics.name_ch: 
+        topics.name_pinyin: 
+        add a new record in topic_tag_relation: topic_id, tag_id
+    */
+   
+
+
+    var newtopic = document.getElementById("newTopicSubmit");
+    
+    newtopic.onclick = function(){
+        var form = document.createElement("form");
+        form.setAttribute("method", "post");
+        form.setAttribute("action", "./ConfigTagsInTopic");  // hand to controller
+        form.setAttribute("target", "_self");   // TODO self here?
+
+        // TODO 
+        var hiddenField = document.createElement("input");      
+        hiddenField.setAttribute("name", "func");
+        hiddenField.setAttribute("value", "CreateNewTopic");
+        form.appendChild(hiddenField);
+    
+        
+        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");     
+        hiddenField.setAttribute("name", "new_topic_name_ch");
+        hiddenField.setAttribute("value", $("#newTopicNameCh").val());
+        form.appendChild(hiddenField);
+        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");     
+        hiddenField.setAttribute("name", "new_topic_tag");
+        hiddenField.setAttribute("value", $("#newTopicTag").val());
+        form.appendChild(hiddenField);
+        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\");");
+
+}
+
 function chooseTopic(default_topic_id) {
     var t = JSON.parse( '<?php echo json_encode($topiclistArray) ?>' );
     var info = JSON.parse('<?php echo json_encode($info) ?>');
@@ -939,6 +1014,54 @@
         <td valign="top" style="min-width:280px; padding:0 5 0 5; margin:0 5 0 5;">
             <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">
+                    <div class="form-horizontal">
+                        <h4 class="text-info">New topic name:</h4>
+                        <div class="form-group form-group-sm">
+                            <label for="newTopicNameEn" class="col-sm-4 control-label">name (en)</label>
+                            <div class="col-sm-8">
+                                <input type="text" class="form-control" id="newTopicNameEn" placeholder="name in English">
+                            </div>
+                         </div>
+                        <div class="form-group form-group-sm">
+                            <label for="newTopicNameCh" class="col-sm-4 control-label">name (ch)</label>
+                            <div class="col-sm-8">
+                                <input type="text" class="form-control" id="newTopicNameCh" placeholder="name in Chinese">
+                            </div>
+                        </div>
+                        <div class="form-group form-group-sm">
+                            <label for="newTopicNamePi" class="col-sm-4 control-label">name (pi)</label>
+                            <div class="col-sm-8">
+                                <input type="text" class="form-control" id="newTopicNameCh" placeholder="name in Pinyin">
+                            </div>
+                        </div>
+                        
+
+                        <h4 class="text-info">New topic tag:</h4>
+                        <div class="form-group form-group-sm">
+                            <label for="newTopicTag" class="col-sm-4 control-label">tag (en)</label>
+                            <div class="col-sm-8">
+                                <input type="text" class="form-control" id="newTopicTag" placeholder="tag in English">
+                            </div>
+                        </div>
+
+                        <div class="form-group form-group-sm">
+                            <label for="newTopicTagName" class="col-sm-4 control-label">tag (ch)</label>
+                            <div class="col-sm-8">
+                                <input type="text" class="form-control" id="newTopicTag" placeholder="tag in Chinese">
+                            </div>
+                        </div>
+
+
+                        <div class="form-group form-group-sm">
+                            <div class="col-sm-offset-4 col-sm-8">
+                                <button type="submit" id="newTopicSubmit" class="btn btn-primary btn-xs">Submit</button>
+                                <button id="newTopicCancel" class="btn btn-default btn-xs">Cancel</button>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
                 <div id="load_regex_div" class="popup-loadregex popup-frame"></div>
                 <div id="regex_generator" class="popup-frame">
                     <h3>Gen Regex</h3>
@@ -993,14 +1116,23 @@
                     <fieldset class="tool-frame">
                         <legend><h5 class="tool-topic" data-toggle="collapse" data-target="#tool_topic"> Topic: <span class="caret"></span></h5></legend>
                         <div id="tool_topic" class="collapse in">
-                            <div> Current topic is: <br> 
-                                <?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-xs">Change</button>
+                            <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 (TODO)</button>
+                            </div>
                             </div>
-                            <div>The topic tag is: <?php echo $topic_tag_ch;?>(<?php echo $topic_tag;?>)</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>
+                                <!-- (<?php echo $topic_tag;?>) -->
+                            </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>
 
@@ -1025,10 +1157,10 @@
                             -->
                             <button onclick="replaceSmartRunSpace()" class="btn btn-default btn-block">Run(Allow space between block)</button></br>
 
-                            <button onclick="window.open('./EditWordlist')" class="btn btn-default btn-block">Edit WordList</button>
+                            <button onclick="window.open('./EditWordlist')" class="btn btn-default btn-block">Edit WordList</button></br>
 
                             <!-- developing...-->
-                            <button onclick="genRegexWindowOpen()" id="gen_regex_window_open_id" class="btn btn-default">Open GenRegex (test)</button></br>
+                            <button onclick="genRegexWindowOpen()" id="gen_regex_window_open_id" class="btn btn-default btn-block btn-xs">Open GenRegex (developing...)</button></br>
                         </div>
                     </fieldset>
                     
@@ -1063,7 +1195,7 @@
                     
                     <fieldset class="tool-frame">
                         <legend><h5 class="tool-topic" data-toggle="collapse" data-target="#tool_save"> Save and Export: <span class="caret"></span></h5></legend>
-                        <div class="collapse out" id="tool_save">
+                        <div class="collapse in" id="tool_save">
                             <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">