<script id="upMenuTemplate" type="text/x-handlebars-template">
   <a href="#pgm{{ num }}" data-toggle="tab">{{ name }}</a>
</script>

<script id="upMorelistTemplate" type="text/x-handlebars-template">
	<div class="{{ cls }}">{{ name }}</div>
</script>

<script id="upHotkeyListTemplate" type="text/x-handlebars-template">
   {{#if hotkey}}
       {{hotkey_func hotkey}}
   {{/if}}
</script>

<script id="pgmupTemplate" type="text/x-handlebars-template">
   {{#if header}}
       {{key_func key}} {{header_func header}}
   {{/if}}
   {{#if table}}
       {{key_func key}} {{table_func table tbl_type tr_type}}
   {{/if}}
   {{#if th}}
       {{key_func key}} {{head_func th type}}
   {{/if}}
   {{#if tr}}
       {{key_func key}} {{item_func tr type}}
   {{/if}}
   {{#if struct}}
       {{key_func key}} {{struct_func struct}}
   {{/if}}
   {{#if variable_data}}
       {{key_func key}} {{variable_func variable_data}}
   {{/if}}
</script>

<script>
	var cur_key = '';
	
   Handlebars.registerHelper('key_func', function(key) {
       cur_key = key;
   });
	
	Handlebars.registerHelper('header_func', function(item) {
		var str = '';
		_.each(item, function(header) {
			if(header.btn) {
				str += "<div class='" + header.btn_type + "'><span class='btn_txt'>"+header.btn+"</span></div>";
			} else if(header.textfield) {
				str += "<input type='text' name="+header.name+" class='"+header.type+"' maxlength="+header.textfield[0].max+" size="+header.textfield[0].size+" placeholder='"+header.note+"' value='"+header.value+"'>";
			} else if(header.text) {
				if(header.name) {
					str += "<span name="+header.name+">"+header.value+"</span>";
				} else {
					str += header.text;
				}
			}
		});
		$('.up_pgm_header').append(str);
   });
   
	Handlebars.registerHelper('table_func', function(item, tbl_type, tr_type) {
		$(".up_pgm_pane").append("<table class='table'><tr key="+cur_key+"></tr></table>");

		_.each(item, function(th) {
			make_th_func(th);
		});
		
		if (tbl_type && tbl_type.length) {
			$(".up_pgm_pane table:last").addClass(tbl_type);
		}
		
		if (tr_type && tr_type.length) {
			$(".up_pgm_pane tr:last").addClass(tr_type);
		}
	});
   
	Handlebars.registerHelper('head_func', function(item, type) {
		$(".up_pgm_pane tr:last").after("<tr key='"+cur_key+"'></tr>");

		_.each(item, function(th) {
			make_th_func(th);
		});
		
		if (type && type.length) {
			$(".up_pgm_pane tr:last").addClass(type);
		}
	});
	
	function make_th_func(th) {
		var str = '';

		if(th.label) {
			if(th.name) {
				str = th.value;
			} else {
				str = th.label;
			}
		} else if(th.radio) {
			str = "<input type='radio' name="+th.name+" class="+th.radio_type+" value='"+th.radio[0].value+"'>";
		}

		if(th.colspan) {
			str = "<th colspan="+th.colspan+">"+str+"</th>";
			$('.up_pgm_pane tr:last').append(str);
		} else if(th.cont) {
			$('.up_pgm_pane th:last').append(str);
		} else {
			str = "<th>"+str+"</th>";
			$('.up_pgm_pane tr:last').append(str);
		}
		
		if(th.note) {
			$('.up_pgm_pane tr:last th:last').append("<div class='note'>"+th.note+"</div>");
		}
		
		if(th.hidden) {
			$('.up_pgm_pane tr:last th:last').css("display","none");
		}
		
		if(th.radio) {
			if(th.value) {
				_.each($(".up_pgm_pane [name="+th.name+"]"), function(radio) {
					if(radio.value == th.value) {
						radio.checked = true;
					}
				});
			}
		}
		
		if(th.error) {
			if (th.error == "DA") {
				if($('.up_pgm_pane tr:last th:last').find('[name='+th.name+']').length) {
					$('.up_pgm_pane tr:last th:last').find('[name='+th.name+']').attr('disabled','disabled');
				}
			} else if (th.error == "HD") {
				$('.up_pgm_pane tr:last th:last').find('td:last').css("display","none");
			} else {
				if($('.up_pgm_pane tr:last th:last').find('[name='+th.name+']').length) {
					$('.up_pgm_pane tr:last th:last').find('[name='+th.name+']').addClass('error');
					if(td.error != "no_msg") {
						if(langs.up_error_msg[th.error]) {
							$('.up_pgm_pane tr:last th:last').find('[name='+th.name+']').after("<div class='error_txt'>"+langs.getText("up_error_msg",th.error)+"</div>");
						} else {
							$('.up_pgm_pane tr:last th:last').find('[name='+th.name+']').after("<div class='error_txt'>"+langs.getText("up_error_msg","error")+"</div>");
						}
					}
				}
			}
		}
		
		if(th.cell_type && th.cell_type.length) {
			$('.up_pgm_pane tr:last th:last').addClass(th.cell_type);
		}
	}
	
   var tmp_tr = null;
   
	Handlebars.registerHelper('item_func', function(item, type) {
		tmp_tr = $("<tr/>");

		_.each(item, function(td) {
			make_td_func(td);
		});

		$(".up_pgm_pane tr:last").after(tmp_tr);

		if(cur_key) {
			$(".up_pgm_pane tr:last").attr("key",cur_key);
		}
		
		if (type && type.length) {
			$(".up_pgm_pane tr:last").addClass(type);
		}
	});
	
	Handlebars.registerHelper('struct_func', function(items) {
		_.each(items, function(item, i) {
			if(item.tr) {
				tmp_tr = $("<tr/>");

				_.each(item.tr, function(td) {
					make_td_func(td);
				});

				$(".up_pgm_pane tr:last").after(tmp_tr);
			} else if(item.th) {
				$(".up_pgm_pane tr:last").after("<tr></tr>");
				
				_.each(item.th, function(th) {
					make_th_func(th);
				});
			}

			if((i == 0) && cur_key) {
				$(".up_pgm_pane tr:last").attr("key",cur_key);
			}
			
			if (item.type && item.type.length) {
				$(".up_pgm_pane tr:last").addClass(item.type);
			}
		});
	});
	
Handlebars.registerHelper('variable_func', function(items) {
	_.each(items, function(item) {
		if(item.struct) {
			_.each(item.struct, function(row) {
				if(row.tr) {
					tmp_tr = $("<tr/>");

					_.each(row.tr, function(td) {
						make_td_func(td);
					});

					$(".up_pgm_pane tr:last").after(tmp_tr);
				} else if(row.th) {
					$(".up_pgm_pane tr:last").after("<tr></tr>");
					
					_.each(row.th, function(th) {
						make_th_func(th);
					});
				}
				
				if (row.type && row.type.length) {
					$(".up_pgm_pane tr:last").addClass(row.type);
				}
			});
		} else if(item.tr) {
			tmp_tr = $("<tr/>");

			_.each(item.tr, function(td) {
				make_td_func(td);
			});

			$(".up_pgm_pane tr:last").after(tmp_tr);
		} else if(item.th) {
			$(".up_pgm_pane tr:last").after("<tr></tr>");

			_.each(item, function(th) {
				make_th_func(th);
			});
		}
		
		if (item.type && item.type.length) {
			$(".up_pgm_pane tr:last").addClass(item.type);
		}
	});
});
	
	function make_td_func(td) {
		var str = '';
		var colspan = 0;

		if(td.show === 0) {
			if(td.select) {
				_.each(td.select, function (opt) {
					if(opt.value === td.value) {
						str = opt.option;  
					}
				});
			} else if(td.textfield) {
				str = td.value;
			}
			
			if(td.send) {
				str += "<input type='hidden' name='"+td.name+"' value='"+td.value+"'>";
			}
		} else {
			if(td.label) {
				if(td.name) {
					str = td.value;
				} else {
					str = td.label;
				}
			} else if(td.select) {
				var tmp = '';
				_.each(td.select, function (opt) {
					if(opt.value === td.value)  
						tmp += "<option value="+opt.value+" selected>"+opt.option+"</option>"; 
					else    		        
						tmp += "<option value="+opt.value+">"+opt.option+"</option>"; 
				});

				str = "<select name="+td.name+" class='"+td.sel_type+"'>"+tmp+"</select>";
			} else if(td.textfield) {
				str = "<input type='text' name="+td.name+" maxlength="+td.textfield[0].max+" size="+td.textfield[0].size+" value='"+td.value.replace(/\'/g,'&#39;')+"'>";
			} else if(td.chk) {
				str = "<input type='checkbox' name='"+td.name+"' class='"+td.chk_type+"'";
				if((td.chk_type == "chk_selectall" || td.chk_type == "chk_checkall") && td.value == 1) {
					str += "checked='checked'>";
				} else if((td.chk_type == "chk_selectall" || td.chk_type == "chk_checkall") && td.value == 0) {
					str += ">";
				} else {
					str += " value='"+td.value+"'>";
				}
			} else if(td.btn) {
				str = "<input type='button' name='"+td.name+"' class='"+td.btn_type+"' value='"+td.btn+"'>";
			} else if(td.radio) {
				str = "<input type='radio' name="+td.name+" class="+td.radio_type+" value='"+td.radio[0].value+"'>";
			} else if(td.send_label) {
				str = td.value+"<input type='hidden' name='"+td.name+"' value='"+td.value.replace(/\'/g,'&#39;')+"'>";
			} else if(td.hidden_value) {
				str = "<input type='hidden' name='"+td.name+"' value='"+td.value.replace(/\'/g,'&#39;')+"'>";
			} else if(td.password) {
				str = "<input type='password' name="+td.name+" maxlength="+td.password[0].max+" size="+td.password[0].size+" value='"+td.value+"'>";
			} else if(td.textarea) {
				str = "<textarea name="+td.name+" rows="+td.textarea[0].rows+" cols="+td.textarea[0].cols+">"+td.value+"</textarea>";
			} else if(td.br) {
				for(var i=0; i<td.br; i++) {
					str += "<br>";
				}
			} else if(td.img) {
				str = "<img src='"+td.img+"' class='"+td.type+"' />";
			} else if(td.div_img) {
				str = "<div class='div_img "+td.type+"' style='background-image:url("+td.div_img+"); background-size:100% 100%; background-repeat:no-repeat; background-position:center center;'></div>";
			}
		}

		if(td.rowspan || td.colspan) {
			str = "<td rowspan="+td.rowspan+" colspan="+td.colspan+"> "+str+" </td>"; 

			tmp_tr.append(str);
		} else if(td.cont) {
			tmp_tr.find('td:last').append(" "+str);
		} else if(td.freespace) {
			tmp_tr = $(td.value);
		} else {
			str = "<td>"+str+"</td>"; 

			tmp_tr.append(str);
		}
		
		if(td.note) {
			tmp_tr.find("td:last").append("<div class='note'>"+td.note+"</div>");
		}
		
		if(td.hidden) {
			tmp_tr.find('td:last').css("display","none");
		}

		if(td.radio) {
			if(td.value) {
				_.each($(".up_pgm_pane [name="+td.name+"]"), function(radio) {
					if(radio.value == td.value) {
						radio.checked = true;
					}
				});

				_.each(tmp_tr.find('[name='+td.name+']'), function(radio) {
					if(radio.value == td.value) {
						radio.checked = true;
					}
				});
			}
		}

		if(td.enable_mullang && info.MULLANG) {
			tmp_tr.find('td:last').children('input:text, textarea').last().addClass('enable_mullang');
		}

		if(td.error) {
			if (td.error == "DA") {
				if(tmp_tr.find('[name='+td.name+']').length) {
					tmp_tr.find('[name='+td.name+']').attr('disabled','disabled');
				} else {
					for(var i=0; i<str.length; i++) {
						if(str.charAt(i) == ">") {
							str = str.replace(str.charAt(i)," disabled>");
							break;
						}
					}
				}
			} else if (td.error == "HD") {
				tmp_tr.find('td:last').css("display","none");
			} else {
				if(tmp_tr.find('[name='+td.name+']').length) {
					tmp_tr.find('[name='+td.name+']').addClass('error');
					if(td.error != "no_msg") {
						if(langs.up_error_msg[td.error]) {
							tmp_tr.find('[name='+td.name+']').after("<div class='error_txt'>"+langs.getText("up_error_msg",td.error)+"</div>");
						} else {
							tmp_tr.find('[name='+td.name+']').after("<div class='error_txt'>"+langs.getText("up_error_msg","error")+"</div>");
						}
					}
				}
			}
		}
		
		if(td.cell_type && td.cell_type.length) {
			tmp_tr.find('td:last').addClass(td.cell_type);
		}
	}
	
	Handlebars.registerHelper('hotkey_func', function(item) {
		tmp_tr = $('<tr/>');

		_.each(item, function(key) {
			make_hotkey_func(key);
		});

		$(".up_hotkey_list table").append(tmp_tr);
	});
	
	function make_hotkey_func(key) {
		var str = '';
		
		if(key.lable) {
			str = key.lable;
		} else if(key.options) {
			var tmp = '';
			_.each(key.options, function (opt) {
				if(opt.value === key.value) {
					if (opt.option == langs.getText("common","opt_off")) {
						tmp += "<div value="+opt.value+" class='active off'>"+opt.option+"</div>"; 
					} else {
						tmp += "<div value="+opt.value+" class='active on'>"+opt.option+"</div>";
					}
				} else {
					if (opt.option == langs.getText("common","opt_off")) {
						tmp += "<div value="+opt.value+" class='off'>"+opt.option+"</div>"; 
					} else {
						tmp += "<div value="+opt.value+" class='on'>"+opt.option+"</div>";
					}
				}
			});

			str = "<div name="+key.name+" class='btn_hotkey_save'>"+tmp+"</div>";
		}
		
		str = "<td> "+str+" </td>"; 

		tmp_tr.append(str);
	}
</script>