var saving=0;

$(document).ready(function(){
	initEntry();
	initName();
	initPage();
	initLevel();
	initDelete();
	initInsert();
	initConfigure();
	initSave(version);
	if($("#saveBook .editor").val() == "") {
		$("#loading").show();
	} else {
		$("#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();

	clone.children(".hiddenInfo").children(".id").html(0);	// set section id to 0

	// bug: section_after field is not correct


	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());
		}
	});

}


// TODO: rewrite initLevel(), change select to ">>" or "<<" button
function initLevel(){
	//level
	var levelObj=$("<div/>").addClass("editLevel").append("<select/>");
	$(".entry").append(levelObj);
	$(".editLevel select").append("<option value='1'>level 1</option>");
	$(".editLevel select").append("<option value='2'>level 2</option>");
	$(".editLevel select").append("<option value='3'>level 3</option>");
	for(var i=1; i<=3; 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";
		}
		if(entryObj.hasClass("level3")){
			className="level3";
		}
		entryObj.removeClass(className);
		entryObj.addClass("level"+$(this).val());
	});
}
/*
function initLevel_old(){//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'>level 1</option>");
	$(".editLevel select").append("<option value='2'>level 2</option>");
	$(".editLevel select").append("<option value='3'>level 3</option>");
	for(var i=1; i<=3; 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";
		}
		if(entryObj.hasClass("level3")){
			className="level3";
		}
		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' disabled>");	// disabled input for name, bcuz it should come from LGServices
	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);
	} else {
		setCurrentEditor();	// get from LGService, if user linked this TOC from LGService (the firsttime)
	}
}

function saveBook(version){
	var sectionArray=collectSectionArray();
	var bookId=$(".entry").first().children(".hiddenInfo").children(".booksId").html();
	var editor=$("#saveBook .editor").val();
	console.log("editor:"+editor);

	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",
			version:version,
			editor:editor,
			bookId:bookId,
			sectionArray:sectionArray
		},
		function(data){//things to do after edit_section_db is done

			if(data=="Succeeded."){

                alert("Saved Successfully !! Sysetm will reload the page for saved sections, but maybe you will need to re-login.");

				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+"&sessionId="+session_id;
				location.href=href; //refresh the page to load the sections saved in db

			}else{
				console.log("db failed. log: ", data);
				alert("Saving failed. You've NOT saved your editing.");
				alert("Please check your editing again. If the issue remains, please contact us.");
				$("#loading").hide();

			}
		},
		"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
		}
		// bug fix: the type of deleted should be 'int' in database, 0 or 1, rather than TRUE
		if($(this).hasClass("deleted")){	// deleted="TRUE";
			deleted = 1;
		} else {
			deleted = 0;
		}
		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;
}