<style type="text/css">li.multi-sel{height:36px}li.set-summer-time{width:75px;margin-left:3px}li.first-select{margin-left:0}li.text-con span.select-time{width:60px;padding:0 5px}li.text-con span.set-time{width:58px}li.select-first{margin-left:0}#sel-opts-ulSetStartMonth{width:100%}#sel-opts-ulSetStartWeekNum{width:100%}#sel-opts-ulSetStartWeek{width:100%}#sel-opts-ulSetStartHour{width:100%}#sel-opts-ulSetEndMonth{width:100%}#sel-opts-ulSetEndWeekNum{width:100%}#sel-opts-ulSetEndWeek{width:100%}#sel-opts-ulSetEndHour{width:100%}li.set-summer-time li.option span{padding:0 1px}</style>
<script type="text/javascript">
(function(){
	<%
		local dev_para = {
			dev_feature = {summer_time = {}}
		}
		local dev_result = tpl_get_data(dev_para)
		local summer_time_cap = dev_result[K_MODULE].dev_feature.summer_time.support

		local para = {
			time_zone = {config = {}}
		}

		if "1" == summer_time_cap then
			para.time_zone["summer_time_config"] = {}
		end
		local data = tpl_get_data(para, true)
	-%>

	var timeZoneInfo = <%=data%>;
	var summerTimeCap = "<%=summer_time_cap%>";

	var areaList = TIMEZONE.getAreaList();

	var regionListAll = TIMEZONE.getRegionListAll();

	function init(result){
		var errNo = result[ERR_CODE];
		var ret;
		if (E_NONE == errNo){
			ret = result[K_MODULE];
		}else{
			console.log(result);
			return;
		}

		var time_zone = ret.time_zone.config;

		var selRegion = id("Region");

		initSelect("Region", regionListAll, time_zone.region);

		initSelect("Area", areaList, time_zone.area, function(val, init){
			var regionList = TIMEZONE.getRegionList(val);
			if (ROUTER.areaList.length == 1){
				id("Area").disable(true);
			}

			if (init){
				selRegion.resetOptions(regionList, time_zone.region);
			}else{
				selRegion.resetOptions(regionList, regionList[0].value);
			}
		});

		if("1" == summerTimeCap){
			var summerTime = ret.time_zone.summer_time_config;
			initSwitch("SummerTimeSwitch", summerTime.enable);

			var month = [label.January, label.February, label.March, label.April, label.May, label.June, label.July, label.August, label.September, label.October, label.November, label.December];
			var weekNum = [label.weekFirst, label.week2nd, label.week3rd, label.week4th, label.weekLast];
			var week = [label.Sunday, label.Monday, label.Tuesday, label.Wednesday, label.Thursday, label.Friday, label.Saturday];
			var hour = [];
			for(var i = 0; i < 24; i ++){
				if(i < 12){
					hour[i] = (i) + label.am;
				}else{
					hour[i] = (i - 12) + label.pm;
				}
			}

			var monthTip = nameToValue(month, true);
			var weekNumTip = nameToValue(weekNum, true);
			var weekTip = nameToValue(week);
			var hourTip = nameToValue(hour);

			initSelect("SetStartMonth", monthTip, summerTime.start_month);
			initSelect("SetStartWeekNum", weekNumTip, summerTime.start_week_num);
			initSelect("SetStartWeek", weekTip, summerTime.start_week);
			initSelect("SetStartHour", hourTip, summerTime.start_hour);
			initSelect("SetEndMonth", monthTip, summerTime.end_month);
			initSelect("SetEndWeekNum", weekNumTip, summerTime.end_week_num);
			initSelect("SetEndWeek", weekTip, summerTime.end_week);
			initSelect("SetEndHour", hourTip, summerTime.end_hour);
		}else{
			$("#SummerTimeSet").hide();
		}
	}

	init(timeZoneInfo);

	function nameToValue(name, startFrom1){
		var len = name.length;
		var data = [];
		for(var i = 0; i < len; i++){
			data[i] = {};
			data[i].name = name[i];
			data[i].value = startFrom1?(i+1):i;
		}
		return data;
	}

	$("#Save").click(function(){
		closeNote();
		var data = {};
		var para = {};
		para.time_zone = {};
		para.time_zone.config = data;
		data.area = $("#Area").attr("data-value");
		data.region = $("#Region").attr("data-value");

		if("1" == summerTimeCap){
			var summer_time = {};
			para.time_zone.summer_time_config = summer_time;

			summer_time.enable = $("#SummerTimeSwitch").attr("data-value");
			if(summer_time.enable == 1){
				summer_time.start_month = $("#SetStartMonth").attr("data-value");
				summer_time.start_week_num = $("#SetStartWeekNum").attr("data-value");
				summer_time.start_week = $("#SetStartWeek").attr("data-value");
				summer_time.start_hour = $("#SetStartHour").attr("data-value");
				summer_time.end_month = $("#SetEndMonth").attr("data-value");
				summer_time.end_week_num = $("#SetEndWeekNum").attr("data-value");
				summer_time.end_week = $("#SetEndWeek").attr("data-value");
				summer_time.end_hour = $("#SetEndHour").attr("data-value");
			}
		}

		showLoading(label.saving);
		apiSet(para, function(ret){
			var code = ret[ERR_CODE];
			if (E_NONE == code){
				$.setTimeout(function(){
					closeLoading();
				}, ret[K_MODULE].time_zone.config.wait_time * 1000);
			}else{
				closeLoading();
				handleError(code);
			}
		});
	});
})();
</script>
<div class="help hidden">
	<ul class="help-content">
		<li class="help-head">
			<img class="app-icon" src="/luci-static/images/app-icon/timezone.png?_=20170531153345" />
			<span class="help-title">{%label.regionTimeZone%}</span>
		</li>
		<li class="summary">{%helpStr.timeZone%}</li>
	</ul>
</div>
<div class="head-con">
	<img class="app-icon" src="/luci-static/images/app-icon/timezone.png?_=20170531153345" />
	<a href="javascript:history.go(-1);" class="head-btn-l">
		<i class="head-btn icon icon_back"></i>
		<span class="head-title">{%label.regionTimeZone%}</span>
	</a>
</div>
<div class="set-con below-head">
	<ul class="set-con">
		<li class="text-con">
			<label class="desc-lbl">{%label.region%}</label>
			<span id="Area" class="select">
				<span class="value sel-value"></span>
				<i class="tip icon_list-expansion"></i>
			</span>
		</li>
	</ul>
	<ul class="set-con">
		<li class="text-con">
			<label class="desc-lbl">{%label.timeZone%}</label>
			<span id="Region" class="select">
				<span class="value sel-value"></span>
				<i class="tip icon_list-expansion"></i>
			</span>
		</li>
	</ul>
	<div id="SummerTimeSet">
		<ul class="set-con">
			<li class="text-con">
				<label class="desc-lbl">{%label.summerTime%}</label>
				<span class="set-con-middle">
					<span id="SummerTimeSwitch" class="switch">
						<i class="switch-circle icon_select_off"></i>
					</span>
				</span>
			</li>
		</ul>
		<ul class="set-con">
			<li class="text-con multi-sel">
				<label class="desc-lbl desc-time">{%label.enableTime%}</label>
				<li class="text-con set-summer-time first-select">
					<span id="SetStartMonth" class="select select-time">
						<span class="value sel-value set-time"></span>
						<i class="tip icon_list-expansion"></i>
					</span>
				</li>
				<li class="text-con set-summer-time">
					<span id="SetStartWeekNum" class="select select-time">
						<span class="value sel-value set-time"></span>
						<i class="tip icon_list-expansion"></i>
					</span>
				</li>
				<li class="text-con set-summer-time">
					<span id="SetStartWeek" class="select select-time">
						<span class="value sel-value set-time"></span>
						<i class="tip icon_list-expansion"></i>
					</span>
				</li>
				<li class="text-con set-summer-time">
					<span id="SetStartHour" class="select select-time">
						<span class="value sel-value set-time"></span>
						<i class="tip icon_list-expansion"></i>
					</span>
				</li>
			</li>
		</ul>
		<ul class="set-con">
			<li class="text-con multi-sel">
				<label class="desc-lbl desc-time">{%label.disableTime%}</label>
				<li class="text-con set-summer-time first-select">
					<span id="SetEndMonth" class="select select-time">
						<span class="value sel-value set-time"></span>
						<i class="tip icon_list-expansion"></i>
					</span>
				</li>
				<li class="text-con set-summer-time">
					<span id="SetEndWeekNum" class="select select-time">
						<span class="value sel-value set-time"></span>
						<i class="tip icon_list-expansion"></i>
					</span>
				</li>
				<li class="text-con set-summer-time">
					<span id="SetEndWeek" class="select select-time">
						<span class="value sel-value set-time"></span>
						<i class="tip icon_list-expansion"></i>
					</span>
				</li>
				<li class="text-con set-summer-time">
					<span id="SetEndHour" class="select select-time">
						<span class="value sel-value set-time"></span>
						<i class="tip icon_list-expansion"></i>
					</span>
				</li>
			</li>
		</ul>
	</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>