<%+header%>
<script>
	class ModemConfig {
		constructor(cfg_id,title){
			this.cfg_id = cfg_id;
			this.init_view = false;
			this.cbi_map = document.querySelector('.cbi-map');
			this.fieldset = this.create_fieldset(title);
			this.cbi_map.appendChild(this.fieldset);
		}

		update(){
			console.log("update");
		}

		pause(){
			console.log("pause");
		}

		get_config(){
			XHR.get('<%=luci.dispatcher.build_url("admin", "network", "qmodem", "modem_ctrl")%>', 
			{ 
				"cfg": this.cfg_id,
				"action": this.get_action
			},
				(x, data) => {
					this.config = data[this.config_name];
					if (this.cb_get) {
						this.cb_get(data);
					}
				}
			);
		}

		set_config(config){
			XHR.get('<%=luci.dispatcher.build_url("admin", "network", "qmodem", "modem_ctrl")%>', 
			{ 
				"cfg": this.cfg_id,
				"action": this.set_action,
				"params": JSON.stringify(config)
			},
				(x, data) => {
					this.config = data[this.config_name];
					if (this.cb_set) {
						this.cb_set(data);
					}
				}
			);
		}

		create_fieldset(title){
			var fieldset = document.createElement('fieldset');
			fieldset.className = "cbi-section";
			var legend = document.createElement('legend');
			legend.innerHTML = title;
			fieldset.appendChild(legend);
			return fieldset;
		}

		createInput(name,value){
			var input = document.createElement('input');
			input.type = "text";
			input.name = name;
			input.value = value;
			return input;
		}

		createBTN(name,cb){
			var btn = document.createElement('input');
			btn.type = "button";
			btn.value = name;
			btn.addEventListener('click',cb);
			return btn;
		}

		createRadio(name,value){
			var radio = document.createElement('input');
			radio.type = "radio";
			radio.name = name;
			radio.value = value;
			return radio;
		}

		createCheckbox(value){
			var checkbox = document.createElement('input');
			checkbox.type = "checkbox";
			checkbox.value = value;
			return checkbox;
		}

		createTable(){
			let table,tbody;
			table = document.createElement('table');
			table.classList.add("cbi-section-table");
			table.classList.add("table");
			tbody = document.createElement('tbody');
			table.appendChild(tbody);
			return table;
		}

		createDroplist(dict){
			var select = document.createElement('select');
			for (let key in dict) {
				var option = document.createElement('option');
				option.value = key;
				option.innerHTML = dict[key];
				select.appendChild(option);
			}
			return select;
		}

		createTD(innerHTML){
			var td = document.createElement('td');
			td.classList.add("cbi-section-table-cell");
			td.classList.add("td");
			td.classList.add("left");
			if (innerHTML) {
				td.innerHTML = innerHTML;
			}
			return td;
		}

		createTH(innerHTML){
			var th = document.createElement('th');
			th.classList.add("cbi-section-table-cell");
			th.classList.add("th");
			if (innerHTML) {
				th.innerHTML = innerHTML;
			}
			return th;
		}

		createTR(){
			var tr = document.createElement('tr');
			tr.classList.add("cbi-section-table-row");
			tr.classList.add("tr");
			return tr;
		}

		createTRHeader(){
			var tr = document.createElement('div');
			tr.classList.add("tr");
			tr.classList.add("cbi-section-table-titles");
			tr.classList.add("anonymous");
			return tr;
		}

		init_table(){
			var table = this.createTable();
			this.fieldset.appendChild(table);
			this.tbody = table.querySelector('tbody');
		}

		hide(){
			this.fieldset.style.display = "none";
			this.pause();
		}
		
		show(){
			this.fieldset.style.display = "block";
			this.update();
		}
	}

	//锁频功能
	class Lockband extends ModemConfig{
			constructor(cfg_id){
				super(cfg_id,"<%:Lock Band%>");
				this.config_name = "lockband";
				this.get_action = "get_lockband";
				this.set_action = "set_lockband";
				this.lockband_config = {};
				this.checkboxes = {};
				this.available_bandid = {};
				this.band_class_map = {};
				this.init_table();
				this.cb_get = (data) => {
					this.render();
				}
				this.cb_set = (data) => {
					this.get_config();
				}
				this.get_config();
			}

			set lock(config){
				var band_class = config.band_class;
				var band_id = config.band_id;
				if (!this.lockband_config[band_class].includes(band_id)){
					this.lockband_config[band_class].push(band_id)

				}
				this.checkboxes[band_class][band_id].checked = true;
			}

			set unlock(config){
				var band_class = config.band_class;
				var band_id = config.band_id;
				this.lockband_config[band_class] = this.lockband_config[band_class].filter(x => x != band_id);
				//set checkbox
				this.checkboxes[band_class][band_id].checked = false;
			}

			createCheckbox(band_class,band_name,band_id){
				let checkbox = document.createElement('input');
				checkbox.type = "checkbox";
				checkbox.className = "cbi-input-checkbox";
				checkbox.value = band_id;
				checkbox.setAttribute("display-band",band_name);
				checkbox.addEventListener("change",() => {
					if (checkbox.checked){
						this.lock = { "band_class": band_class, "band_id": band_id };
					}
					else{
						this.unlock = { "band_class": band_class, "band_id": band_id };
					}
				});
				
				this.checkboxes[band_class][band_id] = checkbox;
				if (this.lockband_config[band_class].includes(band_id)) {
					this.lock = { "band_class": band_class, "band_id": band_id };
				}
			}
		
			createcheckboxes(band_class){
				var band = this.config[band_class];
				var available_band = band.available_band;
				var lock_band = band.lock_band;
				this.lockband_config[band_class] = lock_band;
				if ( available_band.length == 0) {
					return;
				}
				if (this.checkboxes[band_class] == undefined) {
					this.checkboxes[band_class] = {};
				}
				if (this.available_bandid[band_class] == undefined) {
					this.available_bandid[band_class] = [];
				}
				
				for (let band_cfg of available_band) {
					let band_name = band_cfg.band_name;
					let band_id = band_cfg.band_id;
					if (this.available_bandid[band_class].includes(band_id) == false) {
						this.available_bandid[band_class].push(band_id);
					}
					this.createCheckbox(band_class,band_name,band_id);
				}
			}

			submit(band_class)
			{
				var sorted = this.lockband_config[band_class].sort();
				var config = '';
				for (let band_id of sorted) {
					config += band_id + ",";
				}
				var lockband_cfg = {
					"band_class": band_class,
					"lock_band": config.slice(0,-1)
				}
				var cfg_string = JSON.stringify(lockband_cfg);
				this.set_config(cfg_string);
			}

			select_all(band_class){
				//if all selected, then unselect all
				let lockall = this.lockband_config[band_class].length != this.available_bandid[band_class].length;
				for (let band_id of this.available_bandid[band_class]) {
					if (lockall) {
						this.lock = { "band_class": band_class, "band_id": band_id };
					}
					else{
						this.unlock = { "band_class": band_class, "band_id": band_id };
					}
				}
			}

			render() {
				for (let band_class in this.band_class_map){
					if (this.config[band_class] == undefined) {
						this.band_class_map[band_class].header.style.display = "none";
						this.band_class_map[band_class].tr.style.display = "none";
						this.band_class_map[band_class].select_all_btn.style.display = "none";
						this.band_class_map[band_class].submit_btn.style.display = "none";
					}
					else{
						this.band_class_map[band_class].header.style.display = "";
						this.band_class_map[band_class].tr.style.display = "";
						this.band_class_map[band_class].select_all_btn.style.display = "";
						this.band_class_map[band_class].submit_btn
					}
				}
				for (let band_class in this.config) {
					let header, tr, td, select_all_btn, submit_btn;
					this.createcheckboxes(band_class);
					if (this.band_class_map[band_class] == undefined)
					{
						this.createBandTable(band_class);
					}
					header = this.band_class_map[band_class].header;
					tr = this.band_class_map[band_class].tr;
					select_all_btn = this.band_class_map[band_class].select_all_btn;
					submit_btn = this.band_class_map[band_class].submit_btn
					td = document.createElement('td');
					td.classList.add("cbi-section-table-cell");
					td.classList.add("td")
					td.style.display = "flex";
					td.style.flexWrap = "wrap";
					//clear tr
					while (tr.firstChild) {
						tr.removeChild(tr.firstChild);
					}
					tr.appendChild(td);
					for (let checkbox in this.checkboxes[band_class]) {
						let display_value = this.checkboxes[band_class][checkbox].getAttribute("display-band");
						let span = document.createElement('span');
						span.innerHTML = display_value;
						td.appendChild(this.checkboxes[band_class][checkbox]);
						td.appendChild(span);
					}
				}

			}

			createBandTable(band_class){
				let tr_header, th, tr, td, select_all_btn, submit_btn;
				tr_header = document.createElement('div');
				tr_header.className = "tr cbi-section-table-titles anonymous";
				th = document.createElement('div');
				th.className = "th cbi-section-table-cell";
				th.innerHTML = band_class;
				tr_header.appendChild(th);
				tr = document.createElement('tr');
				tr.className = "tr cbi-section-table-row";
				select_all_btn = this.createBTN("<%:Select All%>", () => {
						this.select_all(band_class);
					});
				submit_btn = this.createBTN("<%:Submit%>", () => {
						this.submit(band_class);
					});
				this.band_class_map[band_class] = {
						"header": tr_header,
						"tr": tr,
						"select_all_btn": select_all_btn,
						"submit_btn": submit_btn
					}
				this.tbody.appendChild(tr_header);
				this.tbody.appendChild(tr);
				this.tbody.appendChild(select_all_btn);
				this.tbody.appendChild(submit_btn);

			}

			update() {
				console.log(JSON.stringify(this.lockband_config));
				console.log(JSON.stringify(this.available_bandid));
				console.log(JSON.stringify(this.band_class_map));
				console.log(JSON.stringify(this.config));
				this.get_config();
			}

	}

	class RatPrefer extends ModemConfig {
		constructor(cfg_id){
			super(cfg_id,"<%:Rat Prefer%>");
			this.config_name = "network_prefer";
			this.get_action = "get_network_prefer";
			this.set_action = "set_network_prefer";
			this.selected_rat = [];
			this.available_rat = [];
			this.init_table();
			this.create_submit_btn();
			}

		cb_get(data){
				//clear selected_rat
				this.selected_rat = [];
				//clear available_rat
				this.available_rat = [];
				for (let key in this.config){
					
					if (this.config[key] == 1) {
						this.selected_rat.push(key);
					}
					this.available_rat.push(key);

				}
				
				this.render_checkbox();
				this.render_current_mode();
			}
		cb_set(data){
				this.get_config();
			}

		render_current_mode(){
			let selected_mode = []
			for (let rat in this.config) {
				if (this.config[rat] == 1) {
					selected_mode.push(rat);
				}
			}
			this.current_mode = selected_mode.join(',');
			this.current_mode_td.innerHTML = this.current_mode;
		}

		render_checkbox(){
			if (this.init_view == false) {
				this.init_ele();
				this.init_view = true;
			}
			this.createCheckboxes();
		}

		create_submit_btn(){
			var submit_btn = this.createBTN("<%:Submit%>",() => {
				this.submit();
			});
			this.fieldset.appendChild(submit_btn);
		}

		createCheckbox(rat){
			var checkbox = document.createElement('input');
			checkbox.type = "checkbox";
			checkbox.value = rat;
			checkbox.addEventListener('change',() => {
				if (checkbox.checked) {
					this.selected_rat.push(rat);
				}
				else{
					this.selected_rat = this.selected_rat.filter(x => x != rat);
				}
			});
			return checkbox;
		}

		createCheckboxes(){
			//clear select_td
			while (this.select_td.firstChild) {
				this.select_td.removeChild(this.select_td.firstChild);
			}
			var network_prefer = this.config;
			for (let rat of this.available_rat) {
				var checkbox = this.createCheckbox(rat);
				if (this.selected_rat.includes(rat)) {
					checkbox.checked = true;
				}
				var span = document.createElement('span');
				span.innerHTML = rat;
				this.select_td.appendChild(checkbox);
				this.select_td.appendChild(span);
			}
		}

		update(){
			this.get_config();
		}

		submit(){
			this.set_config(JSON.stringify(this.selected_rat));
		}

		init_ele(){
			var header_tr,current_mode_th,select_th,setting_tr,current_mode_td,select_td;
			header_tr = this.createTRHeader();
			current_mode_th = this.createTH("<%:Current Mode%>");
			select_th = this.createTH("<%:Setting%>");
			setting_tr = this.createTR();
			current_mode_td = this.createTD();
			select_td = this.createTD();
			header_tr.appendChild(current_mode_th);
			header_tr.appendChild(select_th);
			setting_tr.appendChild(current_mode_td);
			setting_tr.appendChild(select_td);
			this.tbody.appendChild(header_tr);
			this.tbody.appendChild(setting_tr);
			this.current_mode_td = current_mode_td;
			this.select_td = select_td;

		}
	}
	
	class DialMode extends ModemConfig {
		constructor(cfg_id){
			super(cfg_id,"<%:Dial Mode%>");
			this.config_name = "mode";
			this.get_action = "get_mode";
			this.set_action = "set_mode";
			this.avalibale_mode = [];
			this.selected_mode = null;
			this.init_table();
			this.td_map = {
				"current_mode": null,
				"radio_div": null,
			}
			this.cb_get = (data) => {
				this.render();
			}
			this.cb_set = (data) => {
				this.get_config();
			}
			this.get_config();
			
		}

		render(){
			if (this.td_map["current_mode"] == null) {
				this.init_ele();
			}

			for (let key in this.config){
				if (this.avalibale_mode.includes(key) == false)
				{
					this.avalibale_mode.push(key);
				}
				if (this.config[key] == 1) {
					this.selected_mode = key;
					this.td_map.current_mode.innerHTML = key;
				}
			}
			this.create_mode_radio();
			
		}

		init_ele(){
			var radio_div_th, current_mode_th, radio_div, current_mode, header_tr, setting_tr;
			header_tr = document.createElement('div');
			header_tr.className = "tr cbi-section-table-titles anonymous";
			radio_div_th = document.createElement('div');
			radio_div_th.className = "th cbi-section-table-cell";
			radio_div_th.innerHTML = "<%:Dial Mode%>";
			current_mode_th = document.createElement('div');
			current_mode_th.className = "th cbi-section-table-cell";
			current_mode_th.innerHTML = "<%:Current Mode%>";
			setting_tr = document.createElement('div');
			setting_tr.className = "tr cbi-section-table-row";
			radio_div = document.createElement('div');
			radio_div.className = "td cbi-section-table-cell left";
			current_mode = document.createElement('div');
			current_mode.className = "td cbi-section-table-cell left";
			header_tr.appendChild(current_mode_th);
			header_tr.appendChild(radio_div_th);
			
			setting_tr.appendChild(current_mode);
			setting_tr.appendChild(radio_div);
			
			this.tbody.appendChild(header_tr);
			this.tbody.appendChild(setting_tr);
			this.td_map["radio_div"] = radio_div;
			this.td_map["current_mode"] = current_mode;
			this.mode_btn = this.createBTN("<%:Submit%>",() => {
				this.set_config(this.selected_mode);
			});
			this.tbody.appendChild(this.mode_btn);
		}

		create_mode_radio(){
			while (this.td_map.radio_div.firstChild) {
					this.td_map.radio_div.removeChild(this.td_map.radio_div.firstChild);
				}
			for (let mode of this.avalibale_mode) {
				let radio = this.createRadio("mode",mode);
				if (mode == this.selected_mode) {
					radio.checked = true;
				}
				radio.addEventListener('change',() => {
					this.selected_mode = mode;
				});
				
				let span = document.createElement('span');
				span.innerHTML = mode;
				//clear radio_div
				
				this.td_map.radio_div.appendChild(radio);
				this.td_map.radio_div.appendChild(span);
			}
			
		}
	
		update(){
			this.get_config();
		}
	}

	class NeighborCell extends ModemConfig {
		constructor(cfg_id){
			super(cfg_id,"<%:Neighbor Cell%>");
			this.config_name = "neighborcell";
			this.get_action = "get_neighborcell";
			this.set_action = "set_neighborcell";
			this.task = null;
			this.init_nc_table();
			this.get_config();
			
		}
		
		pause(){
			if (this.task != null) {
				clearInterval(this.task);
			}
		}

		update(){
			this.task = setInterval(() => {
				this.get_config();
			},10000);
		}

		nr_options(){
				if (this.rat_input.selectedIndex == 0) {
					this.band_tr.style.display = "none";
					this.scs_tr.style.display = "none";
				}
				else{
					this.band_tr.style.display = "";
					this.scs_tr.style.display = "";
				}
			}

		init_nc_table(){
			var neighborcell_table,setting_table,status_table ;
			neighborcell_table = this.createTable();
			status_table = this.createTable();
			setting_table = this.createTable();
			
			this.fieldset.appendChild(neighborcell_table);
			this.fieldset.appendChild(status_table);
			this.fieldset.appendChild(setting_table);

			this.neighborcell_table = neighborcell_table.querySelector('tbody');
			this.status_table = status_table.querySelector('tbody');
			this.setting_table = setting_table.querySelector('tbody');

			var pci_tr,arfcn_tr,band_tr,scs_tr,header,td,td1,th,pci_input,arfcn_input,band_input,scs_input,rat_input,rat_tr;
			var status_th,status_trh;
			header = this.createTRHeader();
			th = this.createTH("<%:Lock Cell Setting%>");
			header.appendChild(th);

			rat_input = this.createDroplist({0:"LTE",1:"NR"});
			rat_tr = this.createTR();
			td = this.createTD("<%:RAT%>");
			td1 = this.createTD();
			td1.appendChild(rat_input);
			rat_tr.appendChild(td);
			rat_tr.appendChild(td1);


			pci_tr = this.createTR();
			td = this.createTD("<%:PCI%>");
			pci_input = this.createInput("pci","");
			td1 = this.createTD();
			td1.appendChild(pci_input);
			pci_tr.appendChild(td);
			pci_tr.appendChild(td1);

			arfcn_tr = this.createTR();
			td = this.createTD("<%:ARFCN%>");
			arfcn_input = this.createInput("arfcn","");
			td1 = this.createTD();
			td1.appendChild(arfcn_input);
			arfcn_tr.appendChild(td);
			arfcn_tr.appendChild(td1);
			
			band_tr = this.createTR();
			td = this.createTD("<%:Band%>");
			band_input = this.createInput("band","");
			td1 = this.createTD();
			td1.appendChild(band_input);
			band_tr.appendChild(td);
			band_tr.appendChild(td1);

			scs_tr = this.createTR();
			td = this.createTD("<%:SCS%>");
			scs_input = this.createDroplist({0:"15KHZ",1:"30KHZ"});
			td1 = this.createTD();
			td1.appendChild(scs_input);
			scs_tr.appendChild(td);
			scs_tr.appendChild(td1);

			
			status_th = this.createTH("<%:Status%>");
			status_trh = this.createTRHeader();
			status_trh.appendChild(status_th);
			this.status_table.appendChild(status_trh);

			this.pci_input = pci_input;
			this.arfcn_input = arfcn_input;
			this.band_input = band_input;
			this.scs_input = scs_input;
			this.rat_input = rat_input;
			this.band_tr = band_tr;
			this.scs_tr = scs_tr;
			this.band_tr.style.display = "none";
			this.scs_tr.style.display = "none";
			this.rat_input.addEventListener('change',()=>{
				this.nr_options();
			});

			var submit_btn = this.createBTN("<%:Submit%>",() => {
				var config = {
					"rat": this.rat_input.selectedIndex,
					"pci": this.pci_input.value,
					"arfcn": this.arfcn_input.value,
					"band": this.band_input.value,
					"scs": this.scs_input.selectedIndex
				}
				this.set_config(JSON.stringify(config));
			});

			this.setting_table.appendChild(header);
			this.setting_table.appendChild(rat_tr);
			this.setting_table.appendChild(pci_tr);
			this.setting_table.appendChild(arfcn_tr);
			this.setting_table.appendChild(band_tr);
			this.setting_table.appendChild(scs_tr);
			this.setting_table.appendChild(submit_btn);
		}

		render_neighborcell(){
			//clear neighborcell_table
			while (this.neighborcell_table.querySelector("tr")) {
				let remove = this.neighborcell_table.querySelector("tr")
				this.neighborcell_table.removeChild(remove);
			}
			var nr,lte,tr_left
			nr = this.config.NR;
			lte = this.config.LTE;
			for (let cell_info of nr) {
					this.create_nc_tr(1,cell_info);
				}
			for (let cell_info of lte) {
				this.create_nc_tr(0,cell_info);
			}

		}

		render_status(){
			//clear status_table
			while (this.status_table.querySelector("tr")) {
				this.status_table.removeChild(this.status_table.querySelector("tr"));
			}
			var status = this.config.lockcell_status;
			for (let key in status) {
				if (status[key] != ""){
					this.create_status_tr(key + ":" + status[key].toUpperCase());
				}
			}
		}

		create_status_tr(status){
			var tr = this.createTR();
			var td = this.createTD(status);
			tr.appendChild(td);
			this.status_table.appendChild(tr);
		}

		create_nc_tr(rat,cell_info){
			if (rat == 0) {
				var text = "LTE:";
			}
			else{
				var text = "NR:";
			}
			for (let key in cell_info) {
				if (cell_info[key] != ""){
					text += key + ":" + cell_info[key] + " ";
				}	
			}
			let tr_left = this.createTD(text);
			let tr_right = this.create_copy_btn_td(rat,cell_info.pci,cell_info.arfcn);
			let tr = this.createTR();
			tr.appendChild(tr_left);
			tr.appendChild(tr_right);
			this.neighborcell_table.appendChild(tr);
		}

		create_copy_btn_td(rat,pci,arfcn){
			var copy_btn = this.createBTN("<%:Copy%>",() => {
				this.pci_input.value = pci;
				this.arfcn_input.value = arfcn;
				this.rat_input.selectedIndex = rat;
				this.nr_options()
			});
			var td = document.createElement('td');
			td.className = "td cbi-section-table-cell left";
			td.setAttribute("width","10%");
			td.appendChild(copy_btn);
			
			return td;
		}

		cb_get(){
			this.render_neighborcell();
			this.render_status();
		}

		
	}

	class IMEI extends ModemConfig {
		constructor(cfg_id){
			super(cfg_id,"<%:Set IMEI%>");
			this.config_name = "imei";
			this.get_action = "get_imei";
			this.set_action = "set_imei";
			this.get_config();
			this.render();
		}

		render(){
			this.imei_input = this.createInput("imei",this.config);
			this.imei_btn = this.createBTN("<%:Submit%>",() => {
				this.set_config(this.imei_input.value);
			});
			this.fieldset.appendChild(this.imei_input);
			this.fieldset.appendChild(this.imei_btn);
		}

		cb_get(){
			this.imei_input.value = this.config;
		}

		cb_set(){
			this.imei_input.value = this.config;
		}

		update(){
			this.get_config();
		}
		
	}

	class Select_Modem {
		constructor(){
			this.modem_selector = document.getElementById('modem_selector');
			this.cfg_id = null;
			this.modem_cfg_list = [];
			this.create_modem_cfg_selector();
			this.update_modem_cfg_list();
		}
		
		create_modem_cfg_selector() {
			var selector = document.createElement('select');
			selector.addEventListener('change', (event) => {
				this.cfg_id = event.target.value;
				this.update_cfg_id(this.cfg_id);
			});
			this.modem_selector.appendChild(selector);
			this.selector = selector;
		}

		update_modem_cfg_list() {
			XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "network", "qmodem", "get_modem_cfg")%>', {}, (x, data) => {
				var new_cfg_list = [];
				var cfgs = data.cfgs;
				for (let i = 0; i < cfgs.length; i++) {
					var cfg = cfgs[i];
					var name = cfg.name;
					var value = cfg.cfg;
					new_cfg_list.push({ "value": value, "name": name });
				}
				if (JSON.stringify(new_cfg_list) != JSON.stringify(this.modem_cfg_list)) {
					console.log(this.modem_cfg_list)
					console.log(new_cfg_list)
					this.cfg_options = new_cfg_list;
					console.log("update_cfg_list")
				}
			});
		}

		set cfg_options(value) {
			var longger = this.modem_cfg_list.length > value.length ? this.modem_cfg_list : value;
			if (longger.length == 0) {
				return;
			}
			for (let i = 0; i < longger.length; i++) {
				var option = this.selector.options[i];
				if (i < value.length) {
					if (i >= this.selector.options.length) {
						option = document.createElement('option');
						this.selector.appendChild(option);
					}
					option.value = value[i].value;
					option.innerHTML = value[i].name;

				}
				else {
					this.selector.removeChild(option);
				}
			}
			this.cfg_id = this.selector.value;
			this.modem_cfg_list = value;
			this.update_cfg_id(this.cfg_id);
		}
	}

	class TabMenu extends Select_Modem {
		functions = {
				"DialMode": {"class": DialMode, "name":"<%:Dial Mode%>"},
				"RatPrefer": {"class": RatPrefer, "name":"<%:Rat Prefer%>"},
				"IMEI": {"class": IMEI, "name": "<%:Set IMEI%>"},
				"NeighborCell": {"class": NeighborCell, "name": "<%:Neighbor Cell%>"},
				"LockBand": {"class": Lockband, "name":"<%:Lock Band%>"}
			}
		constructor(){
			super();
			this.cbi_map = document.querySelector('.cbi-map');
			this.class_map = {};
			this.datatabs = [];
			this.create_tabmenu();
			
		}

		update_cfg_id(cfg_id){
			for (let key in this.class_map) {
				this.class_map[key].cfg_id = cfg_id;
			}
			//check if all datatab not selected
			for (let tab of this.datatabs) {
				if (tab.className == "cbi-tab") {
					this.switch_tab(tab);
					return;
				}
			}
			this.switch_tab(this.datatabs[0]);
		}

		create_tabmenu(){
			//add support function to tabmenu
			var tabmenu = document.createElement('ul');
			tabmenu.className = "cbi-tabmenu";
			for (let key in this.functions) {
				var li = document.createElement('li');
				li.className = "cbi-tab-disabled";
				li.innerHTML = this.functions[key].name;
				li.setAttribute("data-tab", key);
				li.addEventListener('click', (event) => {
					this.switch_tab(event.target)
				});
				tabmenu.appendChild(li);
				this.datatabs.push(li);
			}
			this.cbi_map.appendChild(tabmenu);
			this.tabmenu = tabmenu;
		}

		switch_tab(target){
			
			target.className = "cbi-tab";
			target.style.display = "";
			var datatab = target.getAttribute("data-tab");
			for (let i = 0; i < this.datatabs.length; i++) {
				if (this.datatabs[i] != target) {
					this.datatabs[i].className = "cbi-tab-disabled";
				}
			}

			if (this.class_map[datatab] == undefined) {
				this.class_map[datatab] = new this.functions[datatab].class(this.cfg_id);
			}
			for (let key in this.class_map) {
				this.class_map[key].hide();
			}
			this.class_map[datatab].show();
		}

	
	}

	
	window.onload = function(){
		var tabmenu = new TabMenu();
	}

</script>
<style>
	.cbi-tabmenu li {
		padding: 0.5rem;
	}
</style>
<div class="cbi-map">
	<fieldset class="cbi-section">
		<table class="table">
			<tbody>
				<tr class="tr">
					<td class="td" width="33%"><%:Modem Name%></td>
					<td class="td" id="modem_selector">

					</td>
				</tr>
			</tbody>
		</table>
	</fieldset>
</div>
<%+footer%>
