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

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

	/* layouts */
	.directive('promptskillBar', [function() {
		return {
			restrict: 'C',
			templateUrl: '/templates/layouts/promptskill-bar.promptskill'
		};
	}])
	.directive('privacy', ['$cookies', function($cookies) {
		return {
			restrict: 'C',
			templateUrl: '/templates/layouts/cookie-policy.promptskill',
			link: function(scope, element, attrs) {
				// Cookie Policy
				scope.checkCookie = function() {
					var accept = $cookies.get('cookie_consent');
					if (accept != 'accept') {
						scope.cookie_popup = true;
					}
				}

				scope.acceptCookie = function() {
					let expire = new Date();
					const domain = '.promptskill.com';
					//
					expire.setDate(expire.getDate() + 1);
					$cookies.put('cookie_consent', 'accept', {
						domain: domain,
						expires: expire,
						path: '/'
					});
					scope.cookie_popup = false;
				}
				//
			}
		};
	}])
	.directive('copyright', [function() {
		return {
			restrict: 'C',
			templateUrl: '/templates/layouts/copyright.promptskill'
		};
	}])
	.directive('sitemap', [function() {
		return {
			restrict: 'A',
			templateUrl: '/templates/layouts/sitemap.promptskill',
		};
	}])

	/* promptskill element */
	.directive('promptskill', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('promptskill', function(logo) {
					var $logo = $('<img/>');
					if (logo) {
						$logo.attr('src', '//services.promptskill.com/app/public/img/logo/logo-topbar.png');
						if (logo == 'id') {
							$logo.attr('src', '//services.promptskill.com/app/public/img/logo/logo-promptskill-id.png');
						} else {
							$logo.addClass('top-bar click')
							$logo.on('click', function() {
								scope.promptSkill();
							})
						};
						element.append($logo);
					}
				});
			}
		}
	}])
	.directive('headBar', ['$window', function($window) {
		return {
			restrict: 'A',
			templateUrl: '/templates/layouts/header.promptskill',
			link: function(scope, element, attrs) {
				//
				element.ready(function() {
					const $sidenavMobile = element.find('.sidenav-mobile');
					$sidenavMobile.sidenav();
				});

				$window.addEventListener("scroll", function() {
					const header = document.querySelector(".header");
					if (window.scrollY > 0) {
						header.classList.add("scrolled");
					} else {
						header.classList.remove("scrolled");
					}
				});
				//
			}
		};
	}])
	.directive('headbarLogo', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var logo = scope.service.program.logo();
				//console.log(logo)
				if (logo) {
					var $img = $('<div/>').append($('<img/>').attr('height', '100%').attr('src', logo));
					element.append($img.addClass('valign-wrapper'));
				}
			}
		}
	}])
	// .directive('page', [function() {
	// 	return {
	// 		restrict: 'A',
	// 		link: function(scope, element, attrs)
	// 		{
	// 			attrs.$observe('page', function(name) {
	// 				scope.service.academy.page(name).then(function(data) {
	// 					console.log($('header').outerHeight())
	// 					scope.page = data;
	// 				});
	// 			});
	// 			//scope.$parent.fullpage = false;
	// 		}
	// 	};
	// }])
	// .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);
	// 				scope.service.promptskill.page(name).then(function(data) {
	// 					//console.log(data)
	// 					scope.page = data;
	// 					element.addClass(data.headbar)
	// 					if($('header').outerHeight() <paddingTop) {
	// 						paddingTop += $('header').outerHeight();
	// 					} else {
	// 						paddingTop = $('header').outerHeight();
	// 					}
	// 					element.css('padding-top', paddingTop);
	// 				});
	// 			});
	// 		}
	// 	};
	// }])
	// .directive('elementBanner', [function() {
	// 	return {
	// 		restrict: 'A',
	// 		link: function(scope, element, attrs)
	// 		{
	// 			attrs.$observe('elementBanner', function(item) {
	// 				if(item !=undefined && item >0) {
	// 					var $content = $('<div/>').appendTo(element);
	// 					var banner = scope.page.elements.banner;
	// 					if(item >1) {
	// 						
	// 					} else {
	// 						$content.html(banner[0].content);
	// 					}
	// 				}
	// 			});
	// 		}
	// 	};
	// }])
	// .directive('elementContent', [function() {
	// 	return {
	// 		restrict: 'A',
	// 		link: function(scope, element, attrs)
	// 		{
	// 			//console.log(attrs.content)
	// 			attrs.$observe('elementContent', function(item) {
	// 				if(item !=undefined && item >0) {
	// 					var $content = $('<div/>').appendTo(element);
	// 					var content = scope.page.elements[attrs.content];
	// 					if(item >1) {
	// 						
	// 					} else {
	// 						$content.html(content[0].content);
	// 						if(content[0].attrs !="") {
	// 							element.addClass('white-text');
	// 							element.attr('style', content[0].attrs);
	// 						}
	// 						if(content[0].image) {
	// 							element.css('position', 'relative');
	// 							$('<img/>').attr('style', content[0].position).css('position','absolute')
	// 							.css('height', '34em').attr('src', content[0].image).appendTo(element)
	// 						}
	// 					}
	// 				}
	// 			});
	// 		}
	// 	};
	// }])

	.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('headerLogo', [function() {
	// 	return {
	// 		restrict: 'A',
	// 		link: function(scope, element, attrs)
	// 		{
	// 			attrs.$observe('headerLogo', function(logo) 
	// 			{
	// 				if(logo) {
	// 					var $img = $('<img/>').attr('src', logo);
	// 					/*var img = new Image();
	// 					img.onload = function() {
	// 						var ratio = this.width / this.height;
	// 						if (ratio <1.25) {
	// 							console.log(ratio)
	// 							element.css('margin-right', '1em');
	// 							element.parent().css({display:'flex',alignItems:'self-end'});
	// 						}
	// 					}
	// 					img.src = 'https:' + logo;*/
	// 					element.append($img.addClass('valign-wrapper'));
	// 					/*if(element.hasClass('indent')) {
	// 						element.parent().css('margin-left', $img.width())
	// 					}*/
	// 				}
	// 			});
	// 		}
	// 	}
	// }])
	// .directive('pageElement', [function() {
	// 	return {
	// 		restrict: 'A',
	// 		link: function(scope, element, attrs)
	// 		{
	// 			attrs.$observe('pageElement', function(page) {
	// 				scope.$parent.headerBanner = 'banner';
	// 				//console.log(scope.headerBanner)
	// 				scope.service.academy.page(page).then(function(data) {
	// 					//console.log(data)
	// 					scope.$parent.headerBanner = 'banner';
	// 					scope.page = data;
	// 					
	// 				});
	// 			});
	// 		}
	// 	}
	// }])
	// .directive('collapsible', [function() {
	// 	return {
	// 		restrict: 'C',
	// 		priority: 1000,
	// 		link: function(scope, element, attrs)
	// 		{
	// 			angular.element(element).collapsible();
	// 		}
	// 	}
	// }])
	// .directive('inputAddress', [function() {
	// 	return {
	// 		restrict: 'A',
	// 		templateUrl: '/templates/blocks/address-input.promptskill'
	// 	}
	// }])
	/* content element */
	.directive('tiny', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var $child = element.children();
			}
		}
	}])
	// .directive('minHeight', [function() {
	// 	return {
	// 		restrict: 'A',
	// 		link: function(scope, element, attrs) {
	// 			attrs.$observe('minHeight', function(height) {
	// 				element.css('min-height', height);
	// 			});
	// 		}
	// 	}
	// }])
	.directive('fitBrief', [function() {
		return {
			restrict: 'A',
			priority: 10,
			link: function(scope, element, attrs) {
				scope.$watch(attrs.ngBindHtml, function(newvalue) {
					var fontSize = parseInt(element.css('font-size'));
					if (newvalue != undefined) {
						var blockBrief = element.parent().find('.row');
						var brief = blockBrief.find('.brief');
						//
						//console.log(fontSize)
						//console.log(brief.height())
						//console.log(blockBrief.height())
						var marginTop = (blockBrief.height() - brief.height()) / fontSize;
						//element.css('margin-top', -marginTop +'em');
						element.children().children().children(':first-child').css('margin-top', -marginTop + 'em');
					}
				})

			}
		}
	}])
	// .directive('bottom', [function() {
	// 	return {
	// 		restrict: 'C',
	// 		link: function(scope, element, attrs)
	// 		{
	// 			var bottom = element.parent().css('padding-bottom');
	// 			//console.log(bottom)
	// 			element.css('bottom', bottom);
	// 		}
	// 	}
	// }])
	// .directive('height', [function() {
	// 	return {
	// 		restrict: 'A',
	// 		link: function(scope, element, attrs)
	// 		{
	// 			attrs.$observe('height', function(height) {
	// 				if(height=='auto') {
	// 					element.css('height', height);
	// 				}
	// 			});
	// 		}
	// 	}
	// }])
	// .directive('padding', [function() {
	// 	return {
	// 		restrict: 'C',
	// 		link: function(scope, element, attrs)
	// 		{
	// 			attrs.$observe('padding', function(padding) {
	// 				element.css('padding', padding);
	// 			});
	// 		}
	// 	}
	// }])
	// .directive('borderRadius', function() {
	// 	return {
	// 		restrict: 'A',
	// 		link: function(scope, element, attrs)
	// 		{
	// 			attrs.$observe('borderRadius', function(radius) {
	// 				element.css('border-radius', radius);
	// 			});
	// 		}
	// 	}
	// })
	// .directive('textFit', [function() {
	// 	return {
	// 		restrict: 'A',
	// 		link: function(scope, element, attrs)
	// 		{
	// 			var width = $(element).width();
	// 			//console.log(attrs.font)
	// 			element.addClass(attrs.font)
	// 		}
	// 	}
	// }])
	// .directive('banner', [function() {
	// 	return {
	// 		restrict: 'A',
	// 		link: function(scope, element, attrs)
	// 		{
	// 			attrs.$observe('banner', function(image) 
	// 			{
	// 				//var vw = 100;
	// 				var $img = $('<img/>').attr('src', image);
	// 				//var img = new Image();
	// 				//img.onload = function() {
	// 				//	vw = this.width / 1920 * 100;
	// 				if(attrs.width!=undefined) {
	// 					$img.css('width', attrs.width)
	// 				} else {
	// 					$img.css('width', '100%');
	// 				}
	// 				//}
	// 				//img.src = 'https:' + image;
	// 				if(image!='')
	// 					element.append($img);
	// 			});
	// 		}
	// 	}
	// }])
	.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.css('background-image', "url('" + image + "')").addClass('cover');
				});
			}
		}
	}])
	.directive('background', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('background', function(image) {
					var img = new Image();
					img.onload = function() {
						if (attrs.height == 'fit') {
							//element.height(this.height);
							//element.css('height', this.height + '');
							//element.addClass('width');
							element.css('background-size', 'auto ' + this.height + 'px')
						} else if (attrs.height == 'auto') {
							element.css('background-size', 'auto ' + this.height + 'px');
							element.removeClass('background-image');
						}
						//else 
						element.addClass(attrs.height);
					}
					img.src = 'https:' + image;
					element.removeAttr('background');
					element.css("background-image", "url('" + image + "')");
					element.addClass('background-image');
				});
			}
		}
	}])
	// .directive('qrPay', [function() {
	// 	return {
	// 		restrict: 'A',
	// 		link: function(scope, element, attrs)
	// 		{
	// 			var uri = scope.payment.info.gateway.qrCodeUrl;
	// 			var $img = $('<img/>');
	// 			if(attrs.width!=undefined) {
	// 				$img.css('width', attrs.width)
	// 			} else {
	// 				$img.css('width', '100%');
	// 			}
	// 			scope.service.course.promptpay(uri, scope.payment.token).then(function(data) {
	// 				//console.log(data)
	// 				$img.attr('src', data.image);
	// 				element.append($img)
	// 			})
	// 		}
	// 	}
	// }])
	// .directive('promptPay', [function() {
	// 	return {
	// 		restrict: 'A',
	// 		link: function(scope, element, attrs)
	// 		{
	// 			var uri = scope.payment.info.gateway.qrCodeUrl;
	// 			var $img = $('<img/>');
	// 			if(attrs.width!=undefined) {
	// 				$img.css('width', attrs.width)
	// 			} else {
	// 				$img.css('width', '100%');
	// 			}
	// 			scope.service.course.promptpay(uri, scope.payment.token).then(function(data) {
	// 				//console.log(data)
	// 				$img.attr('src', data.image);
	// 				element.append($img)
	// 			})
	// 		}
	// 	}
	// }])
	// .directive('payinSlip', [function() {
	// 	return {
	// 		restrict: 'A',
	// 		link: function(scope, element, attrs)
	// 		{
	// 			var uri = scope.payment.info.gateway.qrCodeUrl;
	// 			var $img = $('<img/>');
	// 			if(attrs.width!=undefined) {
	// 				$img.css('width', attrs.width)
	// 			} else {
	// 				$img.css('width', '100%');
	// 			}
	// 			scope.service.course.promptpay(uri, scope.payment.token).then(function(data) {
	// 				//console.log(data)
	// 				$img.attr('src', data.image);
	// 				element.append($img)
	// 			})
	// 		}
	// 	}
	// }])
	.directive('toggle', [function() {
		return {
			restrict: 'C',
			link: function(scope, element, attr) {
				element.on('click', function() {
					//console.log(element)
					if (element.hasClass('current')) {
						element.removeClass('current')
					} else {
						$(element).parent().find('.toggle.current').removeClass('current');
						element.addClass('current')
					}
				});
			}
		}
	}])
	.directive('stylePhoto', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var $container = $('<i/>').css({ position: 'absolute', top: 0, width: '100%', height: '100%' }).addClass(attrs.color);
				element.addClass('photo');
				attrs.$observe('stylePhoto', function(image) {
					element.addClass(attrs.color)
					//var img = new Image();
					//img.onload = function() {
					element.css('padding-top', attrs.height / attrs.width * 100 + '%');
					element.css('position', 'relative');
					//}
					//img.src = 'https:' + image;
					element.css('background-image', "url('" + image + "')");
					if (attrs.color != '') {
						element.prepend($container);
					} else {
						element.html('')
					}
				});
			}
		}
	}])
	.directive('backgroundImage', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('backgroundImage', function(image) {
					var img = new Image();
					img.onload = function() {
						//console.log(this.width + ' x ' + this.height);
						var height = (this.height / this.width) * 100;
						//console.log(padTop);
						//element.css('min-height', height + 'vw');
						if (attrs.height != 'auto')
							element.css('height', height + 'vw');
					}
					img.src = 'https:' + image;
					element.css("background-image", "url('" + image + "')");
					//element.css('padding-top', padTop + '%');
					element.addClass('background-image width');
				});
			}
		}
	}])
	.directive('headerBanner', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				//console.log('header banner')
				attrs.$observe('headerBanner', function(image) {
					console.log(image)
					if (image && image != 'banner') {
						var img = new Image();
						img.onload = function() {
							//console.log(this.width + ' x ' + this.height);
							var height = (this.height / this.width) * 100;
							//console.log(padTop);
							//element.css('min-height', height + 'vw');
							element.css('height', '19em');
							//element.addClass('white-text');
						}
						img.src = 'https:' + image;
						element.css("background-image", "url('" + image + "')");
						//element.css('padding-top', padTop + '%');
						element.addClass('background-image width cover center');
					} else {
						element.removeAttr("style");
					}
				});
				//}
			}
		}
	}])

	/* PromptSkill Home */
	.directive('splideHighlight', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				//
				scope.splide_highlight = [{
						image_title: "Prompt Skill e-Learning",
						image_src: "//services.promptskill.com/app/promptskill/public/img/banner-highlight/banner-highlight_01.webp",
						image_url: ""
					},
					{
						image_title: "Happineering : Empower Happiness Hormone in building Team Leadership",
						image_src: "//services.promptskill.com/app/promptskill/public/img/banner-highlight/banner-highlight_02.webp",
						image_url: "//happineering.promptskill.com/course/PS66001"
					},
					{
						image_title: "CV and Resume Preparation",
						image_src: "//services.promptskill.com/app/promptskill/public/img/banner-highlight/banner-highlight_06.webp",
						image_url: "//insightcv.promptskill.com/course/PS66002"
					},
					{
						image_title: "TEACH THAI",
						image_src: "//services.promptskill.com/app/promptskill/public/img/banner-highlight/banner-highlight_03.webp",
						image_url: "//teachthai.promptskill.com/course/PS65001"
					},
					{
						image_title: "IKIGAI",
						image_src: "//services.promptskill.com/app/promptskill/public/img/banner-highlight/banner-highlight_04.webp",
						image_url: "//ikigai.promptskill.com/course/PS65002"
					},
					{
						image_title: "First Aid",
						image_src: "//services.promptskill.com/app/promptskill/public/img/banner-highlight/banner-highlight_05.webp",
						image_url: "//firstaid.promptskill.com/course/PS64001"
					},
				];
				// console.log(scope.splide_highlight);

				if (scope.splide_highlight.length == 0) {
					element.remove();
				}

				// Init Splide
				scope.initSplideHighlight = function() {
					const splide = new Splide('.splide-highlight .splide', {
						type: 'loop',
						autoplay: true,
						pauseOnHover: false,
						arrows: false,
						// pagination: false,
						// perPage: 1
					});

					splide.mount();
				}
				//
			}
		}
	}])
	.directive('bannerHighlight', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				//
				const $carousel = element.find('.carousel.carousel-slider');

				//
				$carousel.carousel({
					fullWidth: true
				});
				//
			}
		}
	}])
	.directive('carouselSlider', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('carouselSlider', function() {
					var $carousel = $('<div/>').addClass('carousel news-carousel home-banner');
					element.append($carousel);

					var banners = [{
							"background": "//services.promptskill.com/app/promptskill/public/img/background/background-promptskill.jpg",
							"logo": "//dinsoradvertising.com/public/img/logo/dinsor-24years-logo.png",
							"configClass": "carousel-item-1",
							"title_th": "พร้อมเปลี่ยนโลก <br />การเรียนรู้ไปกับ <br />พรอมท์ สกิล",
							"title_en": "Get ready for new learning experience",
							"brief_th": "แพลตฟอร์มเรียนออนไลน์ที่จะพาสนุกไปกับคอนเทนต์ วิดีโอ ในบทเรียน ด้วยทีมงาน Learning Solution Provider ผลิต courseware ที่มีประสบการณ์มากกว่า 15 ปี",
							"brief_en": "An online learning platform that brings fun with video content in lessons with a Learning Solution Provider team producing courseware with more than 15 years of experience."
						},
						// {
						// 	"background": "//services.promptskill.com/app/promptskill/public/img/background/background-abac.jpg",
						// 	"logo": "//services.promptskill.com/app/promptskill/public/img/logo/logo-banner-abac.png",
						// 	"configClass": "carousel-item-2",
						// 	"title": "PROMPT SKILL <br />ร่วมกับ IIBD ABAC",
						// 	"brief": "ลงนามข้อตกลงทางวิชาการร่วมมือทางด้านวิชาการและนวัตกรรมเพื่อสนับสนุนการพัฒนาด้านการศึกษาในรูปแบบ e-Learning"
						// },
						// {
						// 	"background": "//services.promptskill.com/app/promptskill/public/img/background/background-promptskill.jpg",
						// 	"logo": "//services.promptskill.com/app/promptskill/public/img/logo/logo-dinsor22.png",
						// 	"configClass": "carousel-item-1",
						// 	"title": "พร้อมเปลี่ยนโลก <br />การเรียนรู้ไปกับ <br />พรอมท์ สกิล",
						// 	"brief": "แพลตฟอร์มเรียนออนไลน์ที่จะพาสนุกไปกับคอนเทนต์ วิดีโอ ในบทเรียน ด้วยทีมงาน Learning Solution Provider ผลิต courseware ที่มีประสบการณ์มากกว่า 15 ปี"
						// },
						// {
						// 	"background": "//services.promptskill.com/app/promptskill/public/img/background/background-abac.jpg",
						// 	"logo": "//services.promptskill.com/app/promptskill/public/img/logo/logo-banner-abac.png",
						// 	"configClass": "carousel-item-2",
						// 	"title": "PROMPT SKILL <br />ร่วมกับ IIBD ABAC",
						// 	"brief": "ลงนามข้อตกลงทางวิชาการร่วมมือทางด้านวิชาการและนวัตกรรมเพื่อสนับสนุนการพัฒนาด้านการศึกษาในรูปแบบ e-Learning"
						// }
					]

					var designWidth = 1920;
					angular.forEach(banners, function(banner, index) {
						var $item = $('<div/>').addClass('carousel-item home-banner');
						$carousel.append($item);

						// background banner
						var img = new Image();
						img.onload = function() {
							var height = this.height / designWidth;
							$item.css('height', height * 100 + 'vw');
						}
						img.src = 'https:' + banner.background;
						$item.css('background-image', "url('" + banner.background + "')").addClass('cover');

						// logo banner
						if (banner.logo) {
							var $logo = $('<img/>').addClass(banner.configClass).attr('src', banner.logo);
							$item.append($logo);
						}

						// content banner
						var $container = $('<div/>').addClass('container section-wrapper');
						var $row = $('<div/>').addClass('row').css('padding-top', '12em');
						var $col = $('<div/>').addClass('col s8 m6');
						var $title = $('<h2/>').addClass('black-text overline-text topic').html(scope.language == 'en-US' ? banner.title_en : banner.title_th);
						var $brief = $('<p/>').addClass('black-text regular content-desc').html(scope.language == 'en-US' ? banner.brief_en : banner.brief_th);
						$title.attr('data-aos', 'fade-right').attr('data-aos-delay', '1500').attr('data-aos-duration', '700');
						$brief.attr('data-aos', 'fade-up').attr('data-aos-delay', '2000').attr('data-aos-duration', '700');
						$col.append($title).append($brief);
						$container.append($row.append($col));
						$item.append($container);

					});

					// initialization carrousel news banner
					$carousel.carousel({
						fullWidth: true,
						indicators: true
					});

					//auto next slide banner
					setInterval(function() {
						$carousel.carousel('next');
					}, 6000);
				});
			}
		}
	}])

	.directive('animationService', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('animationService', function() {
					// var	$wrapper = $('<div/>').addClass('wrapper');
					// element.append($wrapper);
					// 
					// var animations = [
					// 	{
					// 		"backgroundDesktop": "//services.promptskill.com/app/promptskill/public/img/background/background-notebook-1.jpg",
					// 		"backgroundAnime": "//services.promptskill.com/app/promptskill/public/img/background/background-notebook.png",
					// 		"title": "สนุกไปกับทุกการเรียนรู้",
					// 		"brief": "ด้วยการออกแบบหลักสูตรให้น่าสนใจ",
					// 		"descrption": '“พรอมท์ สกิล” เล็งเห็นถึงความสำคัญของการเรียนรู้ และความสุขในการเรียนรู้ ผ่านหน้าจออุปกรณ์ที่ผู้เรียนรู้ใช้งาน จึงเกิดเป็นการออกแบบส่วนประกอบหน้าเว็บไซต์และบทเรียนให้สวยงามในสไตล์ แม็กกาซีน เพื่อให้ผู้เรียนรู้ได้เพลิดเพลินไปกับบทเรียนที่น่าอ่านและวิดีโอบทเรียนที่น่าติดตาม',
					// 		"backgroundComponent": "//services.promptskill.com/app/promptskill/public/img/background/background-mobile-promptskill.png",
					// 		"styleBackgroundComponent": "bg-anime-1 anime1"
					// 		
					// 	},
					// ];

					//
					$(document).ready(function() {
						setTimeout(function() {

							// scroll trigger
							ScrollTrigger.defaults({
								markers: false
							})

							var points = gsap.utils.toArray('.point');
							var indicators = gsap.utils.toArray('.indicator');

							var height = 100 * points.length;

							gsap.set('.indicators', { display: "flex" });

							var tl = gsap.timeline({
								duration: points.length,
								scrollTrigger: {
									trigger: ".animation-service",
									start: "top center",
									end: "+=" + height + "%",
									scrub: true,
									id: "points",
									onEnter: () => $('#background-desktop').css('display', 'none'),
									onLeaveBack: () => $('#background-desktop').css('display', 'block')
								}
							})

							var pinner = gsap.timeline({
								scrollTrigger: {
									trigger: ".animation-service .wrapper",
									start: "top top",
									end: "+=" + height + "%",
									scrub: true,
									pin: ".animation-service .wrapper",
									pinSpacing: true,
									id: "pinning",
									markers: false
								}
							})

							points.forEach(function(elem, i) {

								gsap.set(elem, { position: "absolute", top: 0 });

								tl.from(elem.querySelector('img'), { autoAlpha: 0 }, i)
								tl.from(elem.querySelector('article'), { autoAlpha: 0, translateY: 100, duration: 0.55 }, i)
								tl.from(elem.querySelector('.anime1'), { autoAlpha: 0, translateY: 200 }, i)
								tl.from(elem.querySelector('.anime2'), { autoAlpha: 0, translateY: 100, duration: 1 }, i)
								tl.from(elem.querySelector('.anime3'), { autoAlpha: 0, translateX: 100 }, i)

								if (i != points.length - 1) {
									tl.to(elem.querySelector('article'), { autoAlpha: 0 }, i + 0.75)
									tl.to(elem.querySelector('img'), { autoAlpha: 0 }, i + 0.75)
									tl.to(elem.querySelector('.anime1'), { autoAlpha: 0, translateY: -500, duration: 0.25 }, i + 0.75)
									tl.to(elem.querySelector('.anime2'), { autoAlpha: 0, translateY: 500, duration: 0.25 }, i + 0.75)
									tl.to(elem.querySelector('.anime3'), { autoAlpha: 0, translateX: 500, duration: 0.25 }, i + 0.75)
								}

							});
							//
						}, 1000);
					});
					//

				});
			}
		}
	}])

	.directive('animationSeminar', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('animationSeminar', function() {
					var $container = $('<div/>').addClass('container section-wrapper');
					element.append($container);

					var $row = $('<div/>').addClass('row');
					$container.append($row);
					var col = $('<div/>').addClass('col s12 m12 right-align left-align-sm');
					var $topic = $('<h1/>').addClass('black-text medium underline-text title').text(scope.language == 'en-US' ? "Can be applied in many ways" : "ประยุกต์ใช้ได้หลากหลาย");
					$row.append(col.append($topic));

					var $title = $('<h1/>').addClass('black-text medium topic').css('margin-top', '-0.1em');
					$title.html(scope.language == 'en-US' ? 'Manage work <br/>Complete <span class="red-text">seminar</span>' : 'บริหารงาน<span class="red-text">สัมมนา</span>ครบ<br/>จบในคลิ๊กเดียว');
					$row.append(col.append($title));

					var $colContent = $('<div/>').addClass('col s12 m12 l5 offset-l7');
					var $desc = $('<p/>').addClass('black-text regular content-desc').css('margin-top', '2em');
					$desc.attr('data-aos', 'fade-up');
					$desc.attr('data-aos-delay', '300');
					$desc.text(scope.language == 'en-US' ? 'PROMPT SKILL is more than general E-Learning because we take online learning management knowledge and apply it to a complete online seminar. You can click to register, study, take a test, and do a satisfaction assessment. and issue certificates in one link.' : 'PROMPT SKILL เป็นมากกว่า E-Learning ทั่วไป เพราะเรานำเอาองค์ความรู้การจัดการการเรียนออนไลน์มาปรับใช้กับงานสัมมนาออนไลน์ได้อย่างครบวงจร โดยสามารถคลิกลงทะเบียน เรียน ทำแบบทดสอบ ทำแบบประเมินความพึงพอใจ และออกใบประกาศนียบัตรได้ในลิงก์เดียว');
					$row.append($colContent.append($desc));

					var $bgSeminar = $('<img/>').css({
						width: '100%',
						position: 'absolute',
						right: '0',
						bottom: '0'
					});
					$bgSeminar.attr('src', '//services.promptskill.com/app/promptskill/public/img/background/background-seminar.png');
					$container.append($bgSeminar);

					var $bgScroll = $('<div/>').css({
						width: '23.177%',
						position: 'absolute',
						left: '46.198%',
						// top: '65.145%',
						borderRadius: '0.6em',
						backgroundImage: "url('//services.promptskill.com/app/promptskill/public/img/background/background-newagri-web.png')",
						backgroundSize: '100%',
						backgroundRepeat: 'no-repeat'
					});
					$bgScroll.attr('id', 'bg-scroll-position');
					$bgScroll.append($('<div/>').css('padding-top', '75%'));
					$container.append($bgScroll);

					//
					$(document).ready(function() {
						setTimeout(function() {

							// animate on scroll library
							AOS.init();

							// scroll trigger
							var position = '+=500';

							if (window.matchMedia('(max-width: 768px)').matches) {
								position = 'top top';
								$bgScroll.css('top', '81.5%');
							}

							gsap.utils.toArray('.content-img-seminar').forEach(layer => {
								ScrollTrigger.create({
									trigger: layer,
									pin: layer,
									start: position,
									// end: ''
									pinSpacing: true,
									markers: false,
									scrub: true,
									onUpdate: self => {
										$('#bg-scroll-position').css('background-position-y', '-' + self.progress.toFixed(3) * 200 + 'px');
									}
								});
							});
							//
						}, 1000);
					});
					//
				});
			}
		}
	}])

	.directive('productFeature', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				//
				scope.product_feature = [{
						"image": "//services.promptskill.com/app/promptskill/public/img/background/background-notebook-1.jpg",
						"title_en": "Have fun with every learning",
						"title_th": "สนุกไปกับทุกการเรียนรู้",
						"brief_en": "By designing the curriculum to be interesting",
						"brief_th": "ด้วยการออกแบบหลักสูตรให้น่าสนใจ",
						"detail_en": "“Prompt Skill” recognizes the importance of learning. and happiness in learning Through the screen of the device that the learner uses As a result, website page components and lessons were designed to be beautiful in a magazine style. So that learners can enjoy the lessons that are worth reading and the video lessons that are interesting to follow.",
						"detail_th": "“พรอมท์ สกิล” เล็งเห็นถึงความสำคัญของการเรียนรู้ และความสุขในการเรียนรู้ ผ่านหน้าจออุปกรณ์ที่ผู้เรียนรู้ใช้งาน จึงเกิดเป็นการออกแบบส่วนประกอบหน้าเว็บไซต์และบทเรียนให้สวยงามในสไตล์แม็กกาซีน เพื่อให้ผู้เรียนรู้ได้เพลิดเพลินไปกับบทเรียนที่น่าอ่านและวิดีโอบทเรียนที่น่าติดตาม"
					},
					{
						"image": "//services.promptskill.com/app/promptskill/public/img/background/background-notebook-2.jpg",
						"title_en": "Start with concrete measurement",
						"title_th": "จบอย่างมีมาตรฐาน",
						"brief_en": "Finish with a standard",
						"brief_th": "จากการวัดผลที่เป็นรูปธรรม",
						"detail_en": "“Prompt Skill” has standardized measurement results. with quality tools So that students can measure their own knowledge and understanding from tests before, during and after studying. It is an evaluation from answering questions so that you can review your knowledge. and measure the results in a concrete way.",
						"detail_th": "“พรอมท์ สกิล” มีการวัดผลที่มีมาตรฐาน ด้วยเครื่องมือที่มีคุณภาพ เพื่อให้ผู้เรียนสามารถวัดความรู้ความเข้าใจของตนเองได้จากบททดสอบ ทั้งก่อน ระหว่าง และหลังเรียน เป็นการประเมินผลจากการตอบคำถามเพื่อให้ท่านได้เกิดการทบทวนความรู้ และวัดผลออกมาอย่างเป็นรูปธรรม"
					},
					{
						"image": "//services.promptskill.com/app/promptskill/public/img/background/background-notebook-3.jpg",
						"title_en": "Ready to upgrade skills",
						"title_th": "พร้อมอัพสกิล",
						"brief_en": "with quality lecturers",
						"brief_th": "กับวิทยากรคุณภาพ",
						"detail_en": "“Prompt Skill” seeks out lecturers with extensive experience in specific fields. To satisfy everyone who wants to learn. Nowadays, there are many learning channels and channels. “Prompt Skill” sees that finding teachers or lecturers who can provide in-depth knowledge is an extremely important part.",
						"detail_th": "“พรอมท์ สกิล” สรรค์หาวิทยากรมากไปด้วยประสบการณ์เฉพาะด้าน เพื่อตอบสนองผู้ที่ต้องการเรียนรู้ทุกท่าน ในปัจจุบันการเรียนรู้มีมากมายและหลากหลายช่องทาง “พรอมท์ สกิล” เล็งเห็นว่า การหาอาจารย์หรือวิทยากรที่สามารถให้ความรู้ในเชิงลึกได้คือส่วนที่มีความสำคัญอย่างยิ่ง"
					},
					{
						"image": "//services.promptskill.com/app/promptskill/public/img/background/background-notebook-4.jpg",
						"title_en": "Apply and mix data in an understandable way",
						"title_th": "ผสมผสานอย่างเข้าใจ",
						"brief_en": "Online - Offline learning solution",
						"brief_th": "Online - Offline learning solution",
						"detail_en": "Our services are not only online. “Prompt Skill” also offers classroom services in the form of on-site as an alternative for all those who want to learn while engaging with other students and creating a network involving meeting your teacher or lecturer.",
						"detail_th": "บริการของเราไม่ได้มีเพียงแค่ Online เท่านั้น แต่ “พรอมท์ สกิล” ยังมีบริการห้องเรียนในรูปแบบ On-site อีกด้วย เพื่อเป็นทางเลือกให้ผู้ที่ต้องการเรียนรู้ทุกท่านได้พบเจอกัน เพื่อสร้างเครือข่าย และพบเจอกับอาจารย์หรือวิทยากรของท่าน"
					},
				];

				scope.$on('$viewContentLoaded', function(event, viewConfig) {
					//
					const element = '.section-product-feature .splide';

					if ($(element).length) {
						//
						scope.initSplideFeature = function() {
							const splide = new Splide(element, {
								perPage: 1,
								focus: 0,
								arrows: true,
								pagination: false,
								type: 'loop',
								autoplay: true,
								interval: 5000,
							});
							//
							splide.mount();
						}
					}
				});
				//
			}
		}
	}])


	.directive('customerService', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				//
				scope.clients = [{
						"image": "/public/img/logo/clients/logo-abac.png",
						"progress": false
					},
					{
						"image": "/public/img/logo/clients/logo-nida.png",
						"progress": false
					},
					{
						"image": "/public/img/logo/clients/logo-tu.png",
						"progress": false
					},
					{
						"image": "/public/img/logo/clients/logo-dbd.png",
						"progress": false,
						"href": "https://dbdacademy.dbd.go.th"
					},
					{
						"image": "/public/img/logo/clients/logo-ditp.png",
						"progress": false
					},
					{
						"image": "/public/img/logo/clients/logo-nea.png",
						"progress": false
					},
					{
						"image": "/public/img/logo/clients/logo-skn.png",
						"progress": true
					},
					{
						"image": "/public/img/logo/clients/logo-apic.jpg",
						"progress": false
					},
					{
						"image": "/public/img/logo/clients/logo-OBEC.png",
						"progress": false
					},
					{
						"image": "/public/img/logo/clients/logo-RMUT.png",
						"progress": false
					},
					{
						"image": "/public/img/logo/clients/logo-PCSHS-school.png",
						"progress": false
					},
					{
						"image": "/public/img/logo/clients/logo-PRSEB.png",
						"progress": false
					},
				];
				//
			}
		}
	}])

	.directive('mou', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				scope.service.promptskill.mou().then(function(mou) {
					console.log(mou);
					scope.mou = mou;
				});

			}
		}
	}])

	.directive('scrollAnimate', ['$timeout', function($timeout) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('scrollAnimate', function() {

					// animate on scroll library
					AOS.init({
						once: true
					});

					$timeout(function() {
						$('[data-aos-immediate]').addClass('aos-animate');
					}, 2000)
					//
				});
			}
		}
	}])

	/* course */
	.directive('programCourse', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				// attrs.$observe('programCourse', function() {
				//mockup
				scope.courses = [{
						"url": "//insightcv.promptskill.com/course/PS66002",
						"background": "//resourcespace.promptskill.com/resources/course/72/8b5a2222-cd1f-416f-847b-629df0af8da3/image/CV.png",
						"name_th": "CV and Resume Preparation",
						"name_en": "CV and Resume Preparation",
						"brief_th": "This course is especially designed for undergraduates, graduates, and young professionals who are seeking a job in an international company or in a company or organization where the work is mainly conducted in English. The course is also valuable for anyone who wants to understand CV and resume preparation techniques and learn how to best market their skills and achievements.",
						"brief_en": "This course is especially designed for undergraduates, graduates, and young professionals who are seeking a job in an international company or in a company or organization where the work is mainly conducted in English. The course is also valuable for anyone who wants to understand CV and resume preparation techniques and learn how to best market their skills and achievements.",
						"lecturer_th": "Arthur Morse PhD and Ms.Suparat Sukpradit (June)",
						"lecturer_en": "Arthur Morse PhD and Ms.Suparat Sukpradit (June)",
						"status": '1'
					},
					{
						"url": "//happineering.promptskill.com/course/PS66001",
						"background": "//resourcespace.promptskill.com/resources/course/71/baeb2e0e-5c78-4c63-9b20-0825dbec404d/image/Happineering_600x300.jpg",
						"name_th": "หลักสูตรเติมฮอร์โมนความสุขในการปั้นทีมผู้นำ",
						"name_en": "Happineering : Empower Happiness Hormone in building Team Leadership",
						"brief_th": "ในหลักสูตรนี้เป็นหลักสูตรที่บรรจุเนื้อหาที่เต็มเปี่ยมไปด้วยสาระและประสบการณ์โดยสิ่งที่สำคัญก็คือ การทำวิจัยของปัญหาที่เกิดขึ้นของผู้คน และองค์กรต่างๆ มากมาย โดยปัญหาที่เกิดขึ้นเป็นจุดสำคัญเรียนรู้ที่ทำให้เกิดความสุข ซึ่งจากประสบการณ์ที่ได้ทำงานทั้งองค์กรทั้งภาครัฐและภาคเอกชนร่วมถึงเด็กๆ ด้วย จึงได้พบบางสิ่งบางอย่างที่บรรจุอยู่ในหลักสูตรนี้ปัญหาหนึ่งของคนทำงานและการใช้ชีวิตเราจะตั้งคำถามว่า เราขาดความสุข ตลอดจนทิ้งเวลานั้นไว้นานจนเกิดภาวะหมดไฟในการทำงาน จนส่งผลต่อสุขภาพกาย สุขภาพจิตใจ",
						"brief_en": "In this course, it is a course that is filled with content that is full of knowledge and experience. The important thing is Doing research on people's problems and many different organizations, with the problems that arise being an important learning point that brings happiness From the experience of working in both government and private organizations, including children, we have found something contained in this curriculum. One of the problems of people working and living life, we will ask the question: We lack happiness As well as leaving that time for so long that it causes burnout at work. Until affecting physical health, mental health",
						"lecturer_th": "กฤษณ์ รุยาพร และสุภาวดี รุยาพร",
						"lecturer_en": "Krit Ruyaporn and Supawadee Ruyaporn",
						"status": '1'
					},
					{
						"url": "//teachthai.promptskill.com/course/PS65001",
						"background": "//services.promptskill.com/app/promptskill/public/img/courses/course-teach-thai.jpg",
						"name_th": "หลักสูตร Teach Thai ภาษาไทยเพื่อชาวต่างชาติ",
						"name_en": "Teach Thai course, Thai language for foreigners",
						"brief_th": "หลักสูตรนี้เป็นหลักสูตรที่มีเนื้อหาครอบคลุมเกี่ยวกับการเรียนรู้ภาษาไทยขั้นพื้นฐานสำหรับชาวต่างชาติ เพื่อให้ผู้เรียนชาวไทยนำไปใช้ในการสอนทักษะการฟังพูดอ่านเขียนภาษาไทยแก่ชาวต่างชาติได้อย่างมีประสิทธิภาพ",
						"brief_en": "This course is a comprehensive course on basic Thai language learning for foreigners. For Thai learners to use in teaching Thai listening, speaking, reading, and writing skills to foreigners effectively.",
						"lecturer_th": "ศศพร สุนทรพาณิชย์",
						"lecturer_en": "Sasaporn Sunthornphanit",
						"status": '1'
					},
					{
						"url": "//ikigai.promptskill.com/course/PS65002",
						"background": "//services.promptskill.com/app/promptskill/public/img/courses/course-ikigai.jpg",
						"name_th": "หลักสูตร IKIGAI เคล็ดลับความสุขในการตั้งเป้าหมายชีวิตของคนญี่ปุ่น",
						"name_en": "IKIGAI Course: The Secret to Happiness in Setting Life Goals for Japanese People",
						"brief_th": "ในเนื้อหาหลักสูตรนี้ เป็นหลักสูตรที่มีเนื้อหาครอบคลุมเกี่ยวกับแนวคิดของชาวญี่ปุ่นที่แสดงถึงวิถีชีวิตเรียบง่ายสไตล์ญี่ปุ่น หรือเรียกว่า อิคิไก (Ikigai) เป็นความสุขอันเกิดจากการมีอะไรให้ทำตลอดเวลา และสิ่งนี้เป็นเหตุผลหนึ่งที่อธิบายว่าเหตุใดคนญี่ปุ่นจึงมีอายุยืน 100 ปี",
						"brief_en": "In this course content It is a comprehensive course about the Japanese concept of simple Japanese style life, also known as Ikigai (Ikigai), the happiness that comes from having something to do all the time. And this is one reason that explains why Japanese people live to be 100 years old.",
						"lecturer_th": "นัททินี วงศ์เฉลิมทานต์",
						"lecturer_en": "Natthinee Wongchalermthan",
						"status": '1'
					},
					{
						"url": "//firstaid.promptskill.com/course/PS64001",
						"background": "//services.promptskill.com/app/promptskill/public/img/courses/course-first-aid.jpg",
						"name_th": "หลักสูตร การปฐมพยาบาลและดูแลตัวเองเบื้องต้น (FIRST AID)",
						"name_en": "First Aid and Basic Self-Care Course (FIRST AID)",
						"brief_th": "การเรียนรู้การปฐมพยาบาลเบื้องต้น เพื่อรับมือกับสถานการณ์ที่ไม่คาดคิดจึงเป็นเรื่องสำคัญ การปฐมพยาบาลเบื้องต้นอย่างถูกต้องอาจช่วยป้องกันความพิการที่อาจเกิดขึ้นจากอาการบาดเจ็บ ไม่ว่าจะเป็นความเจ็บป่วยจากอุบัติเหตุเล็กน้อยๆโดยจะช่วยลดความรุนแรงของอาการบาดเจ็บ และช่วยให้ร่างกายของผู้ป่วยกลับสู่สภาพเดิมโดยเร็วการเรียนรู้การปฐมพยาบาลเบื้องต้น",
						"brief_en": "Learning basic first aid It is important to deal with unexpected situations. Proper first aid may help prevent disability that may result from injury. Whether it is an illness from a minor accident, it will help reduce the severity of the injury. And help the patient's body return to its original condition quickly by learning first aid.",
						"lecturer_th": "พว.พิมพ์ใจ ปราชญ์ชลชาญ",
						"lecturer_en": "P.W. Pimjai Prachonchan",
						"status": '1'
					},
					{
						"url": "//esg.promptskill.com/course/PS66004",
						"background": "//resourcespace.promptskill.com/resources/course/76/aac40f71-74e8-4a37-8741-d7de6b9ee9ab/image/ESG_TN.png",
						"name_th": "Inner ESG Happineering Leadership Transformation",
						"name_en": "Inner ESG Happineering Leadership Transformation",
						"brief_th": "หลักสูตร Inner ESG Happineering Leadership Transformation เป็นหลักสูตรที่ให้ความรู้ และทักษะที่จำเป็นในการเป็นผู้นำที่มีประสิทธิภาพในสภาพแวดล้อมทางธุรกิจที่มีความท้าทายเป็นอย่างมากในปัจจุบัน หลักสูตรนี้มุ่งเน้นไปที่หลักการและแนวปฏิบัติของ Environmental, social, and corporate governance (ESG) ซึ่งมีบทบาทสำคัญในการสร้างการดำเนินธุรกิจที่มีความรับผิดชอบและส่งผลให้ธุรกิจมี่ความยั่งยืน",
						"brief_en": "Inner ESG Happineering Leadership Transformation Course It is a course that provides knowledge. and the skills needed to be an effective leader in today's extremely challenging business environment. This course focuses on the principles and practices of Environmental, social, and corporate governance (ESG) plays an important role in creating responsible business practices and resulting in business sustainability.",
						"lecturer_th": "กฤษณ์ รุยาพร",
						"lecturer_en": "Krit Ruyaporn",
						"status": '1'
					},
					{
						"url": "//parenting.promptskill.com/course/PS66003",
						"background": "//resourcespace.promptskill.com/resources/course/75/d10e663d-baa9-409b-8deb-303886507f55/image/Parenting_TN.png",
						"name_th": "การเลี้ยงดู",
						"name_en": "Parenting",
						"brief_th": "ในเนื้อหาหลักสูตรนี้ เป็นหลักสูตรที่มีเนื้อหาครอบคลุมเกี่ยวกับการเลี้ยงลูกต่างๆ รวมไปถึงหลักคิด แนวคิด การเลือกโรงเรียน สิทธิกฎหมายต่างๆ ที่จะช่วยให้คุณพ่อคุณแม่มือใหม่ได้ลองนำไปปรับใช้ และส่งเสริมการเลี้ยงดูลูกของท่านได้อย่างมีคุณภาพ เพื่อพัฒนาศักยภาพให้ครอบครัว และลูกได้อย่างสมบูรณ์แบบมากยิ่งขึ้น",
						"brief_en": "In this course content It is a course that covers various parenting topics. Including principles, concepts, and school selection. Various legal rights That will help new parents try to apply it. and promote quality raising of your children To develop the potential of the family and children more perfectly",
						"lecturer_th": "สาวิตรี ชูโชคกุล",
						"lecturer_en": "Sawitree Choochokkul",
						"status": '1'
					},
				];

				scope.$on('$viewContentLoaded', function(event, viewConfig) {
					//
					const element = '.section-example-course .splide';

					if ($(element).length) {
						//
						scope.initSplideCourse = function() {
							const splide = new Splide(element, {
								perPage: 4,
								focus: 0,
								omitEnd: true,
								arrows: true,
								pagination: true,
								// padding: '1rem',
								breakpoints: {
									576: {
										perPage: 2,
									},
									768: {
										perPage: 3,
									},
									992: {
										perPage: 3,
									},
									1200: {
										perPage: 4,
									},
								},
							});
							//
							splide.mount();
						}
					}
				});

				//
				// 					var $container = $('<div/>').addClass('container section-course');
				// 					element.append($container);
				// 
				// 					var $rowTopic = $('<div/>').addClass('row');
				// 					var $colTopic = $('<div/>').addClass('col s12 m12');
				// 					var $nameCourse = $('<h3/>').addClass('black-text medium underline-text topic').text(nameCourse);
				// 					$rowTopic.append($colTopic.append($nameCourse));
				// 					$container.append($rowTopic);

				// program courses
				// 					var $rowCourse = $('<div/>').addClass('row');
				// 					$container.append($rowCourse);
				// 
				// 					angular.forEach(courses, function(course) {
				// 						var $colCourse = $('<div/>').addClass('col s6 m3');
				// 						var $card = $('<div/>').addClass('card-course hoverable');
				// 						var $cardImage = $('<div/>').addClass('card-image course-image');
				// 						var background = new Image();
				// 						background.onload = function() {
				// 							$cardImage.css('padding-top', this.height / this.width * 100 + '%');
				// 							$cardImage.css('background-image', "url('" + course.background + "')").addClass('cover');
				// 							$cardImage.css('background-repeat', 'no-repeat');
				// 							$cardImage.css('background-size', 'contain');
				// 						}
				// 						background.src = 'https:' + course.background;
				// 
				// 						var $cardContent = $('<div/>').addClass('card-content').css('min-height', '160px');
				// 						var $courseName = $('<p/>').addClass('course-title truncate-2 dbadman bold').text(scope.language == 'en-US' ? course.name_en : course.name_th);
				// 						var $courseBrief = $('<p/>').addClass('course-instructor truncate-1 grey-text text-darken-1 dbadman bold').text(scope.language == 'en-US' ? course.lecturer_en : course.lecturer_th);
				// 						var $btnCourse = $('<a/>').addClass('waves-effect waves-light btn btn-small z-depth-1 btn-theme dbadman bold text-transform-none disabled').text(scope.$eval("'Coming soon' | phrase:locale"));
				// 						$btnCourse.css('margin-top', '0.5em');
				// 						$cardContent.append($courseName).append($courseBrief).append($btnCourse);
				// 
				// 						$card.append($cardImage).append($cardContent);
				// 						$rowCourse.append($colCourse.append($card));
				// 					});
				//
				// });
			}
		}
	}])

	/* member service */
	.directive('member', ['$window', '$location', '$timeout', '$filter', function($window, $location, $timeout, $filter) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				scope.$parent.promptskill = false;
				scope.$parent.headbar = true;
				scope.$parent.fullpage = true;
				scope.$parent.member = false;

				let program = $location.search().f;
				let filter_email = false;
				let email_domain = null;

				//
				attrs.$observe('member', function(action) {
					scope.service.promptskill.page('member').then(function(data) {
						// console.log(data)
						scope.page = data;
					});

					// Filter Email
					if (!_.isUndefined(program) && (action == 'signin' || action == 'signup')) {
						//
						scope.service.program.info(program).then(function(response) {
							// console.log(response);
							if (response) {
								email_domain = response.email_domain;
								if (email_domain != null && email_domain != '') {
									filter_email = true;
									// $("#authen form").css('height', '34.5em');
									$("input[name='username']").attr('placeholder', `@${email_domain}`);
								}
							}
						});
					}

					/* Sign In with Google for Web */
					// if(action=='signin' || action=='signup') {
					// 	// const $clientLibrary = $('<script/>').attr('src', 'https://accounts.google.com/gsi/client').attr('async', '');
					// 	// const clientId = '306093552103-ats013f1a2m4jvp155ibm1n9pf8tbbbk.apps.googleusercontent.com';
					// 	// const btnSignin = document.getElementById("btn_signin_google");
					// 	// element.append($clientLibrary);
					// 	//
					// 	$timeout(function() {
					// 		if(!filter_email) {
					// 			google.accounts.id.initialize({
					// 				client_id: clientId,
					// 				callback: handleCredentialResponse,
					// 				auto_select: false,
					// 				auto_prompt: false,
					// 				// ux_mode: 'popup',
					// 				context: 'signin'
					// 			});
					// 	    	google.accounts.id.renderButton(btnSignin, { 
					// 				type: 'standard',
					// 				theme: 'filled_blue', 
					// 				size: 'large',
					// 				text: 'signin_with',
					// 				// width: '1000'
					// 			});
					// 	    	google.accounts.id.prompt();
					// 		}
					// 	}, 1000);
					// 	
					// 	function handleCredentialResponse(response) {
					// 		// console.log(response.credential);
					// 		scope.service.member.identity(response.credential).then(function(response) {
					// 			// console.log(response);
					// 			if(!response.error) {
					// 				redirectSignin(response.token);
					// 			} else {
					// 				const title = $filter('phrase')(response.title, scope.locale);
					// 				const msg = $filter('phrase')(response.msg, scope.locale);
					// 				//
					// 				Swal.fire({
					// 				  icon: 'error',
					// 				  title: title,
					// 				  html: msg,
					// 				  confirmButtonText: $filter('phrase')('OK', scope.locale),
					// 				  confirmButtonColor: "#9E9E9E",
					// 				  heightAuto: false,
					// 				  timer: 5000
					// 				});
					// 			}
					// 		});
					// 	}
					// 	//
					// }

				});
				scope.service.member.authorized().then(function(authorized) {
					console.log(authorized)
					if (authorized) scope.permission = authorized.user;
				})
				//
				scope.formInput = function() {
					var valid = true;
					//var $forminput = angular.element('.form-input').find('input');
					angular.forEach(angular.element('.form-input').find('input'), function(input) {
						//console.log(input)
						if (angular.element(input).val() == '') {
							angular.element(input).addClass('invalid');
							valid = false;
						}
					});
					return valid;
				}
				scope.signup = function() {
					var accepted = true;
					var $formCheck = angular.element('.form-checkbox').find('input');
					angular.forEach($formCheck, function(input) {
						accepted = accepted && angular.element(input).prop("checked");
					});
					if (accepted) {
						if (scope.formInput()) {
							const $btnSignup = angular.element('.form-submit').find('#btn_signup');
							$btnSignup.prop('disabled', true);

							// Filter Email
							const username = $("input[name='username']").val().replace(/.*@/, "@");
							const signup = filter_email && username != `@${email_domain}` ? false : true;

							if (signup) {
								scope.service.member.signup(angular.element('.form-input').find('input'), scope.parameterUrl).then(function(result) {
									if (result.err) {
										scope.helper = result;
										const msg = $filter('phrase')(result.err, scope.locale);
										scope.helper = { 'msg': msg };
										$btnSignup.prop('disabled', false);
									} else {
										const title = $filter('phrase')('The system has received the application information', scope.locale);
										const msg = $filter('phrase')(result.msg, scope.locale);
										//
										Swal.fire({
											icon: 'success',
											title: title,
											html: msg,
											confirmButtonText: $filter('phrase')('OK', scope.locale),
											confirmButtonColor: "#9E9E9E",
											heightAuto: false,
											timer: 5000,
											timerProgressBar: true
										}).then(() => {
											// if (result.isConfirmed) {
											scope.$apply(function() {
												// console.log(scope.otp);
												scope.$parent.otp = result.otp;
												$location.path('/activate');
											});
											// }
										})
									}
								});
							} else {
								const title = $filter('phrase')('Something went wrong', scope.locale);
								const msg = $filter('phrase')('Invalid email format', scope.locale);
								$btnSignup.prop("disabled", false);
								//
								Swal.fire({
									icon: 'warning',
									title: title,
									html: `${msg}<br />@${email_domain}`,
									confirmButtonText: $filter('phrase')('OK', scope.locale),
									confirmButtonColor: "#9E9E9E",
									heightAuto: false,
									timer: 5000,
									timerProgressBar: true
								})
							}
						}
					} else {
						const msg = $filter('phrase')('Please accept the terms of service.', scope.locale);
						scope.helper = { "msg": msg };
					}
				}
				scope.signin = function() {
					const $btnSubmit = element.find('#btn_signin');
					$btnSubmit.prop("disabled", true);
					//
					if (scope.formInput()) {

						// Filter Email
						const username = $("input[name='username']").val().replace(/.*@/, "@");
						const signin = filter_email && username != `@${email_domain}` ? false : true;

						if (signin) {
							scope.service.member.signin(angular.element('.form-input').find('input'), scope.parameterUrl, $location.search().f).then(function(data) {
								// console.log(data);
								if (data.err == undefined) {
									// $window.location = 'https://'+scope.service.program.domain()+'#'+data.token;
									redirectSignin(data.token);
								} else if (data.type == 'warning') {
									const title = $filter('phrase')('Warn', scope.locale);
									const msg = $filter('phrase')(data.msg, scope.locale);
									//
									Swal.fire({
										icon: 'warning',
										title: title,
										html: msg,
										confirmButtonText: $filter('phrase')('OK', scope.locale),
										confirmButtonColor: "#9E9E9E",
										heightAuto: false,
										timer: 5000,
										timerProgressBar: true
									}).then((result) => {
										// if (result.isConfirmed) {
										scope.$apply(function() {
											scope.$parent.otp = data.otp;
											$location.path('/activate');
										});
										// }
									})
									// $timeout(function() {
									// 	scope.$parent.otp = data.otp;
									// 	$location.path('/activate');
									// }, 5000);

									// scope.setSessionOtp(data);
									let min = 5;
									let maxTimeCount = min * 60;
									const otp = data.otp;
									const otp_invalid_time = new Date(otp.datetime) / 1000 + maxTimeCount;
									window.sessionStorage.setItem('OTP_DATA', JSON.stringify(otp));
									window.sessionStorage.setItem('OTP_VALID', parseInt(otp_invalid_time));

								} else {
									$btnSubmit.prop("disabled", false);
									const msg = $filter('phrase')('Your email or password is incorrect.', scope.locale);
									scope.helper = { "msg": msg };
								}
							});
						} else {
							const title = $filter('phrase')('Something went wrong', scope.locale);
							const msg = $filter('phrase')('Invalid email format', scope.locale);
							$btnSubmit.prop("disabled", false);
							//
							Swal.fire({
								icon: 'warning',
								title: title,
								html: `${msg}<br />@${email_domain}`,
								confirmButtonText: $filter('phrase')('OK', scope.locale),
								confirmButtonColor: "#9E9E9E",
								heightAuto: false,
								timer: 5000,
								timerProgressBar: true
							})
						}
					}
				}
				scope.forgotPassword = function() {
					if (scope.formInput()) {
						var email = angular.element('.form-input').find('input[name="email"]').val();
						//console.log(email)
						scope.service.member.password(email, scope.parameterUrl).then(function(data) {
							//console.log(data)
							const title = $filter('phrase')(data.title, scope.locale);
							const msg = $filter('phrase')(data.msg, scope.locale);
							//
							Swal.fire({
								icon: data.type,
								title: title,
								html: msg,
								confirmButtonText: $filter('phrase')('OK', scope.locale),
								confirmButtonColor: "#9E9E9E",
								heightAuto: false,
								timer: 5000,
								timerProgressBar: true
							}).then((result) => {
								if (data.type == 'success') $window.location.href = '/signin' + scope.parameterUrl;
							})
						});
					}
				}
				scope.resetPassword = function() {
					if (scope.formInput()) {
						var passwd = angular.element('.form-input').find('input[name="password"]').val();
						if (angular.element('.form-input').find('input[name="confirm_password"]').val() == passwd) {
							var email = angular.element('.form-input').find('input[name="username"]').val();
							scope.service.member.resetpassword(email, passwd).then(function(data) {
								//console.log(data)
								const title = $filter('phrase')(data.title, scope.locale);
								const msg = $filter('phrase')(data.msg, scope.locale);
								//
								Swal.fire({
									icon: data.type,
									title: title,
									html: msg,
									confirmButtonText: $filter('phrase')('OK', scope.locale),
									confirmButtonColor: "#9E9E9E",
									heightAuto: false,
									timer: 5000,
									timerProgressBar: true
								}).then((result) => {
									if (data.type == 'success') $window.location.href = '/signin' + scope.parameterUrl;
									$location.hash(null);
									scope.service.member.clear();
								})
							});
						} else {
							const msg = $filter('phrase')('The new password and confirm password do not match', scope.locale);
							scope.helper = { 'msg': msg }
						}
					}
				}

				/* Modal Policy */
				scope.modalPolicy = function(policy) {
					scope.policy = false;
					const valid = $("input[name=" + policy + "]").is(":checked");

					// Refuse Policy Action
					scope.refusePolicy = function() {
						$("input[name=" + policy + "]").prop('checked', false);
					}
					const $modal = $('#modal_policy');
					$modal.modal({
						dismissible: false
					});
					//
					if (policy && valid) {
						let title = '';
						let template = '/templates/blocks/';
						if (policy == 'term') {
							title = 'Prompt Skill Service Conditions';
							template += scope.language == 'en-US' ? 'terms-of-use-content-en' : 'terms-of-use-content-th';
						} else if (policy == 'privacy') {
							title = 'Prompt Skill Privacy Policy';
							template += scope.language == 'en-US' ? 'privacy-policy-content-en' : 'privacy-policy-content-th';
						}
						scope.modal_template = template + '.promptskill';
						$modal.find('.modal-title').text($filter('phrase')(title, scope.locale));
						$modal.modal('open');
					}
				}

				function redirectSignin(token) {
					const domain = $location.host();
					if ($location.search().d) {
						let domain = $location.search().d.replace(/\_/g, ".");

						if ($location.search().c) {
							domain += '/course/' + $location.search().c;
						}
						$window.location = 'https://' + domain + '#' + token;
					} else if ($location.search().f) {
						const subdomain = $location.search().f;
						$window.location = 'https://' + subdomain + '.' + domain + '#' + token;
					} else {
						// $window.location = 'https://'+domain+'/dashboard#'+data.token;
						$window.location = 'https://' + domain + '/dashboard#' + token;
					}
				}
				//
			}
		};
	}])
	.directive('socialAuthentication', ['$location', '$window', function($location, $window) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				//
				const providers = [{
						'provider': 'Google',
						'icon': 'icon-google.png',
						'status': 1
					},
					{
						'provider': 'Facebook',
						'icon': 'icon-facebook.png',
						'status': 0
					},
					{
						'provider': 'Apple',
						'icon': 'icon-apple.png',
						'status': 0
					},
				]
				// console.log(providers);
				angular.forEach(providers, function(item) {
					if (item.status == 1) {
						const $btn = $('<a/>').addClass('btn btn-theme btn-authen btn-authen-other waves-effect waves-light dbadman bold large width-max');
						const $icon = $('<img/>').attr('src', `/public/img/icon/${item.icon}`);
						const $text = $('<span/>').text(item.provider);
						//
						$btn.append($icon).append($text);
						$btn.on('click', function() {
							authenticate(item.provider);
						});
						element.append($btn);
					}
				});

				function authenticate(type) {
					let provider;
					if (type == 'Google') {
						provider = new firebase.auth.GoogleAuthProvider();
					} else if (type == 'Facebook') {
						provider = new firebase.auth.FacebookAuthProvider();
						provider.addScope('email').addScope('public_profile');
					} else if (type == 'Apple') {
						provider = new firebase.auth.OAuthProvider('apple.com');
						provider.addScope('email').addScope('name');
					} else
						provider = null;
					//
					if (provider != null) {
						firebase.auth().signInWithPopup(provider).then((result) => {
								const user = result.user;
								// console.log(user);
								user.getIdToken().then(function(idToken) {
									// console.log(idToken);
									var subdomain = $location.search().f;
									scope.service.member.authenticate(provider.providerId, idToken, subdomain).then(function(response) {
										// console.log(response);
										if (!response.error) {
											redirectSignin(response.token);
										} else {
											const title = $filter('phrase')(response.title, scope.locale);
											const msg = $filter('phrase')(response.msg, scope.locale);
											//
											Swal.fire({
												icon: 'error',
												title: title,
												html: msg,
												confirmButtonText: $filter('phrase')('OK', scope.locale),
												confirmButtonColor: "#9E9E9E",
												heightAuto: false,
												timer: 5000
											});
										}
									});
								});
							})
							.catch((error) => {
								console.error(`Auth${type}:`, error);
							});
					}
				}

				function redirectSignin(token) {
					const domain = $location.host();
					if ($location.search().d) {
						let domain = $location.search().d.replace(/\_/g, ".");

						if ($location.search().c) {
							domain += '/course/' + $location.search().c;
						}
						$window.location = 'https://' + domain + '#' + token;
					} else if ($location.search().f) {
						const subdomain = $location.search().f;
						$window.location = 'https://' + subdomain + '.' + domain + '#' + token;
					} else {
						// $window.location = 'https://'+domain+'/dashboard#'+data.token;
						$window.location = 'https://' + domain + '/dashboard#' + token;
					}
				}
				//
			}
		}
	}])
	.directive('memberActivate', ['$location','$window', function($location, $window) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				//
				scope.$parent.promptskill = true;
				scope.$parent.headbar = false;
				scope.$parent.fullpage = true;
				scope.$parent.member = true;

				var subdomain = $location.search().f;
				attrs.$observe('memberActivate', function(passKey) {
					scope.service.member.activate(passKey, subdomain).then(function(result) {
						if (result) {
							element.append($('<h2/>').addClass('card-msg').text(result.msg));
							if (result.state) {
								element.prepend($('<img/>').addClass('card-icon').attr('src', '/public/img/icon/icon-accept.png'));
								element.append(
									$('<ul/>').addClass('card-action')
									.append($('<a/>').addClass('waves-effect waves-light btn btn-small z-depth-1 btn-theme regular').text('เข้าสู่ระบบ').attr('href', '/signin'))
									.append($('<a/>').addClass('waves-effect waves-light btn-flat z-depth-0 regular').text('กลับไปหน้าแรก').attr('href', '/'))
								);
							}
						}
					});
				});
			}
		}
	}])
	.directive('memberAuthorized', ['$location', '$window', '$compile', function($location, $window, $compile) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				//
				const $btnLanguage = $('<a/>').text(scope.language == 'en-US' ? 'TH' : 'EN').addClass('btn-flat z-depth-0 medium small display-flex align-items-center').attr('href', '');
				$btnLanguage.html($('<img/>').attr('src', `/public/img/icon/icon-globe-${scope.language=='en-US' ? 'th' : 'en'}.png`).css('height', '65%'));
				$btnLanguage.css({ marginLeft: '1rem', padding: '0 4px' });
				$btnLanguage.on('click', function() {
					let lang = scope.language == 'th-TH' ? 'en-US' : 'th-TH';
					let subdomain = $location.search().f ? `&f=${$location.search().f}` : '';
					$window.location.href = `${$location.path()}?l=${lang}${subdomain}`;
				});

				scope.service.member.authorized().then(function(authorized) {
					// console.log(authorized);
					if (authorized) {
						//
						$location.hash(null);
						
						// if(authorized.course != undefined) {
						// 	if($location.path().indexOf('/course')!=0) {
						// 		$location.path('/course/'+authorized.course);
						// 	}
						// }

						/* Profile */
						const $userAvatar = $('<img/>').addClass('user-avatar').attr('src', authorized.user.avatar ? authorized.user.avatar : '/public/img/icon/icon-profile.png').attr('avatar-photo', 'avatar');
						const $userFullname = $('<a/>').text(scope.mobile ? authorized.user.firstname : authorized.user.fullname).addClass('user-fullname black-text btn-flat z-depth-0 truncate-1');
						const $btnLogout = $('<a/>').text(scope.$eval("'Sign out' | phrase:locale")).addClass('waves-effect waves-light btn btn-small z-depth-1 btn-theme btn-logout regular');
						$userFullname.on('click', function() {
							$window.location.href = '/dashboard' + scope.parameterUrl;
						});
						$btnLogout.on('click', function() {
							scope.logout();
						});
						if (scope.mobile) {
							$btnLogout.html('<i class="material-icons">logout</i>');
						}
						//
						element.append($btnLogout).append($btnLanguage);
						element.prepend($userFullname).prepend($userAvatar);
						$compile(element.contents())(scope);
					} else {
						//
						const $btnSignin = $('<a/>').text(scope.$eval("'Log in' | phrase:locale")).addClass('btn-login waves-effect waves-light btn z-depth-1 btn-theme regular normal').attr('href', "/signin" + scope.parameterUrl);
						const $btnSignup = $('<a/>').text(scope.$eval("'Sign up' | phrase:locale")).addClass('btn-signup waves-effect waves-light btn-flat z-depth-0 regular normal').attr('href', "/signup" + scope.parameterUrl);
						//
						element.append($btnSignin).prepend($btnSignup).append($btnLanguage);
					}
				});
				//
			}
		}
	}])

	/* User Service */
	.directive('userDashboard', ['$location', '$window', '$filter', function($location, $window, $filter) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				//
				/* User Courses */
				scope.service.user.courses().then(function(response) {
					console.log(response);
					scope.user_learner = response;
					// scope.user['learner'] = courses;
				});
				//
			}
		}
	}])
	.directive('userProfile', ['$location', '$window', '$filter', function($location, $window, $filter) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				//

				/* Get Profile */
				scope.service.user.profile().then(function(response) {
					console.log(response);
					if (!response.error) scope.profile = response.data;
				});

				/* Avatar Photo */
				$('.avatar-photo .icon-edit').on("click", async function() {
					const { value: file } = await Swal.fire({
						title: $filter('phrase')('Upload your profile picture', scope.locale),
						confirmButtonText: $filter('phrase')('OK', scope.locale),
						confirmButtonColor: "#9E9E9E",
						input: "file",
						inputAttributes: {
							"accept": "image/*",
							"aria-label": "Upload your profile picture"
						}
					});
					if (file) {
						const formData = new FormData();
						formData.append('file', file);
						// const reader = new FileReader();
						// reader.onload = (e) => {
						// 	Swal.fire({
						// 		title: $filter('phrase')('Your uploaded picture', scope.locale),
						// 		confirmButtonText: $filter('phrase')('OK', scope.locale),
						// 		confirmButtonColor: "#9E9E9E",
						// 		timer: 5000,
						// 		timerProgressBar: true,
						// 		imageUrl: e.target.result
						// 	});
						// };
						// reader.readAsDataURL(file);

						// Upload Avatar Photo
						scope.service.user.avatar(formData, null).then(function(response) {
							console.log(response);
							if (!response.error) {
								$('.avatar-photo .photo, .nav-member .user-avatar').attr('src', response.data.photo);
								//
								const title = $filter('phrase')('Warn', scope.locale);
								const msg = $filter('phrase')(response.msg, scope.locale);
								Swal.fire({
									icon: !response.error ? 'success' : 'warning',
									title: title,
									html: msg,
									confirmButtonText: $filter('phrase')('OK', scope.locale),
									confirmButtonColor: "#9E9E9E",
									heightAuto: false,
									timer: 5000,
									timerProgressBar: true
								}).then((result) => {
									// $window.location.reload();
								})
							}
						});
					}
				});

				/* Edit Profile */
				scope.updateProfile = function() {
					const formId = '#form_profile';
					const formData = [];

					$.each($(formId).serializeArray(), function(index, key) {
						formData[key.name] = key.value;
					});
					// console.log(formData);
					scope.service.user.profile(formData).then(function(response) {
						// console.log(response);
						if (!response.error) {
							const title = $filter('phrase')('Warn', scope.locale);
							const msg = $filter('phrase')(response.msg, scope.locale);
							//
							Swal.fire({
								icon: !response.error ? 'success' : 'warning',
								title: title,
								html: msg,
								confirmButtonText: $filter('phrase')('OK', scope.locale),
								confirmButtonColor: "#9E9E9E",
								heightAuto: false,
								timer: 5000,
								timerProgressBar: true
							}).then((result) => {
								// $window.location.reload();
							})
						}
					});
					//
				}

				/* Change Password */
				scope.changePassword = function() {
					const new_password = $('#new_password').val();
					const confirm_password = $('#confirm_password').val();
					//
					if (new_password != confirm_password) {
						const title = $filter('phrase')('Something went wrong', scope.locale);
						const msg = $filter('phrase')('Password and Confirm Password do not match', scope.locale);
						//
						Swal.fire({
							icon: 'warning',
							title: title,
							html: msg,
							confirmButtonText: $filter('phrase')('OK', scope.locale),
							confirmButtonColor: "#9E9E9E"
						})
					} else {
						scope.service.user.changepassword(new_password).then(function(response) {
							// console.log(response)
							const title = $filter('phrase')(response.title, scope.locale);
							const msg = $filter('phrase')(response.msg, scope.locale);
							//
							Swal.fire({
								icon: response.type,
								title: title,
								html: msg,
								confirmButtonText: $filter('phrase')('OK', scope.locale),
								confirmButtonColor: "#9E9E9E",
								heightAuto: false,
								timer: 5000,
								timerProgressBar: true
							}).then((result) => {
								$window.location.href = '/profile';
							})
						});
					}
				}
				//
			}
		}
	}])
	.directive('avatarPhoto', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('avatarPhoto', function(type) {
					// element.addClass('avatar-photo');
					scope.service.user.avatar(null, type).then(function(response) {
						// console.log(response);
						if (!response.error) {
							element.attr('src', response.data);
						}
						if (response.avatar == false) {
							// create avatar
							function getRandomColor() {
								const letters = '0123456789ABCDEF';
								let color = '#';
								for (let i = 0; i < 6; i++) {
									color += letters[Math.floor(Math.random() * 16)];
								}
								return color;
							}

							function createAvatar(text) {
								const font = 'bold 150px Prompt';
								const canvas = document.createElement('canvas');
								const context = canvas.getContext('2d');
								canvas.width = 300;
								canvas.height = 300;
								//
								const backgroundColor = getRandomColor();
								context.fillStyle = backgroundColor;
								context.fillRect(0, 0, canvas.width, canvas.height);
								//
								context.font = font;
								context.fillStyle = '#ffffff';
								//
								const textMetrics = context.measureText(text);
								const x = (canvas.width - textMetrics.width) / 2;
								const y = (canvas.height + textMetrics.actualBoundingBoxAscent - textMetrics.actualBoundingBoxDescent) / 2;
								context.fillText(text, x, y);
								//
								return new Promise((resolve) => {
									canvas.toBlob((blob) => {
										const file = new File([blob], 'avatar.png', { type: 'image/png' });
										resolve(file);
									});
								});
							}
							//
							scope.service.member.authorized().then(function(authorized) {
								if (authorized) {
									const firstname = authorized.user.firstname;
									const avatarText = firstname.charAt(0).toUpperCase();
									//
									createAvatar(avatarText).then((file) => {
										const formData = new FormData();
										formData.append('file', file);

										// Upload Avatar Photo
										scope.service.user.avatar(formData, null).then(function(response) {
											// console.log(response);
											if (!response.error) {
												element.attr('src', response.data.photo);
											}
										});
										//
									});
								}
							});
							//
						}
					})
				});
			}
		}
	}])
	.directive('user', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				scope.user.editText = 'แก้ไข';
				scope.editProfile = function() {
					scope.user.edit = true;
					//scope.user.editText = scope.user.edit ?'ยกเลิก' :'แภ้ไข';
				};
				scope.updateProfile = function() {
					var $profiles = angular.element('#profile input.updated');
					//console.log($profiles)
					angular.forEach($profiles, function(input) {
						var $input = angular.element(input);
						scope.service.user.update($input.attr('name'), $input.val());
					});
					//
					scope.service.user.profile(scope.service.academy.aid()).then(function(data) {
						scope.user['profile'] = data;
						scope.user.edit = false;
					});
				};
				scope.updatePasswd = function() {
					var $passwd = angular.element('#password input');
					var passwd = {}
					angular.forEach($passwd, function(input) {
						var $input = angular.element(input);
						if ($input.val() == '') {
							$input.addClass('invalid');
						}
						passwd[$input.attr('name')] = $input.val();
					});
					//console.log(passwd);
					scope.user.password = passwd;
					scope.service.user.changePassword(passwd).then(function(data) {
						scope.formdata.helper = data.msg
					});
				};
				scope.user.edit = false;
				scope.service.user.profile(scope.service.academy.aid()).then(function(data) {
					//console.log(data)
					scope.user['profile'] = data;
					scope.user.photo = scope.service.user.avatar();
					//console.log(scope.user)	
					//scope.user.fullname = scope.user.profile.firstname+' '+scope.user.profile.lastname;
				});
			}
		}
	}])
	.directive('userPhoto', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var $photo = angular.element('<input type="file"/>').attr('name', 'photo').css('width', 0)
					.on('change', function() {
						var file = this.files[0];
						var reader = new FileReader();
						//
						reader.onloadend = function() {
							element.css('background-image', 'url("' + reader.result + '")');
						}
						reader.readAsDataURL(file);
					});
				//$('<i/>').addClass('material-icons red-text lighten-2 right click').text('photo')
				angular.element('<a/>').addClass('btn-flat normal').text('แก้ไข').css({ marginTop: element.height() })
					.on('click', function() {
						$photo.click();
					}).appendTo(element);
				$photo.on('change', function() {
					var file = $photo[0].files[0];
					var formdata = new FormData();
					//console.log(file)
					formdata.append('file', file);
					scope.service.user.photo(formdata).then(function(data) {
						scope.service.user.avatar(undefined, data.avatar);
						angular.element('.small.avatar').css('background-image', "url('" + scope.service.user.avatar('small') + "')");
					});
				})
				//
				element.append($photo)
				scope.$watch('user.photo', function(photo) {
					element.addClass('background-image')
					element.css('background-image', 'url(' + photo + ')')
				});
			}
		}
	}])
	.directive('certificateVerification', ['$routeParams', '$window', function($routeParams, $window) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				//
				scope.certificate_code = $routeParams.code;
				scope.card_state = 'form';

				if (scope.certificate_code) {
					// scope.certificate_status = false;
					scope.service.learner.certificated(scope.certificate_code).then(function(response) {
						// console.log(response);
						if (response) {
							scope.data_certificate = response;
							
							// get data course content
							const course = { code: scope.data_certificate.course };
							scope.service.course.content(course).then(function(response_course) {
								// console.log(response_course);
								if (response_course) {
									scope.data_course = response_course;
								}
							});
							//
							scope.certificate_status = true;
						} else {
							scope.certificate_status = false;
						}
					});
					//
					scope.card_state = 'result';
				}

				scope.checkCertificate = function() {
					const code = $('#certificate_code').val();
					// console.log(code);
					$window.location.href = '/certified/' + code + scope.parameterUrl;
				}
				//
			}
		}
	}])

	// .directive('forgotPassword', [function() {
	// 	return {
	// 		restrict: 'A',
	// 		link: function(scope, element, attrs)
	// 		{
	// 			scope.formdata = {}
	// 			scope.forgotPassword = function() {
	// 				var email = angular.element('.form-input').find('input[name="email"]').val()
	// 				scope.service.user.password(email, 'passwd').then(function(data) {
	// 					console.log(data)
	// 				});
	// 			}
	// 		}
	// 	}
	// }])
	// .directive('dashboard', [function() {
	// 	return {
	// 		restrict: 'A',
	// 		link: function(scope, element, attrs)
	// 		{
	// 			var $userInfo = $('<nav/>').addClass('nav-wrapper relative transparent z-depth-0 black-text');
	// 			$('<a/>').addClass('circle avatar large brand-logo center').css('bottom', 0).css('background-image', "url('"+scope.service.user.avatar()+"')").appendTo($userInfo);
	// 			element.addClass('dashboard')
	// 			scope.service.user.dashboard().then(function(data) {
	// 				//console.log(data)
	// 				scope.dashboard = data;
	// 				scope.$parent.headerBanner = data.element.header.background
	// 				//console.log(scope.headerBanner)
	// 			});
	// 			element.prepend($userInfo)
	// 		}
	// 	}
	// }])
	// .directive('inputAddress', [function() {
	// 	return {
	// 		restrict: 'A',
	// 		templateUrl: '/templates/form/address.promptskill',
	// 		link: function(scope, element, attrs) 
	// 		{
	// 			
	// 		}
	// 	}
	// }])
	// .directive('textField', [function() {
	// 	return {
	// 		restrict: 'A',
	// 		link: function(scope, element, attrs)
	// 		{
	// 			element.addClass('input-field')
	// 			attrs.$observe('textField', function(label) 
	// 			{
	// 				if(label) {
	// 					var $input = $('<input readonly/>').attr({type:'text'}).val(attrs.value);
	// 					var $label = $('<label/>').addClass('dbadman normal bold black-text').text(label);
	// 					//
	// 					if(attrs.type =='textarea') {
	// 						$input = $('<textarea readonly/>').text(attrs.value).addClass('materialize-textarea').attr('rows', attrs.line).css('height', attrs.line+'em')
	// 					}
	// 					$input.addClass('dbadman')
	// 					element.append($input).append($label);
	// 				}
	// 			});
	// 		}
	// 	}
	// }])


	/* Course Program */
	.directive('courseState', ['$location', '$window', function($location, $window) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				var $btState = $('<a/>').addClass('waves-effect waves-light btn z-depth-1 btn-theme normal medium');
				element.append($btState);
				scope.course_state = false;
				attrs.$observe('courseState', function(code) {
					if (code) {
						// $btState.text(!scope.course.free_course ? scope.$eval("'Buy now' | phrase:locale") : scope.$eval("'Enroll' | phrase:locale"));
						element.removeAttr('course-state');
						scope.service.member.authorized().then(function(authorized) {
							if (authorized) {
								scope.service.course.state(code).then(function(state) {
									// console.log(state)
									// console.log(scope.service.user.token())
									if (scope.service.user.token() == '' && !scope.course.invitation) {
										state.text = 'Register'; //scope.$eval("'Register' | phrase:locale");
										state.code = 'register';
									}
									// console.log(scope.course)
									if (state.code == 'enrol') {
										scope.course_state = true;
										if (scope.course.invitation) {
											// scope.service.member.authorized().then(function(authorized) {
											// console.log(authorized)
											if (authorized.invite != code) {
												element.remove();
											}
											// });
											// console.log(element)
											//.addClass('disabled invisible')
										} else {
											if (!scope.course.free_course) {
												state.code = 'order';
											}
										}
									}
									// console.log(state.text)
									$btState.addClass(state.code).text(scope.$eval("'" + state.text + "'| phrase:locale"));
									// if(scope.course.free_course && (state.code=='enrol' || state.code=='order')) {
									// 	$btState.addClass(state.code).text(scope.$eval("'Enroll'| phrase:locale"));
									// }
									//
									$btState.on('click', function() {
										// scope.service.course.apply(code, state)
										let domain = `//${ element.attr('data-domain') }.promptskill.com`;

										// redirect to ref domain
										if ($location.search().d) {
											domain = '//' + $location.search().d.replace(/\_/g, ".");
										}

										let activity = state.activity ? domain + '/course/' + code + '/' + state.activity : domain + '/course/' + code;
										$window.location = activity;
									});
								});
							} else {
								scope.course_state = true;
								$btState.on('click', function() {
									$window.location.href = scope.gotoParamUrl('https://promptskill.com/signin');
									// scope.gotoUrl('signin')
								});
							}
						});
					}
				});
			}
		}
	}])


	/* form input */
	.directive('formHelper', ['$window', '$filter', function($window, $filter) {
		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 = $filter('phrase')('Something went wrong', scope.locale);
							helper.type = 'warning';
						}
						Swal.fire({
							title: helper.title,
							html: text,
							icon: helper.type,
							confirmButtonText: $filter('phrase')('OK', scope.locale),
							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('textField', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				element.addClass('input-field')
				attrs.$observe('textField', function(label) {
					if (label) {
						var $input = $('<input readonly/>').attr({ type: 'text' }).val(attrs.value);
						var $label = $('<label/>').addClass('dbadman normal bold black-text').text(label);
						//
						if (attrs.type == 'textarea') {
							$input = $('<textarea readonly/>').text(attrs.value).addClass('materialize-textarea').attr('rows', attrs.line).css('height', attrs.line + 'em')
						}
						$input.addClass('dbadman')
						element.append($input).append($label);
					}
				});
			}
		}
	}])
	.directive('showHidePassword', ['$compile', function($compile) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				const $suffixIcon = element.find('.suffix');
				const $input = element.find('input');

				// toggle password visibility function
				$suffixIcon.on("click", function() {
					if ($input.attr('type') == 'password') {
						$input.attr('type', 'text');
						$suffixIcon.text('visibility').addClass('black-text');
					} else {
						$input.attr('type', 'password');
						$suffixIcon.text('visibility_off').removeClass('black-text');
					}
				});
				//
			}
		}
	}])

	.directive('otpActivate', ['$window', '$timeout', '$location', '$filter', function($window, $timeout, $location, $filter) {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {

				scope.$parent.promptskill = true;
				scope.$parent.headbar = false;
				scope.$parent.fullpage = true;
				scope.$parent.member = false;

				var min = 5;
				var minutes, seconds;
				var maxTimeCount = min * 60;
				var disableBtn = false;
				var $time = $('<span/>').addClass('countdown').css({ width: '2.8em', display: 'inline-block' });

				var otp_lenght = 6;
				var $otp_field = $('<div/>').addClass('otp-field');
				var $input = $('<input/>').attr({ type: 'number' });
				var $send_otp_link = $('<a/>').text($filter('phrase')('Resend verification code again', scope.locale)).css({ textDecoration: 'underline', cursor: 'pointer' });
				var $confirm_btn = $('<a/>').addClass('btn otp-btn medium').text($filter('phrase')('Confirm OTP code', scope.locale));

				scope.setSessionOtp = function(response) {
					let min = 5;
					let maxTimeCount = min * 60;
					const otp = response.otp;
					const otp_invalid_time = new Date(otp.datetime) / 1000 + maxTimeCount;
					window.sessionStorage.setItem('OTP_DATA', JSON.stringify(otp));
					window.sessionStorage.setItem('OTP_VALID', parseInt(otp_invalid_time));
				}

				// console.log(window.sessionStorage.getItem('OTP_DATA') == '{}');
				// console.log(scope.otp);
				if (window.sessionStorage.getItem('OTP_DATA') != null && window.sessionStorage.getItem('OTP_DATA') != '{}' && window.sessionStorage.getItem('OTP_DATA').ref == scope.otp.ref) {
					scope.$parent.otp = JSON.parse(window.sessionStorage.getItem('OTP_DATA'));
				} else {
					window.sessionStorage.setItem('OTP_DATA', JSON.stringify(scope.otp));
				}

				if (window.sessionStorage.getItem('OTP_VALID') != null && window.sessionStorage.getItem('OTP_VALID') != 'NaN' && window.sessionStorage.getItem('OTP_DATA').ref == scope.otp.ref) {
					var otp_invalid_time = window.sessionStorage.getItem('OTP_VALID');
				} else {
					var otp_invalid_time = new Date(scope.otp.datetime) / 1000 + maxTimeCount;
					window.sessionStorage.setItem('OTP_VALID', parseInt(otp_invalid_time));
				}


				for (var i = 0; i < otp_lenght; i++) {

					if (i > 0) {
						var $input = $('<input/>').attr({ type: 'number', disabled: '' });
					}
					$otp_field.append($input);

				}

				var formatTime = function(number) {
					if (number < 10) {
						return '0' + number;
					}
					return number;
				}
				// 
				var countdown = function() {
					var interval = setInterval(function() {
						let current_time = new Date() / 1000;
						let timeCount = window.sessionStorage.getItem('OTP_VALID') - current_time;
						minutes = formatTime(parseInt(timeCount % 3600 / 60));
						seconds = formatTime(parseInt(timeCount % 60));

						$time.text(minutes + ':' + seconds);

						if (timeCount <= 0) {
							clearInterval(interval);
							disableBtn = true;
							$confirm_btn.attr({ disabled: "disabled" });
							$time.text('00:00');
							window.sessionStorage.removeItem('OTP_VALID');
							$alert_text.addClass('center-align').html($filter('phrase')('The verification code (OTP) has exceeded the specified time.<br />Please press send to confirm again.', scope.locale));
						}
					}, 1000);
				}

				countdown();

				var $text = scope.language == 'en-US' ? $('<p/>').text('Please enter OTP within ' + min + ' minutes. ').append($time).append($('<span/>').text(' remaining.')) : $('<p/>').text('กรุณากรอกรหัส OTP ภายใน ' + min + ' นาที เหลืออีก ').append($time);
				var $alert_text = $('<p/>').css({ color: 'red' });

				// countdown();

				element.append($otp_field).append($alert_text).append($text).append($send_otp_link).append($confirm_btn);

				$send_otp_link.on("click", function() {
					scope.service.member.resend(scope.otp, scope.parameterUrl).then(function(response) {
						console.log(response);
						if (response.msg) {
							const title = $filter('phrase')('Warn', scope.locale);
							const msg = $filter('phrase')(response.msg, scope.locale);
							//
							Swal.fire({
								title: title,
								html: msg,
								icon: 'success',
								confirmButtonText: $filter('phrase')('OK', scope.locale),
								confirmButtonColor: "#9E9E9E",
								heightAuto: false,
								timer: 5000,
								timerProgressBar: true
							}).then((result) => {
								// if (result.isConfirmed) {
								$window.location.reload();
								// }
							})
						}
						scope.setSessionOtp(response);
					});
				});

				$confirm_btn.on("click", function() {

					var otp_text = '';

					$(document).ready(function() {
						const inputs = $(".otp-field > input");

						inputs.each(function(index, input) {
							otp_text += $(input).val();
						})
					});

					scope.otp['code'] = otp_text;
					// console.log(scope.otp);
					var subdomain = $location.search().f;
					scope.service.member.activate(scope.otp, subdomain).then(function(response) {
						console.log(response);
						if (response.type != 'error') {
							sessionStorage.clear();
							scope.$parent.otp = {};
							//
							const title = $filter('phrase')('Membership Confirmation', scope.locale);
							const msg = $filter('phrase')(response.msg, scope.locale);
							Swal.fire({
								title: title,
								html: msg,
								icon: 'success',
								showConfirmButton: false,
								// confirmButtonText: 'ตกลง',
								// confirmButtonColor: "#9E9E9E",
								heightAuto: false,
								timer: 5000,
								timerProgressBar: true
							}).then((result) => {
								$window.location.href = '/signin' + scope.parameterUrl;
							})
						} else {
							$alert_text.html($filter('phrase')(response.msg, scope.locale));
						}
					});

				});

				//////////////////////
				$(document).ready(function() {
					const inputs = $(".otp-field > input");
					const button = $(".otp-btn");

					element.ready(function() {
						inputs.first().focus();
					})

					button.attr("disabled", "disabled");

					inputs.first().on("paste", function(event) {
						event.preventDefault();

						const pastedValue = event.originalEvent.clipboardData.getData('text');
						const otpLength = inputs.length;

						for (let i = 0; i < otpLength; i++) {
							if (i < pastedValue.length) {
								inputs.eq(i).val(pastedValue[i]);
								inputs.eq(i).removeAttr("disabled");
								inputs.eq(i).focus();
							} else {
								inputs.eq(i).val(""); // Clear any remaining inputs
								inputs.eq(i).focus();
							}
						}
					});

					inputs.each(function(index1, input) {
						$(input).on("keyup", function(e) {
							const currentInput = $(input);
							const nextInput = currentInput.next();
							const prevInput = currentInput.prev();

							if (currentInput.val().length > 1) {
								nextInput.val(currentInput.val().substr(1, 2));
								currentInput.val(currentInput.val().substr(0, 1));
								nextInput.focus();
								// return;
							}

							if (nextInput.attr("disabled") && currentInput.val() !== "") {
								nextInput.removeAttr("disabled");
								nextInput.focus();
							}

							if (e.key === "Backspace" && index1 > 0) {
								inputs.each(function(index2, input) {
									if (index1 <= index2 && prevInput) {
										$(input).attr("disabled", true);
										$(input).val("");
										prevInput.focus();
									}
								});
							}

							button.removeClass("active");
							button.attr("disabled", "disabled");

							// console.log(!disableBtn);
							const inputsNo = inputs.length;
							if (!inputs.last().attr("disabled") && inputs.last().val() !== "" && !disableBtn) {
								button.addClass("active");
								button.removeAttr("disabled");
								return;
							}
						});
					});
				});

			}
		}
	}])
	.directive('inputField', ['$filter', function($filter) {
		return {
			restrict: 'C',
			link: function(scope, element, attrs) {
				var $input = angular.element('<input/>').attr({ name: attrs.name, type: attrs.type, });
				var $select = angular.element('<select/>').attr({ name: attrs.name, });
				var $label = angular.element('<label/>').addClass('bold black-text');
				var $helper = angular.element('<span/>').attr('data-error', $filter('phrase')('Required', scope.locale)).addClass('helper-text');
				const labelTitle = attrs.label ? $filter('phrase')(attrs.label, scope.locale) : '';
				//console.log(attrs.type)
				switch (attrs.type) {
					case 'radio':
						$input.addClass('with-gap red');
					case 'checkbox':
						var $text = angular.element('<span/>').text(labelTitle);
						$input.removeClass('validate').addClass('filled-in');
						$label.append($input).append($text);
						$input.prop('checked', attrs.checked).addClass(attrs.check);
						element.append($label).removeClass('input-field');
						break;
					case 'switch':
						var $switch = angular.element('<div/>').addClass('switch row dbadman large bold').append($label).css('margin', '0.75em');
						var $level = angular.element('<span/>').addClass('lever');
						$input.attr('type', 'checkbox');
						$label.addClass('smaller right').append($input).append($level).append(attrs.switchOn).prepend(attrs.switchOff);
						$switch.prepend(labelTitle);
						element.append($switch).removeClass('input-field').prepend();
						break;
					case 'submit':
						var $button = angular.element('<button/>').addClass('btn red waves-effect waves-light dbadman bold large').text(labelTitle); //.attr({type:attrs.type}).css({width:'100%',borderRadius:'0.25em'});
						element.append($button).removeClass('input-field');
						break;
					case 'button':
						var $button = angular.element('<button/>').addClass('btn-large waves-effect waves-light dbadman bold large' + attrs.name).text(labelTitle); //.css({width:'100%',borderRadius:'0.25em'});
						element.append($button).removeClass('input-field');
						$button.addClass(attrs.name)
						break;
					case 'link':
						var $link = angular.element('<a/>').addClass('waves-effect btn-flat dbadman bold small slim center text-transform-unset').text(labelTitle).attr('href', attrs.link);
						element.append($link).removeClass('input-field');
						break;
					case 'textarea':
						var $text = angular.element('<textarea/>').attr({ id: attrs.name, name: attrs.name }).addClass('materialize-textarea');
						$text.attr('rows', attrs.line).css('height', attrs.line + 'em').text(attrs.value);
						$label.text(labelTitle).attr('for', attrs.name).addClass('dbadman normal bold');
						element.append($text).append($label);
						break;
					case 'password':
						var icon = 'visibility';
						var $icon = angular.element('<i/>').text(icon + '_off').addClass('material-icons suffix grey-text')
							.on('click', function() {
								if (angular.element(this).text().indexOf('_off') > -1) {
									angular.element(this).text(icon).addClass('black-text');
									$input.attr('type', 'text');
								} else {
									angular.element(this).text(icon + '_off').removeClass('black-text');
									$input.attr('type', 'password');
								}
							})
						$input.attr('autocomplete', 'off');
						element.append($icon);
						$input.addClass('dbadman validate').attr('required', true);
						$label.text(labelTitle).attr('for', attrs.name).addClass('dbadman normal bold');
						element.append($input).append($label).append($helper);
						break;
					case 'hidden':
						element.append($input);
						break;
					case 'email':
						$helper.attr('data-error', $filter('phrase')('Invalid email', scope.locale));
					case 'text':
					case 'date':
					case 'time':
						if (attrs.type != 'password') {
							//$input.attr('type', 'text');
						}
						$input.addClass('dbadman validate').attr('required', true);
						// $input.attr('autocomplete', 'off');
						$label.text(labelTitle).attr('for', attrs.name).addClass('dbadman normal bold');
						element.append($input).append($label).append($helper);
						//if(attrs.type =='date') $input.datepicker();
						//if(attrs.type =='time') $input.timepicker();
						break;
					case 'file':
						var icon = 'attach_file';
						var $icon = angular.element('<i/>').text(icon).addClass('Medium material-icons suffix grey-text click')
							.on('click', function() {
								$input.click()
							});
						var $filepath = angular.element('<input/>').attr('type', 'text'); //.attr('placeholder', 'attach file');
						$label.text(labelTitle).attr('for', attrs.name).addClass('dbadman normal bold');
						$input.width(0).on('change', function() {
							//console.log(angular.element(this).val())
							var filename = angular.element(this).val().split(/[\\/]/).pop();
							$filepath.val(filename)
						});
						element.append($label).append($filepath).append($input);
						element.append($icon);
						//$input.attr('type', 'text')
						//$label.text(labelTitle).attr('for', attrs.name).addClass('dbadman normal bold');
						//element.append($input).append($label);
						//$input.datepicker();
						//break;
					case 'select':
						$select.addClass('browser-default').attr('required', true);
						$select.css({ margin: '0', border: '0', borderRadius: '0', borderBottom: '1px solid #707070' })
						var $optionDisabled = angular.element('<option/>').addClass('dbadman normal');
						$optionDisabled.attr('disabled', true).attr('selected', true).text('เลือก');
						$select.append($optionDisabled);
						var value_option = JSON.parse(attrs.option);
						angular.forEach(value_option, function(item) {
							var $option = angular.element('<option/>').addClass('dbadman normal');
							$option.text(item).attr('value', item);
							$select.append($option);
						});
						$label.text(labelTitle).attr('for', attrs.name).addClass('dbadman normal bold');
						element.append($select).append($label).append($helper);
						break;
				}
				if (attrs.disabled) {
					$input.attr('disabled', false)
					$input.addClass('validate');
					//$input.addClass('disabled');
					$input.addClass(attrs.disabled);
				}
				if (attrs.enabled) {
					$input.attr('disabled', true)
					$input.removeClass('validate');
					//$input.addClass('enabled');
					$input.addClass(attrs.enabled);
				}
				if (attrs.same) {
					//$input.prop('readonly', true);
					$input.addClass(attrs.same);
				}
				//
				$input.on('change', function() {
					if (angular.element(this).attr('type') == 'checkbox') {
						var parent = angular.element(this).attr('name');
						var state = angular.element(this).hasClass('enabled') ? !angular.element(this).is(':checked') : angular.element(this).is(':checked');
						if (angular.element(this).hasClass('same')) {
							//console.log(angular.element('input.'+angular.element(this).attr('name')))
							//var same = angular.element(this).attr('name');
							angular.forEach(angular.element('input.' + parent), function(input) {
								var value = angular.element('form#' + parent + ' [name="' + angular.element(input).attr('name') + '"]').val();
								//console.log(value)
								angular.element(input).val(value).prop('readonly', true)
								if (!state) {
									angular.element(input).val(null).prop('readonly', false)
								}
							})
						} else {
							//console.log(angular.element(this).is(':checked'))
							//var parent = angular.element(this).attr('name');
							//console.log(angular.element(this))
							//var state = angular.element(this).hasClass('enabled') ?!angular.element(this).is(':checked') :angular.element(this).is(':checked');
							//console.log(state)
							angular.element('.' + parent).attr('disabled', state);
							if (!state) {
								$input.addClass('validate');
							} else {
								$input.removeClass('validate');
							}
							//
						}
					} else {
						$input.addClass('updated');
					}
				});
			}
		}
	}])
	.directive('value', [function() {
		return {
			restrict: 'A',
			link: function(scope, element, attrs) {
				attrs.$observe('value', function(value) {
					if (value) {
						var $input = element.children('input');
						//console.log(element.children('input').attr('name'))
						$input.val(value)
						//scope.formdata[$input.attr('name')] = $input.val();
					}
					//console.log(scope.formdata)
				})
			}
		}
	}])

// .directive('fileUpload', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			var $file = $('<input type="file"/>').css('opacity', 0);
// 			element.append($file)
// 			scope.browseFile = function() {
// 				
// 			}
// 		}
// 	}
// }])
/* course directive */
/*.directive('courseApply', ['user', function(user) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			var stateText = {
				'signin':'ลงทะเบียน',
				'enroll':'เริ่มเรียน',
				'start':'เริ่มเรียน',
				'continue':'เรียนต่อ',
				'review':'ทบทวนบทเรียน',
			};
			attrs.$observe('courseApply', function(code) {
				//
				if(code !='') {
					//var state = ;
					var $btApply = $('<a/>').addClass('waves-effect waves-light btn-large z-depth-1 white-text red')
					//
					user.stateCourse(code).then(function(course) {
						//console.log(course)
						$btApply.text(stateText[course.state]);
						element.append($btApply);
						//
						$btApply.on('click', function() {
							user.applyCourse(code, course);
							//.then(function(data) {
							//	console.log(data)
							//});
						});
					});
					//
				}
			});
		}
	}
}])*/
// .directive('courseMascot', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			var bottom = element.parent().css('padding-bottom');
// 			var right = element.parent().css('padding-right');
// 			//console.log(bottom)
// 			element.css({position:"absolute",bottom:bottom,right:right});
// 			attrs.$observe('courseMascot', function(mascot)
// 			{
// 				var img = new Image();
// 				img.onload = function() {
// 					var width = (this.width / 1920) * 100;
// 					var height = (this.height / 1920) * 100;
// 					//console.log(padTop);
// 					element.css('width', width + 'vw');
// 					element.css('height', height + 'vw');
// 					//element.css('right', width + 'vw');
// 				}
// 				img.src = 'https:' + mascot;
// 				element.css("background-image", "url('"+mascot+"')");
// 				//element.css('padding-top', padTop + '%');
// 				element.addClass('background-image');
// 			});
// 		}
// 	}
// }])
// .directive('courseNavigator', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 
// 		}
// 	}
// }])
// .directive('chatMessage', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 
// 		}
// 	}
// }])
// .directive('videoEmbed', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			attrs.$observe('videoEmbed', function(video)
// 			{
// 				var $video = $('<video controls/>').css({width:'100%',height:'100%',position:'absolute',top:0});
// 				var height = (9 / 16) * 100;
// 				$video.append($('<source/>').attr('src', video).attr('type','video/mp4'))
// 				element.css('padding-bottom', height + '%');
// 				element.css("background-color", "#CCCCCC");
// 				element.css('position', 'relative');
// 				//
// 				if(video!='')
// 					element.append($video);
// 			});
// 		}
// 	}
// }])
// .directive('videoPoster', [function() {
// 	return {
// 		restrict: 'A',
// 		priority: 1000,
// 		link: function(scope, element, attrs)
// 		{
// 			attrs.$observe('videoPoster', function(poster)
// 			{
// 				var $video = element.children('video');
// 				if(poster) {
// 					$video.attr('poster', poster);
// 				}
// 			});
// 		}
// 	}
// }])
// .directive('embedSrc', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			//var $script = $('<script/>').attr('src', '//lrs.promptskill.com/mod/hvp/library/js/h5p-resizer.js');
// 			var $iframe = $('<iframe scrolling="no" frameborder="0"/>').css({width:'100%',height:'100%',border:'none',position:'absolute',top:0});
// 			//var src = 'https://lrs.promptskill.com/mod/hvp/embed.php?id=';
// 			attrs.$observe('embedSrc', function(src)
// 			{
// 				var height = (10 / 16) * 100;
// 				element.css('padding-bottom', height + '%');
// 				//element.css('margin-bottom', "-2em");
// 				//element.css("background-color", "#ffffff");
// 				element.css('position', 'relative');
// 				//
// 				element.append($iframe);
// 				$iframe.attr('src', src);
// 			});
// 		}
// 	}
// }])
// 
// .directive('embedPayin', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			//var $script = $('<script/>').attr('src', '//lrs.promptskill.com/mod/hvp/library/js/h5p-resizer.js');
// 			var $iframe = $('<iframe  id="print-iframe" scrolling="no" frameborder="0"/>').css({width:'100%',height:'100%',border:'none',position:'absolute',top:0, left:0});
// 			attrs.$observe('embedPayin', function(src)
// 			{
// 				//var height = (10 / 16) * 100;
// 				element.css('padding-bottom', 1100 + 'px');
// 				//element.css('margin-bottom', "-2em");
// 				//element.css("background-color", "#ffffff");
// 				element.css('position', 'relative');
// 				//
// 				element.append($iframe);
// 				$iframe.attr('src', src);
// 			});
// 		}
// 	}
// }])
// 
// .directive('embedCert', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			//var $script = $('<script/>').attr('src', '//lrs.promptskill.com/mod/hvp/library/js/h5p-resizer.js');
// 			var $iframe = $('<iframe scrolling="no" frameborder="0"/>').css({width:'100%',height:'100%',border:'none',position:'absolute',top:0, left:0});
// 			attrs.$observe('embedCert', function(src)
// 			{
// 				var height = (10.5 / 16) * 100;
// 				element.css('padding-bottom', height + '%');
// 				//element.css('margin-bottom', "-2em");
// 				//element.css("background-color", "#ffffff");
// 				element.css('position', 'relative');
// 				//
// 				element.append($iframe);
// 				$iframe.attr('src', src);
// 			});
// 		}
// 	}
// }])

/* course directive */
// .directive('courseNavigator', [function() {
// 	return {
// 		restrict: 'A',
// 		templateUrl: '/templates/blocks/course-navigator.promptskill'
// 	}
// }])
// .directive('courseProgress', [function() {
// 	return {
// 		restrict: 'A',
// 		templateUrl: 'templates/blocks/course-progress.promptskill',
// 		link: function(scope, element, attrs)
// 		{
// 			//console.log(attrs.scale)
// 			attrs.$observe('courseProgress', function(code) {
// 				scope.service.user.courseProgress(code).then(function(data) {
// 					scope.scale = attrs.scale;
// 					scope.progress = data.progress;
// 					scope.scored = data.scored;
// 				});				
// 			});
// 		}
// 	}
// }])
// .directive('courseInfos', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			var score = 0;
// 			var scored = 0;
// 			attrs.$observe('courseInfos', function(course) {
// 				
// 			});
// 		}
// 	}
// }])
// 
// /* academy directive */
// .directive('programCourse', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			attrs.$observe('programCourse', function(program) {
// 				//
// 				if(program.length >0) {
// 					//
// 					//academy.courses(program)
// 				}
// 			});
// 		}
// 	}
// }])
// .directive('teacherPhoto', [function() {
// 	return {
// 		restrict: 'A',
// 		link: function(scope, element, attrs)
// 		{
// 			angular.forEach(scope.academy.page.teachers, function(teacher) {
// 				//console.log(teacher)
// 			})
// 		}
// 	}
// }])
/*.directive('swiperContainer', ['$timeout', function($timeout) {
	return {
		//
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			var perView = attrs.swiperContainer;
			//console.log(perView)
			$timeout(function ()
			{
				var $parent = element.parent();
				var $container = $('<div/>').addClass('swiper-wrapped');
				var type = element.attr('class');
				var id = element.attr('id');
				//
				var $swiper = $('<div/>').addClass('swiper-container');
				var $slides = $('<div/>').addClass('swiper-wrapper');
				var $slide = element.children();
				if (id == 'photos') {
					var $pagination = $('<div/>').addClass('swiper-pagination');
				}
				var $next = $('<div/>').addClass('swiper-button-next');
				var $prev = $('<div/>').addClass('swiper-button-prev');

				element.remove();
				$parent.append($container);
				$container.append($swiper);

				//
				$slide.addClass('swiper-slide ' + type)
				$slides.append($slide)
				//console.log($slides)
				$swiper.append($slides).append($pagination);
				//
				$container.append($prev).append($next).attr('id', id);
				
				var perView_mobile = 1;
				if(perView == 5){
					perView_mobile = 2;
				}else if(perView == 4){
					perView_mobile = 1;					
				}else{
					perView_mobile = 1;
				}				
				//
				var mySwiper = new Swiper($swiper, {
					slidesPerView: perView_mobile,

					breakpoints: {
						// when window width is <= 320px
						1024: {
							slidesPerView: perView,
						},
						// when window width is <= 480px
						600: {
							slidesPerView: perView,
						}
					  },

					 navigation: {
						nextEl: '#'+id+' .swiper-button-next',
						prevEl: '#'+id+' .swiper-button-prev',
					},
					pagination:{
						el: '#'+id+' .swiper-pagination',
					}
					
				});
				//swiper.navigation.nextEl = '.swiper-button-next';

			}, 250);
		}
	}
}])
/*
.directive('signUp', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			var $header = $('<h3/>').text('ลงทะเบียน').addClass('underline-text');
			
			element.addClass('col');
			element.append($header);
		}
	}
}])
.directive('hamMenu', [function() {
	return {
		restrict: 'A',
		link: function($scope, element, attrs)
		{
			var $this = $(element);
			var $navigation = $('.navigation');
			var $menu = $('.main-menu .text');
			$menu.css('top', $navigation.height()+'px');
			element.on('click', function() {
				if($menu.hasClass('show')) {
					$menu.removeClass('show');
				} else {
					$menu.addClass('show');
					$menu.children('a').on('click', function() {
						$menu.removeClass('show');
					});
				}
			});
			
			//$('.navigation').prepend('<div class="overlay" />')
			//$scope.updateScrollbar('disable');
			//
			console.log($menu)
		}
	}
}])
.directive('searchFilter', ['$http', function($http) {
	return {
		restrict: 'A',
		link: function($scope, element, attrs)
		{
			var $input = $('<input id="search-text" name="search-text" />').attr('placeholder', 'SEARCH');
			var $search = $('<button id="search" />').append('<i/>');
			var $filter = $('<button id="filter" />').text('FILTERS').prepend('<i/>');
			var $sort = $('<button id="sort" />').text('SORT BY').append('<i/>');
			//
			element.append($input);
			element.prepend($sort).append($search).append($filter);
			//
			var $sorts = $('<ul id="sorts"/>').addClass('checklist').hide();
			var sort = '';
			var filters = '';
			$http.get('templates/sorts.json').success(function(data) {
				//console.log(data)
				angular.forEach(data, function(text, value) {
					//console.log(text)
					var $item = $('<li/>').addClass('item');
					var $checkbox = $('<input type="radio" name="sort"/>').val(value)
					var $checkLabel = $('<label/>').text(text);
					//
					$item.append($checkbox).append($checkLabel)
					$sorts.append($item);
					$checkbox.on('change', function() {
						//console.log($scope.basepath + 'program/index?sort='+$checkbox.val())
						$http.get($scope.basepath + 'program/index?sort='+$checkbox.val())
						.success(function(data) {
							//console.log(data)
							$scope.programs = data;
						})
					})
				});
			});
			$sorts.on('mouseleave', function() {
				//console.log('mouseleave');
				//$sorts.hide();
			})
			$sort.append($sorts);
			// filtering
			var $filters = $('<div id="filters"/>').hide();
			var $title = $('<h4/>').text('filters');
			var $close = $('<a/>').addClass('icon close').on('click', function(event) {
				//console.log($filters)
				event.preventDefault();
				$filters.hide();
			});
			//
			$title.append($close)
			$filters.append($title);
			$http.get($scope.basepath + 'program/filters')
			  .success(function(data) {
				//console.log(data)
				angular.forEach(data, function(type, index) {
					//console.log(type.title)
					var $items = $('<ul/>').addClass('checklist');
					var $head = $('<h3/>').text(type.title);
					$items.append($head);
					angular.forEach(type.filters, function(filter, index) {
						//console.log(filter.title)
						var $item = $('<li/>').addClass('item');
						var $checkbox = $('<input type="checkbox" name="filters[]"/>').val(filter.title);
						var $checkLabel = $('<label/>').text(filter.title);
						//
						$item.append($checkbox).append($checkLabel)
						$items.append($item);
						$filters.append($items); 
						$checkbox.on('change', function() {
							filters = $('[name="filters[]"]:checked').map(function () {return this.value;}).get().join(",");
							//console.log(filters)
							$http.post($scope.basepath + 'program/filter?sort='+sort, {
								filter: filters
							}).success(function(data) {
								console.log(data)
								$scope.programs = data;
							})
						})
					});
				});
			});
			$filter.append($filters)
			$filters.on('mouseleave', function() {
				//console.log('mouseleave');
				$filters.hide();
			});
			// action
			$input.on('keyup', function(event) {
				if(event.keyCode === 13){					
					$search.click()
				}
				$sorts.hide()
			})
			
			$sort.on('click', function() {
				//$sort.addClass('idle');
				
				if($sorts.is(':hidden')) {
					$sorts.show()
				} else {
					$sorts.hide()
				}
				$filters.hide()
			})
			
			$filter.on('click', function() {
				//console.log('filters')
				$filters.show();
				$sorts.hide();
			})
			$input.on('focus', function() {
				
			})
			
			$search.on('click', function() {
				//console.log($input.val())
				$http.post($scope.basepath + 'program/search?sort='+sort, {
					filter: filters,
					text: $input.val()
				}).success(function(data) {
					  $scope.programs = data 
				})
			})
		}
	}
}])
.directive('backgroundImage', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('backgroundImage', function(image)
			{
				//console.log(image)

				element.css("background-image", "url('"+image+"')");
				element.addClass('background-image');
				//console.log(element);

			});
			//var backgroundImage = attrs.backgroundImage;
			//console.log(backgroundImage)
		}
	}
}])
.directive('watchProgram', ['$http', function($http) {
	return {
		restrict: 'A',
		link: function($scope, element, attrs)
		{
			var text = attrs.text;
			var play = '/entertainment/#/program/watch/';
			var btWatch = $('<a class="play"/>').addClass('button');
			var btSeason = $('<a/>').addClass('button ').text('ซีซั่นทั้งหมด');
			//
			attrs.$observe('watchProgram', function(referrer)
			{
				//console.log(referrer)
				if(referrer !='')
				{
					element.addClass('watch');
					//
					$http.get($scope.basepath + 'program/latest/' + referrer)
						.success(function(data)
						{
							if(element.hasClass('seasons'))
							{
								btSeason.attr('href', '/entertainment/#/program/detail/' + referrer);
								element.append(btSeason);
								text += ' S' + data.season;
								play = '/entertainment/#/program/watch/' + referrer + '/' + data.season + '/' + data.episode;

							} else {
								if(data.season >0) 
								{
									text += ' S' + data.season + ' EP1';
									play += referrer + '/' + data.season + '/1';
								} else {
									play += referrer + '/' + data.season + '/' + data.episode;
								}
							}
							//
							btWatch.text(text).prepend('<i/>');
							btWatch.attr('href', play);
							//
							element.prepend(btWatch);
						});
					/*
					element.addClass('watch');
					if(element.hasClass('seasons'))
					{
						text = attrs.text + ' S' + attrs.season;

						element.append(btSeason);
					} else {
						//element.append(btWatch);
					}
					btWatch.text(text).prepend('<i/>');
					element.prepend(btWatch);
					*
				}
			});
		}
	}
}])
.directive('weekdays', ['$http', function($http) {
	return {
		restrict: 'C',
		link: function($scope, element, attrs)
		{
			var weekDays = ['จันทร์','อังคาร','พุธ','พฤหัสบดี','ศุกร์','เสาร์','อาทิตย์'];
			var monthText = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
			var adjYear = 0;
			var today = new Date();
			//
			function onairProgram(weekday) {
				//console.log(weekday)
				$http.get($scope.basepath + '/program/schedule/' + weekday)
				.success(function(data)
				{
					$scope.programs = data;
// 					console.log($scope.programs)
				})
			}
			weekDays.forEach(function(day, index)
			{
				var $dayText = $('<h2>').text(day);
				var $day = $('<div/>').addClass('day-week').append($dayText);
				if(today.getDay()==(index+1)%7)
				{
					var date = today.getDate()+' '+monthText[today.getMonth()]+' '+(today.getFullYear()+adjYear);
					var $date = $('<div/>').text(date).addClass('date-text');
					//
					$day.append($date).addClass('today active');
					onairProgram((index+1)%7);
				} 
				//else {
					$day.on('click', function() {
						//var thisdate = today.add
						$('.day-week').removeClass('active')
						//
						$day.addClass('active')
						onairProgram((index+1)%7);
					});
				//}
				element.append($day);
			});
			//console.log(today.getDay());
		}
	}
}])
.directive('programEpisode', ['$http', function($http) {
	return {
		//
		restrict: 'A',
		link: function($scope, element, attrs)
		{
			var referrer = $scope.referrer;
			//console.log(referrer)
			attrs.$observe('programEpisode', function(season)
			{
				//if(referrer !=undefined) {
				//console.log('Season: '+season);
				if(season !='')
				{
					referrer = $scope.referrer + '/' + season;
				}
				console.log(referrer)
				//
				//console.log($scope.basepath + 'program/season/' + referrer)
				$http.get($scope.basepath + 'program/season/' + referrer)
					.success(function(data)
					{
						console.log(data)
						var loop = true;
						data.forEach(function(item)
						{
							if(loop)
							{
								var $season = $('<div/>');
								var seasonText = item.season >0 ?'ซีซั่น ' + item.season :'ปี ' + (parseInt(item.year) +543);
								var $seasonText = $('<h3/>').text(seasonText);
								//

								if(season =='')
								{
									console.log(item.season)
									//season = item.season;
									$scope.season = item.season;
									loop = false;
									//
									return false;
								}
								//
								if(item.season == season)
								{
									$season.addClass('active');
								}
								//
								if(season !=item.season)
								{
									//console.log('scope:'+$scope.season+' item:'+item.season);
									$seasonText.on('click', function()
									{
										if(season !=item.season)
										{
											element.empty();
										}
										$scope.$apply(function()
										{
											$scope.season = item.season;
											$scope.episode = '';
											//console.log('season: '+$scope.season)

										})
									});
								}
								//
								$season.append($seasonText);
								//

								if(item.episodes !=undefined)
								{
									item.episodes.forEach(function(epitem)
									{
										var episodeText = item.season >0 ?'ตอนที่ ' + epitem.episode :'' + epitem.title;
										var $episode = $('<h4/>').text(episodeText);
										//
										if($scope.episode =='')
										{
											$scope.episode = epitem.episode;
										}
										//
										if(epitem.episode==$scope.episode)
										{
											$episode.addClass('active');
										}
										//if($scope.episode !=epitem.episode && season ==item.season)
										//{
										$episode.on('click', function()
										{
											//console.log($(this))
											$(this).parent().children().removeClass('active');
											$(this).addClass('active')
											$scope.$apply(function()
											{
												$scope.episode = epitem.episode;
											})
										});
										//}
										$season.append($episode);
									});
								}
								element.append($season);
							}
						});
				});
				//}

			});
		}
	}
}])
.directive('programVideos', ['$http', function($http) {
	return {
		//
		restrict: 'A',
		link: function($scope, element, attrs)
		{
			var referrer = $scope.referrer;
			console.log(referrer)
			//
			attrs.$observe('programVideos', function(episode)
			{
				var season = $scope.season;
				console.log(season);
				element.empty();
				if(episode !='')
				{
					console.log('episode:' + episode)
					referrer = $scope.referrer + '/' + $scope.season + '/' + episode;

					console.log(referrer)
					$http.get($scope.basepath + 'program/videos/' + referrer)
					.success(function(data)
					{
						console.log(data)
						//if(episode !='')
						//{
						console.log(element)
							//element.empty();
						//}
						data.forEach(function(video, item)
						{
							var $video = $('<div/>').addClass('col thumb');
							var $thumb = $('<a/>').attr('href', '/entertainment/#/play/video/'+video.videoid)
								.addClass('background-image').css("background-image", "url('"+video.thumb+"')");
							var $play = $('<i/>');
							var	$info = $('<div/>').addClass('text');
							var $title = $('<h3/>').text(video.title);
							var $part = $('<h3/>').text('Ep. ' + video.episode + ' Part ' + video.part + '/' + data.length);
							//
							$thumb.append($play);
							$info.append($title);
							if(season >0) {
								$info.append($part);
							}
							$video.append($thumb).append($info);
							//
							element.append($video);
						});
					});
				}
			});
		}
	}
}])
.directive('swiperContainer', ['$timeout', function($timeout) {
	return {
		//
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			var perView = attrs.swiperContainer;
			//console.log(perView)
			$timeout(function ()
			{
				var $parent = element.parent();
				var $container = $('<div/>').addClass('swiper-wrapped');
				var type = element.attr('class');
				var id = element.attr('id');
				//
				var $swiper = $('<div/>').addClass('swiper-container');
				var $slides = $('<div/>').addClass('swiper-wrapper');
				var $slide = element.children();
				if (id == 'photos') {
					var $pagination = $('<div/>').addClass('swiper-pagination');
				}
				var $next = $('<div/>').addClass('swiper-button-next');
				var $prev = $('<div/>').addClass('swiper-button-prev');

				element.remove();
				$parent.append($container);
				$container.append($swiper);

				//
				$slide.addClass('swiper-slide ' + type)
				$slides.append($slide)
				//console.log($slides)
				$swiper.append($slides).append($pagination);
				//
				$container.append($prev).append($next).attr('id', id);
				
				var perView_mobile = 1;
				if(perView == 5){
					perView_mobile = 2;
				}else if(perView == 4){
					perView_mobile = 1;					
				}else{
					perView_mobile = 1;
				}				
				
				var perView_mobile = 2;
				if(perView == 5){
					perView_mobile = 3;
				}else {
					perView_mobile = 2;
				}
				if(perView == 4){
					perView_mobile = 2;
				}else {
					perView_mobile = 2;
				}
				if(perView == 1){
					perView_mobile = 1;
				}

				//
				var mySwiper = new Swiper($swiper, {
					slidesPerView: perView_mobile,

					breakpoints: {
						// when window width is <= 320px
						1024: {
							slidesPerView: perView,
						},
						// when window width is <= 480px
						600: {
							slidesPerView: perView,
						}
					  },

					 navigation: {
						nextEl: '#'+id+' .swiper-button-next',
						prevEl: '#'+id+' .swiper-button-prev',
					},
					pagination:{
						el: '#'+id+' .swiper-pagination',
					}
					
				});
				//swiper.navigation.nextEl = '.swiper-button-next';

			}, 250);
		}
	}
}])

/*
.directive("menu", function ($window) {
	return function(scope, element, attrs) {
		angular.element($window).bind("menu", function() {
			 if (this.pageYOffset >= 100) {
				 element.addClass('scrolled');
				 console.log('Scrolled below header.');
			 } else {
				 element.removeClass('scrolled');
				 console.log('Header is in view.');
			 }
		});
	};
});
*/
/*
.directive('setClassWhenScrolled', [function() {
	
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			$(window).scroll(function(){
				if ($(this).scrollTop() > 50) {
				   $('#menu').addClass('scrolled');
				} else {
				   $('#menu').removeClass('scrolled');
				}
			});
		}
	}
}])
*/

/*
.directive('autoScroll', function ($document, $timeout, $location) {
	return {
		restrict: 'A',
		link: function (scope, element, attrs) {
			scope.okSaveScroll = true;

			scope.scrollPos = {};

			$document.bind('scroll', function () {
				if (scope.okSaveScroll) {
					scope.scrollPos[$location.path()] = $(window).scrollTop();
				}
			});

			scope.scrollClear = function (path) {
				scope.scrollPos[path] = 0;
			};

			scope.$on('$locationChangeSuccess', function (route) {
				$timeout(function () {
					$(window).scrollTop(scope.scrollPos[$location.path()] ? scope.scrollPos[$location.path()] : 0);
					scope.okSaveScroll = true;
				}, 0);
			});

			scope.$on('$locationChangeStart', function (event) {
				scope.okSaveScroll = false;
			});
		}
	};
})
*/