window.onload=function(){
	//var articles = getAllDbdata();
	getAllDbdata();	
    $("#removebtn").bind("click", delOneRow);
    $("#addbtn").bind("click", insertRowLast),
    $("#getbtn").bind("click", getRowlValue),
    $("#editbtn").bind("click", editRowlValue),
    $("#table tr:gt(0) td:first-child input:checkbox").bind("click",checkOne);
};
function getAllDbdata(){
	$("#error-msg").empty();
	var query = JSON.stringify(getQueryInput("get","","",""));
    var get = sendReq("/device/GetDB", query);
    if (get == null){
    	 $("#errro-msg").html('<div class="alert alert-danger alert-dismissible" role="alert">'+
 				'<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
 				'<span aria-hidden="true">×</span></button><strong>insert database!</strong></div>');
    	return;
    }
    var articles1 = get.resultDB;////articles:"[{},{}]" must use eval to [{},{}]
    var articles = JSON.parse(articles1);//both this method and eval() can run  
    //var articles = eval(articles1);//very important.
   //var articles = [{ "name" : "rfswitch1" , "ip" : "80.4.2.59" , "group" : "A"}, { "name" : "rfswitch2" , "ip" : "10.75.199.244" , "group" : "B"}, { "name" : "rfswitch3" , "ip" : "10.75.192.15" , "group" : "B"}, { "name" : "rfswitch2" , "ip" : "192.168.1.3" , "group" : "A"}, { "name" : "frank" , "ip" : "192.168.1.0" , "group" : "frank"}, { "name" : "frank1" , "ip" : "192.168.1.0" , "group" : "frank1"}, { "name" : "frank2" , "ip" : "198.189" , "group" : "C"}, { "name" : "rfswich4" , "ip" : "192.168.1.9" , "group" : "D"}, { "name" : "rfswitch4" , "ip" : "192.168.1.9" , "group" : "D"}, { "name" : "rfswitch3" , "ip" : "192.168.1.9" , "group" : "D"}];
    $("tr:has(td)").remove();
    // 2. get each article
    $.each(articles, function (index, article) {
        // 2.1 Create table column for group
        // 2.2 Create a new row and append 3 columns (ip+url, group, tags)
        $("#table").append($('<tr/>')
				.append($('<td/>').html("<input id='check"+index+"' type='checkbox' />"))
				.append($('<td/>').html(article.name))			
				.append($('<td/>').html(article.ip))
			    .append($('<td/>').html(article.group))
        );  
    });
}
var c=-1;
function checkOne() { //this return is which checkbox is checked
    var allBox = $(":checkbox"); //only choose one
    allBox.click(function () {
        allBox.removeAttr("checked");
        $(this).prop("checked", true);
        });
	var i = $("#table tr:gt(0) td:first-child input:checkbox").length;
    c = -1;
    var j=0;
    $("#table tr:gt(0) td:first-child input:checkbox").each(function () {
    	j+=1;
		if ($(this).is(":checked")==true) { //low jquery: attr("checked")
            //c += 1;//only select one,c is number of select
            var q=1;
			while(i--){
				if(j==q){
				c=j-1;
				return false;
				}
				q++;
			}
         }
     });
}
function delOneRow() {
	//checkOne();//which row
	//
	if(c!=-1)
	{
		var arraystr = getRowlValue();
		var name = arraystr[1];
		var ip = arraystr[2];
		var group = arraystr[3];
		var query = JSON.stringify(getQueryInput("remove",name,ip,group));
        var get = sendReq("/device/RemoveDB", query);
        if(get.msg == "failed")
        {
        	  $("#errro-msg").html('<div class="alert alert-danger alert-dismissible" role="alert">'+
      				'<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
      				'<span aria-hidden="true">×</span></button><strong>failed, </strong>'+get.msg+'</div>');
        	  return;
        }
		//$("#table tr:gt(0):eq("+c+")").remove();
 	   window.location.reload();
	}
}
 function insertRowLast() {
		  $("#modaladd").modal("toggle");
    		$("#modaladd").draggable({
    		    handle: ".modal-header"
    		});
		  $("#addsubmitbutton").click(function(){
	            var query = JSON.stringify(getQueryInput("add","","",""));
	            var get = sendReq("/device/AddDB", query);
	            if (get == null){
	            	return;
	            }
	            if(get.msg != ""){
	            	   $("#errro-msg").html('<div class="alert alert-danger alert-dismissible" role="alert">'+
	            				'<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
	            				'<span aria-hidden="true">×</span></button><strong>failed, </strong>'+get.msg+'</div>');
		        	   $('#modaladd').modal('hide');
	            	   return;
	           }
	           if(get.msg == ""){
	        	   $('#modaladd').modal('hide');
		            //getAllDbdata();
	        	   window.location.reload();
	           }
	           return;
	      });
}
function editRowlValue() {
	if(c!= -1){
		var arraystr = getRowlValue();
		$("#inputeditname").val(arraystr[1]);
		$("#inputeditip").val(arraystr[2]);
		$("#inputeditgroup").val(arraystr[3]);
		$("#modaledit").modal("toggle");
		$("#modaledit").draggable({handle: ".modal-header"});//must import jquery-ui.min.js,let modal drag
		 $("#editsubmitbutton").click(function(){
			var name = $("#inputeditname").val();
			var ip = $("#inputeditip").val();
			var group = $("#inputeditgroup").val();
			 var query = JSON.stringify(getQueryInput("edit",name,ip,group));
	          var get = sendReq("/device/EditDB", query);
	          if (get == null){
	          	return;
	          }
	          if(get.msg != ""){
	          	   $("#errro-msg").html('<div class="alert alert-danger alert-dismissible" role="alert">'+
	          				'<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
	          				'<span aria-hidden="true">×</span></button><strong>failed, </strong>'+get.msg+'</div>');
		        	   $('#modaledit').modal('hide');
	          	   return;
	         }
	         if(get.msg == ""){
	      	   $('#modaledit').modal('hide');
        	   window.location.reload();
	         }
	         return;
	    });	
	}
}
function getRowlValue() {
    var v = "";
    //$("#table tr:gt(0):eq(1) td").each(function () {
	if(c!=-1)
	{
		$("#table tr:gt(0):eq("+c+") td").each(function () {    
		v += $(this).text() + " ";
		});
	}
	var fenstr = v.split(" ");
	return fenstr;
	
}
function getQueryInput(type,name,ip,group) {
    var input = {
            "name" : null,
            "ip" : null,
            "group" : null
        };
    if(type == "add"){
    	input["name"] = $("#inputaddname").val();
        input["ip"] = $("#inputaddip").val();
        input["group"] = $("#inputaddgroup").val();
    }
    if(type == "remove"){
       	input["name"] = name;
        input["ip"] = ip;
        input["group"] = group;
    }
    if(type == "edit"){
       	input["name"] = name;
        input["ip"] = ip;
        input["group"] = group;
    }
    return { "input" : input };
}
function sendReq(url, query) {
    var req = new XMLHttpRequest();
    req.open("POST", url, false);
    req.setRequestHeader("Content-type","application/json");
    req.send(query.toString());
    if(req.responseText == ""){
    	return null;
    }
    var get_response = jQuery.parseJSON(req.responseText).output;
    return get_response;
}