--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/interface/js/check_sections_details.js	Mon Jan 19 17:13:49 2015 +0100
@@ -0,0 +1,360 @@
+var saving=0;
+$(document).ready(function(){
+	initEntry();
+	initName();
+	initPage();
+	initLevel();
+	initDelete();
+	initInsert();
+	initConfigure();
+	initSave(version);
+	$("#loading").hide();
+});
+window.onbeforeunload = function() {
+	if(saving==0){
+    		return 'Remember to save your revision.';
+	}else{
+	}
+};
+function initEntry(){
+	//create an empty entry by cloning the entry we have, so that when a new entry is to be inserted, we can just clone the empty entry
+	var clone=$(".entry").first().clone();
+	clone.addClass("clone");
+	if(clone.hasClass("overlapper")){clone.removeClass('overlapper');}
+	clone.children(".hiddenInfo").children(".id").html("-1");
+	clone.children(".hiddenInfo").children(".splitFrom").html("");
+	clone.children(".hiddenInfo").children(".sectionAfter").html("");
+	clone.children(".name").html("<input type='text'>");
+	clone.children(".page").children(".startPage").html("<input type='text'>");
+	clone.children(".page").children(".endPage").html("<input type='text'>");
+	clone.children(".editLevel").children("select").val(1);
+	clone.insertAfter("#searchResults");
+	clone.hide();
+	$(".entry").hover(function(){
+		$(this).addClass("hovered");
+	},function(){
+		$(this).removeClass("hovered");
+	});
+	$(".hiddenInfo").hide();
+	$(".entry").children().each(function(){
+		$(this).addClass("cell");//for layout
+	});
+
+	//$("#bookContainer").droppable();
+	//drag and drop
+	$(".entry").draggable();
+	$(".entry").droppable({
+		drop:function(e,ui){
+			$(ui.draggable).insertAfter($(this));
+			$(this).mouseleave();
+			$(ui.draggable).mouseenter();
+		}
+	});
+}
+function dropHandler(e){//for debug
+	console.log("QQ");
+	console.log($(event.target).children("hiddenInfo").html());
+}
+function initName(){
+	$(".entry .name").click(function(){
+		var editMode=false;
+		var name=$(this).html();
+		if($(this).children().length!=0){//if the name element has children, i.e. the input text
+			editMode=true;
+		}
+		if(!editMode){
+			$(this).html("<input type='text' value='"+name+"'>");
+			$(this).children("input").focus();
+		}
+	});	
+}
+function initInsert(){
+	var insert=$("<div/>").addClass("insert");
+	var insertIcon=$("<div/>").addClass("insertIcon").html("+");
+	var insertBefore=$("<input type='button'>").addClass("insertBefore").val("insert before");
+	var insertAfter=$("<input type='button'>").addClass("insertAfter").val("insert after");
+	var insertOption=$("<div/>").addClass("insertOption").append("insert a new section<br>").append(insertBefore).append(insertAfter);
+	insert.append(insertIcon);
+	//insert.append(insertBefore);
+	//insert.append(insertAfter);
+	$(".entry").append(insert);
+	insertOption.insertAfter("#searchResults");
+	//$(".insertAfter").hide();
+	//$(".insertBefore").hide();
+	insertOption.hide();
+	$(".insert").hover(function(){
+		$(this).append($(".insertOption"));
+		$(".insertOption").show();
+		//$(this).children(".insertAfter").show();
+		//$(this).children(".insertBefore").show();
+	},function(){
+		$(".insertOption").hide();
+		//$(this).children(".insertAfter").hide();
+		//$(this).children(".insertBefore").hide();
+	});
+	$(".insertAfter").click(function(){
+		addEntry($(this).parent().parent().parent(),1);
+		$(this).parent().hide();
+	});	
+	$(".insertBefore").click(function(){
+		addEntry($(this).parent().parent().parent(),0);
+		$(this).parent().hide();
+	});	
+}
+function addEntry(obj,pos){//obj: the obj next to which we would like to add a new entry, pos: before the obj or after the obj
+	var clone=$(".clone").clone(true);
+	clone.removeClass("clone");
+	clone.show();
+	if(pos==0){
+		clone.insertBefore(obj);
+		//$("<br>").insertAfter(clone);
+	}else{
+		clone.insertAfter(obj);
+		//$("<br>").insertBefore(clone);
+	}	
+	$("#searchResults .sequence").each(function(idx){
+		$(this).html(idx+1);
+	});
+}
+function initPage(){// init the column start page & end page, so that they turn into input boxes when clicked
+	//page
+	$("div.page").click(function(e){
+		var startPage=$(this).children(".startPage").html();
+		var endPage=$(this).children(".endPage").html();
+		var editMode=false;
+		if($(this).children(".startPage").children().length!=0){
+			editMode=true;
+		}
+		if(!editMode){
+			$(this).children(".startPage").html("<input type='text' value='"+startPage+"'>");
+			//$(this).children(".startPage").children("input").focus();
+			$(this).children(".endPage").html("<input type='text' value='"+endPage+"'>");
+			//$(this).children(".endPage").children("input").focus();
+			$(e.target).children("input").focus();
+		}else{
+			//console.log($(this).parent().children(".editLevel").children().first().val());
+		}
+	});
+		
+}
+function initLevel(){//init the column level, turn it into select element
+	//level
+	var levelObj=$("<div/>").addClass("editLevel").append("<select/>");
+	$(".entry").append(levelObj);
+	$(".editLevel select").append("<option value='1'>1evel 1</option>");
+	$(".editLevel select").append("<option value='2'>1evel 2</option>");
+	for(var i=1; i<=2; i++){
+		$("div.level"+i+" .editLevel select").val(i);
+	}
+	
+	$(".editLevel select").change(function(){//add classes for text indent, to control layout style
+		var entryObj=$(this).parent().parent();	
+		var className="";
+		if(entryObj.hasClass("level1")){
+			className="level1";
+		}
+		if(entryObj.hasClass("level2")){
+			className="level2";
+		}
+		entryObj.removeClass(className);
+		entryObj.addClass("level"+$(this).val());
+	});
+}
+function initDelete(){
+	//delete
+	var deleteObj=$("<div/>").addClass("deleteEntry").append("<input type='button' value='delete' class='deleteButton'>");
+	$(".entry").append(deleteObj);
+	$(".deleted .deleteEntry input").val("recover");
+	var deleteRangeObj=$("<div/>").attr("id","deleteRange").append("delete entry <br>from ");
+	var deleteFromObj=$("<input type='text'>").addClass("deleteFrom");
+	var deleteToObj=$("<input type='text'>").addClass("deleteTo");
+	var deleteButtonObj=$("<input type='button'>").addClass("deleteButton").val("delete");
+	deleteRangeObj.append(deleteFromObj).append(" to ").append(deleteToObj).append(deleteButtonObj);
+	deleteRangeObj.insertAfter($("#searchResults"));
+	deleteRangeObj.hide();
+	$(".deleteEntry .deleteButton").click(function(){
+		var entryObj=$(this).parent().parent();
+		var buttonVal=$(this).val();
+		if(buttonVal=="delete"){
+			entryObj.addClass("deleted");
+			$(this).val("recover");
+		}else{
+			entryObj.removeClass("deleted");
+			$(this).val("delete");
+		}
+		if($("#deleteRange").is(":visible")){
+			deleteRangeObj.insertAfter($("#searchResults"));
+			$("#deleteRange").hide();
+		}	
+	});
+	$(".deleteEntry").hover(function(){
+		var entryObj=$(this).parent();
+		var deleteRangeObj=$("#deleteRange");
+		var buttonVal=$(this).children(".deleteButton").val();
+		if(buttonVal=="delete"){
+			$(this).append(deleteRangeObj);
+			deleteRangeObj.show();
+			deleteRangeObj.children(".deleteFrom").val(entryObj.children(".sequence").html());
+		}
+	},function(){
+		var buttonVal=$(this).children(".deleteButton").val();
+		var deleteRangeObj=$("#deleteRange");
+		if(buttonVal=="delete"){
+			deleteRangeObj.children("input:text").val("");
+			deleteRangeObj.insertAfter($("#searchResults"));
+			deleteRangeObj.hide();
+		}
+
+	});
+	$("#deleteRange .deleteButton").click(function(){
+		var from=$("#deleteRange .deleteFrom").val().trim();
+		var to=$("#deleteRange .deleteTo").val().trim();
+		from=Number(from);
+		to=Number(to);
+		if(isNaN(from) || isNaN(to) || to <from){
+			return;
+		}
+		var i;
+		for(i=from; i<=to; i++){
+			if(i<1){i=1;}
+			if(i>$(".entry").size()){console.log($(".entry").size());break;}
+			var entryObj=$(".entry:eq("+(i-1)+")");
+			var buttonObj=entryObj.children(".deleteEntry").children(".deleteButton");
+			var buttonVal=buttonObj.val();
+			if(buttonVal=="delete"){
+				buttonObj.click();
+			}
+			$("#deleteRange").children("input:text").val("");
+		}
+	});
+}/*
+function isNumeric(str){
+	if(str.search(/\D/)>=0){
+		console.log("not a number");
+		return false;
+	}else{
+		return true;
+	}
+}*/
+function initConfigure(){
+	var configureObj=$("<div/>").attr("id","configure");
+	var hideDeletedObj=$("<div/>").addClass("hideDeleted").append("<input type='checkbox'>");
+	hideDeletedObj.append("hide deleted sections");
+	configureObj.append(hideDeletedObj);
+	$("#panel").append(configureObj);
+	$(".hideDeleted input:checkbox").change(function(){
+		if($(this).is(":checked")){
+			$(".deleted").hide();
+			//$(".deleted").next().hide();
+		}else{
+			$(".deleted").show();
+			//$(".deleted").next().show();
+		}
+	});
+	var href=window.location.href;
+	var reg=/hideDeletedChecked=[a-zA-Z]+/g;
+	var hidden=reg.exec(href);
+	if(hidden!=null){
+		hidden=hidden[0].replace("hideDeletedChecked=","");
+		if(hidden=="true"){
+		//if(hidden.search("true")!=-1){
+			$(".hideDeleted input:checkbox").attr("checked","true");
+			$(".deleted").hide();
+		}
+	}
+}
+function initSave(version){
+	//save
+	var saveObj=$("<div/>").attr("id","saveBook");
+	var labelObj=$("<div/>").addClass("label").html("Name of the editor:");
+	saveObj.append(labelObj);
+	labelObj.append("<input type='text' class='editor'>");
+	saveObj.append("<input type='button' value='save' class='save'>");
+	$("#panel").append(saveObj);
+	$("#saveBook .save").click(function(){
+		if($("#saveBook .editor").val()!=""){
+			saveBook(version);
+		}else{
+			alert("Please fill in the name of the editor.");
+		}
+	});
+	var href=window.location.href;
+	var reg=/editor=[^\?^\&]+/g;
+	var editor=reg.exec(href);
+	if(editor!=null){
+		editor=editor[0].replace("editor=","");
+		editor=editor.replace("%20"," ");
+		$("#saveBook .editor").val(editor);
+	}
+}
+function saveBook(version){
+	var sectionArray=collectSectionArray();
+	var bookId=$(".entry").first().children(".hiddenInfo").children(".booksId").html();
+	var editor=$("#saveBook .editor").val();
+	var version=version;
+	$("#loading").show();
+	$.post("edit_section_db.php", // use ajax to post to a php then wait for return
+		{//post data
+			command:"write",
+			bookId:bookId,
+			sectionArray:sectionArray,
+			version:version,
+			editor:editor	
+		},
+		function(data){//things to do after edit_section_db is done
+			if(data=="Succeeded."){
+				saving=1;
+				var hideDeletedChecked=$(".hideDeleted input:checkbox").is(":checked");//get the previous setting for checked
+				var href=window.location.href;
+				var reg=/count=[0-9^\?]+/g;
+				var count=reg.exec(href);
+    				reg = /[^\?]+/g;
+    				href = reg.exec(href);		
+				href=href+"?book_id="+bookId+"&"+count+"&hideDeletedChecked="+hideDeletedChecked+"&editor="+editor;
+				location.href=href; //refresh the page to load the sections saved in db
+			}else{
+				
+			}
+		},
+		"json"
+	);	
+}
+function collectSectionArray(){
+	var sectionArray=new Array();
+	var idx=0;
+	$("#searchResults .entry").each(function(){//go through all the entries wrapped in the element searchResults
+		var startPage,endPage,name,deleted="FALSE";
+		if($(this).children(".page").children(".startPage").children().length!=0){ //if the value is a input box
+			startPage=$(this).children(".page").children(".startPage").children().first().val();
+			endPage=$(this).children(".page").children(".endPage").children().first().val();
+		}else{ // if the value is not an input box (has not been edited)
+			startPage=$(this).children(".page").children(".startPage").html();
+			endPage=$(this).children(".page").children(".endPage").html();
+		}
+		if($(this).children(".name").children().length!=0){
+			name=$(this).children(".name").children().first().val();
+		}else{
+			name=$(this).children(".name").html();
+		}
+		startPage=$.trim(startPage);
+		endPage=$.trim(endPage);
+		name=$.trim(name);
+		if(name=="" || startPage=="" ||endPage==""){ // if any of the fields is blank, dont insert to db (since none of them should be blank)
+			console.log("empty row: "+name+" -- "+startPage+" -- "+endPage);
+			return; // "continue" in jquery
+		}
+		if($(this).hasClass("deleted")){	deleted="TRUE";}
+		var id=$(this).children(".hiddenInfo").children(".id").html();
+		var booksId=$(this).children(".hiddenInfo").children(".booksId").html();
+		var sectionAfter=$(this).children(".hiddenInfo").children(".sectionAfter").html()
+		var level=$(this).children(".editLevel").children("select").val();
+		var splitFrom=$(this).children(".hiddenInfo").children(".splitFrom").html();
+		if(splitFrom==""){splitFrom="NULL";}	
+		sectionArray[idx]={name:name,booksId:booksId,sectionAfter:sectionAfter,
+				startPage:startPage,endPage:endPage,
+				level:level,splitFrom:splitFrom,
+				id:id,deleted:deleted};
+		idx++;
+	});
+	return sectionArray;
+}