function getUserComments(user_id) {

		var markup = '<div class="mfp-figure">'+
            '<div class="mfp-close"></div>'+
            '<div class="mfp-img"></div>'+
            '</div>';
		$("#modal").html(markup);

		var markup2 = '{{for(j=0,j_cnt=comments.length;j<j_cnt;j++)}}'
			+ '<div comment_id="${comments[j].id}" class="section row mb10">'
			+ '<label for="grade" class="col-md-4 text-right" style="font-size:13px;border-right: solid 1px #ccc;padding-top:10px;padding-bottom:10px;"><span style="color: #4a89dc;font-size:16px;">${comments[j].write_user.firstname} ${comments[j].write_user.lastname}</span><br />${comments[j].created_text}</label>'
			+ '<div class="col-md-8" style="padding-top:10px;padding-bottom:10px;">'
			+ '<div>${comments[j].comment}</div>'
			+ '<button class="btn_comment_delete btn btn-xs btn-info" style="position:absolute;top:0;right:0;"><i class="fa fa-times"></i></button>'
			+ '</div>'
			+ '</div>'
			+ '{{/for}}';

		$.get('/api/user/'+user_id+'/comment', function(data) {
			console.log(data);
			markup = '<div class="panel">'
			+ '<div class="panel-heading">'
			+ '<p class="panel-title">${email}</p>'
			+ '<p style="margin:0;">(${firstname} ${lastname})</p>'
			+ '</div>'

			+ '<div class="form-inline panel-body p25" style="overflow-y:scroll;height:400px;">'


			+ markup2
			

			+ '</div>'

			+ '<div class="panel-footer">'

			+ '<div class="section row mb10">'
			+ '<div class="col-md-12">'
			+ '<div class="smart-widget sm-right smr-80">'
			+ '<label class="field">'
			+ '<input type="text" id="comment" class="gui-input" placeholder="Input comment">'
			+ '</label>'
			+ '<button id="btn_comment_write" type="button" class="btn btn-primary" style="cursor: pointer;position: absolute;top: 0;height: 39px;-webkit-border-radius: 3px;border-radius: 3px;width: 80px;right: 0px;border-radius: 0;">Regist</button>'
			+ '</div>'
			+ '</div>'
			+ '</div>'

			+ '</div>'

			+ '</div>'
			+ '<button title="Close (Esc)" type="button" class="mfp-close">×</button>';

			$.template( "template", markup );
			$("#modal").html($.tmpl( "template", data ));

			$("#btn_comment_write").off('click');
			$("#btn_comment_write").on('click', function() {
				if($('#comment').val() == '') return;

				var input_obj = {
					comment: $('#comment').val()
				}
				$('#comment').val('');

				$.ajax({
					method: "post",
					url: "/api/user/"+user_id+"/comment",
					data: input_obj
				})
				.done(function( msg ) {
					$.get('/api/user/'+user_id+'/comment', function(data) {
						$.template( "template", markup2 );
						$("#modal .panel-body").html($.tmpl( "template", data ));
						setCommentEvent(user_id);
						$(".user-comment-label[data-user-id="+user_id+"]").eq(0).text(data.comments.length);
					});
				})
				.fail(function( a ) {
					alert(a.responseJSON.msg);
				});
			});

			setCommentEvent(user_id);

		});

		// Inline Admin-Form example 
		$.magnificPopup.open({
		items: {
			src: '#modal'
		},
		callbacks: {
			beforeOpen: function(e) {
				this.st.mainClass = 'mfp-zoomIn';
			}
		},
		midClick: true
		});
	}

	function setCommentEvent(user_id) {
		$(".btn_comment_delete").off('click');
		$(".btn_comment_delete").on('click', function() {

			var comment_id = $(this).parent().parent().attr('comment_id');

			swal({   
				title: "Delete comment?",
				text: '',
				type: "info",
				html: true,
				allowOutsideClick: true,
				showCancelButton: true,
				cancelButtonText: "No",
				confirmButtonText: "Yes",
				closeOnConfirm: true
			},
			function(isConfirm){
				if(!isConfirm) return;

				$.ajax({
					method: "delete",
					url: "/api/user/"+user_id+"/comment/"+comment_id,
				})
				.done(function( msg ) {
					$("#modal [comment_id='"+comment_id+"']").remove();

					if(parseInt($(".user-comment-label[data-user-id="+user_id+"]").eq(0).text())-1 > 0) {
						$(".user-comment-label[data-user-id="+user_id+"]").eq(0).text(parseInt($(".user-comment-label[data-user-id="+user_id+"]").eq(0).text())-1);
					}
					else {
						$(".user-comment-label[data-user-id="+user_id+"]").eq(0).text('');
					}
				})
				.fail(function( a ) {
					alert(a.responseJSON.msg);
				});
			});
		});
	}
	

	function getAccountInfo(user_id) {
		var markup = '<div class="mfp-figure">'+
            '<div class="mfp-close"></div>'+
            '<div class="mfp-img"></div>'+
            '</div>';
		$("#modal").html(markup);

		var d1 = $.get('/api/config/state');
		var d2 = $.get('/api/user/'+user_id);

		$.when( d1, d2 ).done(function ( v1, v2 ) {
			
			var data = {
				states: v1[0],
				user: v2[0],
			};

			markup = '<div class="panel">'
			+ '<div class="panel-heading">'
			+ '<p class="panel-title">${user.email}</p>'
			+ '<p style="margin:0;">(${user.firstname} ${user.lastname})</p>'


			+ '</div>'

			+ '<div class="form-inline panel-body p25">'

			+ '<div class="section row mb10">'
			+ '<label for="grade" class="field-label col-md-4 text-center">Block</label>'
			+ '<div class="col-md-8">'

			+ '<div class="switch switch-info round switch-inline">'
			+ '{{if user.is_block == "Y" }}'
            + '<input id="modify_is_block" type="checkbox" value="Y" checked >'
			+ '{{else}}'
			+ '<input id="modify_is_block" type="checkbox" value="Y">'
			+ '{{/if}}'
            + '<label for="modify_is_block" style="height:31px;"></label>'
            + '</div>'

			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="modify_grade_id" class="field-label col-md-4 text-center">Classification</label>'
			+ '<div class="col-md-8">'
			+ '<select id="modify_grade_id" class="form-control">'
			+ '<option value="">Classification</option>'
			+ '<option value="2" ${ user.grade_id == 2 ? \'selected\' : \'\' }>Student</option>'
			+ '<option value="3" ${ user.grade_id == 3 ? \'selected\' : \'\' }>Student parents</option>'
			+ '<option value="4" ${ user.grade_id == 4 ? \'selected\' : \'\' }>Oversea agency</option>'
			+ '<option value="5" ${ user.grade_id == 5 ? \'selected\' : \'\' }>Host family</option>'
			+ '<option value="6" ${ user.grade_id == 6 ? \'selected\' : \'\' }>Local coordinator</option>'
									+ '</select>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="modify_firstname" class="field-label col-md-4 text-center">First name</label>'
			+ '<div class="col-md-8">'
			+ '<label class="field prepend-icon">'
			+ '<input type="text" id="modify_firstname" class="gui-input" value="${user.firstname}">'
			+ '<label for="modify_firstname" class="field-icon">'
			+ '<i class="fa fa-user"></i>'
			+ '</label>'
			+ '</label>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="modify_lastname" class="field-label col-md-4 text-center">Last name</label>'
			+ '<div class="col-md-8">'
			+ '<label class="field prepend-icon">'
			+ '<input type="text" id="modify_lastname" class="gui-input" value="${user.lastname}">'
			+ '<label for="modify_lastname" class="field-icon">'
			+ '<i class="fa fa-user"></i>'
			+ '</label>'
			+ '</label>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="modify_student_id" class="field-label col-md-4 text-center">Student ID</label>'
			+ '<div class="col-md-8">'
			+ '<label class="field">'
			+ '<input type="text" id="modify_student_id" class="gui-input" value="${user.student_id}">'
			+ '</label>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="modify_phone" class="field-label col-md-4 text-center">Phone Number</label>'
			+ '<div class="col-md-8">'
			+ '<label class="field">'
			+ '<input type="text" id="modify_phone" class="gui-input" value="${user.phone}">'
			+ '</label>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="modify_birth" class="field-label col-sm-4 text-center">Birth</label>'
			+ '<div class="col-sm-8">'
			+ '<label class="field">'
			+ '<input id="modify_birth" type="text" class="form-control date-picker" value="${user.birth}" readonly style="cursor:pointer;" >'
			+ '</label>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="modify_sex" class="field-label col-md-4 text-center">Gender</label>'
			+ '<div class="col-md-8">'
			+ '<select id="modify_sex" class="form-control">'
			+ '<option value="N">None</option>'
			+ '<option value="M" ${ user.sex == \'M\' ? \'selected\' : \'\' }>Male</option>'
			+ '<option value="F" ${ user.sex == \'F\' ? \'selected\' : \'\' }>Female</option>'
			+ '</select>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="modify_addr_street" class="field-label col-md-4 text-center">Address Street</label>'
			+ '<div class="col-md-8">'
			+ '<label class="field">'
			+ '<input type="text" id="modify_addr_street" class="gui-input" value="${user.addr_street}">'
			+ '</label>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="modify_addr_city" class="field-label col-md-4 text-center">Address City</label>'
			+ '<div class="col-md-8">'
			+ '<label class="field">'
			+ '<input type="text" id="modify_addr_city" class="gui-input" value="${user.addr_city}">'
			+ '</label>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="modify_state" class="field-label col-md-4 text-center">Address State</label>'
			+ '<div class="col-md-8">'
			+ '<select id="modify_state" class="form-control">'
			+ '<option value="">State</option>'
			+ '{{for(var j=0,cnt_j=states.length;j<cnt_j;j++)}}'
			+ '{{if user.state == states[j].state_name }}'
			+ '<option value="${states[j].state_name}" selected>${states[j].state_name}</option>'
			+ '{{else}}'
			+ '<option value="${states[j].state_name}">${states[j].state_name}</option>'
			+ '{{/if}}'
			+ '{{/for}}'
			+ '</select>'
			+ '</div>'
			+ '</div>'

			+ '<div class="text-center smart-widget"><button id="btn_user_delete" type="button" class="btn btn-dark">delete</button> <button id="btn_user_modify" type="button" class="btn btn-primary" style="margin:0 10px;">modify</button> <button type="reset" class="btn btn-default">reset</button></div>'

			+ '</div>'

			+ '<div class="panel-footer">'

			+ '<div class="section row mb10">'
			+ '<label for="password" class="field-label col-md-4 text-center">Reset password</label>'
			+ '<div class="col-md-8">'
			+ '<div class="smart-widget sm-right smr-80">'
			+ '<label class="field">'
			+ '<input type="password" id="password" class="gui-input" placeholder="">'
			+ '</label>'
			+ '<button id="btn_password_change" type="button" class="btn btn-primary" style="cursor: pointer;position: absolute;top: 0;height: 39px;-webkit-border-radius: 3px;border-radius: 3px;width: 80px;right: 0px;border-radius: 0;">change</button>'
			+ '</div>'
			+ '</div>'
			+ '</div>'

			+ '</div>'

			+ '</div>'
			+ '<button title="Close (Esc)" type="button" class="mfp-close">×</button>';
			$.template( "template", markup );
			$("#modal").html($.tmpl( "template", data ));

			$("#btn_user_modify").off('click');
			$("#btn_user_modify").on('click', function() {
				var is_block = $("#modify_is_block:checked").val() != undefined ? $("#modify_is_block:checked").val() : 'N';

				var input_obj = {
					is_block: is_block,
					grade_id: $('#modify_grade_id').val(),
					phone: $('#modify_phone').val(),
					state: $('#modify_state').val(),
					birth: $('#modify_birth').val(),
					addr_city: $('#modify_addr_city').val(),
					addr_street: $('#modify_addr_street').val(),
					firstname: $('#modify_firstname').val(),
					lastname: $('#modify_lastname').val(),
					student_id: $('#modify_student_id').val(),
					sex: $('#modify_sex').val()
				}
				$.ajax({
					method: "put",
					url: "/api/user/"+user_id,
					data: input_obj
				})
				.done(function( msg ) {
					//alert('complete modify');
					//location.reload();
				})
				.fail(function( a ) {
					alert(a.responseJSON.msg);
				});
			});

			$("#btn_user_delete").off('click');
			$("#btn_user_delete").on('click', function() {
				swal({   
					title: "Are you sure?",
					text: '',
					type: "warning",
					html: true,
					allowOutsideClick: true,
					showCancelButton: true,
					confirmButtonColor: "#DD6B55",
					cancelButtonText: "cancel",
					confirmButtonText: "Yes, delete it!",
					closeOnConfirm: true
				},
				function(isConfirm){
					if(!isConfirm) return;

					$.ajax({
						method: "delete",
						url: "/api/user/"+user_id
					})
					.done(function( msg ) {
						location.reload();
					})
					.fail(function( a ) {
						alert(a.responseJSON.msg);
					});
				});
			});

			$("#btn_password_change").off('click');
			$("#btn_password_change").on('click', function() {
				var input_obj = {
					password: $('#password').val()
				}
				$.ajax({
					method: "post",
					url: "/api/user/"+user_id+"/password",
					data: input_obj
				})
				.done(function( msg ) {
					location.reload();
				})
				.fail(function( a ) {
					alert(a.responseJSON.msg);
				});
			});



			// 공통 기능
			$('.date-picker').datetimepicker({
				pickTime: false,
				format: 'MM-DD-YYYY'
			});
		});

		$.magnificPopup.open({
		items: {
			src: '#modal'
		},
		callbacks: {
			beforeOpen: function(e) {
			this.st.mainClass = 'mfp-zoomIn';
			}
		},
		midClick: true
		});
	}


	function getHostRelation(user_id) {
		var markup = '<div class="mfp-figure">'+
            '<div class="mfp-close"></div>'+
            '<div class="mfp-img"></div>'+
            '</div>';
		$("#modal").html(markup);

		var d1 = $.get('/api/local');
		var d2 = $.get('/api/school');
		var d3 = $.get('/api/host/' + user_id + '?relation_students=1');

		$.when( d1, d2, d3 ).done(function ( v1, v2, v3 ) {

			var data = {
				locals: v1[0],
				schools: v2[0],
				host: v3[0],
			};

			console.log(data);

			markup = '<div class="panel">'
			+ '<div class="panel-heading">'
			+ '<span class="panel-title">Host relation</span>'
			+ '</div>'
			+ '<form>'

			+ '<div class="form-inline panel-body p25">'

			+ '<div class="section row mb10">'
			+ '<label for="grade" class="field-label col-md-4">Host account</label>'
			+ '<div class="col-md-8">'
			+ '<p class="form-control-static">${host.user.email}</p>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10" style="height:200px;">'
			+ '<label for="grade" class="field-label col-md-4">Student</label>'
			+ '<div class="col-md-8" style="position:relative;">'
			+ '<label for="search_student" class="field prepend-icon">'
			+ '<input type="text" id="search_student" class="gui-input" value="">'
			+ '<label for="search_student" class="field-icon">'
			+ '<i class="fa fa-user"></i>'
			+ '</label>'
			+ '</label>'
			+ '<ul id="search_student_list" style="position:absolute;width:100%;z-index:99;background:#fff;height:160px;border:solid 1px;overflow-y:scroll;padding: 0;list-style: none;display:none;">'
			+ '</ul>'
			+ '<input type="text" style="display:none;" id="tagmanager" class="form-control tm-input" placeholder="Create a new tag..">'
			+ '<div class="tag-container tags"></div>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="grade" class="field-label col-md-4">Local coordinator</label>'
			+ '<div class="col-md-8">'
			+ '<select id="relation_lc_id" class="form-control" style="width:100%;">'
			+ '<option value="">Select L/C</option>'

			+ '{{for(var j=0,cnt_j=locals.length;j<cnt_j;j++)}}'
			+ '{{if host.local_id == locals[j].user_id }}'
			+ '<option value="${locals[j].user_id}" selected>${locals[j].inputFirstName} ${locals[j].inputLastName} | ${locals[j].inputAddrState}</option>'
			+ '{{else}}'
			+ '<option value="${locals[j].user_id}">${locals[j].inputFirstName} ${locals[j].inputLastName} | ${locals[j].inputAddrState}</option>'
			+ '{{/if}}'
			+ '{{/for}}'

			+ '</select>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="grade" class="field-label col-md-4">Near school</label>'
			+ '<div class="col-md-8">'
			+ '<select id="school_id" class="form-control" style="width:100%;">'
			+ '<option value="">Select school</option>'

			+ '{{for(var j=0,cnt_j=schools.length;j<cnt_j;j++)}}'
			+ '{{if host.school_id == schools[j].id }}'
			+ '<option value="${schools[j].id}" selected>${schools[j].school_name}</option>'
			+ '{{else}}'
			+ '<option value="${schools[j].id}">${schools[j].school_name}</option>'
			+ '{{/if}}'
			+ '{{/for}}'

			+ '</select>'
			+ '</div>'
			+ '</div>'

			+ '<div class="text-center smart-widget"><button id="btn_relation_modify" type="button" class="btn btn-primary">modify</button></div>'

			+ '</div>'

			+ '</form>'
			+ '</div>'
			+ '<button title="Close (Esc)" type="button" class="mfp-close">×</button>';

			$.template( "template", markup );
			$("#modal").html($.tmpl( "template", data ));

			$("#search_student").off('keyup');
			$("#search_student").on('keyup', function() {
				if($(this).val() == '') {
					$("#search_student_list").html('');
					return;
				}
				$.get('/api/student?sl_search=email&sl_keyword='+$(this).val(), function(data) {
					var student_markup = '<li>'
					+ '<a href="#" class="btn_student_add gui-input">${email}</a>'
					+ '</li>';

					$.template( "template", student_markup );
					$("#search_student_list").html($.tmpl( "template", data.data ));
					$("#search_student_list").show();

					$(".btn_student_add").off('click');
					$(".btn_student_add").on('click', function() {
						$(".tm-input").tagsManager('pushTag', $(this).text());
					});
				});
			});

			var prefilled = [];
			for(var i=0;i<data.host.students.length;i++) {
				prefilled.push(data.host.students[i].user.email);
			}

			$(".tm-input").tagsManager({
			  tagsContainer: '.tags',
			  prefilled: prefilled,
			  tagClass: 'tm-tag-info',
			});

			$("#search_student").off('focusout');
			$("#search_student").on('focusout', function() {
				setTimeout(function() {
					$("#search_student_list").hide();
				}, 300);
			});

			$("#search_student").off('focus');
			$("#search_student").on('focus', function() {
				if($(this).val() != '') {
					$("#search_student_list").show();
				}
			});

			$("#btn_relation_modify").off('click');
			$("#btn_relation_modify").on('click', function() {

				var input_obj = {
					school_id: $('#school_id').val(),
					local_id: $('#relation_lc_id').val(),
					student_email: $(".tm-input").tagsManager('tags'),
				}
				$.ajax({
					method: "post",
					url: "/api/host/"+user_id+"/student",
					data: input_obj
				})
				.done(function( msg ) {
					location.reload();
				})
				.fail(function( a ) {
					alert(a.responseJSON.msg);
				});
			});
		});

		// Inline Admin-Form example 
		$.magnificPopup.open({
			items: {
				src: '#modal'
			},
			callbacks: {
				beforeOpen: function(e) {
					this.st.mainClass = 'mfp-zoomIn';
				}
			},
			midClick: true
		});
	}


	function changeHostStatus(this_obj, user_id) {
		var markup = '<div class="mfp-figure">'+
            '<div class="mfp-close"></div>'+
            '<div class="mfp-img"></div>'+
            '</div>';
		$("#modal").html(markup);

		$.get('/api/host/' + user_id, function(data) {
			console.log(data);

			markup = '<div class="panel">'
			+ '<div class="panel-heading">'
			+ '<p class="panel-title">${user.email}</p>'
			+ '<p style="margin:0;">(${user.firstname} ${user.lastname})</p>'
			+ '</div>'

			+ '<div class="panel-body p25 text-center">'
			
		+ '<div class="btn-group">'
		+ '{{if host_status == "incomplete"}}'
		+ '<button type="button" data-value="incomplete" class="btn btn-dark btn_status_select">Incomplete</button>'
			+ '{{else}}'
		+ '<button type="button" data-value="incomplete" class="btn btn-default btn_status_select">Incomplete</button>'
		+ '{{/if}}'
		+ '{{if host_status == "complete"}}'
		+ '<button type="button" data-value="complete" class="btn btn-dark btn_status_select">Complete</button>'
		+ '{{else}}'
		+ '<button type="button" data-value="complete" class="btn btn-default btn_status_select">Complete</button>'
		+ '{{/if}}'
		+ '</div>'

			+ '</div>'

			+ '</div>'
			+ '<button title="Close (Esc)" type="button" class="mfp-close">×</button>';

			$.template( "template", markup );
			$("#modal").html($.tmpl( "template", data ));

			$(".btn_status_select").off('click');
			$(".btn_status_select").on('click', function() {
				var obj = $(this);

				$(".btn_status_select").removeClass('btn-dark').addClass('btn-default');
				obj.removeClass('btn-default').addClass('btn-dark');

				$.ajax({
					method: "put",
					url: "/api/host/"+user_id,
					data: {'host_status':obj.attr('data-value')}
				})
				.success(function( msg ) {
					this_obj.removeClass('btn-system').removeClass('btn-warning');

					if(obj.attr('data-value') == 'incomplete') {
						this_obj.attr('data-value', 'incomplete').addClass('btn-warning').text('Incomplete');
					}
					else if(obj.attr('data-value') == 'complete') {
						this_obj.attr('data-value', 'complete').addClass('btn-system').text('Complete');
					}

					$.magnificPopup.close();
				})
				.fail(function( a ) {
					alert(a.responseJSON.msg);
				});
				
			});
		});

		// Inline Admin-Form example 
		$.magnificPopup.open({
		items: {
			src: '#modal'
		},
		callbacks: {
			beforeOpen: function(e) {
				this.st.mainClass = 'mfp-zoomIn';
			}
		},
		midClick: true
		});
	}


	function changeStudentStatus(this_obj, user_id) {
		var markup = '<div class="mfp-figure">'+
            '<div class="mfp-close"></div>'+
            '<div class="mfp-img"></div>'+
            '</div>';
		$("#modal").html(markup);

		$.get('/api/student/' + user_id, function(data) {
			console.log(data);

			markup = '<div class="panel">'
			+ '<div class="panel-heading">'
			+ '<p class="panel-title">${user.email}</p>'
			+ '<p style="margin:0;">(${user.firstname} ${user.lastname})</p>'
			+ '</div>'

			+ '<div class="panel-body p25 text-center">'
			
				+ '<div class="btn-group">'
				+ '<div style="margin:4px;">'
				+ '{{if status_new > 0}}'
				+ '<button type="button" data-value="new" class="btn btn-dark btn_status_select">New</button>'
					+ '{{else}}'
				+ '<button type="button" data-value="new" class="btn btn-default btn_status_select">New</button>'
				+ '{{/if}}'
				+ '{{if status_reentry > 0}}'
				+ '<button type="button" data-value="reentry" class="btn btn-dark btn_status_select">Re-entry</button>'
					+ '{{else}}'
				+ '<button type="button" data-value="reentry" class="btn btn-default btn_status_select">Re-entry</button>'
				+ '{{/if}}'
				+ '{{if status_application > 0}}'
				+ '<button type="button" data-value="application" class="btn btn-dark btn_status_select">Application</button>'
				+ '{{else}}'
				+ '<button type="button" data-value="application" class="btn btn-default btn_status_select">Application</button>'
				+ '{{/if}}'
				+ '{{if status_invoice > 0}}'
				+ '<button type="button" data-value="ivoice" class="btn btn-dark btn_status_select">Ivoice</button>'
				+ '{{else}}'
				+ '<button type="button" data-value="ivoice" class="btn btn-default btn_status_select">Invoice</button>'
				+ '{{/if}}'
				+ '</div>'
				+ '<div style="margin:4px;">'
				+ '{{if status_pc > 0}}'
				+ '<button type="button" data-value="pc" class="btn btn-dark btn_status_select">P/C</button>'
				+ '{{else}}'
				+ '<button type="button" data-value="pc" class="btn btn-default btn_status_select">P/C</button>'
				+ '{{/if}}'
				+ '{{if status_flight > 0}}'
				+ '<button type="button" data-value="flight" class="btn btn-dark btn_status_select">Flight</button>'
				+ '{{else}}'
				+ '<button type="button" data-value="flight" class="btn btn-default btn_status_select">Flight</button>'
				+ '{{/if}}'
				+ '{{if status_changehf > 0}}'
				+ '<button type="button" data-value="changehf" class="btn btn-dark btn_status_select">Change H/F</button>'
				+ '{{else}}'
				+ '<button type="button" data-value="changehf" class="btn btn-default btn_status_select">Change H/F</button>'
				+ '{{/if}}'
				+ '{{if status_finished > 0}}'
				+ '<button type="button" data-value="finished" class="btn btn-dark btn_status_select">Finished</button>'
				+ '{{else}}'
				+ '<button type="button" data-value="finished" class="btn btn-default btn_status_select">Finished</button>'
				+ '{{/if}}'
				+ '</div>'
				+ '<div style="margin:4px;">'
				+ '{{if status_springsemester > 0}}'
				+ '<button type="button" data-value="springsemester" class="btn btn-dark btn_status_select">Spring semester</button>'
				+ '{{else}}'
				+ '<button type="button" data-value="springsemester" class="btn btn-default btn_status_select">Spring semester</button>'
				+ '{{/if}}'
				+ '{{if status_fallsemester > 0}}'
				+ '<button type="button" data-value="fallsemester" class="btn btn-dark btn_status_select">Fall semester</button>'
				+ '{{else}}'
				+ '<button type="button" data-value="fallsemester" class="btn btn-default btn_status_select">Fall semester</button>'
				+ '{{/if}}'
				+ '{{if status_warning > 0}}'
				+ '<button type="button" data-value="warning" class="btn btn-dark btn_status_select">Warning</button>'
				+ '{{else}}'
				+ '<button type="button" data-value="warning" class="btn btn-default btn_status_select">Warning</button>'
				+ '{{/if}}'
				+ '</div>'
				+ '</div>'

				+ '<div style="margin-top:10px;"><button type="button" class="btn btn-primary btn_status_save">Save</button></div>'


			+ '</div>'

			+ '</div>'
			+ '<button title="Close (Esc)" type="button" class="mfp-close">×</button>';

			$.template( "template", markup );
			$("#modal").html($.tmpl( "template", data ));

			$(".btn_status_select").off('click');
			$(".btn_status_select").on('click', function() {
				var obj = $(this);

				//$(".btn_status_select").removeClass('btn-dark').addClass('btn-default');

				if(obj.hasClass('btn-default')) {
					obj.removeClass('btn-default');
					obj.addClass('btn-dark');
				}
				else if(obj.hasClass('btn-dark')) {
					obj.removeClass('btn-dark');
					obj.addClass('btn-default');
				}
				
			});

			$(".btn_status_save").off('click');
			$(".btn_status_save").on('click', function() {

				var input = {
					status_new: 0,
					status_reentry: 0,
					status_application: 0,
					status_invoice: 0,
					status_pc: 0,
					status_flight: 0,
					status_changehf: 0,
					status_finished: 0,
					status_springsemester: 0,
					status_fallsemester: 0,
					status_warning: 0
				}

				$(".btn_status_select.btn-dark").each(function( index ) {
					if($(this).attr('data-value') == 'new') {
						input.status_new = 1;
					}
					if($(this).attr('data-value') == 'reentry') {
						input.status_reentry = 1;
					}
					if($(this).attr('data-value') == 'application') {
						input.status_application = 1;
					}
					if($(this).attr('data-value') == 'invoice') {
						input.status_invoice = 1;
					}
					if($(this).attr('data-value') == 'pc') {
						input.status_pc = 1;
					}
					if($(this).attr('data-value') == 'flight') {
						input.status_flight = 1;
					}
					if($(this).attr('data-value') == 'changehf') {
						input.status_changehf = 1;
					}
					if($(this).attr('data-value') == 'finished') {
						input.status_finished = 1;
					}
					if($(this).attr('data-value') == 'springsemester') {
						input.status_springsemester = 1;
					}
					if($(this).attr('data-value') == 'fallsemester') {
						input.status_fallsemester = 1;
					}
					if($(this).attr('data-value') == 'warning') {
						input.status_warning = 1;
					}

				});

				$.ajax({
					method: "put",
					url: "/api/student/"+user_id+"/status",
					data: input
				})
				.success(function( msg ) {
					location.reload();
				})
				.fail(function( a ) {
					alert(a.responseJSON.msg);
				});
			});

		});

		// Inline Admin-Form example 
		$.magnificPopup.open({
		items: {
			src: '#modal'
		},
		callbacks: {
			beforeOpen: function(e) {
				this.st.mainClass = 'mfp-zoomIn';
			}
		},
		midClick: true
		});
	}


	function changeStudentDocumentStatus(this_obj, user_id) {
		var markup = '<div class="mfp-figure">'+
            '<div class="mfp-close"></div>'+
            '<div class="mfp-img"></div>'+
            '</div>';
		$("#modal").html(markup);

		$.get('/api/student/' + user_id, function(data) {
			console.log(data);

			markup = '<div class="panel">'
			+ '<div class="panel-heading">'
			+ '<p class="panel-title">${user.email}</p>'
			+ '<p style="margin:0;">(${user.firstname} ${user.lastname})</p>'
			+ '</div>'

			+ '<div class="panel-body p25 text-center">'
			
		+ '<div class="btn-group">'
		+ '{{if document_status == "process"}}'
		+ '<button type="button" data-value="process" class="btn btn-dark btn_status_select">Process</button>'
			+ '{{else}}'
		+ '<button type="button" data-value="process" class="btn btn-default btn_status_select">Process</button>'
		+ '{{/if}}'
		+ '{{if document_status == "completed"}}'
		+ '<button type="button" data-value="completed" class="btn btn-dark btn_status_select">Completed</button>'
			+ '{{else}}'
		+ '<button type="button" data-value="completed" class="btn btn-default btn_status_select">Completed</button>'
		+ '{{/if}}'
		+ '{{if document_status == "cancelled"}}'
		+ '<button type="button" data-value="cancelled" class="btn btn-dark btn_status_select">Cancelled</button>'
		+ '{{else}}'
		+ '<button type="button" data-value="cancelled" class="btn btn-default btn_status_select">Cancelled</button>'
		+ '{{/if}}'
		+ '{{if document_status == "edited"}}'
		+ '<button type="button" data-value="edited" class="btn btn-dark btn_status_select">Edited</button>'
		+ '{{else}}'
		+ '<button type="button" data-value="edited" class="btn btn-default btn_status_select">Edited</button>'
		+ '{{/if}}'
		+ '</div>'

			+ '</div>'

			+ '</div>'
			+ '<button title="Close (Esc)" type="button" class="mfp-close">×</button>';

			$.template( "template", markup );
			$("#modal").html($.tmpl( "template", data ));

			$(".btn_status_select").off('click');
			$(".btn_status_select").on('click', function() {
				var obj = $(this);

				$(".btn_status_select").removeClass('btn-dark').addClass('btn-default');
				obj.removeClass('btn-default').addClass('btn-dark');

				console.log(obj.attr('data-value'));

				$.ajax({
					method: "put",
					url: "/api/student/"+user_id+"/document_status",
					data: {'document_status':obj.attr('data-value')}
				})
				.success(function( msg ) {
					this_obj.attr('data-value', obj.attr('data-value')).text(ucfirst(obj.attr('data-value')));

					$.magnificPopup.close();
				})
				.fail(function( a ) {
					alert(a.responseJSON.msg);
				});
				
			});
		});

		// Inline Admin-Form example 
		$.magnificPopup.open({
		items: {
			src: '#modal'
		},
		callbacks: {
			beforeOpen: function(e) {
				this.st.mainClass = 'mfp-zoomIn';
			}
		},
		midClick: true
		});
	}


	function getStudentRelation(user_id) {
		var markup = '<div class="mfp-figure">'+
			'<div class="mfp-close"></div>'+
			'<div class="mfp-img"></div>'+
			'</div>';
		$("#modal").html(markup);

		var d1 = $.get('/api/local');
		var d2 = $.get('/api/host');
		var d3 = $.get('/api/agency');
		var d4 = $.get('/api/school');
		var d5 = $.get('/api/student/'+user_id);
		var d6 = $.get('/api/parent');

		$.when( d1, d2, d3, d4, d5, d6 ).done(function ( v1, v2, v3, v4, v5, v6 ) {

			var data = {
				locals: v1[0],
				hosts: v2[0],
				agencies: v3[0],
				schools: v4[0],
				student: v5[0],
				parents: v6[0],
			};

			console.log(data);

			markup = '<div class="panel">'
			+ '<div class="panel-heading">'
			+ '<span class="panel-title">Student relation</span>'
			+ '</div>'
			+ '<form>'

			+ '<div class="form-inline panel-body p25">'

			+ '<div class="section row mb10">'
			+ '<label for="grade" class="field-label col-md-4">Student account</label>'
			+ '<div class="col-md-8">'
			+ '<p class="form-control-static">${student.user.email}</p>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="grade" class="field-label col-md-4">Student Parent</label>'
			+ '<div class="col-md-8">'
			+ '<select id="relation_parent_id" class="select2-single form-control" style="width:100%;">'
			+ '<option value="">Select Parent</option>'
			+ '{{for(j=0,j_cnt=parents.length;j<j_cnt;j++)}}'
			+ '{{if student.parent_id == parents[j].id}}'
			+ '<option value="${parents[j].id}" selected>${parents[j].firstname} ${parents[j].lastname}</option>'
			+ '{{else}}'
			+ '<option value="${parents[j].id}">${parents[j].firstname}  ${parents[j].lastname}</option>'
			+ '{{/if}}'
			+ '{{/for}}'
			+ '</select>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="grade" class="field-label col-md-4">Host Family</label>'
			+ '<div class="col-md-8">'
			+ '<select id="relation_hf_id" class="select2-single form-control" style="width:100%;">'
			+ '<option value="">Select H/F</option>'
			+ '{{for(j=0,j_cnt=hosts.length;j<j_cnt;j++)}}'
			+ '{{if student.host_id == hosts[j].user_id}}'
			+ '<option value="${hosts[j].user_id}" selected>${hosts[j].inputHostMotherFirstName} ${hosts[j].inputHostMotherLastName}</option>'
			+ '{{else}}'
			+ '<option value="${hosts[j].user_id}">${hosts[j].inputHostMotherFirstName} ${hosts[j].inputHostMotherLastName}</option>'
			+ '{{/if}}'
			+ '{{/for}}'
			+ '</select>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="grade" class="field-label col-md-4">Local coordinator</label>'
			+ '<div class="col-md-8">'
			+ '<select id="relation_lc_id" class="select2-single form-control" style="width:100%;">'
			+ '<option value="">Select L/C</option>'
			+ '{{for(j=0,j_cnt=locals.length;j<j_cnt;j++)}}'
			+ '{{if student.local_id == locals[j].user_id}}'
			+ '<option value="${locals[j].user_id}" selected>${locals[j].inputFirstName} ${locals[j].inputLastName} | ${locals[j].inputAddrState}</option>'
			+ '{{else}}'
			+ '<option value="${locals[j].user_id}">${locals[j].inputFirstName} ${locals[j].inputLastName} | ${locals[j].inputAddrState}</option>'
			+ '{{/if}}'
			+ '{{/for}}'
			+ '</select>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="grade" class="field-label col-md-4">Agency</label>'
			+ '<div class="col-md-8">'
			+ '<select id="relation_agency_id" class="select2-single form-control" style="width:100%;">'
			+ '<option value="">Select agency</option>'
			+ '{{for(j=0,j_cnt=agencies.length;j<j_cnt;j++)}}'
			+ '{{if student.agency_id == agencies[j].user_id}}'
			+ '<option value="${agencies[j].user_id}" selected>${agencies[j].user.firstname} ${agencies[j].user.lastname}</option>'
			+ '{{else}}'
			+ '<option value="${agencies[j].user_id}">${agencies[j].user.firstname} ${agencies[j].user.lastname}</option>'
			+ '{{/if}}'
			+ '{{/for}}'
			+ '</select>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10">'
			+ '<label for="grade" class="field-label col-md-4">School</label>'
			+ '<div class="col-md-8">'
			+ '<select id="relation_school_id" class="select2-single form-control" style="width:100%;">'
			+ '<option value="">Select school</option>'
			+ '{{for(j=0,j_cnt=schools.length;j<j_cnt;j++)}}'
			+ '{{if student.school_id == schools[j].id}}'
			+ '<option value="${schools[j].id}" selected>${schools[j].school_name}</option>'
			+ '{{else}}'
			+ '<option value="${schools[j].id}">${schools[j].school_name}</option>'
			+ '{{/if}}'
			+ '{{/for}}'
			+ '</select>'
			+ '</div>'
			+ '</div>'

			+ '<div class="text-center smart-widget"><button id="btn_student_relation_modify" type="button" class="btn btn-primary">modify</button></div>'

			+ '</div>'

			+ '</form>'
			+ '</div>'
			+ '<button title="Close (Esc)" type="button" class="mfp-close">×</button>';

			$.template( "template", markup );
			$("#modal").html($.tmpl( "template", data ));

			//$(".select2-single").select2();

			$("#btn_student_relation_modify").off('click');
			$("#btn_student_relation_modify").on('click', function() {
				var input_obj = {
					host_id: $('#relation_hf_id').val(),
					local_id: $('#relation_lc_id').val(),
					school_id: $('#relation_school_id').val(),
					agency_id: $('#relation_agency_id').val(),
					parent_id: $('#relation_parent_id').val(),
				}
				$.ajax({
					method: "post",
					url: "/api/student/"+user_id+"/relation",
					data: input_obj
				})
				.done(function( msg ) {
					location.reload();
				})
				.fail(function( a ) {
					alert(a.responseJSON.msg);
				});
			});
		});

		$.magnificPopup.open({
			items: {
				src: '#modal'
			},
			callbacks: {
				beforeOpen: function(e) {
					this.st.mainClass = 'mfp-zoomIn';
				}
			},
			midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
		});
	}


	function getLocalRelation(user_id) {
		var markup = '<div class="mfp-figure">'+
            '<div class="mfp-close"></div>'+
            '<div class="mfp-img"></div>'+
            '</div>';
		$("#modal").html(markup);

		var d1 = $.get('/api/local/' + user_id);

		$.when( d1 ).done(function ( v1 ) {

			var data = {
				local: v1,
			};

			console.log(data);

			markup = '<div class="panel">'
			+ '<div class="panel-heading">'
			+ '<span class="panel-title">Local relation</span>'
			+ '</div>'
			+ '<form>'

			+ '<div class="form-inline panel-body p25">'

			+ '<div class="section row mb10">'
			+ '<label for="grade" class="field-label col-md-4">Local account</label>'
			+ '<div class="col-md-8">'
			+ '<p class="form-control-static">${local.user.email}</p>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10" style="height:200px;">'
			+ '<label for="grade" class="field-label col-md-4">Student</label>'
			+ '<div class="col-md-8" style="position:relative;">'
			+ '<label for="search_student" class="field prepend-icon">'
			+ '<input type="text" id="search_student" class="gui-input" value="">'
			+ '<label for="search_student" class="field-icon">'
			+ '<i class="fa fa-user"></i>'
			+ '</label>'
			+ '</label>'
			+ '<ul id="search_student_list" style="position:absolute;width:100%;z-index:99;background:#fff;height:160px;border:solid 1px;overflow-y:scroll;padding: 0;list-style: none;display:none;">'
			+ '</ul>'
			+ '<input type="text" style="display:none;" id="tagmanager" class="form-control tm-input" placeholder="Create a new tag..">'
			+ '<div class="tag-container tags"></div>'
			+ '</div>'
			+ '</div>'

			+ '<div class="section row mb10" style="height:200px;">'
			+ '<label for="grade" class="field-label col-md-4">Host Family</label>'
			+ '<div class="col-md-8" style="position:relative;">'
			+ '<label for="search_host" class="field prepend-icon">'
			+ '<input type="text" id="search_host" class="gui-input" value="">'
			+ '<label for="search_host" class="field-icon">'
			+ '<i class="fa fa-user"></i>'
			+ '</label>'
			+ '</label>'
			+ '<ul id="search_host_list" style="position:absolute;width:100%;z-index:99;background:#fff;height:160px;border:solid 1px;overflow-y:scroll;padding: 0;list-style: none;display:none;">'
			+ '</ul>'
			+ '<input type="text" style="display:none;" id="tagmanager2" class="form-control tm-input2" placeholder="Create a new tag..">'
			+ '<div class="tag-container tags2"></div>'
			+ '</div>'
			+ '</div>'

			+ '<div class="text-center smart-widget"><button id="btn_relation_modify" type="button" class="btn btn-primary">modify</button></div>'

			+ '</div>'

			+ '</form>'
			+ '</div>'
			+ '<button title="Close (Esc)" type="button" class="mfp-close">×</button>';

			$.template( "template", markup );
			$("#modal").html($.tmpl( "template", data ));

			$("#search_student").off('keyup');
			$("#search_student").on('keyup', function() {
				if($(this).val() == '') {
					$("#search_student_list").html('');
					return;
				}
				$.get('/api/student?sl_search=email&sl_keyword='+$(this).val(), function(data) {
					var student_markup = '<li>'
					+ '<a href="#" class="btn_student_add gui-input">${email}</a>'
					+ '</li>';

					$.template( "template", student_markup );
					$("#search_student_list").html($.tmpl( "template", data.data ));
					$("#search_student_list").show();

					$(".btn_student_add").off('click');
					$(".btn_student_add").on('click', function() {
						$(".tm-input").tagsManager('pushTag', $(this).text());
					});
				});
			});

			var prefilled = [];
			for(var i=0;i<data.local.students.length;i++) {
				prefilled.push(data.local.students[i].user.email);
			}

			$(".tm-input").tagsManager({
			  tagsContainer: '.tags',
			  prefilled: prefilled,
			  tagClass: 'tm-tag-info',
			});

			$("#search_student").off('focusout');
			$("#search_student").on('focusout', function() {
				setTimeout(function() {
					$("#search_student_list").hide();
				}, 300);
			});

			$("#search_student").off('focus');
			$("#search_student").on('focus', function() {
				if($(this).val() != '') {
					$("#search_student_list").show();
				}
			});

			$("#search_host").off('keyup');
			$("#search_host").on('keyup', function() {
				if($(this).val() == '') {
					$("#search_host_list").html('');
					return;
				}
				$.get('/api/host/search?sl_search=email&sl_keyword='+$(this).val(), function(data) {
					var student_markup = '<li>'
					+ '<a href="#" class="btn_host_add gui-input">${email}</a>'
					+ '</li>';

					$.template( "template", student_markup );
					$("#search_host_list").html($.tmpl( "template", data.data ));
					$("#search_host_list").show();

					$(".btn_host_add").off('click');
					$(".btn_host_add").on('click', function() {
						$(".tm-input2").tagsManager('pushTag', $(this).text());
					});
				});
			});

			var prefilled2 = [];
			for(var i=0;i<data.local.hosts.length;i++) {
				prefilled2.push(data.local.hosts[i].user.email);
			}

			$(".tm-input2").tagsManager({
			  tagsContainer: '.tags2',
			  prefilled: prefilled2,
			  tagClass: 'tm-tag-info',
			});

			$("#search_host").off('focusout');
			$("#search_host").on('focusout', function() {
				setTimeout(function() {
					$("#search_host_list").hide();
				}, 300);
			});

			$("#search_host").off('focus');
			$("#search_host").on('focus', function() {
				if($(this).val() != '') {
					$("#search_host_list").show();
				}
			});

			$("#btn_relation_modify").off('click');
			$("#btn_relation_modify").on('click', function() {

				var input_obj = {
					student_email: $(".tm-input").tagsManager('tags'),
					host_email: $(".tm-input2").tagsManager('tags'),
				}
				$.ajax({
					method: "post",
					url: "/api/local/"+user_id,
					data: input_obj
				})
				.done(function( msg ) {
					location.reload();
				})
				.fail(function( a ) {
					alert(a.responseJSON.msg);
				});
			});
		});

		// Inline Admin-Form example 
		$.magnificPopup.open({
			items: {
				src: '#modal'
			},
			callbacks: {
				beforeOpen: function(e) {
					this.st.mainClass = 'mfp-zoomIn';
				}
			},
			midClick: true
		});
	}

   // Place custom scripts here
    function ucfirst(str) {
		var str = str.substring(0, 1).toUpperCase() + str.substring(1, str.length);
		return str;
	}