<%@ page language="C#" autoeventwireup="true" inherits="Admin_Set_CustomerCity, App_Web_fz39milv" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<meta http-equiv="content-type" content="text/html;"/>
	<title>地区设置</title>
	<link rel="stylesheet" href="../../JS/jquery-treeview/jquery.treeview.css" />
	<script src="../../JS/jquery.min.js" type="text/javascript"></script>
	<script src="../../JS/jquery-treeview/jquery.treeview.js" type="text/javascript"></script>
	<script src="../../JS/jquery-treeview/jquery.treeview.async.js" type="text/javascript"></script>
    <script src="../../JS/Popup.js" type="text/javascript"></script>

    <link href="../../CSS/MenuStyle.css" rel="stylesheet" type="text/css" />
    <link href="../../CSS/All.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript">
	$(function(){
		$("#black").treeview({
			url: "../ashx/source.ashx?random="+Math.floor(Math.random()*100000)
		});
	});
	</script>
	<style>
    .popupPanel{
        z-index: 101;
        left: 200px;  width: 400px; 
        position: absolute;
        top: 190px; 
        display:none;
        background-color: whitesmoke; 
        border-right: #5d7b9d 10px solid;
        border-top: #5d7b9d 10px solid; 
        border-left: #5d7b9d 10px solid; 
        border-bottom: #5d7b9d 10px solid;
    }
     .close{
        border-right: medium none;
        border-top: medium none; float: right; border-left: medium none; border-bottom: medium none;
        background-color: darkgray
    }



	</style>
</head>
<body>
<form runat="server" id="Form1">
    <asp:HiddenField ID="Insert" runat="server" Value="0" />
    <asp:HiddenField ID="Delete" runat="server" Value="0" />
    <asp:HiddenField ID="Update" runat="server" Value="0" />

</form>
<fieldset>
<legend>地区目录</legend>
   <div><span>地区</span><a href='javascript:void(0)' class='oper' onclick='addArea()' >[添加]</a></div>
	<ul id="black">
	
	

	</ul>

	<div  id="operPanel" style="z-index: 101; display:none; position: absolute;left: 48px;  top: 264px; width: 117px; height: 60px;" align="center">
	  <div id="navcontainer">
<ul id="navlist" class="MM">
            <li><a href="javascript:void(0)" id="btnDelete" style="width: 120px"  >删除该地区</a></li>
            <li><a href="javascript:void(0)" id="btnUpdate" style="width: 120px"   >编辑该地区</a></li>
            <li><a href="javascript:void(0)" id="btnAddChilder" style="width: 120px"   >新增子项</a></li>
            <li><a href="javascript:void(0)" id="btncolse" style="width: 120px"   >关闭</a></li>

</ul>
    </div>
    
  

</div>
    <div id="EditPanel" class="popupPanel" style="left: 200px; top: 190px" >
        <table border="0" cellspacing="5" height="100%" width="100%">
            <tr>
                <td colspan="3">
                    <div id="_addCoursePanelDorp" style="width: 100%; border-bottom: gray 1px solid;
                        height: 25px; background-color: whitesmoke">
                        <input id="btnAddCourseClose" class="close" onclick='$("#EditPanel").hide();' type="button"
                            value="关闭" />
                    </div>
                </td>
            </tr>
            <tr>
                <td style="width: 17%">
                    <span class="title_1">编辑地区：</span>
                </td>
                <td style="width: 67%" valign="top">
                    <input id="txtUpdateArea" style="width: 244px" type="text" /></td>
                <td valign="top" width="24%">
                    <input id="btnEditSubmit" style="width: 46px" type="button" value="提交" /></td>
            </tr>
            <tr>
                <td colspan="3" style="height: 23px">
                </td>
            </tr>
        </table>
    </div>
    
    <div id="InsertPanel" class="popupPanel" style=" left: 197px; width: 408px; top: 367px;" >
        <table border="0" cellspacing="5" style="width: 407px" >
            <tr>
                <td colspan="3" style="height: 42px">
                    <div style="width: 100%; border-bottom: gray 1px solid;
                        height: 25px; background-color: whitesmoke">
                        <input id="Button1" class="close" onclick='$("#InsertPanel").hide();' type="button"
                            value="关闭" />
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="3" style="height: 23px">
                    子项：<input id="btnInsertAdd" style="width: 21px" type="button" value="+" onclick="addInsert()"/>
                    <input id="btnAllDelete" style="width: 33px" type="button" value="X" onclick="deleteAllInsert()" /></td>
            </tr>
            <tr>
                <td colspan="3" style="height: 23px">
                <div id="childPanel" align="right"><div><input type="text" style="width: 318px" /><input id="btn" type="button" value="X" style="width: 26px" onclick="removeInsert(this)" /></div>
                </div>
                </td>
            </tr>
            <tr>
                <td align="center" colspan="3" style="height: 23px">
                    <input id="btnInsertSubmit" style="width: 129px" type="button"  value="保存" />
                </td>
            </tr>
        </table>
    </div>
    </fieldset>
	<script>
var currentID = null;
var varparent = null
var vardepth = null;
var currentLi = null;
function Oper(obj,cid){

       var Y = $(obj).offset().top;
       var X =  $(obj).offset().left;
       var p = $("#operPanel");
       p.css("top",Y+$(obj).height());
       p.css("left",X);
       p .show();
       currentID = cid;
       currentLi = $(obj).parent();
       varparent = currentLi.attr("parent");
       vardepth = currentLi.attr("depth");
}
function addArea(){
     if($("#Insert").val()=="1"){
            showPanel($("#InsertPanel"));
            currentLi = null;
            currentID = 0;
            vardepth = -1;
     }
}


function removeInsert(obj){
   $(obj).parent().remove();
}
function addInsert(){
   $("#childPanel").append("<div><input tyle=\"width: 327px\" type=\"text\" style=\"width: 318px\" /><input id=\"btn\" type=\"button\" value=\"X\" style=\"width: 26px\" onclick=\"removeInsert(this)\"  /><div>");
}
function deleteAllInsert(){
   $("#childPanel").html("");
}

$(function(){
   $("#btncolse").click(function() {$("#operPanel").hide()});
   
   if($("#Delete").val()=="0"){
         $("#btnDelete").attr("disabled",true);
   }else{
            $("#btnDelete").click(function() {
             $("#operPanel").hide();
                 if(confirm('确定要删除该地区吗？')){
                      if(currentID!=null){
                          $.ajax({
                               type: "POST",
                               dataType:"text",
                               processData:false,
                               async:false,
                               url: "../ashx/AreaOper.ashx",
                               data: "cid="+currentID+"&type=delete",
                               success: function(msg){
                                  if(msg==1){
                                     $("#operPanel").hide();
                                     nodeRemove();
                                      
                                  }else{
                                    alert("删除失败！");
                                  }
                               },
                               error:function (XMLHttpRequest, textStatus, errorThrown) { 
                                alert("删除地区失败 "+textStatus +" "+errorThrown+" "+XMLHttpRequest);
                               }
                           }); 
                      }
                  }
              
             });
    }
    
    if($("#Update").val()=="0"){
         $("#btnUpdate").attr("disabled",true);
    }else{
         $("#btnUpdate").click(function() {
            $("#operPanel").hide();

            $("#txtUpdateArea").val(currentLi.children("span").text());
            showPanel($("#EditPanel"));
         });

    }

     
     
     $("#btnEditSubmit").click(function(){
                 var value = $("#txtUpdateArea").val(); 
                 if($.trim(value)=="")return false; 
                  $.ajax({
                           type: "POST",
                           dataType:"text",
                           processData:false,
                           async:false,
                           url: "../ashx/AreaOper.ashx",
                           data: "cid="+currentID+"&type=update&value="+value,
                           success: function(msg){
                              if(msg=="1"){
                                 $("#EditPanel").hide();
                                 currentLi.children("span").text(value);
                              }else{
                                alert("删除失败！");
                              }
                           },
                           error:function (XMLHttpRequest, textStatus, errorThrown) { 
                            alert("保存编辑失败 "+textStatus +" "+errorThrown+" "+XMLHttpRequest);
                           }
                 }); 
     });
     
       if($("#Insert").val()=="0"){
         $("#btnAddChilder").attr("disabled",true);
         
        }else{
            
              $("#btnAddChilder").click(function(){
                    $("#operPanel").hide();
                    showPanel($("#InsertPanel"));
              });
              
              $("#btnInsertSubmit").click(function(){
                   
                    var doc = CreateDomDoc();    
                    var root = doc.createElement("root");     
                    
                    var list = $("#childPanel").find(":text");      
                    
                    root.setAttribute("parent",currentID);     
                    root.setAttribute("depth",vardepth);     
                 
                    for(var index=0;index<list.size();index++){    
                        if($.trim(list.eq(index).val())!=""){    
                             var node = doc.createElement("Node");     
                             node.appendChild(doc.createTextNode(list.eq(index).val()));    
                             root.appendChild(node);    
                         }
                    }
                    doc.appendChild(root);    
                    
                    $.ajax({
                           type: "POST",
                           dataType:"text",
                           async:false,
                           processData:false,
                           url: "../ashx/InsertArea.ashx",
                           data:doc,
                           success: function(msg){
                             if(msg!="-1"){
                                $("#InsertPanel").hide();
                                
                                nodeAdd(msg);
                             }else{
                                alert("保存操作失败");
                             }
                           },
                           error:function (XMLHttpRequest, textStatus, errorThrown) {
                             alert("添加失败"+textStatus +" "+errorThrown+" "+XMLHttpRequest);
                           }
                          
                        });
              });
        }
        
        

      
      

      
});

function CreateDomDoc()  
{
        try {

                return new ActiveXObject("Microsoft.XMLDOM");
         }catch(e) {
           try {
                return document.implementation.createDocument("","",null);
           } 
           catch(e) {
                alert(e.message);
           }
        }

} 

function nodeAdd(nodeList){
        if(currentLi==null){$("#black").prepend($(nodeList));return }
        
        var ul = currentLi.children("ul");
        if(ul.size()==0){
                currentLi.attr("class","collapsable");
                var div;
                if(currentLi.siblings("li").size()==0)
                {
                     currentLi.addClass("lastCollapsable");
                      div = $("<div class=\" hitarea hasChildren-hitarea collapsable-hitarea lastCollapsable-hitarea\"></div>");
                }
                else{
                  div = $("<div class=\"hitarea hasChildren-hitarea collapsable-hitarea\"></div>");
                }
                currentLi.prepend(div);
                div.click(function(){
                    if(div.parent().siblings("li").size()==0)
                    {
                         if(div.parent().attr("class")=='collapsable lastCollapsable')
                          {
                               div.parent().attr("class",'expandable lastExpandable');
                               div.attr("class",'hitarea hasChildren-hitarea expandable-hitarea lastExpandable-hitarea');
                               div.siblings("ul").css({"display":"none"});
                          }
                          else if(div.parent().attr("class")=='expandable lastExpandable')
                          {
                              div.parent().attr("class",'collapsable lastCollapsable');
                              div.attr("class",'hitarea hasChildren-hitarea collapsable-hitarea lastCollapsable-hitarea');
                              div.siblings("ul").css({"display":"block"});
                          }
                    }
                    else
                    {
                        if(div.parent().attr("class")=='collapsable')
                        {
                            div.parent().attr("class",'expandable');
                            div.attr("class",'hitarea hasChildren-hitarea expandable-hitarea');
                            div.siblings("ul").css({"display":"none"});

                        }else if(div.parent().attr("class")=='expandable')
                        {
                            div.parent().attr("class",'collapsable');
                            div.attr("class",'hitarea hasChildren-hitarea collapsable-hitarea');
                            div.siblings("ul").css({"display":"block"});

                        }
                    }
                 });
                currentLi.append("<ul/>");
        
        }
		var branches =currentLi.children("ul").prepend($(nodeList));
}

function nodeRemove(){
	  currentLi.remove();
}
			


</script>



</body>
</html>