<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="../css/webkitBase.css" type="text/css" />
	<link rel="stylesheet" href="../css/defaultCut.css"  type="text/css" />
	<link rel="stylesheet" href="../css/jquery.cxcalendar.css">
    <link rel="stylesheet" href="../css/contextmenu.css" type="text/css" />
    <link rel="stylesheet" href="../css/scrollstyle.css"  type="text/css" />

        
    <script src="../js/jquery-2.0.3.min.js" type="text/javascript"></script>
    <script src="../js/webkitBase.js" type="text/javascript"></script>
    
	<script src="../js/imagecropper.js" type="text/javascript"></script>
	<script src="../js/artDialog.min.js" type="text/javascript"></script>
    <script src="../js/artDialog.plugins.min.js" type="text/javascript"></script>
	<script src="../js/template.js"></script>
   	<script src="../js/jquery.cxcalendar.min.js"></script>
   
   <!-- <script src="Calendar1.js" type="text/javascript"></script>-->
        
	<!--<script src="backbone.js" type="text/javascript"></script>
	<script src="underscore-1.1.6.js" type="text/javascript"></script>-->

    <title>联系人编辑</title>
    
</head>

<script id="edit_template" type="text/html">
    <div class="hbox" id="base" contactid='<%= list["_id"]%>'>
        <% if (list["_head"] !== undefined) {%>
            <div id="editHead">
            	<% if (list["_head"] !== '') {%>
                	<img src='<%= list["_head"]%>'/>
                <% } %>
            </div>
            <div id="editHeadBtn">
                <div id="editHeadAdd">{{editHeadAdd_lang}}</div>
            </div>
        <% } else {%>
            <div id="editHead"></div>
            <div id="editHeadBtn">
                <div id="editHeadEdit">{{editHeadEdit_lang}}</div>
                <div id="editHeadDel">{{editHeadDel_lang}}</div>
            </div>
        <% } %>
        <div class="vbox">
            <input type="text" id="editName" value='<%= list["_name"]%>' placeholder="{{contact_edit_nameplaceholder_lang}}"/>
            <% if (list["_starred"] === false || list["_starred"] === undefined) {%>
                <div id="editStar" class='star'></div>
            <%} else {%>
                <div id="editStar" class='star starred'></div>
            <%}%>
        </div>
    </div>
    <div id="editDetail" class="vbox">
        <div id="phonelist">
        <% if (list["phone"] !== undefined) { 
            for (var i=0, len=list["phone"].length; i<len; i++) {%>
                <div class="hbox margin-top" type="phone">
                    <div class="hbox label">
                        <div class="label-text"><%= list["phone"][i]["label"] || "{{contact_edit_mobile_label_lang}}" %></div>
                        <div class="arrow"></div>
                    </div>
                    <div class="edit" data_id='<%= list["phone"][i]["dataid"]%>'>
                        <input type="text" value='<%= list["phone"][i]["number"]%>' placeholder="{{contact_edit_comparePhone}}"/>
                    </div>
                    <% if (i==0) { %>
                        <div class="additem"></div>
                    <%} else { %>
                        <div class="removeitem"></div>
                    <%} %>
                </div>
            <%}
        } else { %>
            <div class="hbox margin-top hhh" type="phone">
                <div class="hbox label">
                    <div class="label-text">{{contact_edit_label_text}}</div>
                    <div class="arrow"></div>
                </div>
                <div class="edit" data_id="-1">
                    <input type="text" placeholder="{{contact_edit_placeholder_phone}}"/>
                </div>
                <div class="additem"></div>
            </div>
        <%}%>
        </div>

        <div id="emaillist">
        <% if (list["email"] !== undefined) { 
            for (var i=0, len=list["email"].length; i<len; i++) {%>
                <div class="hbox margin-top" type="email">
                    <div class="hbox label">
                        <div class="label-text"><%= list["email"][i]["label"]%></div>
                        <div class="arrow"></div>
                    </div>
                    <div class="edit" data_id='<%= list["email"][i]["dataid"]%>'>
                        <input type="text" value='<%= list["email"][i]["email"]%>' placeholder="{{contact_edittype_email}}"/>
                    </div>
                    <% if (i==0) { %>
                        <div class="additem"></div>
                    <%} else { %>
                        <div class="removeitem"></div>
                    <%} %>
                </div>
            <%}
        } else {%>
            <div class="hbox margin-top" type="email">
                <div class="hbox label">
                    <div class="label-text">{{contact_edit_person_label}}</div>
                    <div class="arrow"></div>
                </div>
                <div class="edit" data_id="-1">
                    <input type="text" placeholder="{{contact_edit_placeholder_email}}"/>
                </div>
                <div class="additem"></div>
            </div>
        <%}%>
        </div>
        
        <div id="imlist">
        <% if (list["im"] !== undefined) { 
            for (var i=0, len=list["im"].length; i<len; i++) {%>
                <div class="hbox margin-top" type="im">
                    <div class="hbox label">
                        <div class="label-text"><%= list["im"][i]["label"]%></div>
                        <div class="arrow"></div>
                    </div>
                    <div class="edit" data_id='<%= list["im"][i]["dataid"]%>'>
                        <input type="text" value='<%= list["im"][i]["im"]%>' placeholder="{{contact_edit_placeholder_msg}}"/>
                    </div>
                    <% if (i==0) { %>
                        <div class="additem"></div>
                    <%} else { %>
                        <div class="removeitem"></div>
                    <%} %>
                </div>
            <%}
        } else {%>
            <div class="hbox margin-top" type="im">
                <div class="hbox label">
                    <div class="label-text">{{contact_edit_im_default_label}}</div>
                    <div class="arrow"></div>
                </div>
                <div class="edit" data_id="-1">
                    <input type="text" placeholder="{{contact_edit_placeholder_msg}}"/>
                </div>
                <div class="additem"></div>
            </div>
        <%}%>
        </div>

        <div id="eventlist">
        <% if (list["event"] !== undefined) { 
            for (var i=0, len=list["event"].length; i<len; i++) {%>
                <div class="hbox margin-top" type="event">
                    <div class="hbox label">
                        <div class="label-text"><%= list["event"][i]["label"]%></div>
                        <div class="arrow"></div>
                    </div>
                    <div class="edit" data_id='<%= list["event"][i]["dataid"]%>'>
                        <input type="text" class="input_cxcalendar" value='<%= list["event"][i]["date"]%>' placeholder="{{contact_edit_placeholder_date}}" readonly/>
                    </div>
                    <% if (i==0) { %>
                        <div class="additem"></div>
                    <%} else { %>
                        <div class="removeitem"></div>
                    <%} %>
                </div>
            <%}
        } else {%>


            <div class="hbox margin-top" type="event">
                <div class="hbox label">
                    <div class="label-text">{{contact_edit_birthday_label}}</div>
                    <div class="arrow"></div>
                </div>
                <div class="edit" data_id="-1">
                    <input type="text" class="input_cxcalendar" placeholder="{{contact_edit_placeholder_date}}" readonly/>
                </div>
                <div class="additem"></div>
            </div>
        <%}%>
        </div>

        <div id="orglist">
        <% if (list["org"] !== undefined) { 
            for (var i=0, len=list["org"].length; i<len; i++) {%>
                <div class="hbox margin-top" type="org">
                    <div class="hbox label">
                        <div class="label-text"><%= list["org"][i]["label"]%></div>
                        <div class="arrow"></div>
                    </div>
                    <div class="edit" data_id='<%= list["org"][i]["dataid"]%>'>
                        <input type="text" value='<%= list["org"][i]["company"]%>' placeholder="{{contact_edit_placeholder_company}}"/>
                        <input type="text" value='<%= list["org"][i]["position"]%>' placeholder="{{contact_edit_placeholder_job}}"/>
                    </div>
                    <% if (i==0) { %>
                        <div class="additem"></div>
                    <%} else { %>
                        <div class="removeitem"></div>
                    <%} %>
                </div>
            <%}
        } else {%>
            <div class="hbox margin-top" type="org">
                <div class="hbox label">
                    <div class="label-text">{{contact_edit_company_label}}</div>
                    <div class="arrow"></div>
                </div>
                <div class="vbox edit" data_id="-1">
                    <input type="text" placeholder="{{contact_edit_placeholder_company}}"/>
                    <input type="text" placeholder="{{contact_edit_placeholder_job}}"/>
                </div>
                <div class="additem"></div>
            </div>
        <%}%>
        </div>

        <div id="addrlist">
        <% if (list["addr"] !== undefined) { 
            for (var i=0, len=list["addr"].length; i<len; i++) {%>
                <div class="hbox margin-top" type="addr">
                    <div class="hbox label">
                        <div class="label-text"><%= list["addr"][i]["label"]%></div>
                        <div class="arrow"></div>
                    </div>
                    <div class="edit" data_id='<%= list["addr"][i]["dataid"]%>'>
                        <input type="text" value='<%= list["addr"][i]["state"]%>' placeholder="{{contact_edit_placeholder_country}}"/>
                        <input type="text" value='<%= list["addr"][i]["city"]%>' placeholder="{{contact_edit_placeholder_city}}"/>
                        <input type="text" value='<%= list["addr"][i]["street"]%>' placeholder="{{contact_edit_placeholder_street}}"/>
                        <input type="text" value='<%= list["addr"][i]["zipcode"]%>' placeholder="{{contact_edit_placeholder_post}}"/>
                    </div>
                    <% if (i==0) { %>
                        <div class="additem"></div>
                    <%} else { %>
                        <div class="removeitem"></div>
                    <%} %>
                </div>
            <%}
        } else {%>
            <div class="hbox margin-top" type="addr">
                <div class="hbox label">
                    <div class="label-text">{{contact_edit_home_label}}</div>
                    <div class="arrow"></div>
                </div>
                <div class="vbox edit" data_id="-1">
                    <input type="text" placeholder="{{contact_edit_placeholder_country}}"/>
                    <input type="text" placeholder="{{contact_edit_placeholder_city}}"/>
                    <input type="text" placeholder="{{contact_edit_placeholder_street}}"/>
                    <input type="text" placeholder="{{contact_edit_placeholder_post}}"/>
                </div>
                <div class="additem"></div>
            </div>
        <%}%>
        </div>
        
        <div id="weblist">
        <% if (list["web"] !== undefined) { 
            for (var i=0, len=list["web"].length; i<len; i++) {%>
                <div class="hbox margin-top" type="web">
                    <div class="hbox title">
                        <div class="title-text">{{contact_edit_web_label}}</div>
                    </div>
                    <div class="edit" data_id='<%= list["web"][i]["dataid"]%>'>
                        <input type="text" value='<%= list["web"][i]["web"]%>' placeholder="{{contact_edit_placeholder_web}}"/>
                    </div>
                    <div class="additem"></div>
                </div>
            <%}
        } else {%>
            <div class="hbox margin-top" type="web">
                <div class="hbox title">
                    <div class="title-text">{{contact_edit_web_label2}}</div>
                </div>
                <div class="edit" data_id="-1">
                    <input type="text" placeholder="{{contact_edit_placeholder_web}}"/>
                </div>
                <div class="additem"></div>
            </div>
        <%}%>
        </div>
        
        <div id="group">
            <div class="hbox margin-top">
                <div class="hbox title">
                    <div class="title-text">{{contact_edit_group_label}}</div>
                </div>
                <div class="edit hbox">
                <% if (list["groupname"] !== undefined) { %>
                    <div class="text"><%= list["groupname"]%></div>
                <% } else { %>
                    <div class="text">{{contact_edit_no_slected_label}}</div>
                <% } %>
                    <div class="arrow"></div>
                </div>
            </div>
        </div>
        <div id="ring">
            <div class="hbox margin-top">
                <div class="hbox title">
                    <div class="title-text">{{contact_edit_ring_label}}</div>
                </div>
                <div class="edit hbox">
                <% if (list["_ring"] !== undefined) { %>
                    <div class="text"><%= list["_ring"]%></div>
                <% } else { %>
                    <div class="text">{{contact_edit_deafult_ring_label}}</div>
                <% } %>
                    <div class="arrow"></div>
                </div>
            </div>
        </div>
        <div id="nickname">
            <div class="hbox margin-top">
                <div class="hbox title">
                    <div class="title-text">{{contact_edit_nickname_label}}</div>
                </div>
                <% if (list["nickname"] !== undefined) { %>
                    <div class="edit" data_id='<%= list["nickname"]["dataid"]%>'>
                        <input type="text" value='<%= list["nickname"]["nickname"]%>' placeholder="{{contact_edit_placeholder_nickname}}"/>
                    </div>
                <%} else {%>
                    <div class="edit" data_id="-1">
                        <input type="text" placeholder="{{contact_edit_placeholder_nickname}}"/>
                    </div>
                <%}%>
            </div>
        </div>
        <div id="note">
            <div class="hbox margin-top">
                <div class="hbox title">
                    <div class="title-text">{{contact_edit_note_label}}</div>
                </div>
                <% if (list["note"] !== undefined) { %>
                    <div class="edit" data_id='<%= list["note"]["dataid"]%>'>
                        <textarea type="text" placeholder="{{contact_edit_placeholder_note}}"><%= list["note"]["note"]%></textarea>
                    </div>
                <%} else {%>
                    <div class="edit" data_id="-1">
                        <textarea type="text" placeholder="{{contact_edit_placeholder_note_edit}}"></textarea>
                    </div>
                <%}%>
                
            </div>
        </div>
    </div>
</script>
<script id="grouplist_template" type="text/html">
    <% for (var i=0; i<list.length; i++) { %>
        <li id='<%= list[i]["id"]%>'>
            <% if (list[i]["default"] === true) {%>
                <input class="checker" type="checkbox" checked default="1" style="margin:4px"/>
            <% } else { %>
                <input class="checker" type="checkbox" default="0" style="margin:4px"/>
            <% } %>
            <div class="li"><%= list[i]["name"]%></div>
        </li>
    <% } %>
</script>

<script id="ringlist_template" type="text/html">
    <% for (var i=0; i<list.length; i++) { %>
        <li id='<%= list[i]["id"]%>'>
            <div class="li"><%= list[i]["name"]%></div>
        </li>
    <% } %>
</script>
<style>
    .w-ui-window {
        border: 1px #aaa solid;
        border-radius: 5px;
        /*box-shadow: 0 2px 10px rgba(0,0,0,0.5);*/
        cursor: default;
        left: 0;
        width:400px;
        height:560px;
        position: absolute;
        top: 0;
        -webkit-transition: opacity .15s linear;
    }
    .w-ui-window-header {
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.05, #f9f9f9), color-stop(1, #ededed));
        border-radius: 5px 5px 0 0;
        border-bottom: 1px #d6d6d6 solid;
        box-shadow: 0 1px 0 #fff inset;
        padding: 7px 8px 7px 10px;
        height: 18px;
        -webkit-box-align: center;
    }
    .w-ui-window-body {
        min-height: 2em;
        padding: 15px 10px 10px;
        height: 466px;
        -webkit-box-flex: 1;
        background: #f6f7f7;

    }
    .w-window-mask-bg {
        background: #fff;
        display: none;
        left: 0;
        top:35px;
        height: 100%;
        opacity: 0;
        position: absolute;
        margin-bottom: 50px;
        width: 100%;
    }
    .w-ui-window-footer {
        border-radius: 0 0 5px 5px;
        padding: 0 15px 15px;
        height: 20px;
        border-top: 1px solid #aaa;
        background: #efefef;
        position: relative;
    }

    .hbox, .hendbox, .vbox {
        display: -webkit-box;
        -webkit-box-align: stretch;
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: start;
    }
    .hbox {
        -webkit-box-orient: horizontal;
    }
	.hendbox {
        -webkit-box-orient: horizontal;
		-webkit-box-pack: end;
    }
    .vbox {
        -webkit-box-orient: vertical;
    }

    input[type="text"] { padding: 0 5px; }
    input[type="text"], textarea {
        border: 1px #cacaca solid;
        box-shadow: 0 1px 0 #fff,0 1px 3px rgba(0,0,0,0.05) inset;
        height: 30px;
        resize: none;
        -webkit-transition: border linear .2s, box-shadow linear .2s, height .2s linear, min-height .2s linear;
        width: 230px;
    }
    textarea { width: 214px; height: 60px; }
    input[type="text"]:focus, textarea:focus {
        outline: none;
        -webkit-box-shadow: 0px 0px 3px #0B7DC4;
        border: 1px solid #0B7DC4;
    }
    /*编辑联系人部分*/
    #base { height: 70px; }
    #editHead, #editHeadBtn {
        position:absolute;
        width:60px;
        height:60px;
        background:transparent url(images/largehead.png) center center no-repeat;

        margin: 0px 0px 0px 13px;
        /*border: 1px solid #f00;*/
    }
    #editHead img {
        position:absolute;
        left: 3px;
        top: 3px;
        width:54px;
        height:54px;
        background-color:#FFF;
    }
    #editHeadBtn {
        display:none;
        color:#FFF;
        height:50px;
        text-align:center;
        padding-top:10px;
        line-height:20px;
        background:transparent url(images/headEdit_bg.png) 0 0 repeat;
        z-index:1;
    }
    #editHeadBtn div {
        cursor:pointer;
        height:20px;
        line-height: 20px;
        width:60px;
        text-align:center;
    }
    #editHeadEdit:hover,#editHeadDel:hover,#editHeadAdd:hover{text-decoration: underline;}
    #editName {
        position:absolute;
        padding: 0px 5px 0px 5px;
        margin-left: 119px;
        margin-top: 18px;
        width: 208px;
        /*border: 1px solid #f00;*/
    }
    .star {
        position:absolute;
        width:25px;
        height:25px;
        margin-left: 85px;
        margin-top: 21px;
        background:transparent url(images/addFavor_bg.png) center center no-repeat;
        cursor: pointer;
    }
    .starred
    {
        background:transparent url(images/addFavor_on_bg.png) center center no-repeat;
    }
    #editDetail {
        margin-top: 8px;
        height: 380px;
        overflow-x:hidden;
        overflow-y:hidden;
    }

    #editDetail input {
        height: 26px;
        width: 208px;
        margin-bottom: 7px;
    }

    #editDetail:hover {
        overflow-y:auto;
    }
    .margin-top { 
        /*margin-top: 7px; */
    }

    .phonelist, .emaillist{
        margin-bottom: 7px;
    }
    #phonelist { margin-top: 2px;}

    .additem {
        height:26px;
        width:18px;
        background:transparent url(images/editAdd_bg.png) 0 center no-repeat;
        cursor:pointer;
        z-index:0;
        margin-left: 5px;
    }
    .additem:hover { background-position-x:-18px; }
    .removeitem {
        height:26px;
        width:18px;
        background:transparent url(images/editDel_bg.png) 0 center no-repeat;
        cursor:pointer;
        z-index:0;
        margin-left: 5px;
    }
    .removeitem:hover { background-position-x:-18px; }
    .arrow {
        border-color: #9d9d9d transparent transparent transparent;
        border-style: solid;
        border-width: 6px 4px 0;
        -webkit-box-align: center;
        margin-top: 10px;
    }
    .label {
        border: 1px #999 solid;
        border-radius: 3px;
        width: 100px;
        margin: 0px 10px 0px 7px;
        height: 26px;
    }
    .title {
        width: 100px;
        border: 1px #f6f7f7 solid;
        margin: 0px 10px 0px 7px;
        height: 26px;
    }
    .label-text{
        padding: 5px 10px;
        width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: break-word;
        vertical-align: middle;
    }
    .title-text{
        padding: 5px 10px;
        width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: break-word;
        vertical-align: middle;
    }
    .label:hover, #group .edit:hover, #ring .edit:hover {
        color: #0B7DC4;
        border: 1px #0B7DC4 solid;
        -webkit-box-shadow: 0px 0px 3px #0B7DC4;
    }
    .label:hover .arrow, #group .edit:hover .arrow, #ring .edit:hover .arrow {
        border-color: #0B7DC4 transparent transparent transparent;
    }
    .edit {
        width: 220px;
    }
    .text {
        padding: 5px 10px;
        width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: break-word;
        vertical-align: middle;
    }
    #group .edit, #ring .edit {
        width: 218px;
        border: 1px #cacaca solid;
        background-color: #fff;
        margin-bottom: 7px;
        height: 26px;
        -webkit-transition: border linear .2s, box-shadow linear .2s, height .2s linear, min-height .2s linear;
        box-shadow: 0 1px 0 #fff,0 1px 3px rgba(0,0,0,0.05) inset;
    }

    .button{
        border-color:#999;
        cursor: pointer;
        outline: none;
        display:inline-block;
        font-size:12px;
        font-weight:bold;
        text-align:center;
        line-height:2.3;
        margin:0.25em 0 0em 1em;
        padding:0 1em;
        -webkit-box-shadow:1px 1px 0 rgba(255,255,255,.5) inset, -1px -1px 0 rgba(255,255,255,.5) inset;
        -webkit-transition: background .185s linear;
    }
    .button {
        border-radius:3px;
        border-width:1px;
        border-style:solid;
    }

    .button:not(:disabled):active { line-height:2.2; }
    .button:not(:disabled):hover, .button:not(:disabled):focus { border-color:#666; }
    #save:not(:disabled):active {
        -webkit-box-shadow:
            0 .33em 2em rgba(27,104,140,.67) inset,
            1px 1px 0 rgba(255,255,255,.25) inset, 
            -1px -1px 0 rgba(255,255,255,.25) inset;
    }
    #cancel:not(:disabled):active {
        -webkit-box-shadow:
            0 .33em 2em rgba(0,0,0,.67) inset,
            1px 1px 0 rgba(255,255,255,.25) inset, 
            -1px -1px 0 rgba(255,255,255,.25) inset;
    }

    #save {
        background-image: -webkit-linear-gradient(-90deg, #32B9ED 0%, #2389CD 100%);
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    }
    #cancel {
        background-image: -webkit-linear-gradient(-90deg, #f3f3f3 0%, #e9e9e9 100%);
        color: rgba(0,0,0,0.9);
        text-shadow: 0 1px 0 #fff;
    }

    #save[disabled],#cancel[disabled]{
    	background-image: -webkit-linear-gradient(-90deg, #f3f3f3 0%, #e9e9e9 100%);
    	color: #ccc;
    }

    .saveSuccess{
        font-weight:bold;
        text-align:center;
        line-height:2.6em;
        display: none;
        position: absolute;
        left: 15px;
    }
	.failMsg{
		color:#f00;
        text-align:center;
        line-height:2.6em;
        display: none;
        position: absolute;
        left: 15px;
    }


    .cutHead_middle{
    float:left;
    width:100%;
  }
  .cutHead_left
  {
    float:left;
    width:60px;
    height:250px;
    display:inline;
    text-align:center;
  }
  .cutHead_right
  {
    float:left;
    width:250px;
    height:250px;
    display:inline;
    background:transparent url(images/cutHeadImage/cutHead_bg.png) 0 0 no-repeat;
  }
  .previewPrompt
  {
    float:left;
    height:30px;
    line-height:30px;
    margin:0 0;
    width:100%;
    text-align:left;
  }
  .preview
  {
    float:left;
    width:54px;
    height:54px;
    padding-top:2px;
    padding-left:2px;
    display:inline;
    background:transparent url(images/cutView_bg.png) 0 0 no-repeat;
  }
  .previewImg
  {
    width:50px;
    height:50px;
    overflow:hidden;
  }
  .correct
  { 
	color: #000;
  }
  .wrong
  {
	color:#f00;
	background:#ffffbf;
  }

</style>
<script type="text/javascript">


    var phoneLabellist = {{phoneLabellist_lang}};
    var emailLabellist = {{emailLabellist_lang}};
    var addrLabellist = {{addrLabellist_lang}};
    var orgLabellist = {{orgLabellist_lang}};
    var IMLabellist = {{IMLabellist_lang}};
    var eventLabellist = {{eventLabellist_lang}};
	var labelCustom = {
		"phonelist":"{{contact_edit_custom_lang}}",
		"emaillist":"{{contact_edit_custom_lang}}",
		"imlist":"{{contact_edit_custom_lang}}",
		"eventlist":"{{contact_edit_custom_lang}}",
		"orglist":"{{contact_edit_custom_lang}}",
		"addrlist":"{{contact_edit_custom_lang}}",
	};
	var currentLabel = "";
    var phoneitem = '<div class="hbox margin-top" type="phone">\
                        <div class="hbox label">\
                            <div class="label-text">{{contact_edit_phoneitem_phone}}</div>\
                            <div class="arrow"></div>\
                        </div>\
                        <div class="edit" data_id="-1">\
                            <input type="text" placeholder="{{contact_edit_phoneitem_placeholder_phone}}"/>\
                        </div>\
                        <div class="removeitem"></div>\
                    </div>';
    var emailitem = '<div class="hbox margin-top" type="email">\
                        <div class="hbox label">\
                            <div class="label-text">{{contact_edit_person}}</div>\
                            <div class="arrow"></div>\
                        </div>\
                        <div class="edit" data_id="-1">\
                            <input type="text" placeholder="{{contact_edit_phoneitem_placeholder_email}}"/>\
                        </div>\
                        <div class="removeitem"></div>\
                    </div>';
    var addritem = '<div class="hbox margin-top" type="addr">\
                        <div class="hbox label">\
                            <div class="label-text">{{contact_edit_phoneitem_home}}</div>\
                            <div class="arrow"></div>\
                        </div>\
                        <div class="vbox edit" data_id="-1">\
                            <input type="text" placeholder= "{{contact_edit_adritem_country}}"/>\
                            <input type="text" placeholder="{{contact_eidt_adritem_city}}"/>\
                            <input type="text" placeholder= "{{contact_edit_adritem_street}}"/>\
                            <input type="text" placeholder="{{contact_edit_adritem_post}}"/>\
                        </div>\
                        <div class="removeitem"></div>\
                    </div>';
    var orgitem = '<div class="hbox margin-top" type="org">\
                        <div class="hbox label">\
                            <div class="label-text">{{contact_edit_orgitem_company}}</div>\
                            <div class="arrow"></div>\
                        </div>\
                        <div class="vbox edit" data_id="-1">\
                            <input type="text" placeholder="{{contact_edit_orgitem_placeholder_company}}"/>\
                            <input type="text" placeholder="{{contact_edit_orgitem_placeholder_job}}"/>\
                        </div>\
                        <div class="removeitem"></div>\
                    </div>';
    var imitem = '<div class="hbox margin-top" type="im">\
                        <div class="hbox label">\
                            <div class="label-text">{{contact_edit_im_default_label}}</div>\
                            <div class="arrow"></div>\
                        </div>\
                        <div class="edit" data_id="-1">\
                            <input type="text" placeholder="{{contact_edit_imitem_im}}"/>\
                        </div>\
                        <div class="removeitem"></div>\
                    </div>';
    var eventitem = '<div class="hbox margin-top" type="event">\
                        <div class="hbox label">\
                            <div class="label-text">{{contact_edit_eventitem_birthday}}</div>\
                            <div class="arrow"></div>\
                        </div>\
                        <div class="edit" data_id="-1">\
                            <input type="text" class="input_cxcalendar" placeholder="{{contact_edit_eventitem_date}}" readonly/>\
                        </div>\
                        <div class="removeitem"></div>\
                    </div>';
    var webitem = '<div class="hbox margin-top" type="web">\
                        <div class="hbox title">\
                            <div class="title-text">{{contact_edit_webitem_web}}</div>\
                        </div>\
                        <div class="edit" data_id="-1">\
                            <input type="text" placeholder="{{contact_edit_webitem_placeholder}}"/>\
                        </div>\
                        <div class="removeitem"></div>\
                    </div>';

/*    var jcrop_api = "";
    var boundx, boundy;
    var gImg = new Image();
*/         
	var firstClick;       
    $(document).ready(function () {

    	var url = window.location.search.substring(1);
    	var json;
    	try{
    		json = JSON.parse(decodeURIComponent(url));

    	} catch (e) {
    		console.error(e);
    		return;
    	}

    	console.log(json)

        if (json._id != -1) {
            try {
                window.getContactEditInfo(json._id, function(success, info){
                    console.log(JSON.stringify(info));
                    var html = template('edit_template', {list: info});
                    $('#body').html(html);
                });
            } catch (e){};
        } else {

            var html = template('edit_template', {list: json});
            $('#body').html(html);
        };
 

        try {
            window.getRingGroupInfo(json._id, function(ring, group){
                console.log(ring);
                console.log(group);

                var ringhtml = template('ringlist_template', {list: ring});
                $('#ringlist').html(ringhtml);
                var grouphtml = template('grouplist_template', {list: group});
                $('#grouplist').html(grouphtml);
            });
        } catch (e) { console.error(e) ;}
		$('body').on('keyup',function(evt){
			hideCalendar();
			$('#grouplist').hide();
			$('#ringlist').hide();
		});
		$(".w-ui-window-body,.w-ui-window-footer").on("contextmenu",function(){
			return false;
		});
		$(".contextmenu .editgrouplistmenu").on("contextmenu",function(){
			return false;
		});
        $('#editDetail').on('click', '.label', function() {
            $('#current').attr('id', '');
            var rect = this.getBoundingClientRect();
            
            var type = $(this).parent().attr('type');
            var labellist = [];
			currentLabel = $(this).parent().parent().attr('id')
            if (type == "phone") {
                labellist = phoneLabellist;
            } else if (type == "email") {
                labellist = emailLabellist;
            } else if (type == "addr") {
                labellist = addrLabellist;
            } else if (type == "org") {
                labellist = orgLabellist;
            } else if (type == "im") {
                labellist = IMLabellist;
            } else if (type == "event") {
                labellist = eventLabellist;
            };
            console.log(labellist);
            var html = "";
            for (var i=0, len=labellist.length; i<len; i++) {
                html += '<li><div class="li">' + labellist[i] +'</div></li>'
            }
            console.log(html)
            $('#labellist').html(html);
            var x = rect.left;
            var y = rect.top;
            var bodyWidth = document.documentElement.clientWidth;
            var bodyHeight = document.documentElement.clientHeight;
            var h = $('#labellist').height();
            if (bodyHeight - y < h) {
                y = y - h - 26;
            } else {
                y = y + rect.height-12;
            }
            
            $('#labellist').css({"left":x,"top":y}).show();
            $(this).attr('id', 'current');

        }).on('click', '.additem', function() {
            var type = $(this).parent().attr('type');
            var html = "";
            if (type == "phone") {
                html = phoneitem;
            } else if (type == "email") {
                html = emailitem;
            } else if (type == "addr") {
                html = addritem;
            } else if (type == "org") {
                html = orgitem;
            } else if (type == "im") {
                html = imitem;
            } else if (type == "event") {
                html = eventitem;
            } else if (type == "web") {
                html = webitem;
            };

            $(this).parent().parent().append(html);

        }).on('click', '.removeitem', function() {
        	if (parseInt($(this).prev().attr('data_id')) == -1) {
        		$(this).parent().remove();
        	} else {
        		$(this).parent().css('display', 'none');
        	}
        });

        $('body').on('click', '#labellist>li', function(event) {
            var cmid = this.id;
            var obj = $(this);
            if (obj.attr("disabled") || obj.find('.right').length!=0 || obj.hasClass('hr')) {
                return;
            }
            var text = $(this).find('.li:first').text();
            if (text == "{{contact_edit_custom_lang}}") {
				art.dialog({
					title:"{{contact_edit_custom_title_lang}}",
					okValue:"{{contact_edit_custom_ok_lang}}",
					ok:function(){
						var txt = $("#cus_label").val();
                        txt = txt.replace(/(^\s*)|(\s*$)/g,"");
						if(txt.length!=0){
							$('#current').find('.label-text:first').text(txt);
							$('#current').attr('id', '');
							labelCustom[currentLabel] = txt;
						}
					},
					cancelValue:"{{contact_edit_custom_cancel_lang}}",
					cancel:function(){
						$('#current').attr('id', '');
					},
					content:'<div style="margin-bottom:5px;font-size:12px">{{contact_edit_custom_item_label_name}}</div>\
							<div><input id="cus_label"></input></div>',
					initialize:function(){
						$(".d-outer").on("contextmenu",function(){
							return false;
						});
						$("#cus_label").focus();
					},
					lock:true,
					capcity:0.7,
					dblclickNotHide:true,
				});
            } else {
                $('#current').find('.label-text:first').text(text);
                $('#current').attr('id', '');
            }
            
            $('#labellist').hide();

            event.stopPropagation();
        }).on('mousedown', '#labellist', function(event){
            event.stopPropagation();
        }).mousedown(function () {
            $('#labellist').hide();
        }).on('contextmenu','#labellist',function(evt){
			return false;
		});

        $('body').on('click', '#grouplist>li', function(event) {
            if ($(this).find('input:checked').length>0) {
                $(this).find('input').prop('checked', false);
            } else {
                $(this).find('input').prop('checked', true);
            };
            changeGroup();
        }).on('click', '#grouplist input', function(event) {
            changeGroup();
            event.stopPropagation();
        }).on('mousedown', '#grouplist', function(event) {
            event.stopPropagation();
        }).mousedown(function () {
            $('#grouplist').hide();
        }).on("contextmenu",'#grouplist',function(evt){
			return false;
		});

        $('body').on('click', '#ringlist>li', function(event) {
            var ringid = $(this).attr('id');
            var name = $(this).find('.li:first').text();

            var ringobj = $('#ring').find('.text:first');
            ringobj.text(name);
            ringobj.attr('ringid', ringid);

            $('#ringlist').hide();
        }).on('mousedown', '#ringlist', function(event) {
            event.stopPropagation();
        }).mousedown(function () {
            $('#ringlist').hide();
        }).on("contextmenu",'#ringlist',function(evt){
			return false;
		});

        $('#base').on('click', '#editStar', function() {
			hideCalendar();
            if ($(this).hasClass('starred')) {
                $(this).removeClass('starred');
            } else {
                $(this).addClass("starred");              
            }
        });

        $('#group').on('click', '.edit', function(){
			hideCalendar();
            //$('#labellist').html(html);
            var rect = this.getBoundingClientRect();
            var x = rect.left;
            var y = rect.top;
            console.log("x=" + x + ",y=" + y + ",height=" + rect.height);
            var bodyWidth = document.documentElement.clientWidth;
            var bodyHeight = document.documentElement.clientHeight;
            var h = $('#grouplist').height();
            console.log(h);
            if (bodyHeight - y < h) {
                //y = y - h - 26;
                 y = y - h - 25;
            } else {
                 y = y + rect.height-12;
            }
            console.log($('.w-ui-window').height() + '--' + $('.w-ui-window').width());
            console.log(bodyHeight + "--" + bodyWidth);

            $('#grouplist').css({"left":x,"top":y}).show();
        });
        $('#ring').on('click', '.edit', function(){
			hideCalendar();
            var rect = this.getBoundingClientRect();
            var x = rect.left;
            var y = rect.top;
            var bodyWidth = document.documentElement.clientWidth;
            var bodyHeight = document.documentElement.clientHeight;
            var h = $('#ringlist').height();
            if (bodyHeight - y < h) {
                y = y - h - 25;
            } else {
                y = y + rect.height-12;
            }
            
            $('#ringlist').css({"left":x,"top":y}).show();
        });
        $('#cancel').click(function (){
            window.closeEdit();
        });
        $('#save').click(function (){
			var isOk = true;
			var errorNum = $("input[class='wrong']").length;
			if(errorNum!=0){
				$(".failMsg").text("{{contact_edit_failMsg}}");
				isOk = false;
			}
			var contactDataJson = getContact();
			if(!verifyContact(contactDataJson)){
				$(".failMsg").text("{{contact_edit_failMsg_whitespace}}");
				isOk = false;
			}
			if(!isOk){
				$(".failMsg").show();
				return ;
			}
			$(".failMsg").hide();
			var contactData=JSON.stringify(contactDataJson);
        	$('.button').attr("disabled", "disabled");
            try {
                $.ajax({
                    url : "http://contact/saveContact",
                    type : "POST",
                    data : contactData,
                    cache : false,
                    success : function(res){
                    	console.log(res);
						if(res!="success"){
							$(".failMsg").text("{{contact_edit_failMsg_SaveError}}");
							$(".failMsg").show();
							$(".button").removeAttr("disabled")
							return;
						}
                    	$('.saveSuccess').show();
                    	setTimeout(function(){
                    		window.closeEdit();
                    	}, 500);
                    }
                })
            } catch (e) {
                console.log("saveContact failed.\n" + e);
            }
        });
        /*$('.eventinput').datePicker({
            clickInput:true,
            verticalOffset:25,
            createButton:false,
            startDate:'1902-01-01',
            endDate:'2037-12-31'
        });*/
        $('.w-ui-window-header').on('mousedown', function(event){
            window.editNcHit(event.clientX, event.clientY);
        });
        $('#body').on('mouseenter', '#editHead', function(){
			hideCalendar();
            if ($(this).find('img').length == 0) {
                $('#editHeadBtn').empty().append('<div id="editHeadAdd">{{editHeadAdd_lang}}</div>');
            } else {
                $('#editHeadBtn').empty().append('<div id="editHeadEdit">{{editHeadEdit_lang}}</div><div id="editHeadDel">{{editHeadDel_lang}}</div>');
            }
            $('#editHeadBtn').show();
        }).on('mouseleave', '#editHeadBtn', function(){
            $(this).hide();
        }).on('click', '#editHeadDel', function() {
        	$('#editHead').attr('data-modify', true);
            $('#editHead').find('img').remove();
            $('#editHeadBtn').empty().append('<div id="editHeadAdd">{{editHeadAdd_lang}}</div>');
        }).on('click','#editHeadEdit,#editHeadAdd', function() {
            try {
                $.ajax({
                    url : "http://contact/getImage",
                    type : "PUT",
                    data : "",
                    cache : false,
                    success : function(msg){
                        if (msg == '') {
                            return;
                        } else if (msg == 'error') {
                            art.alert('{{contact_edit_invalid_image_lang}}');
                            return;
                        };
                        editImage(msg);
                    }
                })
            } catch (e) {
                console.log(_url + "failed.\n" + e);
            }
        });


        $("#eventlist").on('click', "input", function(){
			$(".cxcalendar").hide();
			if($(this).data('cxCalendar') === undefined){
				$(this).data('cxCalendar', $(this).cxCalendar());
				firstClick = true;
			}
			$(this).data('firstClick',firstClick);
        	if ($(this).data('firstClick') == true) {
				var rect = this.getBoundingClientRect();
				var x = rect.left;
				var y = rect.top;
				var bodyWidth = document.documentElement.clientWidth;
				var bodyHeight = document.documentElement.clientHeight;
				var h = $('.cxcalendar').height();
				if (y < h) {
					y = y + 25;
				} else {
					y = y -h;
				}
				$('.cxcalendar').css({"left":x,"top":y});
				$(this).data("cxCalendar").show();
				firstClick = false;
        	}
			else{
				$(this).data('cxCalendar').hide();
				firstClick = true;
			}
        }).on('keyup',"input",function(evt){
			evt = evt || window.event; 
			var keycode = evt.which ? evt.which : evt.keyCode; 
			if(keycode==8){//backspace
				$(this).data('cxCalendar').hide();
				$(this).val("");
				firstClick = true;
			}
		}).on('blur',"input",function(){
			firstClick = true;
		});
		$("body").on('mousewheel',function(){
			hideCalendar();
		});
		$("#editName,#note,#nickname,#addrlist,#orglist,#imlist").on('click',function(){
			hideCalendar();
		});
		$("#phonelist").on('click',function(){
			hideCalendar();
		}).on('blur','input',function(){
			lostFoucs($(this));
		}).on('keyup','input',function(){
			getFoucs($(this));
		}).on('mousedown','input',function(){
			getFoucs($(this));
		});
        
		$("#emaillist").on('click',function(){
			hideCalendar();
		}).on('keyup','input',function(){
			getFoucs($(this));
		}).on('blur','input',function(){
			lostFoucs($(this));
		}).on('mousedown','input',function(){
			getFoucs($(this));
		});
        /*$("#editHeadEdit,#editHeadDel,#editHeadAdd,#editHeadBtn").on('mouseenter', function() {
            $(this).css("text-decoration","underline");

        }).on('mouseleave', function () {
            $(this).css("text-decoration","none");
        })*/
    });
	function hideCalendar(){
		$(".cxcalendar").hide();
		firstClick = true;
	}
    function editImage(path) {
        var cropper;

        var boundx, boundy;
        art.dialog({
            id: 'editHeadDlg',
            title : '{{contact_edit_image_edit_lang}}',
            content : '<div class="cutHead_middle">\
                          <div class="cutHead_left">\
                              <div class="preview">\
                                  <div style="width:50px;height:50px;overflow:hidden;">\
                                    <canvas id="preview" width="50" height="50" ></canvas>\
                                  </div>\
                              </div>\
                              <div class="previewPrompt">{{contact_edit_photo_preview}}</div>\
                          </div>\
                          <div class="cutHead_right">\
                            <canvas id="cropper"></canvas>\
                          </div>\
                        </div>',
            initialize: function() {
                $('.w-window-mask-bg').css('display', 'block');
                cropper = new ImageCropper(250, 250, 150, 150);
				cropper.setCanvas("cropper");
				cropper.addPreview("preview");
				cropper.loadImage(path);
				$(".d-border").on("contextmenu",function(){
					return false;
				});
				$(".d-close").hide();
            },
            beforeunload: function(){
                $('.w-window-mask-bg').css('display', 'none');
            },
            button: [
            {
                value: '{{contact_edit_reselect_image_lang}}',
                callback: function () {
					try {
						$.ajax({
								url : "http://contact/getImage",
								type : "PUT",
								data : "",
								cache : false,
								success : function(msg){
								if (msg == '') {
									return;
								} else if (msg == 'error') {
								art.alert('{{contact_edit_invalid_image_lang}}');
								return;
							};
                        editImage(msg);
						}
					})
					} catch (e) {
						console.log(_url + "failed.\n" + e);
					}
                    //return false;
                }
            },
            {
                value: '{{contact_edit_sure}}',
                callback: function () {
                	var src = cropper.getCroppedImageData();
                	$('#editHead img').remove();
                	var img = $(document.createElement('img')); //Equivalent: 
					img.attr('src', src);
					img.appendTo('#editHead');
					$('#editHead').attr('data-modify', true);
                    return true;
                },
                focus: true
            },
            {
                value:'{{contact_edit_cancel}}' ,
                callback: function () {
                    return true;
                }
            }],
            width : 360,
            focus : true,
			lock:true,
			dblclickNotHide : true,
			capcity:0.7
        });
    }
    function updatePreview(a)
    {
        if (parseInt(a.w) > 0)
        {
          var rx = 50 / a.w;
          var ry = 50 / a.h;

          $('#preview').css({
            width: Math.round(rx * boundx) + 'px',
            height: Math.round(ry * boundy) + 'px',
            marginLeft: '-' + Math.round(rx * a.x) + 'px',
            marginTop: '-' + Math.round(ry * a.y) + 'px'
          });
        }
    };

    function changeGroup() {
        var checked = $('#grouplist').find('input:checked');
        var name = '';

        if (checked.length==0) {
            name = '{{contact_edit_group_noslected}}';
        } else {
            for (var i=0, len=checked.length; i<len; i++) {
                name = (name==''?'':(name+' , ')) + $(checked[i]).next().text();
            };
        };
        var groupobj = $('#group').find('.text:first');
        groupobj.text(name);
    }

    function getContact() {
        var data = {};  

        data['id'] = parseInt($('#base').attr('contactid'), 10);
        if ($('#editStar').hasClass('starred')){
            data['starred'] = true;
        } else {
            data['starred'] = false;
        }
        data["name"] = $('#editName').val();

        var photoModify = $('#editHead').attr('data-modify');
        if(photoModify === "true"){
        	var img = $('#editHead img').attr('src');
        	if(img === undefined) img = '';
        	data["photo"] = img;
        }
        
        var addid='', removeid='';
        var grouplist = $('#grouplist').find('input');
        for (var i=0, len=grouplist.length; i<len; i++) {
            var defaul = $(grouplist[i]).attr('default');
            var checked = $(grouplist[i]).prop('checked');
            var id = parseInt($(grouplist[i]).parent().attr('id'), 10);
            if (defaul=='1' && checked==false) {
                removeid = (removeid==''?'':(removeid+'*')) + id;
            } else if (defaul=='0' && checked==true) {
                addid = (addid==''?'':(addid+'*')) + id;
            };
            console.log(defaul + '$$' + checked + '$$' + id);
        };
        data["group_add"] = addid;
        data["group_remove"] = removeid;

        data["ring"] = $('#ring').find('.text:first').attr('ringid');

        //phone
        var phones = [];
        $('#phonelist').children().each(function(){
            var phone = {};
            var th = $(this);
            var dataid = parseInt(th.find('.edit:first').attr('data_id'), 10);
            var value = th.find('input:first').val();
            if (th.is(':hidden')) {
                if (dataid != '-1') {
                    phone['dataid'] = dataid;
                    phone['del'] = true;
                    phones.push(phone);
                };
            } else {
                if (dataid != -1 && value == '') {
                    phone['dataid'] = dataid;
                    phone['del'] = true;
                    phones.push(phone);
                } else if (value != ''){
                    phone['dataid'] = dataid;
                    phone['label'] = th.find('.label-text:first').text();
                    phone['value'] = value;
                    phones.push(phone);
                }
            }
        });
        data["phone"] = phones;

        //email
        var emails = [];
        $('#emaillist').children().each(function(){
            console.log("email");
            var email = {};
            var th = $(this);
            var dataid = parseInt(th.find('.edit:first').attr('data_id'), 10);
            var value = th.find('input:first').val();
            if (th.is(':hidden')) {
                if (dataid != '-1') {
                    email['dataid'] = dataid;
                    email['del'] = true;
                    emails.push(email);
                };
            } else {
                console.log(dataid);
                console.log(value);
                if (dataid != -1 && value == '') {
                    email['dataid'] = dataid;
                    email['del'] = true;
                    emails.push(email);
                } else if (value != ''){
                    email['dataid'] = dataid;
                    email['label'] = th.find('.label-text:first').text();
                    email['value'] = value;
                    emails.push(email);
                }
            }
        });
        data["email"] = emails;

        //im
        var ims = [];
        $('#imlist').children().each(function(){
            var im = {};
            var th = $(this);
            var dataid = parseInt(th.find('.edit:first').attr('data_id'), 10);
            var value = th.find('input:first').val();
            if (th.is(':hidden')) {
                if (dataid != '-1') {
                    im['dataid'] = dataid;
                    im['del'] = true;
                    ims.push(im);
                };
            } else {
                if (dataid != -1 && value == '') {
                    im['dataid'] = dataid;
                    im['del'] = true;
                    ims.push(im);
                } else if (value != ''){
                    im['dataid'] = dataid;
                    im['label'] = th.find('.label-text:first').text();
                    im['value'] = value;
                    ims.push(im);
                }
            }
        });
        data["im"] = ims;

        //event
        var events = [];
        $('#eventlist').children().each(function(){
        	var th = $(this);
        	var value = th.find('input:first').val();
			var dataid = parseInt(th.find('.edit:first').attr('data_id'), 10);
            var even = {};

            if (th.is(':hidden')) {
                if (dataid != '-1') {
                    even['dataid'] = dataid;
                    even['del'] = true;
                    events.push(even);
                };
            } else {
                if (dataid != -1 && value == '') {
                    even['dataid'] = dataid;
                    even['del'] = true;
                    events.push(even);
                } else if (value != ''){
                    even['dataid'] = dataid;
                    even['label'] = th.find('.label-text:first').text();
                    even['value'] = value;
                    even['del'] = false;
                    events.push(even);
                }
            }
        });
        data["event"] = events;

        //org
        var orgs = [];
        $('#orglist').children().each(function(){
            var org = {};
            var th = $(this);
            var dataid = parseInt(th.find('.edit:first').attr('data_id'), 10);
            var value1 = th.find('input:first').val();
            var value2 = th.find('input:last').val();
            if (th.is(':hidden')) {
                if (dataid != '-1') {
                    org['dataid'] = dataid;
                    org['del'] = true;
                    orgs.push(org);
                };
            } else {
                if (dataid != -1 && value1 == '' && value2 == '') {
                    org['dataid'] = dataid;
                    org['del'] = true;
                    orgs.push(org);
                } else if (value1 != '' || value2 != ''){
                    org['dataid'] = dataid;
                    org['label'] = th.find('.label-text:first').text();
                    org['company'] = value1;
                    org['position'] = value2;
                    orgs.push(org);
                }
            }
        });
        data["org"] = orgs;

        //addr
        var addrs = [];
        $('#addrlist').children().each(function(){
            var addr = {};
            var th = $(this);
            var dataid = parseInt(th.find('.edit:first').attr('data_id'), 10);
            var value1 = th.find('input:first').val();
            var value2 = th.find('input:eq(1)').val();
            var value3 = th.find('input:eq(2)').val();
            var value4 = th.find('input:eq(3)').val();
            console.log(value1 + "++" + value2 + "++" + value3 + "++" + value4)
            if (th.is(':hidden')) {
                if (dataid != '-1') {
                    addr['dataid'] = dataid;
                    addr['del'] = true;
                    addrs.push(addr);
                };
            } else {
                if (dataid != -1 && value1 == '' && value2 == '' && value3 == '' && value4 == '') {
                    addr['dataid'] = dataid;
                    addr['del'] = true;
                    addrs.push(addr);
                } else if (value1 != '' || value2 != '' || value3 != '' || value4 != ''){
                    addr['dataid'] = dataid;
                    addr['label'] = th.find('.label-text:first').text();
                    addr['state'] = value1;
                    addr['city'] = value2;
                    addr['street'] = value3;
                    addr['zipcode'] = value4;
                    addrs.push(addr);
                }
            }
        });
        data["addr"] = addrs;

        //web
        var webs = [];
        $('#weblist').children().each(function(){
            var web = {};
            var th = $(this);
            var dataid = parseInt(th.find('.edit:first').attr('data_id'), 10);
            var value = th.find('input:first').val();
            if (th.is(':hidden')) {
                if (dataid != '-1') {
                    web['dataid'] = dataid;
                    web['del'] = true;
                    webs.push(web);
                };
            } else {
                if (dataid != -1 && value == '') {
                    web['dataid'] = dataid;
                    web['del'] = true;
                    webs.push(web);
                } else if (value != ''){
                    web['dataid'] = dataid;
                    web['value'] = value;
                    webs.push(web);
                }
            }
        });
        data["web"] = webs;

        //nickname
        var nicknames = [];
        {
            var nickname = {};
            var th = $('#nickname');
            var dataid = parseInt(th.find('.edit:first').attr('data_id'), 10);
            var value = th.find('input:first').val();
            if (dataid != -1 && value == '') {
                nickname['dataid'] = dataid;
                nickname['del'] = true;
                nicknames.push(nickname);
            } else if (value != ''){
                nickname['dataid'] = dataid;
                nickname['value'] = value;
                nicknames.push(nickname);
            }
        }
        data["nickname"] = nicknames;

        //note
        var notes = [];
        {
            var note = {};
            var th = $('#note');
            var dataid = parseInt(th.find('.edit:first').attr('data_id'), 10);
            var value = th.find('textarea:first').val();
            if (dataid != -1 && value == '') {
                note['dataid'] = dataid;
                note['del'] = true;
                notes.push(note);
            } else if (value != ''){
                note['dataid'] = dataid;
                note['value'] = value;
                notes.push(note);
            }
        }
        data["note"] = notes;
        
//        var jsonString = JSON.stringify(data);
//        console.log(jsonString);
//        return jsonString;
		return data;
    }
	
	function isPhoneNum(phoneNum){
		var phonePattern = /^[wp0-9\+\*\#]+$/;
		return phonePattern.test(phoneNum);
	}
	function isEmail(emailstr){
		var emailPattern = /^(?:[a-z\d]+[_\-\+\.]?)*[a-z\d]+@(?:([a-z\d]+\-?)*[a-z\d]+\.)+([a-z]{2,})+$/i;
		return emailPattern.test(emailstr);
	}
    function lostFoucs(obj){
		var text = obj.val();
		if(text.length==0)
		{
			obj.attr("class","correct");
			return;		
		}
		var editType = obj.attr('placeholder');
		if(!editType.localeCompare("{{contact_edit_comparePhone}}")){
			if(!isPhoneNum(text)){
				obj.attr("class","wrong");
				$(".failMsg").text("{{contact_edittype_failmsg}}");
				$(".failMsg").show();
			}
			else{
				obj.attr("class","correct");
				$(".failMsg").hide();
			}
		}
		else if(!editType.localeCompare("{{contact_edittype_email}}")){
			if(!isEmail(text)){
				obj.attr("class","wrong");
				$(".failMsg").text("{{contact_edittype_email_failmsg}}");
				$(".failMsg").show();
			}
			else{
				obj.attr("class","correct");
				$(".failMsg").hide();
			}
		}
	}
	function getFoucs(obj){
		obj.attr("class","correct");
		if($("input[class='wrong']").length==0)
			$(".failMsg").hide();
	}

	function verifyContact(csJson){
		var name = csJson["name"];
		csJson["name"] = name.replace(/(^\s*)|(\s*$)/g,"");

		if(csJson["name"].length!=0){
			
            if(typeof csJson["name"] === 'undefined'){
            console.log("undefined");
            return false;
            };
			return true;
        }
		else if(csJson["nickname"].length!=0){
			name = csJson["nickname"][0]["value"];
			csJson["nickname"][0]["value"] = name.replace(/(^\s*)|(\s*$)/g,"");
			csJson["name"]=csJson["nickname"][0]["value"];
            if(typeof csJson["name"] === 'undefined'){
            console.log("undefined");
            return false;
            };
			return   true;
		}
		else if(csJson["phone"].length!=0){
			csJson["name"]=csJson["phone"][0]["value"];
           if(typeof csJson["name"] === 'undefined'){
            console.log("undefined");
            return false;
            };
			return   true;
		}
		else if(csJson["email"].length!=0){
			csJson["name"]=csJson["email"][0]["value"];
            if(typeof csJson["name"] === 'undefined'){
            console.log("undefined");
            return false;
            };
			return  true;
		}
		else if(csJson["im"].length!=0){
			csJson["name"]=csJson["im"][0]["value"];
            if(typeof csJson["name"] === 'undefined'){
            console.log("undefined");
            return false;
            };
			return true;
		}
		else
			return false;
	}
</script>
<body>
    <div class="w-ui-window" style=""><!-- -webkit-transform: translate3d(5px,5px,0);-->
        <header class="w-ui-window-header">
            <div class="w-ui-window-header-title">{{contact_edit_editcontact}}</div>
        </header>
        <div class="w-ui-window-body" id="body">

            <div id="base" contactid="-1">
                <div id="editHead">
                    <img src="images/editClear_bg.png"/>
                    <img src="images/editClear_bg.png"/>
                </div>
                <div id="editHeadBtn">
                    <div id="editHeadAdd">{{contact_edit_editadd}}</div>
                </div>
                
                <div class="vbox">
                    <!--<div id="editName">-->
                        <input type="text" id='editName' placeholder="{{contact_edit_nameplaceholder_lang}}"/>
                    <!--</div>-->
                    <div id="editStar" class="star"></div>
                </div>
            </div>
            

            <div id="editDetail" class="vbox">
                <!--电话列表-->
                <div id="phonelist">
                    <div class="hbox margin-top" type="phone">
                        <div class="hbox label">
                            <div class="label-text">{{contact_edit_editphone}}</div>
                            <div class="arrow"></div>
                        </div>
                        <div class="edit" data_id="-1">
                            <input type="text" placeholder="{{contact_eidt_editnumber}}"/>
                        </div>
                        <div class="additem"></div>
                    </div>
                </div>
                
                <div id="emaillist">
                    <div class="hbox margin-top" type="email">
                        <div class="hbox label">
                            <div class="label-text">{{contact_edit_person}}</div>
                            <div class="arrow"></div>
                        </div>
                        <div class="edit" data_id="-1">
                            <input type="text" placeholder="{{contact_edit_editemail}}"/>
                        </div>
                        <div class="additem"></div>
                    </div>
                </div>
                <div id="imlist">
                    <div class="hbox margin-top" type="im">
                        <div class="hbox label">
                            <div class="label-text">{{contact_edit_im}}</div>
                            <div class="arrow"></div>
                        </div>
                        <div class="edit" data_id="-1">
                            <input type="text" placeholder="{{contact_edit_editim}}"/>
                        </div>
                        <div class="additem"></div>
                    </div>
                </div>
                <div id="eventllist">
                    <div class="hbox margin-top" type="event">
                        <div class="hbox label">
                            <div class="label-text">{{contact_edit_eventlist_bir}}</div>
                            <div class="arrow"></div>
                        </div>
                        <div class="edit" data_id="-1">
                            <!--<input type="text" name="time1" id="time1" onclick="MyCalendar.SetDate(this)" value="2006-8-1" />-->
                             <input type="text" class="input_cxcalendar" readonly/>
                            <!--<input class="eventinput" placeholder="日期" readonly/>-->
                        </div>
                        <div class="additem"></div>
                    </div>
                </div>
                <div id="orglist">
                    <div class="hbox margin-top" type="org">
                        <div class="hbox label">
                            <div class="label-text">{{contact_edit_orglist_company}}</div>
                            <div class="arrow"></div>
                        </div>
                        <div class="vbox edit" data_id="-1">
                            <input type="text" placeholder="{{contact_edit_orglist_edcompany}}"/>
                            <input type="text" placeholder="{{contact_edit_orglist_edjob}}"/>
                        </div>
                        <div class="additem"></div>
                    </div>
                </div>
                <div id="addrlist">
                    <div class="hbox margin-top" type="addr">
                        <div class="hbox label">
                            <div class="label-text">{{contact_edit_addrlist_home}}</div>
                            <div class="arrow"></div>
                        </div>
                        <div class="vbox edit" data_id="-1">
                            <input type="text" placeholder="{{contact_edit_adrlist_country}}"/>
                            <input type="text" placeholder="{{contact_edit_adrlist_city}}"/>
                            <input type="text" placeholder="{{contact_edit_adrlist_street}}"/>
                            <input type="text" placeholder="{{contact_edit_adrlist_post}}"/>
                        </div>
                        <div class="additem"></div>
                    </div>
                </div>
                
                
                <div id="weblist">
                    <div class="hbox margin-top" type="web">
                        <div class="hbox title">
                            <div class="title-text">{{contact_edit_weblist_web}}</div>
                        </div>
                        <div class="edit" data_id="-1">
                            <input type="text" placeholder="{{contact_edit_weblist_placeholder}}"/>
                        </div>
                        <div class="additem"></div>
                    </div>
                </div>
                <div id="group">
                    <div class="hbox margin-top">
                        <div class="hbox title">
                            <div class="title-text">{{contact_edit_group_gredit}}</div>
                        </div>
                        <div class="edit hbox">
                            <div class="text">{{contact_edit_group_noslected}}</div>
                            <div class="arrow"></div>
                        </div>
                    </div>
                </div>
                <div id="ring">
                    <div class="hbox margin-top">
                        <div class="hbox title">
                            <div class="title-text">{{contact_edit_group_ring}}</div>
                        </div>
                        <div class="edit hbox">
                            <div class="text">{{contact_edit_group_deafult_ring}}</div>
                            <div class="arrow"></div>
                        </div>
                    </div>
                </div>
                <div id="nickname">
                    <div class="hbox margin-top">
                        <div class="hbox title">
                            <div class="title-text">{{contact_edit_nickname_nick}}</div>
                        </div>
                        <div class="edit" data_id="-1">
                            <input type="text" placeholder="{{contact_edit_nickname_placeholder}}"/>
                        </div>
                    </div>
                </div>
                <div id="note">
                    <div class="hbox margin-top">
                        <div class="hbox title">
                            <div class="title-text">{{contact_edit_note_note}}</div>
                        </div>
                        <div class="edit" data_id="-1">
                            <textarea type="text" placeholder="{{contact_edit_note_note_placeholder}}">123</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-window-mask-bg"></div>
        <footer class="w-ui-window-footer hendbox">
			<label class="failMsg">{{contact_edit_failMsg_input}}</label>
        	<label class="saveSuccess">{{contact_edit_saveSuccess}}</label>
            <button id="save" class="button">&nbsp;{{contact_edit_save_btn}}&nbsp;</button>
            <button id="cancel" class="button">&nbsp;{{contact_edit_cancel_btn}}&nbsp;</button>
        </footer>
    </div>
    
    <menu id="labellist" class="contextmenu">
        <li id="gcmSendSMS">
            <input class="checker" type="checkbox"/>
            <div class="li">发送短信发送短信发送短信发送短信发送短信发送短信</div>
        </li>
        <li class="hr"></li>
        <li id="gcmDelete">
            <div class="li">删除群组删除群组删除群组删除群组删除群组删除群组删除群组删除群组</div>
        </li>
        <li id="gcmEdit">
            <div class="li">{{contact_edit_gcmedit}}</div>
        </li>
    </menu>
    <menu id="grouplist" class="editgrouplistmenu">
        <li id="xcv">
            <input class="checker" type="checkbox"/>
            <div class="li">starred in asdfsdfsfsdfsdfsfsfsdfsdfsdfsfndroid</div>
        </li>
        <li id="xcv">
            <input class="checker" type="checkbox"/>
            <div class="li">starred in android</div>
        </li>
        <li id="xcv">
            <input class="checker" type="checkbox"/>
            <div class="li">starred in android</div>
        </li>
        <li id="xcv">
            <input class="checker" type="checkbox"/>
            <div class="li">starred in android</div>
        </li>
        <li id="xcv">
            <input class="checker" type="checkbox"/>
            <div class="li">starred in android</div>
        </li>
        <li id="xcv">
            <input class="checker" type="checkbox"/>
            <div class="li">starred in android</div>
        </li>
        <li id="xcv">
            <input class="checker" type="checkbox"/>
            <div class="li">starred in android</div>
        </li>
        <li id="xcv">
            <input class="checker" type="checkbox"/>
            <div class="li">starred in android</div>
        </li>
        <li id="xcv">
            <input class="checker" type="checkbox"/>
            <div class="li">starred in android</div>
        </li>
        <li id="xcv">
            <input class="checker" type="checkbox"/>
            <div class="li">starred in android</div>
        </li>
        <li id="xcv">
            <input class="checker" type="checkbox"/>
            <div class="li">starred in android</div>
        </li>
        <li id="xcv">
            <input class="checker" type="checkbox"/>
            <div class="li">starred in android</div>
        </li>
        <li id="xcv">
            <input class="checker" type="checkbox"/>
            <div class="li">starred in android</div>
        </li>
        <li id="xcv">
            <input class="checker" type="checkbox"/>
            <div class="li">starred in android</div>
        </li>
        <li id="xcv">
            <input class="checker" type="checkbox"/>
            <div class="li">starred in android</div>
        </li>
    </menu>
    <menu id="ringlist" class="contextmenu"></menu>
        
</body>
</html>
