<style type="text/css">div.wan-sta{margin:20px 0 10px 0;text-align:center}i.wan-sta-icon{display:inline-block;font-size:24px;line-height:19px;vertical-align:top}i.icon_remind_line{color:#f34947}i.icon_select_on{color:#0bcd1e}p.status-detail{display:inline-block;font-size:14px;width:284px;margin-left:2px;text-align:left}#Detect{background-color:#1499e6;margin-top:10px;margin-bottom:10px}span.high-set{cursor:pointer;display:inline-block;margin-right:110px;width:40px;line-height:20px;color:#fe8f19;font-size:16px}div.high-top{padding:10px 0 0}span.mac-clone{color:#fe9818;cursor:pointer;position:absolute;width:200px;text-align:left;font-size:14px;line-height:36px;right:-210px;top:0;bottom:0}ul.set-second{margin:20px 50px 10px 50px}</style>
<%+network-set-script%>
<script type="text/javascript">
(function(){
	<%
		local wisp_cap = "0"
		local dev_para = {
			dev_feature = {app_pc = {}, route_info = {}}
		}
		local dev_result = tpl_get_data(dev_para)
		local network_connect_cap = dev_result[K_MODULE].dev_feature.route_info.network_connect
		for _, v in pairs(dev_result[K_MODULE].dev_feature.app_pc.installed) do
			if v == "wisp" then
				wisp_cap = "1"
			end
		end

		local para = {
			network = {wan = {}, pppoe = {}},
			dev_feature = {network_set = {}}
		}

		if "1" == wisp_cap then
			local wisp = {}
			wisp["config"] = {}
			para["wisp"] = wisp
		end
		local result = tpl_get_data(para, true)
	-%>

	var result = <%=result%>;
	var wisp_cap = "<%=wisp_cap%>";
	var networkConnectCap = "<%=network_connect_cap%>";
	var wan = result[K_MODULE].network.wan;
	var pppoe = result[K_MODULE].network.pppoe;
	var wispStatus;
	if("1" == wisp_cap){
		wispStatus = result[K_MODULE].wisp.config;
	}

	var ipProtocol;
	var curWanType = wan.protocol;
	var cloneMode = wan.clone_mode;
	var cloneMac = wan.mac;
	var sourceMac = wan.source_mac;
	var hostMac = BROWSER.mac;
	var statusHd = null;
	var currentState = stateman.current.name;
	var networkSet = result[K_MODULE].dev_feature.network_set;
	var macCloneCap = parseInt(networkSet.mac_clone);

	var WAN_TYPE_DHCP = "dhcp",
		WAN_TYPE_PPPoE = "pppoe",
		WAN_TYPE_STATIC_IP = "static",
		WAN_TYPE_PPTP = "pptp",
		WAN_TYPE_L2TP = "l2tp";

	var wanTypeAll = [{name:label.wanDHCP, value:WAN_TYPE_DHCP},
				   {name:label.wanPPPoE, value:WAN_TYPE_PPPoE},
				   {name:label.wanStatic, value:WAN_TYPE_STATIC_IP},
				   {name:label.wanPptp, value:WAN_TYPE_PPTP},
				   {name:label.wanL2tp, value:WAN_TYPE_L2TP}
				   ];

	var wanType = productSelect(wanTypeAll, networkSet.wan_type);

	initSelect("WanType", wanType, curWanType, function(val, init){
		setWantype(val);
		setHelpMsg(val);
		$(".err-note").hide();
	});

	if (parseInt(networkSet.dial_type)){
		$("ul.dia-type").show();
		var curDiaType = pppoe.dial_mode;
		var DiaType = [{name:label.diaNormal, value:"0"},
					   {name:label.diaSpecialOne, value:"1"},
					   {name:label.diaSpecialTwo, value:"2"},
					   {name:label.diaSpecialThree, value:"3"},
					   {name:label.diaSpecialFour, value:"4"}
					   ];

		initSelect("PppoeDiaType", DiaType, curDiaType);
	}

	function initPppoe(pppoe){
		var PppoeUser = pppoe.username;
		var PppoePwd = pppoe.password;
		var PppoeSer = pppoe.server;

		$("#PppoeUser").val(PppoeUser);
		$("#PppoePwd").val(PppoePwd);
		$("#PppoeServ").val(PppoeSer);
	}

	function initStaticIp(static){
		var ipVal = static.ip;
		var maskVal = static.netmask;
		var gwVal = static.gateway;
		var primDns = static.dns_pri;
		var secDns = static.dns_sec;

		$("#WanIpaddr").val(ipVal);
		$("#WanMask").val(maskVal);
		$("#WanGw").val(gwVal);
		$("#PrimDns").val(primDns);
		$("#SecDns").val(secDns);
	}

	function initPptp(pptp){
		$("#VpnServerIp").val(pptp.server);
		$("#VpnUser").val(pptp.username);
		$("#VpnPwd").val(pptp.password);
		$("#WanIpaddr").val(pptp.ip);
		$("#WanMask").val(pptp.netmask);
		$("#WanGw").val(pptp.gateway);
		$("#PrimDns").val(pptp.dns_pri);
		$("#SecDns").val(pptp.dns_sec);

		initRadio("IpProtocol", pptp.ip_protocol=="1"?"1":"0", function(idx){
			if (0 == idx){
				$("#WanStaticSet").hide();
				$("#DnsSet").show();
				ipProtocol = "0";
			}else{
				$("#WanStaticSet").show();
				$("#DnsSet").hide();
				ipProtocol = "1";
			}
		});
	}

	function initL2tp(l2tp){
		$("#VpnServerIp").val(l2tp.server);
		$("#VpnUser").val(l2tp.username);
		$("#VpnPwd").val(l2tp.password);
		$("#WanIpaddr").val(l2tp.ip);
		$("#WanMask").val(l2tp.netmask);
		$("#WanGw").val(l2tp.gateway);
		$("#PrimDns").val(l2tp.dns_pri);
		$("#SecDns").val(l2tp.dns_sec);

		initRadio("IpProtocol", l2tp.ip_protocol=="1"?"1":"0", function(idx){
			if (0 == idx){
				$("#WanStaticSet").hide();
				$("#DnsSet").show();
				ipProtocol = "0";
			}else{
				$("#WanStaticSet").show();
				$("#DnsSet").show();
				ipProtocol = "1";
			}
		});
	}

	function initCloneSwitch(cloneMode, cloneMac){
		if(macCloneCap){
			$("#CloneSwitch").unbind("click");
			initSwitch("CloneSwitch", cloneMode, function(state){
				if (1 == state){
				$("#CloneParam").show();
				$("#MacCloAddr").val(cloneMac);
			}else{
				$("#CloneParam").hide();
			}
			});
			$("span.mac-clone").click(function(){
				$("#MacCloAddr").val(hostMac);
			});
		}else {
			$("#SeniorMacClone").hide();
			$("#CloneParam").hide();
		}
	}

	function initAdvSelfDns(dnsEn, primDns, secDns){
		if ("static" == $("#WanType").attr("data-value")){
			$("#SeniorSelfDns").hide();
			$("#Param").hide();
		}else{
			$("#SeniorPrimDns").val(primDns);
			$("#SeniorSecDns").val(secDns);

			$("#SeniorSelfDns").show();
			$("#Switch").unbind("click");
			initSwitch("Switch", dnsEn, function(state){
				if (1 == state){
					$("#Param").show();
				}else{
					$("#Param").hide();
					closeNote();
				}
			});
		}
	}

	function setWantype(wanType){
		var advPrimDns, advSecDns, advSelfDnsEn;

		switch(wanType){
		case WAN_TYPE_DHCP:
			var para = {
				network:{wan: null, dhcp: null},
			};

			apiGet(para, function(data){
				var dhcp = data[K_MODULE]["network"]["dhcp"];
				var wan = data[K_MODULE]["network"]["wan"];
				$("#WanPppoeSet").hide();
				$("#WanStaticSet").hide();
				$("#WanVpn").hide();
				//val需先于attr，for bug 0004633
				$("#Mtu").val(dhcp.mtu).attr('placeholder', label.dhcpMtuTip);
				advSelfDnsEn = dhcp.dns_mode;
				advPrimDns = dhcp.dns_pri;
				advSecDns = dhcp.dns_sec;
				initCloneSwitch(wan.clone_mode, wan.mac);
				initAdvSelfDns(advSelfDnsEn, advPrimDns, advSecDns);
			});
			break;
		case WAN_TYPE_PPPoE:
			var para = {
				network:{wan: null, pppoe: null},
			};
			apiGet(para, function(data){
				var pppoe = data[K_MODULE]["network"]["pppoe"];
				var wan = data[K_MODULE]["network"]["wan"];
				$("#WanPppoeSet").show();
				$("#WanStaticSet").hide();
				$("#WanVpn").hide();
				$("#Mtu").val(pppoe.mtu).attr('placeholder', label.pppoeMtuTip);
				advSelfDnsEn = pppoe.dns_mode;
				advPrimDns = pppoe.dns_pri;
				advSecDns = pppoe.dns_sec;
				initPppoe(pppoe);
				initCloneSwitch(wan.clone_mode, wan.mac);
				initAdvSelfDns(advSelfDnsEn, advPrimDns, advSecDns);
			});
			break;
		case WAN_TYPE_STATIC_IP:
			var para = {
				network:{wan: null, static: null},
			};
			apiGet(para, function(data){
				var static = data[K_MODULE]["network"]["static"];
				var wan = data[K_MODULE]["network"]["wan"];
				$("#WanPppoeSet").hide();
				$("#WanStaticSet").show();
				$("#WanVpn").hide();
				$("#Mtu").val(static.mtu).attr('placeholder', label.staticMtuTip);
				advSelfDnsEn = "";
				initStaticIp(static);
				initCloneSwitch(wan.clone_mode, wan.mac);
				initAdvSelfDns(advSelfDnsEn, advPrimDns, advSecDns);
			});
			break;
		case WAN_TYPE_PPTP:
			var para = {
				network:{wan: null, pptp: null},
			};
			apiGet(para, function(data){
				var pptp = data[K_MODULE]["network"]["pptp"];
				var wan = data[K_MODULE]["network"]["wan"];
				$("#WanPppoeSet").hide();
				$("#WanStaticSet").hide();
				$("#WanVpn").show();
				$("#Mtu").val(pptp.mtu).attr('placeholder', label.pptpMtuTip);
				advSelfDnsEn = pptp.dns_mode;
				advPrimDns = pptp.dns_pri;
				advSecDns = pptp.dns_sec;
				initPptp(pptp);
				initCloneSwitch(wan.clone_mode, wan.mac);
				initAdvSelfDns(advSelfDnsEn, advPrimDns, advSecDns);
			});
			break;
		case WAN_TYPE_L2TP:
		default:
			var para = {
				network:{wan: null, l2tp: null},
			};
			apiGet(para, function(data){
				var l2tp = data[K_MODULE]["network"]["l2tp"];
				var wan = data[K_MODULE]["network"]["wan"];
				$("#WanPppoeSet").hide();
				$("#WanStaticSet").hide();
				$("#WanVpn").show();
				$("#Mtu").val(l2tp.mtu).attr('placeholder', label.l2tpMtuTip);
				advSelfDnsEn = l2tp.dns_mode;
				advPrimDns = l2tp.dns_pri;
				advSecDns = l2tp.dns_sec;
				initL2tp(l2tp);
				initCloneSwitch(wan.clone_mode, wan.mac);
				initAdvSelfDns(advSelfDnsEn, advPrimDns, advSecDns);
			});
			break;
		}
	}

	function setHelpMsg(wanType){
		var wanDhcp = helpStr.wanDhcp;
		var wanDhcpTip = helpStr.wanDhcpTip;
		var wanPppoe = helpStr.wanPppoe;
		var wanPppoeTip = helpStr.wanPppoeTip;

		if ("1" == networkConnectCap){
			wanDhcp = helpStr.wanDhcpSec;
			wanDhcpTip = helpStr.wanDhcpTipSec;
			wanPppoe = helpStr.wanPppoeSec;
			wanPppoeTip = helpStr.wanPppoeTipSec;
		}
		$("#SelfDefDNS").show();
		switch(wanType){
		case WAN_TYPE_DHCP:
			$("#Type").text(wanDhcp);
			$("#TypeTip").text(wanDhcpTip);
			$("#MtuTip").text(helpStr.dhcpMtuTip);
			break;
		case WAN_TYPE_PPPoE:
			$("#Type").text(wanPppoe);
			$("#TypeTip").text(wanPppoeTip);
			$("#MtuTip").text(helpStr.pppoeMtuTip);
			break;
		case WAN_TYPE_STATIC_IP:
			$("#Type").text(helpStr.wanStatic);
			$("#TypeTip").text(helpStr.wanStaticTip);
			$("#MtuTip").text(helpStr.staticMtuTip);
			$("#SelfDefDNS").hide();
			break;
		case WAN_TYPE_PPTP:
			$("#Type").text(helpStr.wanPptp);
			$("#TypeTip").text(helpStr.wanPptpTip);
			$("#MtuTip").text(helpStr.pptpMtuTip);
			break;
		case WAN_TYPE_L2TP:
			$("#Type").text(helpStr.wanL2tp);
			$("#TypeTip").text(helpStr.wanL2tpTip);
			$("#MtuTip").text(helpStr.l2tpMtuTip);
			break;
		}
		if(macCloneCap){
			$("#MacClone").show();
		} else {
			$("#MacClone").hide();
		}
	}

	$("#SeniorSet").click(function(){
		var expand = $(this).attr("data-expand");
		if ("1" == expand){
			$("#NetworkSenior").hide();
			$(this).attr("data-expand", "0").text(label.openSenior);
		}else{
			$("#NetworkSenior").show();
			$(this).attr("data-expand", "1").text(label.closeSenior);

			if("1" == wisp_cap && macCloneCap){
				if ("1" == wispStatus.enable){
					$("#SeniorMacClone").hide();
					$("#CloneParam").hide();
				}else{
					$("#SeniorMacClone").show();
				}
			}
		}
	});

	function showWanState(state, stateStr){
		if (state){// wan connected
			$("i.wan-sta-icon").removeClass("icon_remind_line").addClass("icon_select_on");
			$("p.status-detail").css("color","#575757").text(stateStr);
		}else{// wan disconnected
			$("i.wan-sta-icon").removeClass("icon_select_on").addClass("icon_remind_line");
			$("p.status-detail").css("color","#F34947").text(stateStr);
		}
	}

	//上网状态检测
	function refreshWanState(){
		var para = {
			network:{wan_status:null},
			wisp:{config:null}
		};

		apiGet(para, function(data){
			if (currentState != stateman.current.name){
				return;
			}

			var wanStatus = data[K_MODULE]["network"]["wan_status"];
			var wispState = data[K_MODULE]["wisp"];
			var wispEnable = wispState.config.enable;
			var code = wanStatus["status_code"];
			if ("1" == code){ // WAN口未连接
				if("1" == wispEnable){
					showWanState(false, label.wispUnlinkError);
					$("div.detect").hide();
				}else{
					showWanState(false, label.wanError);
					$("div.detect").hide();
				}
			}else{
				if (parseInt(networkSet.detection)){
					$("div.detect").show();
				}
				initInternetState(wanStatus);
			}

			clearTimeout(statusHd);
			statusHd = $.setTimeout(refreshWanState, 3000);
		});
	}

	//上网方式检测
	function getWanDetectionState(){
		var para = {
			network:{wan_detection:{action:"get"}}
		};

		apiGet(para, function(data){
			var code = data[ERR_CODE];
			if (E_NONE == code){
				var info = data[K_MODULE]["network"]["wan_detection"];
				if ("2" == info.running_status){ // 上网方式检测完成
					closeLoading();

					if ("1" !== info.status_code){ // wan口连接，检测成功
						var wanType = info.protocol;
						id("WanType").changeSel(wanType);
						setWantype(wanType);
						setHelpMsg(wanType);
					}
				}else{
					// 上网方式检测还未完成，轮询...
					$.setTimeout(getWanDetectionState, 2000);
				}
			}else{
				$.setTimeout(getWanDetectionState, 2000);
			}
		});
	}

	function getWanType(){
		var para = {
			network:{wan_detection:{action:"start"}}
		};

		showLoading(label.wanChecking);
		apiGet(para, function(){
			$.setTimeout(getWanDetectionState, 2000);
		});
	}

	$("#Detect").click(function(){
		$(".err-note").hide();
		getWanType();
	});

	function initInternetState(wanStatus){
		var status = wanStatus["internet_status"];
		var protocol = wanStatus["protocol"];
		var errorInfo = "";

		if ("1" == status){
				switch(protocol){
				case WAN_TYPE_STATIC_IP: //静态IP
					errorInfo = label.wanOk;
					break;
				case WAN_TYPE_PPPoE: //PPPOE
					errorInfo = label.pppoeOk;
					break;
				case WAN_TYPE_DHCP: //DHCP
					errorInfo = label.dhcpOk;
					break;
				case WAN_TYPE_PPTP: //PPTP
					errorInfo = label.pptpOk;
					break;
				case WAN_TYPE_L2TP: //L2TP
					errorInfo = label.l2tpOk;
					break;
				default:
					break;
				}

				$("i.wan-sta-icon").removeClass("icon_remind_line").addClass("icon_select_on");
				$("p.status-detail").css("color","#575757");
				$("p.status-detail").text(errorInfo);
		}else{
			/* status_code:
			  0: okay,
			  1: wan port not link,
			  2: no wan address,
			  3: gateway no response,
			  4: no DNS address,
			  5: DNS no response,
			  6: custom DNS error,
			  7: DHCP server no response,
			  8: getting DHCP IP,
			  9: PPPoE diaging,
			  10: PPPoE server no response,
			  646~649: PPPOE error,
			  678: PPPOE server error,
			  691: PPPOE account invalid,
			  709: PPPOE password invalid
			*/
			var code = parseInt(wanStatus["status_code"], 10);

			switch(protocol){
			case "static":
				errorInfo = label.staicIpErr;
				break;
			case "dhcp":
				switch(code){
				case 3:
					errorInfo = label.wanGatewayErr;
					break;
				case 4:
					errorInfo = label.wanDnsErr;
					break;
				case 5:
					errorInfo = label.wanNetErr;
					break;
				case 6:
					errorInfo = label.wanDnsCfgErr;
					break;
				case 7:
				case 8:
				case 2:
				default:
					errorInfo = label.wanDhcpErr;
					break;
				}

				break;
			case "pppoe":
				switch(code){
				case 709:
					errorInfo = label.pppoePwdErr;
					break;
				case 691:
					errorInfo = label.pppoeAccountErr;
					break;
				case 678:
					errorInfo = label.pppoeSrvErr;
					break;
				case 646:
				case 647:
				case 648:
				case 649:
					errorInfo = label.pppoeCodeL + code + label.pppoeCodeR;
					break;
				case 2:
					errorInfo = label.wanFreedErr;
					break;
				case 3:
					errorInfo = label.wanGatewayErr;
					break;
				case 4:
					errorInfo = label.wanDnsErr;
					break;
				case 5:
					errorInfo = label.wanNetErr;
					break;
				case 6:
					errorInfo = label.wanDnsCfgErr;
					break;
				case 9:
					errorInfo = label.pppoeDialing;
					break;
				case 10:
					errorInfo = label.pppoeNoResponse;
					break;
				}
				break;
			case "pptp":
				errorInfo = label.wanPptpErr;
				break;
			case "l2tp":
				errorInfo = label.wanL2tpErr;
				break;
			default:
				console.log("Warning:protocol=" + protocol);
			}

			$("i.wan-sta-icon").removeClass("icon_select_on").addClass("icon_remind_line");
			$("p.status-detail").css("color","#F34947");
			$("p.status-detail").html(errorInfo);
		}
	}

	refreshWanState();

	// static IP set
	function saveStatic(){
		var wanConf = {};
		var data = {};
		var para = {};

		para.network = {};
		para.network.wan = wanConf;
		wanConf.protocol = 'static';

		wanConf.clone_mode = $("#CloneSwitch").attr("data-value");
		wanConf.mac = $("#MacCloAddr").val();
		wanConf.source_mac = wan.source_mac;


		para.network.static = data;
		data.mtu = $("#Mtu").val();
		data.ip = $("#WanIpaddr").val();
		data.netmask = $("#WanMask").val();
		data.gateway = $("#WanGw").val();
		data.dns_mode = "1";
		data.dns_pri = $("#PrimDns").val();
		data.dns_sec = $("#SecDns").val();

		if(handleError(checkStaticConf(data.ip, data.netmask, data.gateway))){
			return;
		}

		if (handleError(checkNetworkDns(data.dns_pri, data.dns_sec))){
			return;
		}

		if (handleError(checkNetworkMtu(data.mtu, 576, 1500, "static"))){
			return;
		}

		if (macCloneCap && wanConf.clone_mode == "1"){
			if (handleError(checkNetworkMac(wanConf.mac))){
				return;
			}
		}

		showLoading(label.saving);
		apiSetWithModule("network", para, function(ret){
			var code = ret[ERR_CODE];
			if (E_NONE == code){
				var time = getMaxWaitTime(ret);
				$.setTimeout(function(){
					closeLoading();

					clearTimeout(statusHd);
					statusHd = $.setTimeout(refreshWanState, 3000);
				}, time * 1000);
			}else{
				handleError(code);
				closeLoading();
			}
		});
	}

	// DHCP set
	function saveDhcp(){
		var wanConf = {};
		var data = {};
		var para = {};

		para.network = {};
		para.network.wan = wanConf;
		wanConf.protocol = 'dhcp';
		wanConf.clone_mode = $("#CloneSwitch").attr("data-value");
		wanConf.mac = $("#MacCloAddr").val();
		wanConf.source_mac = wan.source_mac;

		para.network.dhcp = data;
		data.mtu = $("#Mtu").val();
		data.dns_mode = $("#Switch").attr("data-value");
		data.dns_pri = $("#SeniorPrimDns").val();
		data.dns_sec = $("#SeniorSecDns").val();

		if (handleError(checkNetworkMtu(data.mtu, 576, 1500, "dhcp"))){
			return;
		}

		if (macCloneCap && wanConf.clone_mode == "1"){
			if (handleError(checkNetworkMac(wanConf.mac))){
				return;
			}
		}

		if (data.dns_mode == "1"){
			if (handleError(checkNetworkDns(data.dns_pri, data.dns_sec))){
				return;
			}
		}

		showLoading(label.saving);
		apiSetWithModule("network", para, function(ret){
			var code = ret[ERR_CODE];
			if (E_NONE == code){
				var time = getMaxWaitTime(ret);
				$.setTimeout(function(){
					closeLoading();

					clearTimeout(statusHd);
					statusHd = $.setTimeout(refreshWanState, 3000);
				}, time * 1000);
			}else{
				handleError(code);
				closeLoading();
			}
		});
	}

	// PPPoE set
	function savePppoe(){
		var wanConf = {};
		var data = {};
		var para = {};

		para.network = {};
		para.network.wan = wanConf;
		wanConf.protocol = 'pppoe';
		wanConf.clone_mode = $("#CloneSwitch").attr("data-value");
		wanConf.mac = $("#MacCloAddr").val();
		wanConf.source_mac = wan.source_mac;

		para.network.pppoe = data;
		data.username = $("#PppoeUser").val();
		data.password = $("#PppoePwd").val();
		if (parseInt(networkSet.dial_type)){
			data.dial_mode = $("#PppoeDiaType").attr("data-value");
		}
		data.server = $("#PppoeServ").val();
		data.mtu = $("#Mtu").val();
		data.dns_mode = $("#Switch").attr("data-value");
		data.dns_pri = $("#SeniorPrimDns").val();
		data.dns_sec = $("#SeniorSecDns").val();
		var checkType = "pppoe";

		if (handleError(checkUserName(data.username, checkType))){
			return;
		}

		if (handleError(checkPassWord(data.password, checkType))){
			return;
		}

		if (handleError(checkServer(data.server, checkType))){
			return;
		}

		if (handleError(checkNetworkMtu(data.mtu, 576, 1492, checkType))){
			return;
		}

		if (macCloneCap && wanConf.clone_mode == "1"){
			if (handleError(checkNetworkMac(wanConf.mac))){
				return;
			}
		}

		if (data.dns_mode == "1"){
			if (handleError(checkNetworkDns(data.dns_pri, data.dns_sec))){
				return;
			}
		}

		showLoading(label.saving);
		apiSetWithModule("network", para, function(ret){
			var code = ret[ERR_CODE];
			if (E_NONE == code){
				var time = getMaxWaitTime(ret);
				$.setTimeout(function(){
					closeLoading();

					clearTimeout(statusHd);
					statusHd = $.setTimeout(refreshWanState, 3000);
				}, time * 1000);
			}else{
				handleError(code);
				closeLoading();
			}
		});
	}

	// PPTP/L2TP set
	function saveVpn(){
		var wanConf = {};
		var data = {};
		var para = {};
		var vpnType;

		para.network = {};
		para.network.wan = wanConf;
		wanConf.protocol = $("#WanType").attr("data-value");
		wanConf.clone_mode = $("#CloneSwitch").attr("data-value");
		wanConf.mac = $("#MacCloAddr").val();
		wanConf.source_mac = wan.source_mac;

		if ("pptp" == $("#WanType").attr("data-value")){
			para.network.pptp = data;
			vpnType = "pptp";
		}else{
			para.network.l2tp = data;
			vpnType = "l2tp";
		}

		data.server = $("#VpnServerIp").val();
		data.username = $("#VpnUser").val();
		data.password = $("#VpnPwd").val();
		data.mtu = $("#Mtu").val();
		data.ip_protocol = ipProtocol;
		if ("1" == ipProtocol){
			data.ip = $("#WanIpaddr").val();
			data.netmask = $("#WanMask").val();
			data.gateway = $("#WanGw").val();
			data.dns_mode = "1";
			data.dns_pri = $("#PrimDns").val();
			data.dns_sec = $("#SecDns").val();
		}else{
			data.dns_mode = $("#Switch").attr("data-value");
			data.dns_pri = $("#SeniorPrimDns").val();
			data.dns_sec = $("#SeniorSecDns").val();
		}

		if (handleError(checkServer(data.server, vpnType))){
			return;
		}

		if (handleError(checkUserName(data.username, vpnType))){
			return;
		}

		if (handleError(checkPassWord(data.password, vpnType))){
			return;
		}

		if ("1" == ipProtocol){
			if(handleError(checkStaticConf(data.ip, data.netmask, data.gateway))){
				return;
			}
		}

		if (wanConf.protocol == "pptp"){
			if (handleError(checkNetworkMtu(data.mtu, 576, 1420, "pptp"))){
				return;
			}
		}else{
			if (handleError(checkNetworkMtu(data.mtu, 576, 1460, "l2tp"))){
				return;
			}
		}

		if (macCloneCap && wanConf.clone_mode == "1"){
			if (handleError(checkNetworkMac(wanConf.mac))){
				return;
			}
		}

		if (data.dns_mode == "1"){
			if (handleError(checkNetworkDns(data.dns_pri, data.dns_sec))){
				return;
			}
		}

		showLoading(label.saving);
		apiSetWithModule("network", para, function(ret){
			var code = ret[ERR_CODE];
			if (E_NONE == code){
				var time = getMaxWaitTime(ret);
				$.setTimeout(function(){
					closeLoading();

					clearTimeout(statusHd);
					statusHd = $.setTimeout(refreshWanState, 3000);
				}, time * 1000);
			}else{
				handleError(code);
				closeLoading();
			}
		});
	}

	function sendConfDatas(){
		var selStr = $("#WanType").attr("data-value");

		switch(selStr){
		case WAN_TYPE_DHCP:
			saveDhcp();
			break;
		case WAN_TYPE_PPPoE:
			savePppoe();
			break;
		case WAN_TYPE_STATIC_IP:
			saveStatic();
			break;
		case WAN_TYPE_PPTP:
		case WAN_TYPE_L2TP:
			saveVpn();
			break;
		default:
			break;
		}
	}

	$("#Save").click(sendConfDatas);


})();
</script>
<div class="help hidden">
	<ul class="help-content">
		<li class="help-head">
			<img class="app-icon" src="/luci-static/images/app-icon/internet.png?_=20191016014108" />
			<span class="help-title">{%label.networkset%}</span>
		</li>
		<li id="Type" class="title"></li>
		<li id="TypeTip" class="content"></li>
		<li class="title">{%helpStr.mtu%}</li>
		<li id="MtuTip" class="content"></li>
		<div id = MacClone>
			<li class="title">{%helpStr.wanMacClone%}</li>
			<li class="content">{%helpStr.wanMacCloneTip%}</li>
		</div>
		<div id = SelfDefDNS>
			<li class="title">{%helpStr.wanSelfDefDNS%}</li>
			<li class="content">{%helpStr.wanSelfDefDNSTip%}</li>
		</div>
		<li class="summary">{%helpStr.specialCharacter%}</li>
	</ul>
</div>
<div class="head-con">
	<img class="app-icon" src="/luci-static/images/app-icon/internet.png?_=20191016014108" />
	<a href="javascript:history.go(-1);" class="head-btn-l">
		<i class="head-btn icon icon_back"></i>
		<span class="head-title">{%label.networkset%}</span>
	</a>
</div>
<div class="set-con below-head">
	<div id="WanSta" class="wan-sta">
		<i class="wan-sta-icon"></i>
		<p class="status-detail"></p>
	</div>
	<div class="btn-con detect hidden">
		<input id="Detect" class="btn" type="button" value="{%btn.autoDetect%}" />
	</div>
	<ul class="set-con">
		<li class="text-con">
			<label class="desc-lbl">{%label.wanType%}</label>
			<span id="WanType" class="select">
				<span class="value sel-value">{%label.wanDHCP%}</span>
				<i class="tip icon_list-expansion"></i>
			</span>
		</li>
	</ul>
	<div id="WanPppoeSet" class="hidden">
		<ul class="set-con dia-type hidden">
			<li class="text-con">
				<label class="desc-lbl">{%label.diaType%}</label>
				<span id="PppoeDiaType" class="select">
					<span class="value sel-value">{%label.diaNormal%}</span>
					<i class="tip icon_list-expansion"></i>
				</span>
			</li>
		</ul>
		<ul class="set-con">
			<li class="text-con">
				<label class="desc-lbl">{%label.pppoeUser%}</label>
				<input id="PppoeUser" class="text hover" maxLength="32" value="" />
			</li>
		</ul>
		<ul class="set-con">
			<li class="text-con">
				<label class="desc-lbl">{%label.pppoePasswd%}</label>
				<input id="PppoePwd" class="text hover" type="password" autocomplete="new-password" maxLength="32" value="" /><i class="tip icon-eye" data-value="0"></i>
			</li>
		</ul>
		<ul class="set-con">
			<li class="text-con">
				<label class="desc-lbl">{%label.serName%}</label>
				<input id="PppoeServ" class="text hover" placeholder="{%label.allowNoWrite%}" maxLength="64" value="" />
			</li>
		</ul>
	</div>
	<div id="WanVpn" class="hidden">
		<ul class="set-con">
			<li class="text-con">
			<label class="desc-lbl">{%label.vpnServer%}</label>
				<input id="VpnServerIp" class="text hover" maxLength="64" value="0.0.0.0" />
			</li>
		</ul>
		<ul class="set-con">
			<li class="text-con">
				<label class="desc-lbl">{%label.vpnName%}</label>
				<input id="VpnUser" class="text hover" maxLength="32" value="" />
			</li>
		</ul>
		<ul class="set-con">
			<li class="text-con">
				<label class="desc-lbl">{%label.vpnPassword%}</label>
				<input id="VpnPwd" class="text hover" type="password" autocomplete="new-password" maxLength="32" value="" /><i class="tip icon-eye" data-value="0"></i>
			</li>
		</ul>
		<ul class="set-con set-con-radio">
			<li class="text-con">
				<label class="desc-lbl"></label>
				<span id="IpProtocol" class="radio-group">
					<span class="radio uncheck">
						<i class="uncheck icon_radiobox_off"></i><i class="checked icon_radiobox_on"></i>
						<label>{%label.dynamicIp%}</label>
					</span>
					<span class="radio radio-r uncheck">
						<i class="uncheck icon_radiobox_off"></i><i class="checked icon_radiobox_on"></i>
						<label>{%label.staticIp%}</label>
					</span>
				</span>
			</li>
		</ul>
	</div>
	<div id="WanStaticSet" class="hidden">
		<ul class="set-con">
			<li class="text-con">
			<label class="desc-lbl">{%label.ipaddr%}</label>
				<input id="WanIpaddr" class="text hover" maxLength="15" value="0.0.0.0" />
			</li>
		</ul>
		<ul class="set-con">
			<li class="text-con">
			<label class="desc-lbl">{%label.netmask%}</label>
				<input id="WanMask" class="text hover" maxLength="15" value="0.0.0.0" />
			</li>
		</ul>
		<ul class="set-con">
			<li class="text-con">
			<label class="desc-lbl">{%label.gateway%}</label>
				<input id="WanGw" class="text hover" maxLength="15" value="0.0.0.0" />
			</li>
		</ul>
		<ul class="set-con">
			<li class="text-con">
			<label class="desc-lbl">{%label.firstDns%}</label>
				<input id="PrimDns" class="text hover" maxLength="15" value="0.0.0.0" />
			</li>
		</ul>
		<ul class="set-con sec-dns">
			<li class="text-con">
			<label class="desc-lbl">{%label.secDns%}</label>
				<input id="SecDns" class="text hover" maxLength="15" value="0.0.0.0" />
			</li>
		</ul>
	</div>
	<ul class="set-con set-second">
		<div class="switch-con high-top">
			<label class="desc-title">{%label.seniorSet%}</label>
			<div class="set-con-middle">
				<span id="SeniorSet" data-expand="0" class="high-set">{%label.openSenior%}</span>
			</div>
		</div>
	</ul>
	<div id="NetworkSenior" class="hidden">
		<ul class="set-con">
			<li class="text-con">
				<label class="desc-lbl">{%label.mtu%}</label>
				<input id="Mtu" class="text hover" placeholder="" maxLength="4" value="" />
			</li>
		</ul>
		<ul id="SeniorMacClone" class="set-con">
			<li class="text-con">
				<label class="desc-lbl">{%label.cloneMac%}</label>
				<span class="set-con-middle">
					<span id="CloneSwitch" class="switch">
						<i class="switch-circle icon_select_off"></i>
					</span>
				</span>
			</li>
		</ul>
		<ul class="set-con" id="CloneParam">
			<li class="text-con">
				<label class="desc-lbl">{%label.nowCloMac%}</label>
				<input id="MacCloAddr" class="text hover" maxLength="17" value="" />
				<span class="mac-clone">{%label.macClone%}</span>
			</li>
		</ul>
		<div id="DnsSet">
			<ul id="SeniorSelfDns" class="set-con">
				<li class="text-con">
					<label class="desc-lbl">{%label.sefDefDns%}</label>
					<span class="set-con-middle">
						<span id="Switch" class="switch">
							<i class="switch-circle icon_select_off"></i>
						</span>
					</span>
				</li>
			</ul>
			<div id="Param" class="hidden">
				<ul class="set-con">
					<li class="text-con">
					<label class="desc-lbl">{%label.firstDns%}</label>
						<input id="SeniorPrimDns" class="text hover" maxLength="15" value="0.0.0.0" />
					</li>
				</ul>
				<ul class="set-con sec-dns">
					<li class="text-con">
					<label class="desc-lbl">{%label.secDns%}</label>
						<input id="SeniorSecDns" class="text hover" maxLength="15" value="0.0.0.0" />
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="err-note hidden">
		<i class="err-icon icon_remind_line"></i>
		<p class="note-str"></p>
	</div>
	<div class="btn-con">
		<input id="Save" class="btn" type="button" value="{%btn.save%}" />
	</div>
</div>