$def with (group,contact,infoType,infoVal0,infoType1,infoVal1,infoType2,infoVal2,infoType3,infoVal3,infoType4,infoVal4,infoType5,infoVal5)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/static/style/common.css" />
<link rel="stylesheet" type="text/css" href="/static/js/jqtransformplugin/jqtransform.css" />
<style>

</style>
<script type="text/javascript" src="/static/js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="/static/js/jquery.artDialog.source.js?skin=aero"></script>
<script type="text/javascript" src="/static/js/jqtransformplugin/jquery.jqtransform.js"></script>
<script type="text/javascript">

var infoType = 	{
	$for t in infoType:
		'移动电话'  : ['$t','移动电话','家庭电话', '工作电话', '家庭传真', '传呼机', '其他电话','自定义...'],

	$for t1 in infoType1:	
		'邮箱' : ['$t1','工作邮箱', '家庭邮箱', '其他邮箱','自定义...'],
		
	$for t2 in infoType2:
		'聊天工具' : ['$t2','QQ', 'AIM', 'Msn', 'Yahoo', 'Skype', 'Gtalk', 'ICQ', 'Jabber','自定义...'],
		
	$for t3 in infoType3:
		'地址' : ['$t3','工作地址', '家庭地址', '其他地址','自定义...']

	$for t4 in infoType4:
		'公司' : ['$t4','公司', '其他','自定义...'],
		
	$for t5 in infoType5:
		'备注'  : ['$t5','备注'],
		
}

var infoVal = {
	$for t00 in infoVal0:
		'$t00.keys()[0]':'$t00.values()[0]',
	$for t11 in infoVal1:
		'$t11.keys()[0]':'$t11.values()[0]',
	$for t22 in infoVal2:
		'$t22.keys()[0]':'$t22.values()[0]',
	$for t33 in infoVal3:
		'$t33.keys()[0]':'$t33.values()[0]'
	$for t44 in infoVal4:
		'$t44.keys()[0]':'$t44.values()[0]',
	$for t55 in infoVal5:
		'$t55.keys()[0]':'$t55.values()[0]'
}
var infoTypeName = 	{
	'移动电话' : ['PhoneNumber-Mobile','PhoneNumber-Home', 'PhoneNumber-Work', 'PhoneNumber-FaxHome', 'PhoneNumber-Page', 'PhoneNumber-Other','PhoneNumber'],
	'邮箱' : ['Email-Work', 'Email-Home', 'Email-Other','Email'],
	'聊天工具' : ['IM-Aim', 'IM-Msn', 'IM-Yahoo', 'IM-Skype', 'IM-Qq', 'IM-Gtalk', 'IM-Icq', 'IM-Jabber','IM'],
	'地址' : ['PostalAddress-Work', 'PostalAddress-Home', 'PostalAddress-Other','PostalAddress'],
	'公司' : ['Organization-Work', 'Organization-Other','Organization'],
	'备注' : ['Notes']
}
var selectedGroup = "All";
var selectedAccount = "";
var infoGroup = ['分组','家人','朋友','同事','其他','添加分组'];
var infoTypeOther = ['PhoneNumber','EMail','IM','PostalAddress','Organization']
$$(function() {
	for(var k in infoType) {
		$$('#optionContainer').append(createSelect(k));		
		$$('<option />').html(k).appendTo($$('#infoTypeSelector'));
	}
	creatGroupSelect();
	//初始化美化表单
	$$('#contact-form').jqTransform();
	
	
	$$('#infoTypeSelector').change(function() {
		//console.log($$(this).val());
		$$('#optionContainer ul[rel="' + $$(this).val() + '"]').after(createSelect($$(this).val(), true));
		$$(this).val('0');
		$$('#contact-form').removeClass('jqtransformdone').jqTransform();
	})
	
//===================	
	$$('#addWrap>.jqTransformSelectWrapper>ul li a').click(function(){
		if($$(this).attr('index')) {
			var key = function(idx) {
				var i=0;
				for(var j in infoType) {
					if(++i == idx) {
						return j;
					};
				}
			}($$(this).attr('index'));
			$$('#optionContainer ul[rel="' + key + '"]').after(createSelect(key, true));
			$$('#contact-form').removeClass('jqtransformdone').jqTransform();
			$$('.jqTransformSelectWrapper').each(function(index) {
				$$(this).css('zIndex', 100 - index);
			})
			$$(this).attr('class','').parents('ul').find('li:eq(0) a').attr('class','selected');
			$$('#addWrap span:eq(0)').html('请选择');
		}												
	})
//==================	
})

var createSelect = function(type, dropable) {
	var liElement = [];
	liElement[0] = $$('<select />');
	for(var i=0, len=infoType[type].length; i<len; i++) {
		$$('<option />').html(infoType[type][i]).appendTo(liElement[0]);
	}
	var name = infoTypeName[type][0];	
	var val = infoVal[type];
	liElement[1] = $$('<input />').attr({'type':'text'}).val(val?val:"");
	if(dropable) {
		liElement[2] = $$('<a />').html('删除').click(function() {
			if(type == $$(this).parents('ul').attr('rel')) {
				$$(this).parents('ul').prev().attr('rel', type);
			}
			$$(this).parents('ul').remove();
		});
		
	}
	$$('#optionContainer ul[rel="' + type + '"]').removeAttr('rel').addClass('ulSlt');
	var ulElement = $$('<ul />').attr({'rel':type, 'wording': type}).addClass('ulSlt');
	
	for(var i=0, len=liElement.length; i<len; i++) {
		ulElement.append(liElement[i]);
		liElement[i].wrap('<li class="li_' + i + '"/>');
	}
	
	return ulElement;
}
var creatGroupSelect = function(){
	$$("#grupDefine").html("");
	var groupStr = "<select class='' name='group' id='group'>";
	$$(infoGroup).each(function(i,n){
		groupStr += "<option value='"+i+"'>" +n+"</option>";
	})
	groupStr += "</select>";
	$$("#grupDefine").html(groupStr);
}

/*$$('#optionContainer>.jqTransformSelectWrapper>ul li a').click(function(){
	alert("222");
})*/
</script>
</head>
<body onkeydown="KeyDownFunction()">
<form  method="get" id="contact-form"> 
<div id="wrap">
	<div class="pad15">
    	<div class="clearfix">
            <div class="fl" id="avatar"><img src="/static/imgs/avatar01.png" width="90" height="90" /></div>
            <div class="fl" id="maininfor">
            	<div class="mainInfor">
                	<input id="name"  name="name" class="name" value=$contact["Name"]["FirstName"] />
					$if contact["Nickname"]:
						<input type="text" id="nickname" name="nickname" class="nickname mart4" value= $contact["Nickname"][0] />
					$else:
						<input type="text" id="nickname" name="nickname" class="nickname mart4" value= "" />
                </div>
                <div class="fl account mart4">
                <!--<span>手机账户</span>-->
                	<select class="" name="phoneaccount"id="phoneaccount">
                    </select>
                </div>
                <div class="fl group mart4"  id="grupDefine">
                	
                	<!--<span>分组</span>-->
                </div>
            </div>
        </div>
        <h2>联系信息</h2>			
        <div id="optionContainer" class="clearfix">
       		<div class="claer"></div>     
        </div>
        
        <!--<div class="jqTransformSelectWrapper fl" style="background:none;">
            <div>
                <span style="width: 53px;">备注</span>
                <a class="jqTransformSelectOpen" href="#"></a>
            </div>
        </div>
        <div class="jqTransformInputWrapper fl" style="width: 138px;">
            <div class="jqTransformInputInner">
                <div>
                    <input type="text" class="jqtranformdone jqTransformInput" />
                </div>
            </div>
        </div>
        <div class="claer"></div><br />-->
        <div id="addWrap">
        	<select id="infoTypeSelector">
                <option val='0'>请选择</option>
            </select>
        </div>
    </div>
</div>
<div class="btnbox pad15">
	<input type="button" class="save" name="save" id="save" value="保存" />
    <input type="reset" class="cancel" name="cancel" id="cancel" value="取消" />
</div>
</form>
<div id='userGroup' style="display:none">
名称：<input type="text" id="userDefindName" /><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id='userDefindNameWrong' style="display:none;color:#ff0000">名称不能为空</span>
</div>
<div id='userGroupTwo' style="display:none">
分组名称：<input type="text" id="userDefindGroup" /><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id='userDefindGroupWrong' style="display:none;color:#ff0000">分组名称不能为空</span>
</div>
</body>

<script language="javascript">
//=============================================

//=============================================
$$(document).ready(function(){

	$$("#name").focus(function(){
		$$(this).val("");
	}).blur(function(){
		if($$(this).val() == "") $$(this).val('名字');
	})
	$$("#nickname").focus(function(){
		$$(this).val("");
	}).blur(function(){
		if($$(this).val() == "") $$(this).val('昵称');
	})
	//=============================================
	//$$('#grupDefine>.jqTransformSelectWrapper ul li a').click(function(){
		
	//})
	//=============================================


		$$("#save").click(function(){
			document.getElementById("save").disabled=true
			var data = {};
			data.Name_FirstName = $$("#name").val();
			if($$.trim(data.Name_FirstName) == "" || $$.trim(data.Name_FirstName) == "名字") return false;
			data.Nickname = $$("#nickname").val();
			data.Account = $$("#phoneaccount").val();
			var tempGroupName = $$('div.group > .jqTransformSelectWrapper span').html();
			data.Group = tempGroupName == "分组" ? "" : tempGroupName;
			var dataArr = [];
			var dataArr = $$("#optionContainer :input[type = text]");
			//dataArr.reverse();
			var arr = [];
			var arrOther = [];
			$$(dataArr).each(function(i,n){
				var val = $$(this).val();
				var type = $$(this).parents('ul').attr("wording");
				var index = $$(this).parents('ul').find('a[class = selected]').attr('index') * 1;
				var tempName = infoTypeName[type][index];
				if($$.inArray(tempName,infoTypeOther) != -1){//判断是否是自定义名称
					var nameOther = $$(this).parents('ul').find('span').html();
					var tempNameOther = tempName + "-" + nameOther;
					if($$.inArray(tempNameOther,arrOther) != -1){//判断是否有重名
						for(var i = 0, k = 0; i < arrOther.length; i++){
						if(arrOther[i] == tempNameOther) k++;
						var name = tempNameOther + "-" + k;
						}
					}else{
						var name = tempNameOther + "-" + 0;
					}
					arrOther.push(tempNameOther);
					data[name] = val;
				}else{
					if($$.inArray(tempName,arr) != -1){//判断是否有重名
						for(var i = 0, k = 0; i < arr.length; i++){
							if(arr[i] == tempName) k++;
							var name = tempName + "-" + k;
						}
					}else{
						var name = tempName + "-" + 0;
					}
					arr.push(tempName);
					data[name] = val;
				}
			})
			//提交数据
			$$.post("/PB/save",data,function(){
			
			})
		})
})

function KeyDownFunction()
{
if (typeof window.event != 'undefined') {  
           document.onkeydown = function() {  
             var type = event.srcElement.type;  
             var code = event.keyCode;  
             return ((code != 8 && code != 13) ||  
                     (type == 'text' && code != 13 ) ||  
                     (type == 'textarea') ||  
                     (type == 'submit' && code == 13))  
           }  
         } else { // FireFox/Others  
           document.onkeypress = function(e) {  
   
             var type = e.target.localName.toLowerCase();  
             var code = e.keyCode;  
             if ((code != 8 && code != 13) ||  
                 (type == 'input' && code != 13 ) ||  
                 (type == 'textarea') ||  
                 (type == 'submit' && code == 13)) {  
                 return true;  
             } else {  
                 return false ;  
             }  
           }  
         } 
}
</script>
<!--<div id="optionContainer">
</div>
<select id="infoTypeSelector">
    <option val='0'>请选择</option>
</select>-->
</html>