/* global _, angular, i18n, Ladda, Odometer */
'use strict';

angular.module('DinsorApp.directives', [])

/* layouts */
.directive('dinsorBar', [function() {
	return {
		restrict: 'C',
		templateUrl: '/templates/layouts/dinsor-bar.valuecreation'
	};
}])
.directive('privacy', [function() {
	return {
		restrict: 'C',
		templateUrl: '/templates/layouts/privacy.valuecreation',
	};
}])
.directive('copyright', [function() {
	return {
		restrict: 'C',
		templateUrl: '/templates/layouts/copyright.valuecreation'
	};
}])
.directive('headBar', [function() {
	return {
		restrict: 'A',
		template: '<div ng-include="navigation"></div>',
		link: function(scope, element, attrs) {
			scope.$watch('headbar', function(newValue, oldValue) {
				// console.log(newValue)
				if(newValue) {
					scope.navigation = 'templates/layouts/header.valuecreation';
				}
            });
		}
	};
}])
.directive('headbarLogo', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			var logo = '';
			//console.log(logo)
			if(logo) {
				var $img = $('<div/>').append($('<img/>').attr('src', logo));
				element.append($img.addClass('valign-wrapper'));
			}
		}
	}
}])
.directive('sitemap', [function() {
	return {
		restrict: 'A',
		templateUrl: '/templates/layouts/sitemap.valuecreation',
		link: function(scope, element, attrs)
		{
			attrs.$observe('sitemap', function(program) {
				//scope.service.program.data('sitemap', institution).then(function(data) {
					//console.log(data)
				//	scope.sitemap = data;
				//});
			});
		}
	};
}])

/* elements */
.directive('image', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('image', function(image) 
			{
				var img = new Image();
				img.onload = function() {
					var ratio = this.height / this.width;
					element.css('padding-top', ratio *100+'%');
					element.css('position','relative');
				}
				img.src = 'https:' + image;
				element.removeAttr('image');
				element.css('background-image', "url('"+image+"')").addClass('cover');
				//
				element.removeAttr('image');
			});
		}
	}
}])
.directive('background', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('background', function(image)
			{
				var img = new Image();
				img.onload = function() {
					var height = (this.height / this.width) * 100;
					if(attrs.height) {
						element.css('height', attrs.height + 'px');
					}else {
						element.css('height', height + 'vw');
					}
				}
				
				if (image.indexOf("http://") != 0 || image.indexOf("https://") != 0) {
					img.src = 'https:' + image;
				}
				img.src = image;
				element.css("background-image", "url('"+image+"')");
				
				// background position
				if(attrs.position == 'center') {
					element.addClass('bg-cover-center');
				}else {
					element.addClass('background-image width');
				}
				element.removeAttr('background');
			});
		}
	}
}])
.directive('icon', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('icon', function(image) 
			{
				var $img = $('<img/>');
				var img = new Image();
				img.onload = function() {
					$img.attr('src', image);
					element.append($img);
				}
				img.src = image;
				element.removeAttr('icon');
			});
		}
	}
}])
.directive('language', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('language', function(lang) 
			{
				if (lang == '') {
					lang = 'th';
				}
				
				var $icon = $('<img/>').attr('width', '35').attr('src', '/public/img/icon/icon-globe-'+ lang +'.png');
				element.append($icon);
				
			});
		}
	}
}])
.directive('tabBar', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			
			$(document).ready(function() {
				element.find('.tabs').tabs();
			});
			//
		}
	}
}])
.directive('carouselSlider', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			var resourceUrl = scope.resourceUrl;
			var    $carousel = $('<div/>').addClass('carousel carousel-slider');
			element.append($carousel);
			
			scope.service.app.banners().then(function(banners) {
				// console.log(banners);
				angular.forEach(banners, function(item) {
					// if(item.banner_status == 1) {
						var bannerUrl = resourceUrl + item.banner_img;
						
						var    $item = $('<a/>').addClass('carousel-item').attr('href', item.banner_link);
						var $image = $('<div/>').addClass('relative');
						var $gradient = $('<div/>').addClass('bg-gradient');
						
						// var img = new Image();
						// img.onload = function() {
						//     var ratio = this.height / this.width;
						//     $image.css('padding-top', ratio *100+'%');
						//     $carousel.css('padding-top', ratio *100+'%');
						// }
						// img.src = 'https:' + bannerUrl;
						
						$carousel.css('padding-top', '56.25%');
						$image.css('height', '100%');
						$image.css('background-image', "url('"+ bannerUrl +"')").addClass('background-image width center-bottom');
				
						$item.append($image.append($gradient));
						$carousel.append($item);
					// }
					
				});
				
				$(document).ready(function() {
					// initialization carrousel slider
					$carousel.carousel({
						fullWidth: true,
						indicators: true
					});
					
					// auto next slide banner
					setInterval(function () {
						$carousel.carousel('next');
					}, 6000);
				});
				//
			});
			//
		}
	}
}])

/* style */
.directive('fitBrief', ['$timeout', function($timeout) {
	return {
		restrict: 'A',
		priority: 10,
		link: function(scope, element, attrs)
		{
			scope.$watch(attrs.ngBindHtml, function(value)
			{
				var fontSize = parseInt(element.css('font-size'));
				var margin = element.parent().css('margin');
				//console.log(margin)
				$timeout(function() {
				if(value !=undefined) {
					var blockBrief = element.prev();
					var brief = blockBrief.find('.brief');
					//
					//console.log(blockBrief);
					//console.log(blockBrief.outerHeight());
					
					//console.log(brief.height())
					var marginTop = (blockBrief.height() -brief.height()) /fontSize;
					element.children().children().children(':first-child').css('margin-top', -marginTop+'em').css('margin-left', '-4%');
				}
				})
			})
			
		}
	}
}])

/* page */
.directive('page', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			var paddingTop = 64;
			attrs.$observe('page', function(name) {
				element.removeAttr('page').attr('id', name);
			});
		}
	};
}])
.directive('pageBanner', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			var designWidth = 1920;
			attrs.$observe('pageBanner', function(banner) 
			{
				if(banner) {
					element.removeAttr('page-banner')
					//if(attrs.fit=='width') {
					//var img = new Image();
					//img.onload = function() {
					//	var height = this.height / designWidth;
					//	element.css('height', height *100+'vw');
					//}
					//img.src = 'https:' + banner;
					element.css('background-image', "url('"+banner+"')").addClass(attrs.fit);
				}
			});
		}
	}
}])
.directive('popupIntro', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			//mockup
			var banners = [
				{
					"banner_img": "https://valuecreation.ditp.go.th/uploads/iLHfXi0jwCAuPY6.jpg",
					"banner_url": "https://valuecreation.ditp.go.th/"
				},
				{
					"banner_img": "https://valuecreation.ditp.go.th/uploads/gES9Vsu4DoIryWz.jpg",
					"banner_url": "https://valuecreation.ditp.go.th/"
				}
			];
			
			//
			var $modal = $('<div/>').addClass('modal');
			var $btnClose = $('<a/>').addClass('modal-close btn-floating red');
			$btnClose.append($('<i/>').addClass('material-icons').text('close'));
			var $slider = $('<div/>').addClass('slider relative');
			var $ul = $('<ul/>').addClass('slides');
			
			angular.forEach(banners, function(banner) {
				var $li = $('<li/>');
				var $link = $('<a/>').attr('href', banner.banner_url);
				var $img = $('<img/>').attr('src', banner.banner_img);
				$link.append($img);
				$ul.append($li.append($link));
			});
			
			$modal.append($slider.append($ul).append($btnClose));
			element.append($modal);
			
			$(document).ready(function(){
				var sliderHeight = 750;
				
				$slider.slider({
					height: sliderHeight
				});
				$slider.css('height', sliderHeight);
				
				$modal.modal({
					inDuration: 300
				});
				$modal.modal('open'); 
			});
			//
		}
	}
}])

/* form input */
.directive('formHelper', ['$window',function($window) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('formHelper', function(text) {
				var helper = scope.helper;
				if(text) {
					if(!helper.hasOwnProperty('type')) {
						helper.title = 'มีบางอย่างผิดพลาด';
						helper.type = 'warning';
					}
					Swal.fire({
			            title: helper.title,
			            text: text,
			            icon: helper.type,
						confirmButtonText: 'ตกลง',
						confirmButtonColor: "#9E9E9E",
						heightAuto: false
			        }).then(function() {
						//console.log(text)
						if(scope.helper.close) {
							$window.top.close();
						}
						if(scope.helper.redirect) {
							$window.href = '/'+scope.helper.redirect;
						}
						scope.helper = {}
					});
				}
			});
		}
	}
}])
.directive('formSurvey', ['$location', '$timeout', function($location, $timeout) {
	return {
		restrict: 'A',
		templateUrl: '/templates/blocks/form-survey.valuecreation',
		link: function(scope, element, attrs) 
		{
			scope.step = 1;
			var delay = 600;
			
			scope.next_step = function(step) {
				
				$timeout(function() { 
					scope.step = step;
				}, delay);
				
			}
			
			scope.survey_submit = function() {
				
				$timeout(function() { 
					var surveyObj = {};
					$.each($('#survey-form').serializeArray(), function(index, key) {
						surveyObj[key.name] = key.value;
					});
					// console.log(surveyObj);
					$location.path('/result-summary').search(surveyObj);
				}, delay);
				
			}
			//
		}
	}
}])


// -- //
.directive('programPartner', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			var resourceUrl = scope.resourceUrl;
			var $row = $('<div/>').addClass('row');
			element.append($row);
			
			var query = {type:'logo'}
			scope.service.app.partner(query).then(function(data) {
				// console.log(data);
				angular.forEach(data, function(item) {
					var $col = $('<div/>').addClass('col s4 m4 l4');
					var $box = $('<div/>').addClass('reward-box center-align');
					var $link = $('<a/>').attr('href', item.partner_url).attr('target', '_blank');
					var $logo = $('<img/>').attr('src', resourceUrl + item.partner_image);
					var $name = $('<p/>').addClass('white-text light left-align').text(item.partner_title);
					$box.append($link.append($logo).append($name));
					$row.append($col.append($box));
				});
				
			});
			//
		}
	}
}])
.directive('programWeblink', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			var resourceUrl = scope.resourceUrl;
			
			var $box = $('<div/>').addClass('related-box related-wrapper relative');
			var $title = $('<h1/>').addClass('related-title bold white-text uppercase').text('E-LEARNING');
			var $content = $('<div/>').addClass('related-content absolute');
			var $row = $('<div/>').addClass('row relative');
			$box.append($title).append($content.append($row));
			element.append($box);
			
			var query = {type:'weblink'}
			scope.service.app.partner(query).then(function(data) {
				// console.log(data);
				
				for(var i = data.length-2; i < data.length; i++) {
					var $col = $('<div/>').addClass('col s6 m6 l6');
					var $link = $('<a/>').addClass('display-flex flex-direction-column').attr('href', data[i].partner_url).attr('target', '_blank');
					var $title = $('<p/>').addClass('related-site white-text extra-light larger flex-auto').text(data[i].partner_title);
					var $image = $('<img/>').addClass('flex-auto').attr('src', resourceUrl + data[i].partner_image).attr('width', '100%');
					$link.append($title).append($image);
					$row.append($col.append($link));
				}
			});
			//
		}
	}
}])
.directive('programProject', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{	
			var programs = ["design", "brand", "innovations", "branding"];
			var resourceUrl = scope.resourceUrl;

			scope.service.app.projects().then(function(projects) {
				// console.log(projects);
				angular.forEach(programs, function(program) {
					var $tab = $('<div/>').attr('id', program).addClass('tab-item');
					var $row = $('<div/>').addClass('row');
					var $rowActive = $('<div/>').addClass('row');
					var $rowPast = $('<div/>').addClass('row');
					var $colActive = $('<div/>').addClass('col s12 m9 l9');
					var $colPast = $('<div/>').addClass('col s12 m3 l3');
					element.append($tab);
					
					if(projects[program]['active'].length || projects[program]['activity'].length) {
						// project active
						angular.forEach(projects[program]['active'], function(data) {
							var $col = $('<div/>').addClass('col s12 m12 l12');
							var $link = $('<a/>').attr('href', '/project-activity/'+data.ID);
							var $card = $('<div/>').addClass('card-activities hoverable');
							var thumbnailUrl = data.Activity_Logo_Thumb == null ? scope.defaultBanner : data.Activity_Logo_Thumb;
							var $img = $('<div/>').css('background-image', "url('"+thumbnailUrl+"')").addClass('bg-cover-center').css('height', '500px');
							var $cardType = $('<div/>').addClass('card-activities-type');
							var $type = $('<span/>').addClass('grey-text uppercase').text(program.toUpperCase());
							var $status = $('<span/>').addClass('badge green darken-3 white-text small').text('อยู่ในช่วงการรับสมัคร');
							var $title = $('<h4/>').addClass('card-activities-title white-text regular larger truncate-3').text(data.Activity_Topic);
							
							$cardType.append($type).append($status);
							$card.append($img).append($cardType).append($title);
							$col.append($link.append($card));
							$rowActive.append($col);
							
							// check start-end time project
							// var currentTime = new Date();
							// var timeStart = new Date(data.Activity_Start_Regis);
							// var timeEnd = new Date(data.Activity_End_Regis);
							// if(timeStart <= currentTime) {
							// 	if((timeStart <= currentTime) && (timeEnd >= currentTime)) {
							// 		$status.addClass('green darken-3').text('อยู่ในช่วงการรับสมัคร');
							// 		$rowActive.append($col);
							// 	}else {
							// 		$title.removeClass('larger');
							// 		$img.css('height', '150px');
							// 		$status.addClass('red darken-3').text('ปิดรับสมัครแล้ว');
							// 		$rowPast.append($col);
							// 	}
							// }
						});
	
						// project past
						angular.forEach(projects[program]['activity'], function(data) {
							var $col = $('<div/>').addClass('col s12 m12 l12');
							var $link = $('<a/>').attr('href', '/project-activity/'+data.ID);
							var $card = $('<div/>').addClass('card-activities hoverable');
							var thumbnailUrl = data.Activity_Logo_Thumb == null ? scope.defaultBanner : data.Activity_Logo_Thumb;
							var $img = $('<div/>').css('background-image', "url('"+thumbnailUrl+"')").addClass('bg-cover-center').css('height', '150px');
							var $cardType = $('<div/>').addClass('card-activities-type');
							var $type = $('<span/>').addClass('grey-text uppercase').text(program.toUpperCase());
							var $status = $('<span/>').addClass('badge red darken-3 white-text small').text('ปิดรับสมัครแล้ว');
							var $title = $('<h4/>').addClass('card-activities-title white-text regular').text(data.Activity_Topic);
							
							$cardType.append($type).append($status);
							$card.append($img).append($cardType).append($title);
							$col.append($link.append($card));
							$rowPast.append($col);
						});
						
						$row.append($colActive.append($rowActive)).append($colPast.append($rowPast));
						$tab.append($row);
					}else {
						// no related projects
						var $box = $('<div/>').addClass('card-activities-none black relative').css('height', '56.25rem');
						var $alertText = $('<h2/>').addClass('regular white-text absolute absolute-center').text('ขณะนี้ยังไม่มีโครงการที่เกี่ยวข้อง');
						$box.append($alertText);
						$tab.append($box);
					}
					
					if(projects[program]['active'].length==0) {
						const $box = $('<div/>').addClass('card-activities-none black relative').css('height', '30.25rem');
						const $alertText = $('<h2/>').addClass('regular white-text absolute absolute-center margin-0').css('text-wrap', 'nowrap').text('ขณะนี้ยังไม่มีโครงการที่เปิดรับสมัคร');
						$box.append($alertText);
						$colActive.append($box);
					}
				});
				//
				
				$(document).ready(function() {
					$('.tabs').tabs({
						duration: 400
					});
					
					$(".tabs .tab a").mouseover(function() {
						// $('.tabs .tab a').removeClass('active');
						// $(this).addClass('active');
						// $(this).click();
						// $('.tab-item').css('display', 'none');
						// $($(this).attr('href')).css('display', 'block');
						// $('.tabs').tabs('select', $(this).attr('href').substring(1));
					});
				});
			});
			//
		}
	}
}])
.directive('programArticle', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{	
			var resourceUrl = scope.resourceUrl;
			
			var $articles = $('<div/>').addClass('articles-box relative');
			var $arrowNavigation = $('<div/>').addClass('absolute arrow-navigation');
			$arrowNavigation.append($('<a/>').addClass('white-text light medium').attr('href', '/knowledge-hub#read').text('➔'));
			var $row = $('<div/>').addClass('row');
			
			scope.service.app.knowledges().then(function(knowledges) {
				
				angular.forEach(knowledges['read'], function(knowledge) {
					var $col = $('<div/>').addClass('col s6 m6 l6');
					var $card = $('<a/>').addClass('card-articles hoverable').attr('href', '/knowledge-hub/'+knowledge.article_id+'#read');
					var $cardImage = $('<div/>').addClass('card-articles-image');
					var $image = $('<div/>').addClass('cover').css('background-position', 'center').css('height', '245px');
					$image.css('background-image', "url('"+resourceUrl + knowledge.article_img_cover+"')")
					var $cardContent = $('<div/>').addClass('card-articles-content black white-text').css('min-height', '10em');
					var $title = $('<p/>').addClass('card-articles-title medium normal').text(knowledge.article_title);
					var $desc = $('<p/>').addClass('card-articles-brief light truncate-2').html(knowledge.article_caption);
					$cardImage.append($image);
					$cardContent.append($title).append($desc);
					$card.append($cardImage).append($cardContent);
					
					$row.append($col.append($card));
				});
				
			});
			
			element.append($articles.append($row).append($arrowNavigation));
			//
		}
	}
}])
.directive('programVideo', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{	
			var $card = $('<div/>').addClass('knowledge-video relative');
			
			scope.service.app.knowledges().then(function(knowledges) {
				scope.watch = knowledges['watch'][0];
				
				var $catchphrase = $('<div/>').addClass('card-knowledge absolute catchphrase-left');
				var $title = $('<p/>').addClass('card-knowledge-title white-text medium larger truncate-2').css('line-height', '2.265rem').html(scope.watch.vdo_title);
				var $desc = $('<p/>').addClass('card-knowledge-desc white-text light').text(scope.watch.vdo_detail);
				
				var $iframe = $('<iframe/>').attr('src', 'https://www.youtube.com/embed/' + scope.watch.vdo_ref_id);
				$iframe.attr('width', '100%').attr('height', '500');
				$iframe.attr('frameborder', '0').attr('allowfullscreen', true);
				
				var $arrowNavigation = $('<div/>').addClass('absolute arrow-navigation');
				$arrowNavigation.append($('<a/>').addClass('white-text light medium').attr('href', '/knowledge-hub#watch').text('➔'));
				
				$catchphrase.append($title).append($desc);
				$card.append($catchphrase).append($iframe).append($arrowNavigation);
			});
			
			element.append($card);
			//
		}
	}
}])
.directive('programPodcast', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{	
			var $podcast = $('<div/>').addClass('knowledge-podclass relative').css('padding-bottom', '10em');
			
			scope.service.app.knowledges().then(function(knowledges) {
				var listen = knowledges['listen'][0];
				
				var $iconImg = $('<div/>').addClass('absolute knowledge-section-listen-mc');
				$iconImg.append($('<img/>').attr('src', '/public/img/mockup/background/background-microphone.png').attr('width', '100%'));
				
				// podcast data content
				var $row = $('<div/>').addClass('row relative');
				var $colContent = $('<div/>').addClass('col s12 m12 l12 line-bottom relative');
				var $link = $('<a/>').attr('href', '/knowledge-hub/'+ listen.pod_id +'#listen');
				var $bgGrey = $('<div/>').addClass('bg-grey');
				var $listenContent = $('<div/>').addClass('knowledge-section-listen center-align relative');
				var $image = $('<img/>').attr('src', '//services.dinsor.co.th/app/client/valuecreation/public/img/background/background-wave-sound.png').attr('width', '80%');
				var $title = $('<h2/>').addClass('card-knowledge-title white-text regular left-align truncate-3').text(listen.pod_title);
				$listenContent.append($image).append($title);
				$colContent.append($link.append($bgGrey).append($listenContent));
				
				// narrator content
				var $colNarrator = $('<div/>').addClass('col s12 m12 l12 line-bottom');
				var $listenNarrator = $('<div/>').addClass('knowledge-section-narrator');
				var $narrator = $('<span/>').addClass('white-text large').text('ม.ล. ภาวินี สันติศิริ (Design Director & Founder, AYODHYA)');
				var $playArrow = $('<span/>').addClass('white-text large right valign-wrapper');
				$playArrow.append($('<i/>').addClass('material-icons normal').text('play_arrow')).append($('<span/>').text('60.00'));
				$listenNarrator.append($narrator).append($playArrow);
				$colNarrator.append($listenNarrator);
				
				// arrow navigation
				var $arrowNavigation = $('<div/>').addClass('absolute arrow-navigation');
				$arrowNavigation.append($('<a/>').addClass('white-text light medium').attr('href', '/knowledge-hub#listen').text('➔'));
				
				$row.append($colContent).append($colNarrator).append($arrowNavigation);
				$podcast.append($iconImg).append($row);
			});
			
			element.append($podcast);
			//
		}
	}
}])
.directive('projectsActivities', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{	
			var query = {type:'all'}
			scope.service.app.projects(query).then(function(projects) {
				console.log(projects);
				
				// project owner
				var $projectOwner = $('<div/>').addClass('row');
				element.find('#project_owner').append($projectOwner);
				
				angular.forEach(projects['activities']['owner'], function(data) {
					var $col = $('<div/>').addClass('col s12 m6 l6');
					var $link = $('<a/>').attr('href', '/project-activity/' + data.ID);
					var $card = $('<div/>').addClass('card-activities hoverable');
					var thumbnailUrl = data.Activity_Logo_Thumb == null ? scope.defaultThumbnail : data.Activity_Logo_Thumb;
					var $img = $('<div/>').addClass('bg-cover-center').css('height', '500px').css('width', '100%');
					$img.css('background-image', "url('"+thumbnailUrl+"')");
					var $cardType = $('<div/>').addClass('card-activities-type');
					var $type = $('<span/>').addClass('grey-text uppercase').text('TYPE');
					var $status = $('<span/>').addClass('badge green darken-3 white-text small').text('อยู่ในช่วงการรับสมัคร');
					var $title = $('<h4/>').addClass('card-activities-title white-text regular larger truncate-3').text(data.Activity_Topic);
					
					$cardType.append($type).append($status);
					$card.append($img).append($cardType).append($title);
					$col.append($link.append($card));
					$projectOwner.append($col);
				});
				
				// project ditp
				var $projectDitp = $('<div/>').addClass('row');
				element.find('#project_ditp').append($projectDitp);
				
				angular.forEach(projects['activities']['ditp'], function(data, index) {
					var $link = $('<a/>').attr('href', '/project-activity/' + data.ID);
					var $card = $('<div/>').addClass('card-listen hoverable');
					var $row = $('<div/>').addClass('row');
					var $colImage = $('<div/>').addClass('col s12 m4 l4');
					var $colContent = $('<div/>').addClass('col s12 m8 l8 card-listen-content');
					var thumbnailUrl = data.Activity_Logo_Thumb == null ? scope.defaultThumbnail : data.Activity_Logo_Thumb;
					var $img = $('<div/>').addClass('bg-cover-center').css('height', '350px').css('width', '100%');
					$img.css('background-image', "url('"+thumbnailUrl+"')");
					var $title = $('<h4/>').addClass('listen-title white-text regular larger').text(data.Activity_Topic);
					var $desc = $('<p/>').addClass('listen-desc grey-text normal light truncate-5').css('margin-top', '1em').text(data.Activity_Desc);
					
					if(index % 2 == 0) {
						$card.addClass('black');
					}
					
					$colImage.append($img);
					$colContent.append($title).append($desc);
					$card.append($row.append($colImage).append($colContent));
					$projectDitp.append($link.append($card));
				});
				
			});
			//
		}
	}
}])
.directive('programCategory', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{	
			// scope.scrollToTop();
			var resourceUrl = scope.resourceUrl;
			var programs = [
				{
					"key": "design",
					"banner_title": "DESIGN",
					"banner_image": "/public/img/mockup/background/background-design-activities.jpg",
					"banner_desc": "โครงการและกิจกรรมที่จะช่วยยกระดับและสร้างมูลค่าเพิ่มสินค้าไทย ให้เทียบเท่าสินค้าที่ออกแบบดีจากนานาชาติ"
				},
				{
					"key": "brand",
					"banner_title": "BRAND",
					"banner_image": "/public/img/mockup/background/background-brand-activities.jpg",
					"banner_desc": "โครงการและกิจกรรมที่ส่งเสริมการสร้างภาพลักษณ์ผ่านตราสัญลักษณ์ Thailand Trust Mark (T Mark) และพัฒนาผู้ประกอบการแบรนด์ไทยให้มีการสร้างแบรนด์และภาพลักษณ์ที่ดีเป็นที่ยอมรับในตลาดโลก"
				},
				{
					"key": "innovations",
					"banner_title": "INNOVATION",
					"banner_image": "/public/img/mockup/background/background-innovation-activities.jpg",
					"banner_desc": "กลุ่มงานที่พัฒนา ส่งเสริม และผลักดันผู้ประกอบการไทยให้มีขีดความสามารถทางการแข่งขันทางการค้าในเวทีสากลด้วยการสร้างมูลค่าจากนวัตกรรม BCG ตลอดจนเผยแพร่ประชาสัมพันธ์ผู้ประกอบการ BCG ให้เป็นที่รู้จักทั่วโลก เสริมสร้างภาพลักษณ์ทางการค้าอันดีของไทย"
				},
				{
					"key": "branding",
					"banner_title": "BRANDING THAILAND",
					"banner_image": "/public/img/mockup/background/background-banding-thailand-activities.jpg",
					"banner_desc": "โครงการและกิจกรรมที่สร้างภาพลักษณ์สินค้าและบริการส่งออกของไทยในเวทีการค้าโลก"
				},
				{
					"key": "other",
					"banner_title": "โครงการและกิจกรรมอื่นๆ",
					"banner_image": "/public/img/mockup/background/background-design-activities.jpg",
					"banner_desc": "ขณะนี้ยังไม่มีโครงการที่เกี่ยวข้อง"
				}
			];
			
			var query = {type:'all'}
			scope.service.app.projects(query).then(function(projects) {
				console.log(projects);
				angular.forEach(programs, function(program) {
					
					// banner category
					var $tab = $('<div/>').attr('id', program.key);
					var $banner = $('<div/>').addClass('institution-banner relative');
					var $bannerContent = $('<div/>').addClass('absolute-center center-align').css('width', '100%');
					var $bannerTitle = $('<h1/>').addClass('institution-title purple-text text-lighten-1 bold uppercase').text(program.banner_title);
					var $bannerDesc = $('<h3/>').addClass('institution-desc white-text light').text(program.banner_desc);
					var img = new Image();
					img.onload = function() {
						var height = (this.height / this.width) * 100;
						$banner.css('height', height + 'vw');
					}
					img.src = 'https:' + program.banner_image;
					$banner.css("background-image", "url('"+program.banner_image+"')");
					$banner.removeAttr('background').addClass('background-image width');
					$banner.append($('<div/>').addClass('bg-gradient'));
					$banner.append($bannerContent.append($bannerTitle).append($bannerDesc));
					$tab.append($banner);
					
					// program institutions
					var $section = $('<div/>').addClass('section institution-box');
					var $container = $('<div/>').addClass('container');
					var $row = $('<div/>').addClass('row');
					
					if(projects[program.key]) {
						angular.forEach(projects[program.key]['category'], function(data, index) {
							var $col = $('<div/>').addClass('col');
							var $link = $('<a/>').attr('href', '/project-activities/' + program.key + '/' + data.cat_id);
							var thumbnailUrl = resourceUrl + data.cat_banner;
							var $image = $('<div/>').addClass('bg-cover-center');
							$image.css('width', '100%').css('border', '1px solid #424242');
							$image.css('background-image', "url('"+thumbnailUrl+"')");
							
							if(index == 0) {
								$col.addClass('s12 m12 l12');
								$image.css('height', '675px');
							}else {
								$col.addClass('s12 m6 l6');
								$image.css('height', '335px');
							}
							
							$col.append($link.append($image));
							$row.append($col);
						});
					}
					$section.append($container.append($row));
					$tab.append($section);
				
					element.append($tab);
				});
				
				$(document).ready(function() {
					$('.tabs').tabs();
				});
			});
			//
		}
	}
}])
.directive('categoryView', ['$routeParams', function($routeParams) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{	

			var resourceUrl = scope.resourceUrl;
			var query = $routeParams;
			scope.category = {};
			
			scope.service.app.projects(query).then(function(data) {
				// console.log(data);
				
				// get banner data
				scope.category.name = data.cat_name;
				scope.category.caption = data.cat_caption;
				scope.category.logo = resourceUrl + data.cat_img;
				scope.category.banner = resourceUrl + data.cat_banner;
				
				//-- get program activity -- //
				var $row = $('<div/>').addClass('row');
				var $rowActive = $('<div/>').addClass('row');
				var $rowPast = $('<div/>').addClass('row');
				var $colActive = $('<div/>').addClass('col s12 m9 l9');
				var $colPast = $('<div/>').addClass('col s12 m3 l3');
				
				// project active
				angular.forEach(data.active, function(item) {
					var $col = $('<div/>').addClass('col s12 m12 l12');
					var $link = $('<a/>').attr('href', '/project-activity/'+item.ID);
					var $card = $('<div/>').addClass('card-activities hoverable');
					var thumbnailUrl = item.Activity_Logo_Thumb == null ? scope.defaultBanner : item.Activity_Logo_Thumb;
					var $img = $('<div/>').css('background-image', "url('"+thumbnailUrl+"')").addClass('bg-cover-center').css('height', '500px');
					var $cardType = $('<div/>').addClass('card-activities-type');
					var $type = $('<span/>').addClass('grey-text uppercase').text(item.inst_type);
					var $status = $('<span/>').addClass('badge green darken-3 white-text small').text('อยู่ในช่วงการรับสมัคร');
					var $title = $('<h4/>').addClass('card-activities-title white-text regular larger truncate-3').text(item.Activity_Topic);
					
					$cardType.append($type).append($status);
					$card.append($img).append($cardType).append($title);
					$col.append($link.append($card));
					$rowActive.append($col);
					
				});

				// project past
				angular.forEach(data.activity, function(item) {
					var $col = $('<div/>').addClass('col s12 m12 l12');
					var $link = $('<a/>').attr('href', '/project-activity/'+item.ID);
					var $card = $('<div/>').addClass('card-activities hoverable');
					var thumbnailUrl = item.Activity_Logo_Thumb == null ? scope.defaultBanner : item.Activity_Logo_Thumb;
					var $img = $('<div/>').css('background-image', "url('"+thumbnailUrl+"')").addClass('bg-cover-center').css('height', '150px');
					var $cardType = $('<div/>').addClass('card-activities-type');
					var $type = $('<span/>').addClass('grey-text uppercase').text(item.inst_type);
					var $status = $('<span/>').addClass('badge red darken-3 white-text small').text('ปิดรับสมัครแล้ว');
					var $title = $('<h4/>').addClass('card-activities-title white-text regular').text(item.Activity_Topic);
					
					$cardType.append($type).append($status);
					$card.append($img).append($cardType).append($title);
					$col.append($link.append($card));
					$rowPast.append($col);
				});
				
				$row.append($colActive.append($rowActive)).append($colPast.append($rowPast));
				element.find('#program_activity').append($row);
				// -- end get program activity -- //

			});
			//
		}
	}
}])
.directive('projectView', ['$routeParams', function($routeParams) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			scope.routeParam = $routeParams;
			//	
			var query = $routeParams;
			// console.log(query);
			scope.service.app.projects(query).then(function(data) {
				scope.project = data;
				// console.log(data);
			});
			
			// Format Location
			scope.formatLocation = function(location) {
				const toJson = JSON.parse(location)[0];
				// console.log(toJson);
				return `${toJson.Activity_Location_TH}, ${toJson.City_Name_TH}, ${toJson.Country_Name_Th}`;
			}
			//
		}
	}
}])
.directive('programNews', ['$filter', function($filter) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			var resourceUrl = scope.resourceUrl;
			var programs = [
				{
					"category": "ข่าวสารและความเคลื่อนไหวของ VALUE CREATION",
					"key": "owner"
				},
				{
					"category": "ข่าวสารและความเคลื่อนไหวที่ผ่านมาแล้ว",
					"key": "ditp"
				},
				{
					"category": "ข่าวสารและความเคลื่อนไหวของ DITP",
					"key": "past"
				}
			];
			//
		
			scope.service.app.news().then(function(data) {
				 console.log(data);
				
				angular.forEach(programs, function(program, index) {
					
					var key = 'news-updates/news';
					if(program.key !='owner') {
						key = 'project-activity';
					}
					if(data[program.key].length) {
						var $box = $('<div/>').addClass('news-box border-bottom-grey');
						var $container = $('<div/>').addClass('container');
						var $category = $('<h2/>').addClass('news-topic grey-text regular').text(program.category);
						var $row = $('<div/>').addClass('row');
						
						// remove border bottom last child
						if (index == programs.length - 1) {
							$box.removeClass('border-bottom-grey');
						}
						
						var news = data[program.key];
						if(news) {
							angular.forEach(news, function(item) {
								var resourceUrl = scope.resourceUrl;
								
								var $col = $('<div/>').addClass('col s6 m4 l4');
								var $link = $('<a/>').attr('href', '/'+key+'/'+ item.news_id);
								var $card = $('<div/>').addClass('card-news hoverable');
								var $title = $('<h4/>').addClass('card-news-title white-text regular truncate-3').text(item.news_title);
								var $date = $('<p/>').addClass('card-news-date grey-text').text($filter('date_format')(item.news_date));
								var $cardimage = $('<div/>').addClass('box-bg-zoom overflow-hidden').css('height', '220px');
								var $image = $('<img/>').addClass('background-zoom').css('object-fit', 'cover');
								if (item.news_img.indexOf("http://") == 0 || item.news_img.indexOf("https://") == 0) {
									resourceUrl = item.news_img;
								}else {
									resourceUrl = resourceUrl + item.news_img;
								}
								$image.attr('src', resourceUrl);
								
								$link.click(function() {
									scope.scrollToTop();
								});
								$card.append($cardimage.append($image)).append($date).append($title);
								$row.append($col.append($link.append($card)));
							});
						}
						$box.append($container.append($category).append($row));
						element.append($box);
					}
				});
			});
			//
		}
	}
}])
.directive('newsView', ['$routeParams', 'ngMeta', function($routeParams, ngMeta) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			var newsId = $routeParams.id;
			var resourceUrl = scope.resourceUrl;
			
			if(newsId != 'undefined') {
				scope.service.app.news('owner', newsId).then(function(data) {
					scope.news = data;
					scope.news.news_img = resourceUrl + data.news_img;
					
					// Meta Tags
					ngMeta.setTag('description', scope.news.news_title);
					ngMeta.setTag('og:type', 'news');
					ngMeta.setTag('og:image', scope.news.news_img);
					//
				});
			}
			//
		}
	}
}])
.directive('knowledgeHub', ['$location', function($location) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			//
			var query = {type:'all'}
			scope.service.app.knowledges(query).then(function(data) {
				scope.knowledges = data;
				scope.banner_watch = data.banner_watch;
				console.log(scope.knowledges);
			});
			
			// scope.more = function(type, offset) {
			// 	console.log($location.hash());
			// 	console.log(offset);
			// }
			
			$(document).ready(function() {
				$('.tabs').tabs();
			});
			//
			scope.loadMore = function(type) {
				var query = {type: type, offset:scope.knowledges[type].length};
				scope.service.app.knowledges(query).then(function(data) {
					//scope.knowledges = data;
					console.log(data);
					if(data[type].length >0) {
						scope.knowledges[type].push(...data[type]);
						console.log(scope.knowledges);
					}
				});
			}
		}
	}
}])
.directive('knowledgeView', ['$location', '$routeParams', '$timeout', 'ngMeta' , function($location, $routeParams, $timeout, ngMeta) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			var type = $location.hash();
			var id = $routeParams.id;
			
			if(id != 'undefined') {
				var query = {type: type, id: id};
				scope.service.app.knowledges(query).then(function(data) {
					scope.knowledges = data;
					console.log(data);
					
					// Meta Tags
					ngMeta.setTag('og:type', 'article');
					// ngMeta.setTag('description', scope.knowledges.article_title);
					// ngMeta.setTag('og:image', scope.resourceUrl + scope.knowledges.article_img_cover);
					//
				});
			}
			
			$(document).ready(function() {
				// $('.collapsible').collapsible();
				
				var tabs = element.find('.tabs');
				tabs.tabs();
				$(".tabs .tab a").each(function() {
					var href = $(this).attr('href');
					// $(this).attr('href', '/knowledge-hub' + href);
					$(this).attr('href', '/knowledge-hub' + href).attr('target', '_self');
				});
				// tabs.tabs('destroy');
				// tabs.append('<li/>');
			});
			//
		}
	}
}])
.directive('cardListen', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			attrs.$observe('cardListen', function() 
			{
				var $visualization = element.find(".card-listen-visualization");
				
				$visualization.css({
					height: "8.125em",
					backgroundImage: "url('/public/img/background/background-audio-visualization.png')",
					backgroundPosition: "center",
					backgroundRepeat: "no-repeat",
					backgroundSize: "contain"
				});
				//
				element.on({
					mouseenter: function (event) {
						$visualization.css("background-image", "url('/public/img/background/background-audio-visualization-gif.gif')");
					},
					mouseleave: function (event) {
						$visualization.css("background-image", "url('/public/img/background/background-audio-visualization.png')");
					}
				});
				//
			});
		}
	}
}])
.directive('programGallery', ['$filter', function($filter) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			var query = {type:'all'}
			scope.service.app.galleries(query).then(function(data) {
				// console.log(data);
				
				angular.forEach(data, function(gallery, index) {
					if(gallery.gallery.length) {
						var $section = $('<div/>').addClass('section border-bottom-grey');
						if(index == Object.keys(data).length) {
							$section.removeClass('border-bottom-grey');
						}
						element.append($section);
						
						var $container = $('<div/>').addClass('container gallery-box');
						var $category = $('<h2/>').addClass('section-title grey-text medium').css('margin-bottom', '1.5em').text(gallery.category.cat_name);
						var $row = $('<div/>').addClass('row').css('margin', '-0.5rem');
						$section.append($container);
						$container.append($category).append($row);
						//
						angular.forEach(gallery.gallery, function(item) {
							var $col = $('<div/>').addClass('col s6 m4 l4');
							var $link = $('<a/>').attr('href', '/gallery/' + item.gallery_id);
							var $card = $('<div/>').addClass('card-gallery relative hoverable');
							var $gradient = $('<div/>').addClass('card-gallery-gradient');
							var $cardContent = $('<div/>').addClass('bottom').css('padding', '1em 2em');
							var $title = $('<h3/>').addClass('card-gallery-title white-text light truncate-4').text(item.gallery_title);
							var $date = $('<p/>').addClass('card-gallery-date grey-text').text($filter('date_format')(item.gallery_date_publish));
							
							var resourceUrl = scope.resourceUrl + item.gallery_img_cover;
							$card.css('background-image', "url('"+resourceUrl+"')").addClass('bg-cover-center').css('height', '390px');
							
							$cardContent.append($date).append($title);
							$card.append($gradient).append($cardContent);
							$row.append($col.append($link.append($card)));
						});
					}
					//
				});
			});
			//
		}
	}
}])
.directive('galleryView', ['$routeParams', '$timeout', '$filter', 'ngMeta', function($routeParams, $timeout, $filter, ngMeta) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			
			var galleryId = $routeParams.id;
			var query = {type:'all', id: galleryId}
			scope.service.app.galleries(query).then(function(data) {
				// console.log(data);
				scope.photo = data.photo;
				
				var $title = $('<h2/>').addClass('gallery-title white-text medium').text(data.gallery_title);
				var $date = $('<p/>').addClass('gallery-date grey-text normal').text($filter('date_format')(data.gallery_date_publish));
				var $section = $('<div/>').addClass('section gallery-section relative hide-on-small-only');
				element.append($title).append($date).append($section);
				
				var resourceUrl = scope.resourceUrl + data.photo[0].photo_img;
				// var $imgFull = $('<img/>').attr('src', resourceUrl).attr('width', '100%').attr('height', '670px').css('object-fit', 'cover');
				var $imgFull = $('<div/>').addClass('relative bg-cover-center').css('background-image', "url('"+resourceUrl+"')");
				// $imgFull.css('height', '670px').css('margin', '2em 0');
				$imgFull.css({
					height: '670px',
					margin: '2em 0',
					backgroundSize: 'contain',
					backgroundColor: 'white'
				});
				var $gradient = $('<div/>').addClass('gallery-gradient');
				var $captionContent = $('<div/>').addClass('bottom').css('padding', '1em 2em');
				var $caption = $('<h3/>').addClass('white-text light truncate-3').text(data.gallery_caption);
				var $tabGallery = $('<div/>').addClass('relative');
				var	$carousel = $('<div/>').addClass('carousel carousel-slider carousel-gallery relative');
				var	$carouselItem = $('<div/>').addClass('carousel-item');
				var $navigation = $('<div/>').addClass('absolute arrow-navigation');
				var $arrow = $('<div/>').addClass('white-text light medium').text('➔');
				$arrow.css('cursor', 'pointer');
				$imgFull.append($gradient).append($captionContent.append($caption));
				$navigation.append($arrow);
				$tabGallery.append($carousel).append($navigation);
				
				var $row = $('<div/>').addClass('row');
				var countItem = 1;
				
				angular.forEach(data.photo, function(gallery) {
					if(countItem == 1) {
						$carousel.append($carouselItem);
						$carouselItem.append($row);
					}	
					
					var $col = $('<div/>').addClass('col s4 m4 l4').css('height', '220px');
					var $img = $('<img/>').addClass('img-gallery').attr('src', scope.resourceUrl + gallery.photo_img);
					$img.attr('width', '100%').attr('height', '100%').css('object-fit', 'cover');
					$img.css('cursor', 'pointer');
		
					$row.append($col.append($img));
					
					countItem++;
					if(countItem == 4) {
						countItem = 1;
						$carouselItem = $('<div/>').addClass('carousel-item');
						$row = $('<div/>').addClass('row');
					}
					
					// expand image
					$img.mouseover(function(e) {
						$imgFull.css('background-image', "url('"+scope.resourceUrl + gallery.photo_img+"')");
						$('.img-gallery').css('border', 'none');
						$(this).css('border', '1px solid #707070');
					});
				});
				$section.append($imgFull).append($tabGallery);
				
				$(document).ready(function() {
					
					$timeout(function() { 
						$carousel.carousel({
							fullWidth: true,
							indicators: false
						});
						
						// next carousel item
						$arrow.click(function(e) {
							e.preventDefault();
							e.stopPropagation();
							$carousel.carousel('next');
						});
						
						// material box
						$('.materialboxed').materialbox();
						
					}, 800);
					
				});
				
				// Meta Tags
				ngMeta.setTag('description', data.gallery_title);
				ngMeta.setTag('og:type', 'gallery');
				ngMeta.setTag('og:image', resourceUrl);
				//
			});
			//
		}
	}
}])
.directive('surveyView', ['$location', '$filter', function($location, $filter) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			// get parameters from url
			var type = $location.search().business_type;
			scope.business_size = $location.search().business_size;
			var show_product = $location.search().show_product;
			var attend = $location.search().attend;
			
			var business_type = [
				{
					"key": "designer_owner",
					"title": "Designer และเจ้าของสินค้า/บริการ",
					"desc": "เจ้าของกิจการที่เป็นผู้ออกแบบสินค้า/บริการด้วยตัวเองและต้องการพัฒนาหรือสร้างความน่าเชื่อถือให้มากขึ้น",
					"image": "/public/img/icon/icon-business-type-designer.png"
				},
				{
					"key": "business_owner",
					"title": "ผู้ประกอบการที่มีสินค้า/บริการ",
					"desc": "เจ้าของกิจการที่มีสินค้า/บริการ และต้องการเพิ่มมูลค่าให้สินค้า/บริการอย่างรอบด้าน",
					"image": "/public/img/icon/icon-business-type-owner.png"
				},
				{
					"key": "design_provider",
					"title": "ผู้ให้บริการออกแบบ",
					"desc": "เจ้าของกิจการที่ให้บริการด้านการออกแบบ",
					"image": "/public/img/icon/icon-business-type-provider.png"
				}
			];
			
			scope.business_type = {};
			scope.show_product = show_product == 'y' ? 'ต้องการ' : 'ไม่ต้องการ';
			scope.attend = attend == 'y' ? 'เคย' : 'ไม่เคย';
			
			angular.forEach(business_type, function(data) {
				if (data.key == type) {
					scope.business_type.title = data.title;
					scope.business_type.desc = data.desc;
					scope.business_type.image = data.image;
				}
			});
			
			// get projects
			var query = {type:'all'}
			scope.service.app.projects(query).then(function(data) {

				var $row = $('<div/>').addClass('row');
				
				angular.forEach(data.activities.owner, function(item) {
					var resourceUrl = scope.resourceUrl;
					
					var $col = $('<div/>').addClass('col s4 m4 l4');
					var $link = $('<a/>').attr('href', '/project-activity/'+ item.ID);
					var $card = $('<div/>').addClass('card-news hoverable');
					var $title = $('<h4/>').addClass('card-news-title white-text regular truncate-3').text(item.Activity_Topic);
					var $date = $('<p/>').addClass('card-news-date grey-text').text($filter('date_format')(item.Activity_Start_Regis));
					var $cardimage = $('<div/>').addClass('box-bg-zoom overflow-hidden').css('height', '220px');
					var $image = $('<img/>').addClass('background-zoom').css('object-fit', 'cover');
					if (item.Activity_Logo_Thumb.indexOf("http://") == 0 || item.Activity_Logo_Thumb.indexOf("https://") == 0) {
						resourceUrl = item.Activity_Logo_Thumb;
					}else {
						resourceUrl = resourceUrl + item.Activity_Logo_Thumb;
					}
					$image.attr('src', resourceUrl);
					
					$link.click(function() {
						scope.scrollToTop();
					});
					$card.append($cardimage.append($image)).append($date).append($title);
					$row.append($col.append($link.append($card)));
				});
				
				element.find('#result-summary').append($row);
			});
			//
		}
	}
}])

/* User */
.directive('memberAuthorized', ['$window','$location', function($window, $location) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			scope.service.member.authorized().then(function(authorized) {
				//console.log(authorized)
				if(authorized) {
					scope.authorized = authorized;
					element.empty();
					//
					var $space = $('<li><a class="light">|</a></li>')
					var $name = $('<a/>').text(authorized.user_name);
					var $logout = $('<a/>').text('ออกจากระบบ');
					element.append($('<li/>').append($name)).append($space)
					.append($('<li/>').append($logout));
					//
					$logout.on('click', function() {
						scope.logout();
					});
				}
			});
		}
	}
}])
// .directive('memberAuthorized', ['$location', function($location) {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			/* var query = {};
// 			query = $location.hash().split('&').map((str) => str.split('=')[1]);
// 				//query[str.split('=')[0]] = str.split('=')[1];
// 				//str.split('='));
// 			console.log(query) */
// 			/* scope.service.member.authorized().then(function(user) {
// 				//console.log(user)
// 				if(user.user_name !=undefined) {
// 					//element.empty();
// 					var $user = $('<a/>').text(user.user_name);
// 					var $logout = $('<li/>').append($('<a/>').attr('href','/logout').text('ออกจากระบบ'));
// 					//
// 					element.empty().append($('<li/>').append($user)).append($('<li/>').append($('<a/>').text('|'))).append($logout);
// 				}
// 			});
// 			$location.path('/') */
// 			/* scope.service.member.authorized().then(function(authorized) {
// 				//if($location.hash() && $location.path().indexOf('/register')<0) {
// 					//console.log($location.hash())
// 				//	$location.hash(null);
// 				//}
// 				if(authorized) {
// 					//console.log(authorized)
// 					$location.hash(null)
// 					if(authorized.course !=undefined) {
// 						if($location.path().indexOf('/course')!=0) {
// 							$location.path('/course/'+authorized.course);
// 						}
// 					}
// 					if(authorized.permission) {
// 						//$location.path('/'+authorized.permission);//.hash(null)
// 					} else {
// 						var $btLogout = $('<a/>').text('ออกจากระบบ').addClass('waves-effect waves-light btn-small z-depth-1 white-text red'); 
// 						$btLogout.on('click', function() {
// 							scope.logout();
// 						});
// 						element.append($btLogout);
// 						element.prepend($('<a/>').text(authorized.user.fullname).addClass('black-text btn-flat z-depth-1'));
// 					}
// 				} else {
// 					var $btSignin = $('<a/>').text('เข้าระบบ').addClass('waves-effect waves-light btn z-depth-0 white-text red normal')
// 					var $btSignup = $('<a/>').text('สมัครสมาชิก').addClass('waves-effect waves-red btn z-depth-0 black-text white-trans-3 normal');
// 					element.append($btSignin).prepend($btSignup);
// 					// action
// 					$btSignin.attr('href', "/signin");
// 					$btSignup.attr('href', "/signup");
// 					attrs.$observe('memberAuthorize',function(position) {
// 						if(position=='promptskill') {
// 							$btSignup.removeClass('white-text').addClass('black-text')
// 						}
// 					});
// 					//scope.service.program.info().then(function(program) {
// 					//	if(program.registration) {
// 							//element.prepend($btSignup);
// 					//		$btSignup.attr('href', '/register/'+program.registration);
// 					//	}
// 					//})
// 				} 
// 				//
// 				//scope.service.program.info().then(function(program) {
// 					//if(program.signin) {
// 						//if($location.path().indexOf('course')==-1) 
// 							//$location.path('/course/'+program.signin);
// 					//}
// 				//})
// 				//$location.hash(null);
// 				
// 			}); */
// 			/*	
// 			if (!user.logged()) {
// 				//
// 				var $btSignin = $('<a/>').text('เข้าระบบ').addClass('waves-effect waves-light btn z-depth-0 white-text red')
// 				var $btSignup = $('<a/>').text('ลงทะเบียน').addClass('waves-effect waves-red btn z-depth-0 white-text white-trans-3');
// 				element.append($btSignin).prepend($btSignup);
// 				// action
// 				$btSignin.attr('href', "/signin");
// 				$btSignup.attr('href', "/signup");
// 				//
// 			} else {
// 				//
// 				var $avatar = $('<a/>').addClass('circle small avatar').css('background-image', "url('"+user.avatar('small')+"')");
// 				var $name = $('<a/>').text(user.name()).addClass('waves-effect waves-light btn-flat z-depth-1 balck-text transparent');
// 				var $btLogout = $('<a/>').text('ออกจากระบบ').addClass('waves-effect waves-light btn-small z-depth-1 white-text red');
// 				element.append($avatar).append($name).append($btLogout);
// 				// action
// 				$btLogout.on('click', function() {
// 					scope.logout();
// 				});
// 				$name.attr('href', '/dashboard');
// 				$avatar.attr('href', '/user').addClass('link');
// 			}
// 			*/
// 		}
// 	}
// }])
.directive('formRender', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('formRender', function(id) {
				scope.service.member.form(id).then(function(form) {
					//console.log(form)
					if(form) {
						element.append(form)
					}
				});
			});
		}
	};
}])