https://www.hkma.gov.hk/statics/assets/js/ui.js

1/* UI Javascript */
2
3
4	/**
5	* Global Const Data
6	*/
7		// Keyboard
8			var KEY_TAB = 9;
9			var KEY_ENTER = 13;
10			var KEY_SHIFT = 16;
11			var KEY_SPACEBAR = 32;
12			var KEY_ARROW_LEFT = 37;
13			var KEY_ARROW_UP = 38;
14			var KEY_ARROW_RIGHT = 39;
15			var KEY_ARROW_DOWN = 40;
16			
17			var KEY_ESCAPE = 27;
18			
19		// Layout Responsive
20			var RESPONSIVE_WIDTH_DESKTOP = 1280;
21			var RESPONSIVE_WIDTH_TABLET = 1007;
22			var RESPONSIVE_WIDTH_MOBILE = 750;
23			var DESKTOP = "desktop";
24			var TABLET = "tablet";
25			var MOBILE = "mobile";
26
27		// Calendar - Names of the Days
28			var NAMES_OF_THE_DAYS = '';
29			var NAMES_OF_MONTH = '';
30
31			if ( $('html').attr('lang') == 'en' ){
32				NAMES_OF_MONTH = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
33				NAMES_OF_THE_DAYS = [ "S", "M", "T", "W", "T", "F", "S" ];
34			} else {
35				NAMES_OF_MONTH = [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一", "十二" ];
36				NAMES_OF_THE_DAYS = [ "日", "一", "二", "三", "四", "五", "六" ];
37			}
38				
39	/**
40	* Runtime Variable
41	*/
42		var RUNTIME_DOCUMENT_WIDTH = 0;
43		var RUNTIME_WINDOW_WIDTH = 0;
44		var RUNTIME_WINDOW_HEIGHT = 0;
45		var RUNTIME_SCROLL_TOP = 0;
46		var RUNTIME_VIEW = DESKTOP;
47
48		var HEADER_TOP_FIXED = 70;
49
50		
51	/**
52	* Prototype
53	*/
54		Date.prototype.isValid = function()
55		{
56			if ( isNaN(this.getTime()) )
57			{
58				return false;
59			}
60			return true;
61		};
62		
63		
64
65	/**
66	*	Functions 
67	*/
68		var Fn = {
69			counter : 0,
70			debug : function ( msg, append )
71			{
72				var isAppend = ( append != undefined && append === true ) ? true : false;
73				
74				if ( !isAppend ) $("body").find("#debug").remove();
75				
76				if ( $("#debug").length == 0 )
77				{
78					$("body").append('<div id="debug" style="position:fixed; background-color:#ffffff; top:0px; left:0px; z-Index:1000000;"></div>');
79				}
80				$("#debug").append ( '<div>'+this.counter + " | " + msg+'</div>' );
81				this.counter++;
82			},
83			
84			getBackgroundPositionX : function( object )
85			{
86				var pos = String ( $(object).css("background-position") ).split(" ");
87				return pos[0];
88			},
89			getBackgroundPositionY : function( object )
90			{
91				var pos = String ( $(object).css("background-position") ).split(" ");
92				return pos[1];
93			},
94			IsTouchDevice : function()
95			{
96				try { 
97					document.createEvent("TouchEvent"); return true; 
98				} catch (e) {
99					return false;
100				}				
101			},
102			
103			isMobileDeviceView : function ()
104			{
105				if ( this.isNonResponsive() ) return false;
106				if ( RUNTIME_DOCUMENT_WIDTH <= RESPONSIVE_WIDTH_TABLET && RUNTIME_DOCUMENT_WIDTH != 0 ) return true;
107				return false;
108			},
109			
110			isDesktopView : function()
111			{
112				if ( this.isNonResponsive() ) return true;
113				if ( ( RUNTIME_DOCUMENT_WIDTH > RESPONSIVE_WIDTH_TABLET ) ) return true;
114				return false;
115			},
116			
117			isTabletView : function()
118			{
119				if ( this.isNonResponsive() ) return false;
120				if ( RUNTIME_DOCUMENT_WIDTH > RESPONSIVE_WIDTH_MOBILE && RUNTIME_DOCUMENT_WIDTH <= RESPONSIVE_WIDTH_TABLET ) return true;
121				return false;
122			},
123			
124			isMobileView : function()
125			{
126				if ( this.isNonResponsive() ) return false;
127				if ( RUNTIME_DOCUMENT_WIDTH <= RESPONSIVE_WIDTH_MOBILE && RUNTIME_DOCUMENT_WIDTH != 0 ) return true;
128				return false;
129			},
130			
131			isMobileDevice : function()
132			{
133				if ( this.isNonResponsive() ) return false;
134				var ua = navigator.userAgent.toLowerCase();
135				return ua.match(/(iphone|ipad|ipod|android|blackberry)/);
136			},
137			
138			isTablet : function()
139			{
140				if ( this.isNonResponsive() ) return false;
141				var ua = navigator.userAgent.toLowerCase();
142				return ua.match(/(ipad)/);
143			},
144			
145			isNonResponsive : function()
146			{
147				if ( $("body.non-responsive").length > 0 ) return true;
148				return false;
149			},
150			
151			isTabletOrMobile : function()
152			{
153				if ( RUNTIME_VIEW == TABLET || RUNTIME_VIEW == MOBILE ) return true;
154				return false;
155			},
156			
157			preloadRenderer : function( callback )
158			{
159				$(".preload-render").each(function()
160				{
161					var img = new Image();
162					img.src = this.src;
163					img.onload = function()
164					{
165						if ( callback != undefined && typeof callback == "function") callback();
166					}
167				});
168			},
169			
170			isResponsiveView : function()
171			{
172				if ( $("body").hasClass("tablet") || $("body").hasClass("mobile") ) return true;
173				return false;
174			}
175			
176		}
177				
178
179
180	/**
181	* Layout Responsive
182	*/
183		var Responsive = {
184			render : function()
185			{
186				this.renderImage();
187			},
188			previouView : "",
189			view : "",
190			renderImage : function()
191			{
192				var _this = this;
193				
194				/* Check Window Size */
195					if ( !Fn.isNonResponsive() )
196					{
197						if ( RUNTIME_DOCUMENT_WIDTH > RESPONSIVE_WIDTH_MOBILE && RUNTIME_DOCUMENT_WIDTH <= RESPONSIVE_WIDTH_TABLET ) { this.view = TABLET; }
198						else if ( RUNTIME_DOCUMENT_WIDTH <= RESPONSIVE_WIDTH_MOBILE ){ this.view = MOBILE; }
199						else { this.view = DESKTOP; }
200					} else {
201						this.view = DESKTOP;
202					}
203					
204				if ( this.previewView != this.view )
205				{
206					this.previewView = this.view;
207					$(".responsive-image").each(function()
208					{
209						var src = $(this).attr("src");
210						if ( $(this).attr("data-src-"+_this.view) != undefined ) src = $(this).attr("data-src-"+_this.view);
211
212						if ( $(this).attr("src") != src ) 
213						{
214							$(this).attr("src", src);
215						}
216					});

217				}
218			}
219		}		
220
221		
222	/**
223	* Input Unit 
224	*/
225		var Input = {
226			
227			init : function()
228			{
229				this.button.init();
230				this.dropdown.init();
231				this.multipleSelect.init();
232				this.checkbox.init();
233				this.radio.init();
234				this.input.init();
235			},
236			
237			/* Hide All Options */
238				hideAllOptions : function()
239				{
240					$(".select-wrapper").removeClass("active");
241					$(".multiple-select-wrapper").removeClass("active");
242					$(".share-wrapper").removeClass("active");
243					if ( DatePicker && DatePicker.hide ) DatePicker.hide();
244				},
245			
246			/* Button */
247				button : {
248					init : function()
249					{
250						this.update();
251						
252					},
253					update : function()
254					{
255						$(".button").each(function()
256						{
257							if ( $(this).is(":disabled") ) $(this).addClass("disabled");
258						});
259						$(".icon-button").each(function()
260						{
261							if ( $(this).find("input").is(":disabled") ) $(this).addClass("disabled");
262						});
263					}
264				},
265
266				
267			/* Dropdown Box */
268				dropdown : {
269					init : function()
270					{
271						$("select").each(function()
272						{
273							$this = $(this);
274							
275							$this.addClass("select-hidden");
276							var $select = $this.parents(".select-wrapper");
277							
278							var $select_panel = $select.find(".select-panel");
279							
280							$('<div class="select-title"><div class="btn-back" tabindex="0" aria-label="Back"></div><div class="title" tabindex="0"></div></div>').insertAfter ( $select.find("label") );
281							
282							if ( $(this).is(":disabled") ) $select.addClass("disabled");
283							
284							var $title = $select.children(".select-title");
285							
286							/* Block Hidden Label */
287								$select.find(".hidden-label").on("click", function(e)
288								{
289									e.preventDefault();
290									e.stopPropagation();
291								});

292							
293							/* [Button] Back */
294								$title.find(".btn-back").on("click keydown", function(e)
295								{
296									switch ( e.type )
297									{
298										case "keydown" :
299											switch ( e.keyCode )
300											{
301												case KEY_TAB :
302													if ( e.shiftKey )
303													{
304														$select_panel.find(".btn-confirm").focus();
305														e.preventDefault();
306														e.stopPropagation();
307													}
308													break;
309											}
310											return;
311											break;
312									}
313									var cache_index = $title.attr("cache-index");
314									if ( cache_index != undefined && cache_index != "" )
315									{
316										$option.attr("selected",false);
317										$option.eq( cache_index ).attr("selected", true);
318										$option.parents("select").change();
319										
320										$title.attr("data-index", cache_index);
321										$title.find(".title").text ( $option.eq( cache_index ).text() );
322										Input.dropdown.hide();
323									}
324									e.stopPropagation();
325								});

326								
327							/* [Button] Confirm */
328								$select_panel.find(".btn-confirm").on("click keydown", function(e)
329								{
330									if ( e.type == "keydown" )
331									{
332										switch ( e.keyCode )
333										{
334											default : return; break;
335											case KEY_TAB : 
336												// if ( !e.shiftKey )
337												// {
338												// 	$title.find(".btn-back").focus();
339												// 	e.preventDefault();
340												// 	e.stopPropagation();
341												// }
342												return;
343												break;
344											case KEY_ENTER : break;
345										}
346									}
347									Input.dropdown.hide();
348								});
349						
350								
351							// var $list = $('<ul />', { "class":"select-options" }).insertAfter($title);
352							var $list = $('<ul />', { "class":"select-options" }).insertAfter($select_panel);
353							var $option = $this.children("option");
354
355							var data_index = 0;
356							var select_value = $option.eq(data_index).text();
357							for (var i = 0; i < $option.length; i++) {
358								var $i = $option.eq(i);
359								$('<li />', { text:$i.text(), rel:$i.val(), "data-index":i, "tabindex":0 }).appendTo($list);
360								if ( $i.is(":selected") ) 
361								{
362									select_value = $i.text();
363									data_index = i;
364								}
365							}
366							$list.find('li').last().keydown(function(e) {
367								var keyCode = e.keyCode || e.which; 
368								if ( keyCode == 9 && !e.shiftKey ) {
369									$(this).closest('.select-wrapper.active').find('.select-panel .btn-confirm').focus();
370									e.preventDefault();
371								}
372							});
373							$title.attr("data-index", data_index);
374							$title.find(".title").text( select_value );
375							$title.on("click keydown", function(e) 
376							{
377								// Hide Other Popup
378									if ( DatePicker && DatePicker.hide ) DatePicker.hide();
379
380
381								
382								if ( $select.hasClass("disabled") ) return;
383
384								temp_selected_value = $title.find(".title").text();
385								$('.select-options').find('li.active').removeClass('active');
386								$('.select-options li').each(function() {
387									if ($(this).text() == temp_selected_value) {
388										$(this).not('.active').addClass('active');
389									}
390								});

391								
392								if ( e.type == "keydown" )
393								{
394									switch ( e.keyCode )
395									{
396										case KEY_SPACEBAR : 
397											e.preventDefault();
398											break;
399										case KEY_ENTER :
400											if ( !$select.hasClass("active") )
401											{
402												break;
403											}
404											Input.dropdown.hide();
405											return;
406											break;
407										case KEY_ESCAPE :
408											$panel.find(".btn-cancel").click();
409											return;
410											break;
411										case KEY_ARROW_UP :
412											var prevIndex = parseInt( $(this).attr("data-index") ) - 1;
413											if ( prevIndex >= 0 )
414											{
415												$option.attr("selected",false);
416												$option.eq( prevIndex ).prop("selected", true);
417												$option.parents("select").change();
418												
419												$title.attr("data-index", prevIndex);
420												$title.find(".title").text ( $option.eq( prevIndex ).text() );
421											}
422											Input.dropdown.render();
423											e.preventDefault();
424											return;
425											break;
426										case KEY_ARROW_DOWN :
427											var nextIndex = parseInt( $(this).attr("data-index") ) + 1;
428											if ( nextIndex < $option.length )
429											{

430												$option.attr("selected",false);
431												$option.eq( nextIndex ).prop("selected", true);
432												$option.parents("select").change();
433												
434												$title.attr("data-index", nextIndex);
435												$title.find(".title").text ( $option.eq( nextIndex ).text() );
436											}
437											Input.dropdown.render();
438											e.preventDefault();
439											return;
440											break;
441										case KEY_SHIFT :
442										case KEY_TAB :
443											return;
444											break;
445										default :
446											return;
447											break;
448									}
449								}
450								
451								if ( $select.hasClass("active") )
452								{
453									if ( !Fn.isTabletOrMobile() )
454									{
455										Input.dropdown.hide();
456									}
457								} else {
458									if ( $title.parents(".multiple-select-wrapper").length == 0 )
459									{
460										Input.hideAllOptions();
461									}
462									$title.attr("cache-index", $(this).attr("data-index"));
463									Input.dropdown.hide();
464									$select.addClass("active");
465									Input.dropdown.render();
466									$select.find('.hidden-label').attr('tabindex', '0');
467									$select.find('.hidden-label').focus();
468								}
469								
470								e.stopPropagation();
471							});
472						  
473							$list.on("click", function(e)
474							{
475								e.preventDefault();
476								e.stopPropagation();
477							});
478						  
479							$list.children("li").each(function()
480							{
481								$(this).on("click keydown", function(e) 
482								{
483									switch ( e.type )
484									{
485										case "keydown" :
486											switch ( e.keyCode )
487											{
488												default : return; break;
489												case KEY_ENTER :
490												case KEY_SPACEBAR :
491													break;
492												case KEY_ARROW_DOWN :
493													var index = $(this).index();
494													if ( index + 1 < $list.children("li").length )
495													{
496														$list.children("li").eq(index + 1).focus();
497													}
498													e.preventDefault();
499													e.stopPropagation();
500													return;
501													break;
502												case KEY_ARROW_UP :
503													var index = $(this).index();
504													if ( index - 1 >= 0 )
505													{
506														$list.children("li").eq(index - 1).focus();
507													}
508													e.preventDefault();
509													e.stopPropagation();
510													return;
511													break;
512											}
513											break;
514									}
515									var thisIndex = $(this).attr("data-index");
516									$title.find(".title").text( $(this).text() );
517									$title.removeClass("active");
518	

519									$option.prop("selected",false);
520									$option.eq( thisIndex ).prop("selected", true);
521									$option.parents("select").change();
522									
523									$title.attr("data-index", thisIndex);
524									$title.find(".title").text ( $option.eq( thisIndex ).text() );
525
526									if ( !Fn.isTabletOrMobile() )
527									{
528										Input.dropdown.hide();
529									}
530									
531									$(this).parent().children("li").removeClass("active");
532									
533									$(this).addClass("active");
534									Input.dropdown.render();
535									
536									$title.focus();
537									e.preventDefault();
538									e.stopPropagation();
539								});
540							});
541							
542							$(document).on("click keyup", function(e) 
543							{
544								if ( e.type == "keyup" )
545								{
546									switch ( e.keyCode )
547									{
548										case KEY_TAB :
549											var $active = $(".select-wrapper.active");
550											if ( $active.length > 0 )
551											{
552												var $active_title = $active.find(".select-title");
553												var $active_btn_cancel = $active.find(".btn-cancel");
554												var $active_btn_confirm = $active.find(".btn-confirm");
555												if ( !$active_title.is(":focus") && !$active_btn_cancel.is(":focus") && !$active_btn_confirm.is(":focus") )
556												{
557													$active_title.focus();
558												}
559											}
560											break;
561										default : return; break;
562									}
563								}
564								
565								if ( !Fn.isTabletOrMobile() )
566								{
567									Input.dropdown.hide();
568								}
569							});
570							 
571						});
572					},
573					hide : function()
574					{
575						$(".select-wrapper").removeClass("active");
576						Window.enableWindowScroll();
577					},
578					render : function()
579					{
580						$(".select-wrapper.active").each(function()
581						{
582							var $title = $(this).find(".select-title");
583							var $list = $(this).find(".select-options");
584							var $panel = $(this).find(".select-panel");
585
586							$(this).find('.btn-confirm').keydown(function(e) {
587								var keyCode = e.keyCode || e.which; 
588								if ( keyCode == 9 ) {
589									$(this).closest(".select-wrapper.active").find('.btn-back').focus();
590									e.preventDefault();
591								}
592							});
593
594							/* List */
595							if ( !Fn.isTabletOrMobile() )
596							{
597								Window.enableWindowScroll();
598								$list.css ( { top:"100%", height:"auto" } );
599								
600								var oY = $list.offset().top;
601								var sT = $(document).scrollTop();
602								var wH = $(window).height();
603								
604								if ( oY + $list.height() > sT + wH )
605								{
606									if ( ( oY - sT - $title.height() ) > wH / 2 )
607									{
608										var topSpace = oY - sT - $title.height();
609										if ( topSpace < $list.height() )
610										{
611											$list.css ( { height:topSpace, top:-topSpace } );
612										} else {
613											$list.css ( { top:-$list.height() });
614										}
615									}
616									else 
617									{
618										var bottomSpace = ( wH - (oY - sT) );
619										if ( bottomSpace < $list.height() )
620										{
621											$list.css ( { height:bottomSpace } );
622										}
623										$list.css ( { top:"100%" } );
624									}
625								} else {
626									$list.css ( { top:"100%" } );
627								}
628							} else {
629								Window.disableWindowScroll();
630								$list.css ( { top:0, height:$(window).height() -  $panel.outerHeight() - $title.outerHeight() } );
631							}
632							
633							if ( !Fn.isMobileDevice() )
634							{
635								/* List Item */
636									var data_index = $title.attr("data-index");
637									var top = 0;
638									var height = 0;
639									$list.children("li").each(function()
640									{
641										if ( $(this).attr("data-index") == data_index )
642										{
643											$(this).addClass("active");
644											top = $(this).offset().top - $list.offset().top + $list.scrollTop();
645											height = $(this).height();
646										} else {
647											$(this).removeClass("active");
648										}
649									});
650									
651									var oH = $list.height();
652									if ( top < $list.scrollTop() )
653									{
654										$list.scrollTop ( top );
655									} 
656									else if ( top - oH > $list.scrollTop() )
657									{
658										$list.scrollTop ( top + height - oH );
659									}
660							}
661						});

662						
663						OptionGroup.render();
664					},
665					resize : function()
666					{
667						if ( Fn.isResponsiveView() ) return;
668						this.hide();
669					}
670				},
671			
672			/* Multiple Select */
673				multipleSelect : {
674					init : function()
675					{
676						$(".multiple-select-wrapper").each(function()
677						{
678							var $wrapper = $(this);
679							var $info = $(this).children(".multiple-select-info");
680							var $options = $(this).children(".multiple-select-options");
681							var $panel = $(this).find(".multiple-panel");
682							var $select_panel = $(this).find(".multiple-select-panel");
683							
684							// [Button] Back (Mobile)
685								var $btn_back = $(this).children(".multiple-title").find(".btn-close");
686								$btn_back.on("click keydown", function(e)
687								{ 
688									switch ( e.type )
689									{
690										case "keydown" :
691											switch ( e.keyCode )
692											{
693												default : return; break;
694												case KEY_ENTER :
695													break;
696											}
697											break;
698									}
699									Input.multipleSelect.hide();
700									e.stopPropagation();
701								});

702							
703							// [Button] Close
704								var $btn_close = $panel.find(".btn-close");
705								$btn_close.on("click keydown", function(e)
706								{ 
707									switch ( e.type )
708									{
709										case "keydown" :
710											switch ( e.keyCode )
711											{
712												default : return; break;
713												case KEY_ENTER :
714													break;
715											}
716											break;
717									}
718									Input.multipleSelect.hide();
719									e.stopPropagation();
720								});
721							
722							// Show / Hidden Options
723								$info.on("click keydown", function(e)
724								{
725									switch ( e.type )
726									{
727										case "keydown" :
728											switch ( e.keyCode )
729											{
730												case KEY_SHIFT :
731												case KEY_TAB :
732													return;
733													break;
734												default : return false; break;
735												case KEY_SPACEBAR :
736													e.preventDefault();
737													break;
738												case KEY_ENTER :
739													break;
740											}
741											break;
742									}
743									
744									if ( $wrapper.hasClass("active") )
745									{
746										Input.multipleSelect.hide();
747									} else {
748										Input.hideAllOptions();
749										$wrapper.addClass("active");
750										Input.multipleSelect.render();
751										$wrapper.find('.multiple-title').attr('tabindex', '0');
752										$wrapper.find('.multiple-title').focus();
753									}
754									
755									e.stopPropagation();
756								});

757							
758
759							// Options
760								$options.find(".multiple-group").each(function()
761								{
762									var $group = $(this);
763									var $title = $(this).children(".group-title");
764									var $option = $(this).children(".group-options");
765									
766									$title.find("input").on("change", function(e)
767									{
768										$option.find("input").prop("checked", $(this).is(":checked"));
769										Input.multipleSelect.render();
770									});
771									
772									$option.find("input").on("change", function(e)
773									{
774										if ( $(this).parents(".sub-group-title").length > 0 )
775										{
776											if ( $(this).is(":checked") )
777											{
778												$(this).parents(".sub-group").find(".option").each(function()
779												{
780													$(this).find("input").prop("checked", true);
781												});
782											} else {
783												$(this).parents(".sub-group").find(".option").each(function()
784												{
785													$(this).find("input").prop("checked", false);
786												});
787											}
788										}
789										
790										// Sub Group
791											$wrapper.find(".sub-group").each(function()
792											{
793												if ( $(this).find(".option").length > 0 )
794												{
795													if ( $(this).find(".option input:checked").length == $(this).find(".option input").length )
796													{
797														$(this).find(".sub-group-title").find("input").prop("checked", true );
798													} else {
799														$(this).find(".sub-group-title").find("input").prop("checked", false );
800													}
801												}
802											});
803										
804										
805										if ( $(this).is(":checked") && $option.find("input:checked").length == $option.find("input").length )
806										{
807											$title.find("input").prop("checked", true);
808										} else {
809											$title.find("input").prop("checked", false);
810										}
811										Input.multipleSelect.render();
812									});
813
814									// For Expand Style

815										$title.find(".icon-arrow").on("click keydown", function(e)
816										{
817											switch ( e.type )
818											{
819												case "keydown" :
820													switch ( e.keyCode )
821													{
822														default : return; break;
823														case KEY_ENTER : break;
824													}
825													break;
826											}
827											
828											if ( $group.hasClass("active") )
829											{
830												$group.removeClass("active");
831											} else {
832												$group.addClass("active");
833											}
834										});
835
836								});
837								
838							// Select All
839								$options.find(".multiple-select-all").find("input").on("change", function(e)
840								{
841									if ( !$(this).is(":checked") )
842									{
843										if ( $options.find(".multiple-group input:checked").length == 0 )
844										{
845											$(this).prop("checked", true );
846										}
847									} else {
848										$options.find(".multiple-group input").prop("checked", false);
849										Input.multipleSelect.render();
850									}
851								});

852
853							// Prevent Mouse Event
854								$options.on("click", function(e)
855								{
856									if ( DatePicker && DatePicker.hide ) DatePicker.hide();
857									Input.dropdown.hide();
858									
859									e.stopPropagation();
860								});
861								$(document).on("click", function(e) 
862								{
863									if ( !Fn.isTabletOrMobile() )
864									{
865										Input.multipleSelect.hide();
866									}
867								});
868								
869							// [Button] Close
870								$select_panel.find(".btn-close").on("click keydown", function(e)
871								{
872									if ( e.type == "keydown" )
873									{
874										switch ( e.keyCode )
875										{
876											default : return; break;
877											case KEY_ENTER :
878												break;
879										}
880									}
881									Input.multipleSelect.hide();
882								});
883								
884							// [Button] Done
885								$select_panel.find(".btn-done").on("click keydown", function(e)
886								{
887									if ( e.type == "keydown" )
888									{
889										switch ( e.keyCode )
890										{
891											default : return; break;
892											case KEY_ENTER :
893												break;
894										}
895									}
896									Input.multipleSelect.hide();
897								});

898
899						});
900						
901						this.render();
902					},
903					hide : function()
904					{
905						$(".multiple-select-wrapper").removeClass("active");
906						Window.enableWindowScroll();
907					},
908					render : function()
909					{
910						if ( $(".multiple-select-wrapper.active").length > 0 )
911						{
912							if ( !Fn.isTabletOrMobile() )
913							{
914								Window.enableWindowScroll();
915							} else {
916								Window.disableWindowScroll();
917							}
918						}
919						
920						$(".multiple-select-wrapper").each(function()
921						{
922							var $info = $(this).children(".multiple-select-info");
923							var $options = $(this).children(".multiple-select-options");
924							var $title = $info.find(".multiple-select-title");
925							var $group = $options.find(".multiple-group");
926							
927							var total = $group.find("input:checked").length;
928							
929							// Select All
930								$options.find(".multiple-select-all").find("input").prop( "checked", ( total == 0 ) ? true : false );
931							
932							if ( $title.length > 0 )
933							{
934								if ( total == 0 )
935								{
936									$title.text ( $title.attr("data-default") );
937								} else if ( total == 1 ) {
938									$title.text ( total + " " +  $title.attr("data-text-only-one") );
939								} else {
940									$title.text ( total + " " +  $title.attr("data-text-more-than-one") );
941								}
942							}
943							
944						});
945					},
946					resize : function()
947					{
948						if ( Fn.isResponsiveView() ) return;
949						this.hide();
950					},
951					cacheData : function ( obj )
952					{
953						$(obj).find(".multiple-select-wrapper").each(function()
954						{
955							// Checkbox
956								$(this).find("input[type='checkbox']").each(function()
957								{
958									$(this).attr ( "data-cache", $(this).is(":checked") );
959								});

960						});
961					},
962					restoreData : function ( obj )
963					{
964						$(obj).find(".multiple-select-wrapper").each(function()
965						{
966							// Checkbox
967								$(this).find("input[type='checkbox']").each(function()
968								{
969									$(this).prop ( "checked", ( $(this).attr("data-cache") != "true" ) ? false : true );
970								});
971						});	
972						Input.checkbox.render();
973						Input.multipleSelect.render();
974					}
975			},
976				
977			/* Checkbox */
978				checkbox : {
979					init : function()
980					{
981						var _this = this;
982						$(".checkbox").on("click", function(e)
983						{
984							_this.update ( this );
985							e.preventDefault();
986						});
987						$(".checkbox").on("keydown", function(e)
988						{
989							if ( e.keyCode == KEY_SPACEBAR || e.keyCode == KEY_ENTER ) 
990							{
991								_this.update ( this );
992								e.preventDefault();
993							}
994						});
995						
996						this.render();
997					},
998					update : function(e)
999					{
1000						if ( !$(e).hasClass("disabled") )
1001						{
1002							$(e).find("input").prop ( "checked", ( $(e).find("input").is(":checked") ) ? false : true );
1003							$(e).find("input").change();
1004							this.render();
1005						}
1006					},
1007					render : function()
1008					{
1009						$(".checkbox").each(function()
1010						{
1011							var $input = $(this).find("input");
1012							$(this) [ ( $input.is(":checked") ) ? "addClass" : "removeClass" ] ( "checked" );
1013							$(this) [ ( $input.is(":disabled") ) ? "addClass" : "removeClass" ] ( "disabled" );
1014							
1015						});
1016					}
1017				},
1018
1019			/* Radio */
1020				radio : {
1021					init : function()
1022					{
1023						var _this = this;
1024						$(".radio").on("click", function(e)
1025						{
1026							_this.update ( this );
1027							e.preventDefault();
1028						});
1029						$(".radio").on("keydown", function(e)
1030						{
1031							if ( e.keyCode == KEY_SPACEBAR || e.keyCode == KEY_ENTER ) 
1032							{
1033								_this.update ( this );
1034								e.preventDefault();
1035							}
1036						});
1037						
1038						this.render();
1039					},
1040					update : function(e)
1041					{
1042						if ( !$(e).hasClass("disabled") )
1043						{
1044							$(e).find("input").prop ( "checked", true );
1045							$(e).find("input").change();
1046							this.render();
1047						}
1048					},
1049					render : function( )
1050					{
1051						$(".radio").each(function()
1052						{
1053							var $input = $(this).find("input");
1054							$(this) [ ( $input.is(":checked") ) ? "addClass" : "removeClass" ] ( "checked" );
1055							$(this) [ ( $input.is(":disabled") ) ? "addClass" : "removeClass" ] ( "disabled" );
1056						});
1057					}
1058				},
1059			
1060			/* Input Field */
1061				input : {
1062					init : function()
1063					{
1064						$(".input-field").each(function()
1065						{
1066							if ( $(this).attr("data-default-value") != undefined )
1067							{
1068								$(this)
1069									.on("focus", function()
1070									{
1071										$(this).removeClass("default");
1072										if ( $(this).val() == $(this).attr("data-default-value") ) $(this).val("");
1073									})
1074									.on("blur", function()
1075									{
1076										if ( $(this).val() == "" || ( $(this).attr("data-default-value") != undefined && $(this).val() == $(this).attr("data-default-value") ) ) 
1077										{
1078											$(this).val( $(this).attr("data-default-value") );
1079											$(this).addClass("default");
1080										} else {
1081											$(this).removeClass("default");
1082										}
1083									})
1084									.on("change", function()
1085									{
1086										if ( $(this).val() == "" ) 
1087										{
1088											$(this).val( $(this).attr("data-default-value") );
1089											$(this).addClass("default");
1090										} else {
1091											$(this).removeClass("default");
1092										}
1093									});
1094									
1095								if ( $(this).val() == "" || $(this).val() == $(this).attr("data-default-value") )
1096								{
1097									$(this).val( $(this).attr("data-default-value") );
1098									$(this).addClass("default");
1099								}
1100							}
1101						});
1102		
1103					}
1104				}
1105		}
1106
1107		
1108	/* Option Group */
1109		var OptionGroup = {
1110			cacheData : function ( group )
1111			{
1112				Input.multipleSelect.cacheData ( group );
1113			},
1114			restoreData : function ( group )
1115			{
1116				Input.multipleSelect.restoreData ( group );
1117			},
1118			init : function()
1119			{
1120				$(".option-group").each(function()
1121				{
1122					var $group = $(this);
1123					var $info = $group.find(".group-info");
1124					
1125					$info.on("click keydown", function(e)
1126					{
1127						switch ( e.type )
1128						{
1129							case "keydown" :
1130								switch ( e.keyCode )
1131								{
1132									default : break;;
1133									case KEY_SPACEBAR :
1134									case KEY_ENTER :
1135										$group.addClass("active");
1136										break;
1137								}
1138								break;
1139							case "click" :
1140								// Cache Data
1141									OptionGroup.cacheData ( $group );
1142								
1143								$group.addClass("active");
1144								break;
1145						}
1146					});

1147					
1148					
1149					/* Control */
1150						$control = $group.find(".control");
1151						
1152						// [Button] Cancel
1153							$control.find(".btn-cancel").on("click keydown", function(e)
1154							{
1155								if ( e.type == "keydown" )
1156								{
1157									switch ( e.keyCode )
1158									{
1159										case KEY_ENTER :
1160											break;
1161										default : return; break;
1162									}
1163								}
1164								
1165								$(".select-wrapper").each(function()
1166								{
1167									var $title = $(this).find(".select-title");
1168									var $option = $(this).find("select").children("option");
1169									$option.prop("selected", false);
1170									var cache_index = $title.attr("cache-index");
1171									if ( cache_index != undefined && cache_index != "" )
1172									{
1173										$option.attr ( "selected",false );
1174										$option.eq ( cache_index ).prop("selected", true);
1175										
1176										$title.attr ( "data-index", cache_index );
1177										$title.find(".title").text ( $option.eq( cache_index ).text() );
1178									}
1179								});
1180								
1181								OptionGroup.restoreData ( $group );
1182								
1183								OptionGroup.hide();
1184							});
1185
1186						// [Button] Filter
1187							$control.find(".btn-filter").on("click keydown", function(e)
1188							{
1189								if ( e.type == "keydown" )
1190								{
1191									switch ( e.keyCode )
1192									{
1193										case KEY_ENTER :
1194											break;
1195										default : return; break;
1196									}
1197								}
1198								
1199								$(".select-wrapper").each(function()
1200								{
1201									var $title = $(this).find(".select-title");
1202									$title.attr ( "cache-index", $title.attr("data-index") );
1203								});

1204																
1205								OptionGroup.hide();
1206							});
1207				});
1208				
1209				this.render();
1210			},
1211			hide : function()
1212			{
1213				$(".option-group").removeClass("active");
1214				this.render();
1215			},
1216			render : function()
1217			{
1218				$(".option-group").each(function()
1219				{
1220					var group_value = "";
1221					var $group_info = $(this).find(".group-info");
1222					var $group_title = $group_info.children(".group-title");
1223					
1224					$(this).find("select").each(function()
1225					{
1226						var val = $(this).val();
1227						$(this).find("option:selected").each(function()
1228						{
1229							if ( $(this).prop("value") == val )
1230							{
1231								if ( group_value != "" ) group_value += ", ";
1232								group_value += $(this).text();
1233							}
1234						});
1235					});
1236					
1237					$(this).find(".multiple-select-wrapper").each(function()
1238					{
1239						var $select_info = $(this).find(".multiple-select-info");
1240						var $select_title = $select_info.find(".multiple-select-title");
1241						if ( $select_title.text() != "" )
1242						{
1243							if ( group_value != "" ) group_value += ", ";
1244							group_value += $select_title.text();
1245						}
1246					});
1247					
1248					$group_title.html ( group_value );
1249				});
1250			}
1251		}
1252		
1253	
1254	/* Menu */
1255		var Menu = {
1256			init : function()
1257			{
1258				this.leftMenu.init();
1259				this.mobileExpandMenu.init();
1260			},
1261			
1262			leftMenu : {
1263				init : function()
1264				{
1265					var $menu = $(".left-menu");
1266					if ( $menu.length > 0 )
1267					{
1268						var $menu_selected = $menu.find(".menu-selected");
1269						var $ul = $menu.find("ul");
1270						
1271						var text = "";
1272						$ul.children("li").each(function()
1273						{
1274							if ( $(this).hasClass("selected") )
1275							{
1276								text = $(this).find("a").text();
1277							}
1278						});
1279						
1280						$menu_selected.find(".title").text ( text );
1281						
1282						$menu_selected.on("click keydown", function(e)
1283						{
1284							switch ( e.type )
1285							{
1286								case "keydown" :
1287									switch ( e.keyCode )
1288									{
1289										default : return;
1290										case KEY_ARROW_DOWN :
1291											$ul.children("li").each(function()
1292											{
1293												if ( !$(this).hasClass("selected") && Fn.isResponsiveView() )
1294												{
1295													$(this).find("a").focus();
1296													return false;
1297												}
1298											});
1299											e.preventDefault();
1300											return;
1301											break;
1302										case KEY_ENTER :
1303										case KEY_SPACEBAR :
1304									}
1305								case "click" :
1306									if ( $menu.hasClass("open") )
1307									{
1308										$menu.removeClass("open");
1309									} else {
1310										$menu.addClass("open");
1311									}
1312									break;
1313							}
1314						});
1315						
1316						$ul.on("keydown", function(e)
1317						{
1318
1319							switch ( e.keyCode )
1320							{
1321								case KEY_ARROW_DOWN :
1322									var isFocus = false;
1323									$(this).children("li").each(function()
1324									{
1325										if ( !$(this).hasClass("selected") && Fn.isResponsiveView() )
1326										{
1327											if ( isFocus )
1328											{
1329												$(this).find("a").focus();
1330												return false
1331											}
1332
1333											if ( $(this).find("a").is(":focus") )
1334											{
1335												isFocus = true;
1336											}
1337										}
1338									});
1339									e.preventDefault();
1340									break;
1341								case KEY_ARROW_UP :
1342									var object = null;
1343									
1344									var $first = $(this).children("li:not(.selected):first");
1345									if ( $first.find("a").is(":focus") )
1346									{
1347										$menu_selected.focus();
1348										return;
1349									}
1350									
1351									$(this).children("li").each(function()
1352									{
1353										if ( !$(this).hasClass("selected") && Fn.isResponsiveView() )
1354										{
1355											if ( $(this).find("a").is(":focus") )
1356											{
1357												$(object).find("a").focus();
1358												return false;
1359											}
1360											object = this;
1361										}
1362									});
1363									e.preventDefault();
1364									break;
1365							}
1366							
1367						});
1368					}
1369				}
1370			},
1371			
1372			mobileExpandMenu : {
1373				init : function()
1374				{
1375					$(".mobile-menu-expand").each(function()
1376					{
1377						var $me = $(this);
1378						var $obj = $(this).find(".mobile-menu-expand-object");
1379						var $target = $(this).find(".mobile-menu-expand-target");
1380						
1381						$obj.on("click keydown", function(e)
1382						{
1383							if ( e.type == "keydown" )
1384							{
1385								switch ( e.keyCode )
1386								{
1387									default : return; break;
1388									case KEY_ENTER :
1389									case KEY_SPACEBAR :
1390										break;
1391								}
1392							}
1393							
1394							if ( $me.hasClass("active") ) $me.removeClass("active");
1395							else $me.addClass("active");
1396						});

1397					});
1398				}
1399			}
1400		}
1401	
1402	
1403	/* Header */
1404		var Header = {
1405			isTabKey : false,
1406			isFocus : false,
1407			interval : null,
1408			cacheScrollTop : 0,
1409			init : function()
1410			{
1411				var $header = $(".header-container").find(".header-wrapper");
1412				
1413				/* Top Navigation */
1414					var $nav = $header.find(".top-navigation");
1415					$nav.find(".btn-search").on("click keydown", function(e)
1416					{
1417						switch ( e.type )
1418						{
1419							case "keydown" :
1420								switch ( e.keyCode )
1421								{
1422									default : return; break;
1423									case KEY_ENTER : break;
1424								}
1425								break;
1426						}
1427						
1428						Header.cacheScrollTop = RUNTIME_SCROLL_TOP;
1429						$("body").addClass("show-header-search");
1430						$("body > div, body > footer, .header-wrapper").prop("ariaHidden", true);
1431						Header.render();
1432					});
1433					
1434					$nav.find(".btn-menu").on("click keydown", function(e)
1435					{
1436						switch ( e.type )
1437						{
1438							case "keydown" :
1439								switch ( e.keyCode )
1440								{
1441									default : return; break;
1442									case KEY_ENTER : break;
1443								}
1444								break;
1445						}
1446						Header.cacheScrollTop = RUNTIME_SCROLL_TOP;
1447						$("body").addClass("show-mobile-menu");
1448						$("body > div, body > footer").prop("ariaHidden", true);
1449						Header.render();
1450					});
1451					
1452					$nav.find(".btn-close").on("click keydown", function(e)
1453					{
1454						switch ( e.type )
1455						{
1456							case "keydown" :
1457								switch ( e.keyCode )
1458								{
1459									default : return; break;
1460									case KEY_ENTER : break;
1461								}
1462								break;
1463						}
1464						$("body").removeClass("show-mobile-menu");
1465						$("body > div, body > footer").prop("ariaHidden", false);
1466						$(window).scrollTop ( Header.cacheScrollTop );
1467						Header.hide();
1468					});
1469					
1470					
1471					// Font Size
1472						var $font_size = $nav.find(".font-size");
1473						$font_size.on("click", function(e)
1474						{
1475							e.preventDefault();
1476							e.stopPropagation();
1477						});
1478						$font_size.find(".option").find("a").on("click keydown", function(e)
1479						{
1480							switch ( e.type )
1481							{
1482								case "keydown" :
1483									switch ( e.keyCode )
1484									{
1485										default : return; break;
1486										case KEY_ENTER : break;
1487									}
1488									break;
1489							}
1490							$font_size.removeClass("active");
1491						});
1492						$font_size.find(".btn-font-size").on("click keydown", function(e)
1493						{
1494							switch ( e.type )
1495							{
1496								case "keydown" :
1497									switch ( e.keyCode )
1498									{
1499										default : return; break;
1500										case KEY_ENTER : break;
1501									}
1502									break;
1503							}
1504							$font_size.addClass("active");
1505							
1506							if ( $font_size.find(".option").find("a.selected").length > 0 )
1507							{
1508								$font_size.find(".option").find("a.selected").focus();
1509							} else {
1510								$font_size.find(".option").find("a").get(0).focus();
1511							}
1512							
1513							e.preventDefault();
1514							e.stopPropagation();
1515							
1516							$(document).on("click", function(e)
1517							{
1518								$font_size.removeClass("active");
1519								$(document).off("keydown.header-font-size");
1520							});
1521							
1522							$(document).on("keydown.header-font-size", function(e)
1523							{
1524								switch ( e.type )
1525								{
1526									case "keydown" :
1527										switch ( e.keyCode )
1528										{
1529											case KEY_ESCAPE :
1530												$font_size.removeClass("active");
1531												e.preventDefault();
1532												$(document).off("keydown.header-font-size");
1533												break;
1534										}
1535										break;
1536								}
1537							});
1538						});
1539					
1540				
1541				/* Top Search */	
1542					// [Button] Search	
1543						$nav.find(".btn-search").on("click keydown", function(e)
1544						{
1545							switch ( e.type )
1546							{
1547								case "keydown" :
1548									switch ( e.keyCode )
1549									{
1550										default : return; break;
1551										case KEY_ENTER : break;
1552									}
1553									break;
1554							}
1555							$search = $("header").find(".top-search-container");
1556							$search.addClass("active");
1557							$search.find(".input-field").focus();
1558							
1559							$(document).on("keydown.topsearch", function(e)
1560							{
1561								switch ( e.type )
1562								{
1563									case "keydown" :
1564										switch ( e.keyCode )
1565										{
1566											case KEY_ESCAPE :
1567												Header.hideTopSearch();
1568												break;
1569										}
1570										break;
1571								}
1572							});

1573						});
1574						
1575					var $search = $(".header-container").find(".top-search-container");
1576					var $field = $search.find(".input-field");
1577
1578					// [Button] Close Search (Desktop)
1579						var $top_panel = $search.find(".top-panel");
1580						$top_panel.find(".btn-close-search").on("click keydown", function(e)
1581						{
1582							switch ( e.type )
1583							{
1584								case "keydown" :
1585									switch ( e.keyCode )
1586									{
1587										default : return; break;
1588										case KEY_ENTER : break;
1589										case KEY_TAB :
1590											if ( e.shiftKey )
1591											{
1592												$search.find(".multiple-select-panel").find("input[type='submit']").focus();
1593												e.preventDefault();
1594											}
1595											return;
1596											break;
1597									}
1598							}
1599							Header.hideTopSearch();
1600						});
1601						
1602					// [Button] Search
1603						$search.find(".multiple-select-panel").find("input[type='submit']").on("keydown", function(e)
1604						{
1605							switch ( e.type )
1606							{
1607								case "keydown" :
1608									switch ( e.keyCode )
1609									{
1610										case KEY_TAB :
1611											if ( !e.shiftKey )
1612											{
1613												if ( $search.find(".field").find(".btn-back:visible").length ) {
1614													$search.find(".field").find(".btn-back").focus();
1615												} else {
1616													$top_panel.find(".btn-close-search").focus();
1617												}
1618												e.preventDefault();
1619											}
1620											break;
1621									}
1622									break;
1623							}
1624						});
1625						
1626					// Overlay

1627						var $overlay = $search.find(".overlay");
1628						$overlay.on("click", function(e)
1629						{
1630							Header.hideTopSearch();
1631						});
1632					
1633					// [Button] Back (Mobile)
1634					$search.find(".field").find(".btn-back").on("click keydown", function(e)
1635					{
1636						switch ( e.type )
1637						{
1638							case "keydown" :
1639								switch ( e.keyCode )
1640								{
1641									case KEY_TAB :
1642										if ( e.shiftKey )
1643										{
1644											$search.find(".multiple-select-panel").find("input[type='submit']").focus();
1645											e.preventDefault();
1646										}
1647										return; break;
1648									default : return; break;
1649									case KEY_ENTER : break;
1650								}
1651						}
1652						Header.hideTopSearch();
1653					});
1654					
1655					// [Button] Show All Options
1656						$search.find(".btn-show-all-options").on("click keydown", function(e)
1657						{
1658							switch ( e.type )
1659							{
1660								case "keydown" :
1661									switch ( e.keyCode )
1662									{
1663										default : return; break;
1664										case KEY_ENTER : break;
1665									}
1666							}
1667							$search.find(".multiple-group").addClass("open");
1668							$(this).hide();
1669						});
1670					
1671					
1672					// Modification Time
1673						ModificationTime.init ( $(".header-container") );
1674				
1675				
1676				/* Menu */
1677					var $menu = $header.find(".top-menu");
1678					
1679					$(document).on("keydown.spacebar", function(e)
1680					{
1681						switch ( e.type )
1682						{
1683							case "keydown" :
1684								switch ( e.keyCode )
1685								{
1686									case KEY_SPACEBAR :
1687										if ( !$(e.target).is("input") && !$(e.target).is("textarea"))
1688										{
1689											e.preventDefault();
1690										}
1691										break;
1692								}
1693								break;
1694						}
1695					});
1696					
1697					// Setup Index 
1698						var setIndex = 0;
1699						var maxIndex = 0;
1700						$menu.find(".item").each(function()
1701						{
1702							if ( !$(this).hasClass("tablet-mobile") )
1703							{
1704								$(this).prop("index", setIndex);
1705								setIndex++;
1706							}
1707						});
1708						maxIndex = setIndex;
1709					
1710					//focusin
1711					$menu.find(".item").on("mouseover keyup", function(e)
1712					{
1713						Header.isFocus = true;
1714						Header.isTabKey = false;
1715						switch ( e.type )
1716						{
1717							case "keyup" :
1718								switch ( e.keyCode )
1719								{
1720									default : return; break;
1721									case KEY_TAB :
1722										if ( $menu.hasClass("hover") )
1723										{
1724											Header.isTabKey = true;
1725											e.preventDefault();
1726										} else {
1727										}
1728										break;
1729									case KEY_ESCAPE :
1730										Header.hide();
1731										return;
1732										break;
1733									case KEY_ARROW_LEFT :
1734										var index = $(this).prop("index");
1735										if ( index - 1 >= 0 )
1736										{
1737											$menu.find(".item").each(function()
1738											{
1739												if ( !$(this).hasClass("tablet-mobile") )
1740												{
1741													if ( $(this).prop("index") == index - 1 )
1742													{
1743														$(this).find(".title a").focus();
1744														Header.hide();
1745														$menu.addClass("hover");
1746														$(this).addClass("hover");
1747													}
1748												}
1749											});
1750										}
1751										return;
1752										break;
1753									case KEY_ARROW_RIGHT :
1754										var index = $(this).prop("index");
1755										if ( index + 1 <= maxIndex )
1756										{
1757											$menu.find(".item").each(function()
1758											{
1759												if ( !$(this).hasClass("tablet-mobile") )
1760												{
1761													if ( $(this).prop("index") == index + 1 )
1762													{
1763														$(this).find(".title a").focus();
1764														Header.hide();
1765														$menu.addClass("hover");
1766														$(this).addClass("hover");
1767													}
1768												}
1769											});
1770										}
1771										return;
1772										break;
1773									case KEY_SPACEBAR :
1774									case KEY_ENTER :
1775										if ( $menu.hasClass("hover") )
1776										{
1777											//Header.hide();
1778											//return;
1779										}
1780										break;
1781								}
1782								break;
1783						}
1784
1785						Header.hide();
1786						$menu.addClass("hover");
1787						$(this).addClass("hover");
1788					});
1789					

1790					$menu.find(".item").on("mouseout focusout", function(e)
1791					{
1792						if ( e.type == "focusout")
1793						{
1794							Header.isFocus = false;
1795							return;
1796						}
1797						
1798						if ( !Header.isTabKey )
1799						{
1800							Header.hide();
1801							Header.isFocus = false;
1802						}
1803					});
1804
1805					
1806				/* For Mobile */
1807					$menu.find(".item").find(".title").on("click", function(e)
1808					{
1809						var $item = $(this).parents(".item");
1810						if ( $item.hasClass("open") ) $item.removeClass("open");
1811						else 
1812						{
1813							$item.addClass("open");
1814						}
1815					});
1816					
1817					$('body').on( "keyup", function(e) {
1818						switch ( e.type )
1819						{
1820							case "keyup" :
1821								switch ( e.keyCode )
1822								{
1823									case KEY_ESCAPE :
1824										Header.hide();
1825										return;
1826										break;
1827									
1828								}
1829						}
1830					})
1831					
1832				this.render();
1833			},
1834			hideTopSearch : function()
1835			{
1836				$("body").removeClass("show-header-search");
1837				$("body > div, body > footer, .header-wrapper").prop("ariaHidden", false);
1838				$("header").find(".top-search-container").removeClass("active");
1839				$(document).off("keydown.topsearch");
1840			},
1841			hide : function()
1842			{
1843				var $header = $(".header-container").find(".header-wrapper");
1844				var $menu = $header.find(".top-menu");
1845				
1846				$menu.removeClass("hover");
1847				$menu.find(".item").removeClass("hover");
1848			},
1849			render : function()
1850			{
1851				if ( RUNTIME_SCROLL_TOP > HEADER_TOP_FIXED )
1852				{
1853					$("body").addClass("fixed-header");
1854				} else {
1855					$("body").removeClass("fixed-header");
1856				}
1857				
1858				var $header = $(".header-container").find(".header-wrapper");
1859				var $menu = $header.find(".top-menu");
1860				$menu.find(".item").find(".sub-title").each(function()
1861				{
1862					if ( Fn.isDesktopView() )
1863					{
1864						$(this).prop("tabindex", -1 );
1865					} else {
1866						$(this).prop("tabindex", 0 );
1867						$(this).find('a').prop("tabindex", -1 );
1868					}
1869				});
1870			}
1871		}
1872		
1873	/* Font Size */
1874		var FontSize = {
1875			init : function()
1876			{
1877				// [Button] Small
1878					$(".small-font-size").on("click keydown", function(e)
1879					{
1880						switch ( e.type )
1881						{
1882							case "keydown" : 
1883								switch ( e.keyCode )
1884								{
1885									default : return; break;
1886									case KEY_ENTER : break;
1887								}
1888								break;
1889						}
1890						
1891						FontSize.setSize( "small" );
1892					});
1893					
1894				// [Button] Normal
1895					$(".normal-font-size").on("click keydown", function(e)
1896					{
1897						switch ( e.type )
1898						{
1899							case "keydown" : 
1900								switch ( e.keyCode )
1901								{
1902									default : return; break;
1903									case KEY_ENTER : break;
1904								}
1905								break;
1906						}
1907						
1908						FontSize.setSize( "normal" );
1909					});
1910
1911				// [Button] Large
1912					$(".large-font-size").on("click keydown", function(e)
1913					{
1914						switch ( e.type )
1915						{
1916							case "keydown" : 
1917								switch ( e.keyCode )
1918								{
1919									default : return; break;
1920									case KEY_ENTER : break;
1921								}
1922								break;
1923						}
1924						
1925						FontSize.setSize( "large" );
1926					});
1927					

1928				this.getSize();
1929			},
1930			getSize : function()
1931			{
1932				$("body").removeClass("small-font-size");
1933				$("body").removeClass("large-font-size");
1934				
1935				var fontsize = $.cookie("fontsize");
1936				
1937				switch ( fontsize )
1938				{
1939					case "small" :
1940						$("body").addClass("small-font-size");
1941						$("header").find(".small-font-size").addClass("selected");
1942						break;
1943					case "large" :
1944						$("body").addClass("large-font-size");
1945						$("header").find(".large-font-size").addClass("selected");
1946						break;
1947					default :
1948						$("header").find(".normal-font-size").addClass("selected");
1949						break;
1950				}
1951			},
1952			setSize : function( size )
1953			{
1954				$.cookie ( "fontsize", size, { expires:7, path:"/" } );
1955				
1956				$("header").find(".small-font-size").removeClass("selected");
1957				$("header").find(".normal-font-size").removeClass("selected");
1958				$("header").find(".large-font-size").removeClass("selected");
1959				
1960				FontSize.getSize();
1961			}
1962		}
1963		
1964	
1965	/* Share */
1966		var Share = {
1967			init : function()
1968			{
1969				$(".share-wrapper").each(function()
1970				{
1971					var $wrapper = $(this);
1972					var $button = $(this).find(".button");
1973					$button.on("click keydown", function(e)
1974					{
1975						if ( e.type == "keydown" )
1976						{
1977							switch ( e.keyCode )
1978							{
1979								default : return; break;
1980								case KEY_ENTER :
1981									break;
1982							}
1983						}
1984						
1985						if ( !$wrapper.hasClass("active") )
1986						{
1987							Input.hideAllOptions();
1988							$wrapper.addClass("active");
1989						} else {
1990							Input.hideAllOptions();
1991						}
1992						
1993						e.stopPropagation();
1994					});
1995
1996					// Prevent Mouse Event
1997						var $options = $(this).find(".share-options");
1998						$options.on("click", function(e)
1999						{
2000							e.stopPropagation();
2001						});
2002						$(document).on("click", function(e) 
2003						{
2004							Input.hideAllOptions();
2005						});
2006					
2007				});
2008			}
2009		}
2010		
2011	/* Modification Time */
2012		var ModificationTime = {
2013			init : function ( $target )
2014			{
2015				var $select = $target.find(".modification-time-select");
2016				var $obj = $target.find(".modification-time");
2017				$select.on("change", function(e)
2018				{
2019					$obj.removeClass("any");
2020					$obj.removeClass("within-the-past");
2021					$obj.removeClass("date-range");
2022					
2023					$obj.addClass ( $(this).val() );
2024				});
2025				$obj.addClass( $select.val() );				
2026			}
2027		}
2028		
2029	
2030	/* Download File */
2031		var Download = {
2032			init : function ( )
2033			{
2034				var $pm = $(".print-media-box");
2035				
2036				$pm.find(".item").each(function()
2037				{
2038					var $item = $(this);
2039					$(this).find(".mobile-title").on("click", function(e)
2040					{
2041						if ( Fn.isMobileDeviceView() )
2042						{
2043							$item.addClass("show");
2044						}
2045					});
2046					
2047					// [Button] Back
2048						$(this).find(".btn-back").on("click", function(e)
2049						{
2050							$item.removeClass("show");
2051						});
2052				});
2053			}
2054		}
2055
2056		
2057
2058		
2059	/* Window Class */
2060		var Window = {
2061			/* Disable Window Scroll */
2062				disableWindowScroll : function()
2063				{
2064					$("body").addClass("overflow-hidden");
2065				},
2066				
2067			/* Enable Window Scroll */
2068				enableWindowScroll : function()
2069				{
2070					$("body").removeClass("overflow-hidden");
2071				}
2072				
2073		}		
2074		
2075	/**
2076	* Runtime Class
2077	*/
2078		var Runtime = {
2079
2080			// Render Resize
2081				render : function()
2082				{
2083					RUNTIME_DOCUMENT_WIDTH = Math.min ( RESPONSIVE_WIDTH_DESKTOP, $("body").width() );
2084					RUNTIME_WINDOW_WIDTH = $(window).width();
2085					RUNTIME_WINDOW_HEIGHT = $(window).height();
2086					RUNTIME_SCROLL_TOP = $(window).scrollTop();
2087
2088					if ( ( Fn.isTabletView() || Fn.isTablet() ) && !Fn.isNonResponsive() )
2089					{
2090						$("body").addClass( TABLET ).removeClass( MOBILE );
2091						RUNTIME_VIEW = TABLET;
2092					} 
2093					else if ( Fn.isMobileView() && !Fn.isNonResponsive() )
2094					{
2095						$("body").addClass( MOBILE ).removeClass( TABLET );
2096						RUNTIME_VIEW = MOBILE;
2097					} else {
2098						$("body").removeClass( TABLET ).removeClass( MOBILE );
2099						RUNTIME_VIEW = DESKTOP;
2100					}
2101
2102					/* Global renderer */
2103						Input.dropdown.resize();
2104						Input.multipleSelect.resize();
2105					
2106					/* Layout renderer */
2107						try {
2108							Header.render();
2109						} catch(e){ }
2110						
2111						try {
2112							Template.render();
2113						} catch(e){ }
2114				},
2115				
2116			// Window Scroll
2117				windowScroll : function()
2118				{
2119					RUNTIME_SCROLL_TOP = $(window).scrollTop();
2120					
2121					/* Global renderer */
2122						Input.dropdown.render();
2123						Input.multipleSelect.render();
2124						
2125					/* Layout renderer */
2126						try {
2127							Header.render();
2128						} catch(e){}
2129				}			
2130		}
2131
2132
2133		var Effect = {
2134			imageSlider : 
2135			{
2136				init : function()
2137				{
2138					$(".graphic-effect-holder").each(function()
2139					{
2140						var isInit = true;
2141						
2142						var $holder = $(this).find(".graphic-holder");
2143						var $text_holder = $(this).find(".graphic-text-holder");
2144						var $url_holder = $(this).find(".graphic-url-holder");
2145						var $url_holder_2 = $(this).find(".graphic-url-holder-2");
2146						var $heading_holder = $(this).find(".graphic-heading");
2147						var $control = $(this).find(".graphic-control");
2148						var $data = $control.find(".graphic-data");
2149						var $btn_pause = $control.find(".btn-pause");
2150						
2151						var index = 0;
2152						var txt = "";
2153						var isAnimate = false;
2154						var isPause = false;
2155						var isOver = false;
2156						var interval = null;
2157						var total = $data.children("li").length;
2158						var g_count = 0;
2159						
2160						var img = "";
2161						if ( $data.children("li.selected").length > 0 )
2162						{
2163							index = $data.children("li.selected").index();
2164						}
2165						
2166						function next ()
2167						{
2168							if ( total > 1 && g_count <= total * 5 )
2169							{
2170								g_count ++;
2171								clearInterval ( interval );
2172								$data.children("li").removeClass("selected");
2173								
2174								var $item = $data.children("li").eq(index);
2175								$data.children("li").attr("tabindex", "0");
2176								$item.attr("tabindex", "0");
2177								var data_img = $item.attr("data-image");
2178								var data_color = $item.attr("data-color");
2179								var data_link = $item.attr("data-link");
2180								var data_link_target = $item.attr("data-link-target");
2181								var data_text = $item.attr("data-text");
2182								
2183								var speed = ( isInit ) ? 0 : 1000;
2184								
2185								function ready ( isImage, _this )
2186								{

2187									$layer = $('<div />', { class:"layer" }).appendTo ( $holder );
2188									if ( isImage )
2189									{
2190										$layer.css ( { "background-image":'url("' + _this.src +  '")', opacity:0 } );
2191									} else {
2192										$layer.css ( { "background-color":data_color, opacity:0 } );
2193									}
2194									
2195									if ( data_link != undefined )
2196									{
2197										var target = ( data_link_target != undefined ) ? data_link_target : "_self";
2198										$layer.wrap ( '<a href="'+data_link+'" tabindex="-1" target="'+target+'" title="'+$item.attr("data-text")+'" ></a>' );
2199									}
2200									
2201									isAnimate = true;
2202									$layer.animate({ opacity:1 }, speed, function()
2203									{
2204										if ( !isAnimate )
2205										{
2206											$holder.children(".layer").not(":last-child").remove();
2207										}
2208										isAnimate = false;
2209										
2210										if ( !isOver ) auto();
2211									});
2212
2213									$heading_holder.stop().animate({ opacity:0 }, speed, function()
2214									{
2215										$heading_holder.html ( $item.attr("data-text") || "" );
2216										$(this).animate({ opacity:1 }, speed);
2217									});
2218									
2219									$text_holder.stop().animate({ opacity:0 }, speed, function()
2220									{
2221										$text_holder.html ( $item.attr("data-text") || "" );
2222										$(this).animate({ opacity:1 }, speed);
2223
2224										if ( data_link != undefined )
2225										{
2226											var target = ( data_link_target != undefined ) ? data_link_target : "_self";
2227											$text_holder.wrap ( '<a href="'+data_link+'" tabindex="-1" target="'+target+'" title="'+$item.attr("data-text")+'"></a>' );
2228										}
2229									});
2230
2231									// do not remove this line
2232									if ( $item.attr("data-url") && $item.attr("data-url") != '#' ) {
2233										$url_holder.html ( '<a href="' + $item.attr("data-url") + '" target="_blank"></a>' );
2234										$url_holder_2.html ( '<a href="' + $item.attr("data-url") + '" target="_blank"></a>' );
2235									} else {
2236										$url_holder.html ( '' );
2237										$url_holder_2.html ( '' );
2238									}
2239								}
2240								
2241								if ( data_img != undefined && data_img != "" )
2242								{
2243									var img = new Image();
2244									
2245									$(img).one("load", function()
2246									{
2247										ready ( true, this );
2248									});
2249									
2250									img.src = data_img;
2251								} 
2252								else if ( data_color != undefined && data_color != "") 
2253								{
2254									ready ( false );
2255								}
2256								$item.addClass("selected");
2257							} else {
2258								g_count = 0;
2259								isPause = true;
2260								$btn_pause.addClass("paused");
2261							}
2262						}
2263						
2264						function auto ()
2265						{
2266							clearInterval ( interval );
2267							interval = setInterval ( function()
2268							{
2269								if ( !isPause )
2270								{
2271									index = ( index + 1 < total ) ? index + 1 : 0;
2272									next();
2273								}
2274							}, 5000 );
2275						}						
2276						
2277						// [Button] Point
2278							$data.children("li").each(function()
2279							{
2280								if ( $(this).index() == index )
2281								{
2282									if ( $(this).attr("data-image") != undefined )
2283									{
2284										img = $(this).attr("data-image");
2285										$(this).addClass("selected");
2286										
2287										if ( $(this).attr("data-text") != undefined )  txt = $(this).attr("data-text");
2288									} else {
2289										img = $(this).attr("data-color");
2290										$(this).addClass("selected");
2291										
2292										if ( $(this).attr("data-text") != undefined )  txt = $(this).attr("data-text");
2293									}
2294								}
2295								
2296								$(this).on("click keydown", function(e)
2297								{
2298									switch ( e.type )
2299									{
2300										case "keydown" :
2301											switch ( e.keyCode )
2302											{
2303												default : return; break;
2304												case KEY_ENTER :
2305													break;
2306											}
2307											break;
2308									}
2309									index = $(this).index();
2310									g_count = index;
2311									next();
2312								});

2313							});
2314						
2315						// [Button] Pause/Play
2316							$btn_pause.on("click keydown", function(e)
2317							{
2318								switch ( e.type )
2319								{
2320									case "keydown" :
2321										switch ( e.keyCode )
2322										{
2323											default : return; break;
2324											case KEY_ENTER :
2325												break;
2326										}
2327										break;
2328								}
2329								if ( $(this).hasClass("paused") )
2330								{
2331									$(this).removeClass("paused");
2332									isPause = false;
2333								} else {
2334									$(this).addClass("paused");
2335									isPause = true;
2336								}
2337							});
2338						
2339						// [Button] Next
2340							$(this).find(".btn-next").on("click keydown", function(e)
2341							{
2342								switch ( e.type )
2343								{
2344									case "keydown" :
2345										switch ( e.keyCode )
2346										{
2347											default : return; break;
2348											case KEY_ENTER :
2349												break;
2350										}
2351										break;
2352								}
2353								index = ( index - 1 >= 0 ) ? index - 1 : total - 1;
2354								next();
2355							});
2356
2357						// [Button] Prev
2358							$(this).find(".btn-prev").on("click keydown", function(e)
2359							{
2360								switch ( e.type )
2361								{
2362									case "keydown" :
2363										switch ( e.keyCode )
2364										{
2365											default : return; break;
2366											case KEY_ENTER :
2367												break;
2368										}
2369										break;
2370								}
2371								index = ( index + 1 < total ) ? index + 1 : 0;
2372								next();
2373							});
2374						
2375						if ( total <= 1 ) $control.hide();
2376
2377						
2378						/* Load First */
2379							next();
2380							isInit = false;
2381						
2382						auto();
2383						
2384						$(this).on("mouseover", function(e)
2385						{
2386							isOver = true;
2387							clearInterval ( interval );
2388						});
2389						$(this).on("mouseout", function(e)
2390						{
2391							isOver = false;
2392							auto();
2393						});
2394					});
2395				}
2396			}
2397		}
2398
2399		var Video = {
2400			index : 0,
2401			init : function()
2402			{
2403				/* Local */
2404					$(".local-video-container").each(function()
2405					{
2406						$this = $(this);
2407						$video = $(this).find("video");
2408						
2409						$video.on("click", function(e)
2410						{
2411							this.play();
2412						});
2413						
2414						$video.on("play", function(e)
2415						{
2416							$this.addClass("full-screen");
2417							$(this).attr("controls", true );
2418							
2419							$(document).on("keydown.video-localvideo", function(e)
2420							{
2421								switch ( e.type )
2422								{
2423									case "keydown" :
2424										switch ( e.keyCode )
2425										{
2426											case KEY_ESCAPE :
2427												$this.find(".btn-close").click();
2428												e.preventDefault();
2429												break;
2430										}
2431										break;
2432								}
2433							});
2434						});
2435						
2436						$video.on("pause", function(e)
2437						{
2438							$this.removeClass("full-screen");
2439							$(this).attr("controls", false );
2440						});
2441						
2442						
2443						// [Button] Close
2444							$(this).find(".btn-close").on("click keydown", function(e)
2445							{
2446								switch ( e.type )
2447								{
2448									case "keydown" :
2449										switch ( e.keyCode )
2450										{
2451											default: return; break;
2452											case KEY_ENTER : break;
2453										}
2454										break;
2455								}
2456								$this.removeClass("full-screen");
2457								
2458								$video.trigger("pause");
2459								$(document).off("keydown.video-localvideo");
2460							});						
2461					});
2462			
2463				/* Youtube */
2464					$(".yt-video").each(function()
2465					{
2466						var $this = $(this);
2467						if ( $(this).attr("id") == undefined )
2468						{
2469							$(this).prop("id", "video-" + Video.index);
2470							Video.index++;
2471						}
2472						
2473						var id = $(this).attr("id");
2474						var $yt = $(this).parent();
2475
2476						function onPlayerStateChange(e)
2477						{
2478							if ( e.data == 1 )
2479							{
2480								if ( !Fn.isMobileDevice() )
2481								{
2482									$("#"+id).parent().addClass("full-screen");
2483									$("#"+id).parent().closest(".collapsibles-accordion-item").removeClass("active").addClass("active2");
2484									
2485									if ( $("#"+id).parent().find('.video-accessibilty').length == 0) {
2486										if ( $('html').attr('lang') == 'zh-hk' ) {
2487											$("#"+id).parent().find('.title').append('<a href="/chi/other-information/accessibility/" class="video-accessibilty" target="_blank" title="无障碍网页守则"><img src="/media/gb_chi/img/web_accessibility_conformance.gif"></a>');
2488										} else if ( $('html').attr('lang') == 'zh-cn' ) {
2489											$("#"+id).parent().find('.title').append('<a href="/gb_chi/other-information/accessibility/" class="video-accessibilty" target="_blank" title="無障礙網頁守則"><img src="/media/chi/img/web_accessibility_conformance.gif"></a>');
2490										} else {
2491											$("#"+id).parent().find('.title').append('<a href="/eng/other-information/accessibility/" class="video-accessibilty" target="_blank" title="Web Acce

2491ssibility Conformance"><img src="/media/eng/img/web_accessibility_conformance.gif"></a>');
2492										}
2493										$("#"+id).parent().find('.title').keydown(function(e) {
2494											var keyCode = e.keyCode || e.which; 
2495											if ( keyCode == 9 ) {
2496												$(this).closest('.yt-video-container').find('.btn-close').focus();
2497												e.preventDefault();
2498											}
2499										});
2500									} else {
2501										$("#"+id).parent().find('.title').keydown(function(e) {
2502											var keyCode = e.keyCode || e.which; 
2503											if ( keyCode == 9 ) {
2504												$(this).closest('.yt-video-container').find('.btn-close').focus();
2505												e.preventDefault();
2506											}
2507										});
2508									}
2509									$("#"+id).parent().find(".btn-close").focus();
2510									$("#"+id).parent().find('.btn-close').keydown(function(e) {
2511										var keyCode = e.keyCode || e.which; 
2512										if ( keyCode == 9 ) {
2513											if(e.shiftKey) {
2514												$(this).parent().find('.video-accessibilty').last().focus();
2515											}
2516										}
2517									});
2518								}
2519							} else {
2520								$(window).focus();
2521							}
2522						}
2523						
2524						$(document).on("keydown", function(e)
2525						{
2526							switch ( e.type )
2527							{
2528								case "keydown" :
2529									switch ( e.keyCode )
2530									{
2531										case KEY_ESCAPE :
2532											$yt.find(".btn-close").click();
2533											e.preventDefault();
2534											break;
2535									}
2536									break;
2537							}
2538						});
2539									
2540						var player = new YT.Player ( 
2541							$(this).attr("id"), 
2542							{ 
2543								height:"100%", 
2544								width:"100%", 
2545								playerVars : {
2546									disablekb:1,
2547									origin: '//' + window.location.host
2548								},
2549								videoId:$this.attr("data-video-id"),
2550								events:{
2551									onStateChange: onPlayerStateChange
2552								}
2553							}
2554						);
2555
2556						// [Button] Close
2557							$yt.find(".btn-close").on("click keydown", function(e)
2558							{
2559								switch ( e.type )
2560								{
2561									case "keydown" :
2562										switch ( e.keyCode )
2563										{
2564											default: return; break;
2565											case KEY_ENTER : break;
2566										}
2567										break;
2568								}
2569								$(this).parent().removeClass("full-screen");
2570								
2571								player.pauseVideo();
2572								$(document).off("keydown.video-ytvideo");
2573							});
2574							
2575
2576					});
2577			}
2578
2579		}
2580		
2581		
2582		var Tab = {
2583			init : function()
2584			{
2585				$(".tab-container").each(function()
2586				{
2587					var $container = $(this);
2588					var $holder = $(this).find(".tab-holder");
2589					var $content = $(this).find(".tab-content");
2590					var $selector = $(this).find(".tab-selector");
2591					
2592					var index = 0;
2593					if ( $holder.children("li.selected").length > 0 )
2594					{
2595						index = $holder.children("li.selected").index();
2596					}
2597					
2598					function change ( tabindex )
2599					{
2600						$content.hide();
2601						
2602						$content.eq ( tabindex ).show();
2603						
2604						$selector.text ( $holder.find("li").eq ( tabindex ).eq(0).text() );
2605					}
2606					
2607					$holder.on("keydown", function(e) {
2608						if (e.keyCode === 39 || e.keyCode === 37) {
2609							if (e.keyCode === 39) {
2610								if (index < $holder.length - 1) {
2611									index++;
2612								}
2613							} else if (e.keyCode === 37) {
2614								if (index > 0) {
2615									index--;
2616								}
2617							}
2618							$holder.eq(index).find("li").focus();
2619						}
2620					});
2621
2622					$holder.each(function(i) {
2623						$(this).children("li").on("click keydown", function(e)
2624					{
2625						switch ( e.type )
2626						{
2627							case "keydown" :
2628								switch ( e.keyCode )
2629								{
2630									default : return; break;
2631									case KEY_ENTER : break;
2632								}
2633						}
2634
2635							$holder.children("li").removeClass("selected").prop("ariaSelected", false);
2636
2637							if ( Fn.isTabletOrMobile() ) {
2638								index = $(this).index();
2639							} else {
2640								index = i;
2641							}
2642							change( index );
2643							$holder.find("li").eq(index).addClass("selected").prop("ariaSelected", true);
2644							$holder.eq(index).find('li[tabindex="0"]').eq(0).addClass("selected").prop("ariaSelected", true);
2645							$(this).attr("tabindex", 0);
2646							$content.find("a").attr("tabindex", 0);
2647						$container.removeClass("active");
2648					});

2649					})
2650					
2651					$content.hide();
2652					$content.eq ( index ).show();
2653					$selector.text ( $holder.eq ( index ).find("li").eq(0).text() );
2654					
2655					$selector.on("click", function(e)
2656					{
2657						if ( $container.hasClass("active") )
2658						{
2659							$container.removeClass("active");
2660						} else {
2661							$container.addClass("active");
2662						}
2663						e.stopPropagation();
2664					});
2665
2666					$selector.keydown(function(e) {
2667						var keyCode = e.keyCode || e.which; 
2668						if ( keyCode == 32 || keyCode == 13 ) {
2669							if ( $container.hasClass("active") )
2670							{
2671								$container.removeClass("active");
2672							} else {
2673								$container.addClass("active");
2674								$holder.find('.selected').focus();
2675							}
2676							e.preventDefault();
2677						}
2678					});
2679
2680					$(document).on("click", function(e)
2681					{
2682						$container.removeClass("active");
2683					});
2684
2685
2686					$holder.find('li').keydown(function(e) {
2687						if ( Fn.isMobileView() ) {
2688							var li = $holder.find('li');
2689							li.attr('tabindex', 0);
2690							var liSelected = $holder.find('li.selected');
2691							if(e.which === 40) {
2692								if(liSelected) {
2693									liSelected.removeClass('selected');
2694									next = liSelected.next();
2695									if(next.length > 0) {
2696										liSelected = next.addClass('selected').focus();
2697									} else {
2698										liSelected = li.eq(0).addClass('selected').focus();
2699									}
2700								} else {
2701									liSelected = li.eq(0).addClass('selected').focus();
2702								}
2703							} else if(e.which === 38) {
2704								if(liSelected) {
2705									liSelected.removeClass('selected');
2706									next = liSelected.prev();
2707									if(next.length > 0) {
2708										liSelected = next.addClass('selected').focus();
2709									} else {
2710										liSelected = li.last().addClass('selected').focus();
2711									}
2712								} else {
2713									liSelected = li.last().addClass('selected').focus();
2714								}
2715							}
2716						}
2717					});
2718				});
2719			}
2720		}
2721
2722	/* Select Content */
2723		var SelectContent = {
2724			init : function()
2725			{
2726				$(".select-content-container").each(function()
2727				{
2728					var $select = $(this).find("select");
2729					var $select_content = $(this).find(".select-content");
2730					
2731					$select.on("change", function(e)
2732					{
2733						var index = $(this).find("option:selected").index();
2734						
2735						$select_content.find(".select-content-item").removeClass("selected");
2736						$select_content.find(".select-content-item").eq(index).addClass("selected");
2737					});
2738					
2739				});
2740			}
2741		}
2742		
2743		
2744	
2745	/* Template */
2746		var Template = {
2747			init : function()
2748			{
2749				this.initCollapsiblesAccordion();
2750				this.initCollapsiblesAccordionContent();
2751				this.initNoticesAndUpdates();
2752				this.initContentExpand();
2753				this.initColumnContentExpand();
2754				this.initTimeline();
2755				this.initOtherTopics();
2756				this.initPopup();
2757			},
2758			
2759			render : function()
2760			{
2761				this.renderColumnContentExpand();
2762			},
2763			
2764			// Template - Collapsibles / Accordion
2765				initCollapsiblesAccordion : function()
2766				{
2767					$(".template-collapsibles-accordion").each(function()
2768					{
2769						var $panel = $(this).find(".panel");
2770						var $btn_expand_all = $panel.find(".btn-expand-all");
2771						var $btn_collapse_all = $panel.find(".btn-collapse-all");
2772						var $ul = $(this).find(".collapsibles-accordion-list");
2773						
2774						// [Button] Expand All
2775							$btn_expand_all.on("click keydown", function(e)
2776							{
2777								switch ( e.type )
2778								{
2779									case "keydown" :
2780										switch ( e.keyCode )
2781										{
2782											default : return; break;
2783											case KEY_ENTER : break;
2784										}
2785										break;
2786								}
2787								
2788								$panel.addClass("expanded");
2789								$ul.find(".collapsibles-accordion-item").addClass("active");
2790							});
2791
2792						// [Button] Collapse All
2793							$btn_collapse_all.on("click keydown", function(e)
2794							{
2795								switch ( e.type )
2796								{
2797									case "keydown" :
2798										switch ( e.keyCode )
2799										{
2800											default : return; break;
2801											case KEY_ENTER : break;
2802										}
2803										break;
2804								}
2805								$panel.removeClass("expanded");
2806								$ul.find(".collapsibles-accordion-item").removeClass("active");
2807							});

2808						
2809						// [Button] item
2810							if ( $('.layout-guide-to-hong-kong-monetary-and-banking-terms').length ) {
2811								var pathname = window.location.pathname;
2812								var old_active_item = active_item;
2813							}
2814
2815							$ul.on("click keydown", ".collapsibles-accordion-item", function(e)
2816							{
2817								switch ( e.type )
2818								{
2819									case "keydown" :
2820										switch ( e.keyCode )
2821										{
2822
2823
2824
2825											default : return; break;
2826											case KEY_ENTER : break;
2827										}
2828								}
2829								if ( !$(this).hasClass("active") )
2830								{
2831									if ( $('.layout-guide-to-hong-kong-monetary-and-banking-terms').length ) {
2832										$('.collapsibles-accordion-item').removeClass('active');
2833										var new_active_item = $(this).data('key');
2834
2835										if ( pathname.substring(pathname.length - 1) == '/' ) {
2836											if ( active_item ) {
2837												history.replaceState(null, new_active_item, pathname + '../' + new_active_item + '/');
2838											} else {
2839												history.replaceState(null, new_active_item, pathname + new_active_item + '/');
2840											}
2841										} else {
2842											if ( active_item ) {
2843												history.replaceState(null, new_active_item, pathname + '/../' + new_active_item + '/');
2844											} else {
2845												history.replaceState(null, new_active_item, pathname + '/' + new_active_item + '/');
2846											}
2847										}
2848
2849										$('.header-wrapper .language a').each(function() {
2850											$(this).attr('href', $(this).attr('href').replace('/' + old_active_item + '/', '/') + new_active_item + '/');
2851										})
2852
2853										old_active_item = new_active_item;
2854									}
2855									$(this).addClass("active");
2856								} else {
2857									$(this).removeClass("active");
2858								}
2859								Template.CheckCollapsiblesAccordion( $ul );
2860							});
2861
2862						//content
2863
2864							$ul.on("click keydown", ".collapsibles-accordion-content", function(e)
2865							{
2866								switch ( e.type )
2867								{
2868									case "keydown" :
2869										switch ( e.keyCode )
2870										{
2871											default : return; break;
2872											case KEY_ENTER : break;
2873											case KEY_ESCAPE : 
2874												$(this).parent().parent().removeClass('active2').addClass('active');
2875												return;
2876												break;
2877										}
2878								}
2879								if (e.target.tagName.toLowerCase() == 'a') {
2880									if (!$(e.target).attr('href') || $(e.target).attr('href') == '') {
2881										$(this).parent().parent().addClass('active2');
2882										return;
2883									}
2884								}
2885								if ($(e.target).hasClass('btn-close')) {
2886									$(this).parent().parent().removeClass('active2');
2887									return;
2888								}
2889								e.stopPropagation();
2890							});
2891					});
2892				},
2893				CheckCollapsiblesAccordion : function( $ul )
2894				{
2895					var $panel = $ul.parent().find(".panel");
2896					if ( $ul.find(".collapsibles-accordion-item").length == $ul.find(".collapsibles-accordion-item.active").length )
2897					{
2898						$panel.addClass("expanded");
2899					} else {
2900						$panel.removeClass("expanded");
2901					}
2902				},
2903				
2904				initCollapsiblesAccordionContent : function()
2905				{
2906					$(".template-collapsibles-accordion-content").each(function()
2907					{
2908						var $ul = $(this);
2909						var $panel = $(this).find(".collapsibles-accordion-content-panel");
2910						var $btn_expand_all = $panel.find(".btn-expand-all");
2911						var $btn_collapse_all = $panel.find(".btn-collapse-all");
2912						var $btn_print = $panel.find(".btn-print");
2913						
2914						// [Button] Expand All
2915							$btn_expand_all.on("click keydown", function(e)
2916							{
2917								switch ( e.type )
2918								{
2919									case "keydown" :
2920										switch ( e.keyCode )
2921										{
2922											default : return; break;
2923											case KEY_ENTER : break;
2924										}
2925								}
2926								
2927								$panel.addClass("expanded");
2928								$ul.find(".collapsibles-accordion-content-item").addClass("active");
2929							});
2930
2931						// [Button] Collapse All
2932							$btn_collapse_all.on("click keydown", function(e)
2933							{
2934								$panel.removeClass("expanded");
2935								$ul.find(".collapsibles-accordion-content-item").removeClass("active");
2936							});

2937						
2938						// [Button] Title
2939							$ul.on("click keydown", ".collapsibles-accordion-content-title", function(e)
2940							{
2941								switch ( e.type )
2942								{
2943									case "keydown" :
2944										switch ( e.keyCode )
2945										{
2946											default : return; break;
2947											case KEY_ENTER : break;
2948										}
2949								}
2950								var $item = $(this).parents(".collapsibles-accordion-content-item");
2951								if ( !$item.hasClass("active") )
2952								{
2953									$item.addClass("active");
2954								} else {
2955									$item.removeClass("active");
2956								}
2957								Template.checkCollapsiblesAccordionContent( $ul );
2958							});
2959					});					
2960				},
2961				checkCollapsiblesAccordionContent : function ( $ul )
2962				{
2963					var $panel = $ul.find(".collapsibles-accordion-content-panel");
2964					
2965					if ( $ul.find(".collapsibles-accordion-content-item").length == $ul.find(".collapsibles-accordion-content-item.active").length )
2966					{
2967						$panel.addClass("expanded");
2968					} else {
2969						$panel.removeClass("expanded");
2970					}
2971				},
2972		
2973			// Template - Notices and Updates
2974				initNoticesAndUpdates : function()
2975				{
2976					$(".template-notices-and-updates").each(function()
2977					{
2978						var $panel = $(this).find(".panel");
2979						var $btn_more = $panel.find(".btn-more");
2980						var $list = $(this).find(".notices-and-updates-list");
2981						
2982						$btn_more.on("click keydown", function(e)
2983						{
2984							switch ( e.type )
2985							{
2986								case "keydown" :
2987									switch ( e.keyCode )
2988									{
2989										default : return; break;
2990										case KEY_ENTER : break;
2991									}
2992							}
2993							
2994							$list.addClass("show-all");
2995							$panel.hide();
2996						});
2997					});
2998				},
2999				
3000			// Template - Content Expand
3001				initContentExpand : function()
3002				{
3003					$(".template-content-expand").each(function()
3004					{
3005						var $this = $(this);
3006						var $panel = $(this).find(".template-content-expand-panel");
3007						$panel.find(".btn-show-all").on("click keydown", function(e)
3008						{
3009							switch ( e.type )
3010							{
3011								case "keydown" :
3012									switch ( e.keyCode )
3013									{
3014										default : return; break;
3015										case KEY_ENTER : break;
3016									}
3017									break;
3018							}
3019							$this.addClass("show-all");
3020						});
3021					});
3022				},
3023				
3024			// Template - Column Content Expand
3025				initColumnContentExpand : function()
3026				{
3027					$(".template-column-content-expand").each(function()
3028					{
3029						var $expand = $(this);
3030						
3031						$(this).find(".template-2-column-content-blocks").each(function()
3032						{
3033							var $container = $(this);
3034							$(this).find(".column-2-content-blocks-item").each(function()
3035							{
3036								var $this = $(this);
3037								var $btn = $(this).find(".btn-expand");
3038								$btn.on("click keydown", function(e)
3039								{
3040									switch ( e.type )
3041									{
3042										case "keydown" :
3043											switch ( e.keyCode )
3044											{
3045												default : return; break;
3046												case KEY_ENTER : break;
3047											}
3048											break;
3049									}
3050
3051									$(".template-2-column-content-blocks").removeClass("expand");
3052									$(".column-2-content-blocks-item").removeClass("expand");
3053									
3054									$container.addClass("expand");
3055									$this.addClass("expand");
3056									
3057									Template.render();
3058									var top_menu_height = $('.top-menu').height()
3059									$(document).scrollTo( $this, 100, {offset: -top_menu_height});
3060
3061									window.location.hash = '#' + $this.find('.anchor').eq(0).attr('id');
3062								});

3063								
3064								var $expand_item = $(this).find(".column-content-expand-item");
3065								$expand_item.find(".btn-close").on("click keydown", function(e)
3066								{
3067									switch ( e.type )
3068									{
3069										case "keydown" :
3070											switch ( e.keyCode )
3071											{
3072												default : return; break;
3073												case KEY_ENTER : break;
3074											}
3075											break;
3076									}
3077									
3078									$(".template-2-column-content-blocks").removeClass("expand");
3079									$(".column-2-content-blocks-item").removeClass("expand");
3080									
3081									Template.render();
3082								});
3083
3084								var $sub_collapse_btn = $(this).find(".template-collapsibles-accordion .panel");
3085								$sub_collapse_btn.on("click keydown", function(e)
3086								{
3087									switch ( e.type )
3088									{
3089										case "keydown" :
3090											switch ( e.keyCode )
3091											{
3092												default : return; break;
3093												case KEY_ENTER : break;
3094											}
3095											break;
3096									}
3097									
3098									Template.render();
3099								});

3100
3101								var $collapse_item = $(this).find(".collapsibles-accordion-item");
3102								$collapse_item.on("click keydown", function(e)
3103								{
3104									switch ( e.type )
3105									{
3106										case "keydown" :
3107											switch ( e.keyCode )
3108											{
3109												default : return; break;
3110												case KEY_ENTER : break;
3111											}
3112											break;
3113									}
3114									
3115									setTimeout(function() { Template.render(); } , 200);
3116								});
3117							});
3118						});
3119					});
3120				},
3121				
3122				renderColumnContentExpand : function()
3123				{
3124					$(".template-column-content-expand").each(function()
3125					{
3126						$(this).find(".template-2-column-content-blocks").each(function()
3127						{
3128							if ( $(this).hasClass("expand") )
3129							{
3130								if ( !Fn.isMobileView() )
3131								{
3132									var title_height = $(this).find(".column-2-content-blocks-item.expand .column-content-title").outerHeight(true);
3133									var content_height = $(this).find(".column-2-content-blocks-item.expand .column-content-expand-item").outerHeight(true);
3134							
3135									$(this).css({ height: title_height + content_height  });
3136								} else {
3137									$(this).css({ height:"inherit" });
3138								}
3139							} else {
3140								$(this).css({ height:"inherit" });
3141							}
3142						});
3143					});
3144				},
3145				
3146			// Template - Timeline
3147				initTimeline : function()
3148				{
3149					$(".template-timeline").each(function()
3150					{
3151						var $timeline = $(this);
3152						var $panel = $(this).find(".template-timeline-panel");
3153						
3154						// [Button] Expand All
3155							$panel.find(".btn-expand-all").on("click keydown", function(e)
3156							{
3157								switch ( e.type )
3158								{
3159									case "keydown" :
3160										switch ( e.keyCode )
3161										{
3162											default : return; break;
3163											case KEY_ENTER : break;
3164										}
3165										break;
3166								}
3167								
3168								$timeline.addClass("expanded");
3169								$timeline.find(".timeline-item-wrapper").addClass("expand");
3170							});
3171							
3172						// [Button] Collapse All
3173							$panel.find(".btn-collapse-all").on("click keydown", function(e)
3174							{
3175								switch ( e.type )
3176								{
3177									case "keydown" :
3178										switch ( e.keyCode )
3179										{
3180											default : return; break;
3181											case KEY_ENTER : break;
3182										}
3183										break;
3184								}
3185								
3186								$timeline.removeClass("expanded");
3187								$timeline.find(".timeline-item-wrapper").removeClass("expand");
3188							});
3189							
3190							
3191						// Items
3192							$(this).find(".timeline-item").each(function()
3193							{
3194								if ( $(this).parents(".template-timeline").hasClass("expanded-all") ) 
3195								{
3196									return;
3197								}
3198								
3199								var $wrapper = $(this).find(".timeline-item-wrapper");
3200								var $title = $(this).find(".timeline-title");
3201								
3202								$title.on("click keydown", function(e)
3203								{
3204									switch ( e.type )
3205									{
3206										case "keydown" :
3207											switch ( e.keyCode )
3208											{
3209												default : return; break;
3210												case KEY_ENTER : break;
3211											}
3212											break;
3213									}
3214									
3215									if ( $wrapper.hasClass("expand") )
3216									{
3217										$wrapper.removeClass("expand");
3218									} else {
3219										$wrapper.addClass("expand");
3220									}
3221									
3222									if ( $timeline.find(".timeline-item-wrapper.expand").length == $timeline.find(".timeline-item-wrapper").length )
3223									{
3224										$timeline.addClass("expanded");
3225									} else {
3226										$timeline.removeClass("expanded");
3227									}
3228								});

3229							});
3230					});
3231				},
3232				
3233			// Template - Other Topics
3234				initOtherTopics : function()
3235				{
3236					$(".template-other-topics").each(function()
3237					{
3238						var $this = $(this);
3239						var $list = $(this).find(".other-topics-list");
3240						var $panel = $(this).find(".other-topics-panel");
3241						
3242						if ( $list.find(".other-topics-item").length <= 9 )
3243						{
3244							$panel.addClass("hidden");
3245						}
3246						
3247						$panel.find(".btn-view-all").on("click keydown", function(e)
3248						{
3249							switch ( e.type )
3250							{
3251								case "keydown" :
3252									switch ( e.keyCode )
3253									{
3254										default : return; break;
3255										case KEY_ENTER : break;
3256									}
3257									break;
3258							}
3259							
3260							$this.addClass("view-all");
3261						});
3262					});
3263				},
3264	
3265				
3266			/* Template - Popup */
3267				initPopup : function()
3268				{
3269					
3270					$(document).on("click keydown", ".template-popup-item .btn-popup", function(e)
3271					{
3272						$(document).off("keydown.template-popup-item");
3273						
3274						var $popup = $(this).parents(".template-popup-content");
3275						var $item = $(this).parents(".template-popup-item");
3276						var $detail = $item.find(".template-popup-detail-container");
3277						
3278						switch ( e.type )
3279						{
3280							case "keydown" :
3281								switch ( e.keyCode )
3282								{
3283									default : return; break;
3284									case KEY_ENTER : break;
3285								}
3286								break;
3287						}
3288						
3289						$popup.find(".template-popup-detail-container").removeClass("shown");
3290						$detail.addClass("shown");
3291						$detail.prop("role", "dialog");
3292						$detail.prop("ariaModal", true);
3293						$detail.prop("ariaLabel", $detail.find(".title").text());
3294						$popup.find(".btn-close").focus();
3295						
3296						/* Render */
3297							var total = $popup.find(".template-popup-detail-container").length;
3298							
3299							var $selected = $popup.find(".template-popup-detail-container.shown");
3300							if ( $selected.length == 1 )
3301							{
3302								var index = 1;
3303								var selected_index = 1;
3304								$popup.find(".template-popup-detail-container").each(function()
3305								{
3306									if ( $(this).hasClass("shown") )
3307									{
3308										selected_index = index;
3309										return;
3310									}
3311									index++;
3312								});

3313								
3314								var $paging = $selected.find(".popup-paging");
3315								$paging.html ( selected_index + " / " + total );
3316								
3317								if ( selected_index == 1 ) $item.find(".btn-prev").hide();
3318								else $item.find(".btn-prev").show();
3319								
3320								if ( selected_index == total ) $item.find(".btn-next").hide();
3321								else $item.find(".btn-next").show();
3322							}
3323							
3324						// [KEYBORAD]
3325							$(document).on("keydown.template-popup-item", function(e)
3326							{
3327								switch ( e.type )
3328								{
3329									case "keydown" :
3330										switch ( e.keyCode )
3331										{
3332											case KEY_ESCAPE :
3333												$(document).find('.product-item').removeClass('active');
3334												$(document).find(".template-popup-detail-container").removeClass("shown");
3335												$(document).off("keydown.template-popup-item");
3336												break;
3337											case KEY_ARROW_LEFT :
3338												$popup.find(".template-popup-detail-container.shown").find(".btn-prev").click();
3339												break;
3340											case KEY_ARROW_RIGHT :
3341												$popup.find(".template-popup-detail-container.shown").find(".btn-next").click();
3342												break;
3343										}
3344										break;
3345								}
3346							});
3347								
3348					});
3349					
3350					// [Button] Next
3351						$(document).on("click keydown", ".template-popup-detail-container .btn-next", function(e)
3352						{
3353							var $popup = $(this).parents(".template-popup-content");
3354							var $item = $(this).parents(".template-popup-item");
3355							var $detail = $item.find(".template-popup-detail-container");
3356							
3357							switch ( e.type )
3358							{
3359								case "keydown" :
3360									switch ( e.keyCode )
3361									{
3362										default : return; break;
3363										case KEY_ENTER : break;
3364										case KEY_TAB :
3365											if ( e.shiftKey )
3366											{
3367												if ( $item.find(".btn-prev").length > 0 )
3368												{
3369													$item.find(".btn-prev").focus();
3370												} else {
3371													$item.find(".btn-close").focus();
3372												}
3373											} else {
3374												$item.find(".content-print-btn").focus();
3375											}
3376											e.preventDefault();
3377											return;
3378											break;
3379									}
3380									break;
3381							}
3382							
3383							var index = 1;
3384							var selected_index = 1;
3385							$popup.find(".template-popup-detail-container").each(function()
3386							{
3387								if ( $(this).hasClass("shown") ) selected_index = index;
3388								index++;
3389							});
3390							
3391							if ( index > 1 )
3392							{
3393								var index = 1;
3394								var this_index = null;
3395								var next_index = null;
3396								$popup.find(".template-popup-detail-container").each(function()
3397								{
3398									this_index = index;
3399									index++;
3400									if ( index == selected_index + 1 ) next_index = index;
3401								});

3402								
3403								index = 1;
3404								$popup.find(".template-popup-detail-container").each(function()
3405								{
3406									if ( index == next_index ) $(this).parents(".template-popup-item").find(".btn-popup").click();
3407									index++;
3408								});
3409							}						
3410						});
3411						
3412					// [Button] Prev
3413						$(document).on("click keydown", ".template-popup-detail-container .btn-prev", function(e)
3414						{
3415							var $popup = $(this).parents(".template-popup-content");
3416							var $item = $(this).parents(".template-popup-item");
3417							var $detail = $item.find(".template-popup-detail-container");
3418							
3419							switch ( e.type )
3420							{
3421								case "keydown" :
3422									switch ( e.keyCode )
3423									{
3424										default : return; break;
3425										case KEY_ENTER : break;
3426										case KEY_TAB : 
3427											if ( e.shiftKey )
3428											{
3429												$item.find(".btn-close").focus();
3430											} else {
3431												if ( $item.find(".btn-next").length == 0 )
3432												{
3433													$item.find(".content-print-btn").focus();
3434												} else {
3435													$item.find(".btn-next").focus();
3436												}
3437											}
3438											e.preventDefault();
3439											return;
3440											break;
3441									}
3442									break;
3443							}
3444							
3445							var index = 1;
3446							var selected_index = 1;
3447							$popup.find(".template-popup-detail-container").each(function()
3448							{
3449								if ( $(this).hasClass("shown") ) selected_index = index;
3450								index++;
3451							});
3452							
3453							if ( index > 1 )
3454							{
3455								var index = 1;
3456								var this_index = null;
3457								var prev_index = null;
3458								$popup.find(".template-popup-detail-container").each(function()
3459								{
3460									this_index = index;
3461									if ( index == selected_index - 1 ) prev_index = this_index;
3462									index++;
3463								});

3464								
3465								index = 1;
3466								$popup.find(".template-popup-detail-container").each(function()
3467								{
3468									if ( index == prev_index ) $(this).parents(".template-popup-item").find(".btn-popup").click();
3469									index++;
3470								});
3471							}								
3472						});
3473					
3474					// [Button] Close
3475						$(document).on("click keydown", ".template-popup-detail-container .btn-close", function(e)
3476						{
3477							var $popup = $(this).parents(".template-popup-content");
3478							switch ( e.type )
3479							{
3480								case "keydown" :
3481									switch ( e.keyCode )
3482									{
3483										default : return; break;
3484										case KEY_ENTER : break;
3485										case KEY_ESCAPE : break;
3486									}
3487									break;
3488							}
3489							
3490							$popup.find(".template-popup-detail-container").removeClass("shown");
3491							that = $(this);
3492							setTimeout(function() {
3493								$(that).parent().parent().parent().find("a.display_gallery_block").focus();
3494							}, 100);
3495						});
3496						
3497					// [Button] Print
3498						$(document).on("click keydown", ".template-popup-detail-container .content-print-btn", function(e)
3499						{
3500							var $popup = $(this).parents(".template-popup-content");
3501							var $item = $(this).parents(".template-popup-item");
3502							var $detail = $item.find(".template-popup-detail-container");
3503							
3504							switch ( e.keyCode )
3505							{
3506								default : return; break;
3507								case KEY_TAB :
3508									if ( e.shiftKey )
3509									{
3510										if ( $item.find(".btn-next").length > 0 )
3511										{
3512											$item.find(".btn-next").focus();
3513										} 
3514										else if ( $item.find(".btn-prev").length > 0 )
3515										{
3516											$item.find(".btn-prev").focus();
3517										} else {
3518											$item.find(".btn-close").focus();
3519										}
3520										e.preventDefault();
3521									}
3522									return;
3523									break;
3524							}
3525						});							
3526
3527					// Last Button
3528						$(".template-popup-detail-container").each(function(e)
3529						{
3530							var $popup = $(this).parents(".template-popup-content");
3531							var $item = $(this).parents(".template-popup-item");
3532							var $detail = $item.find(".template-popup-detail-container");
3533
3534							$item.find("a, [tabindex=\"0\"], [tabindex=\"1\"]").not(".display_gallery_block").not(":visible").keydown(function(e) {
3535								var keyCode = e.keyCode || e.which; 
3536								switch ( keyCode )
3537								{
3538									default : return; break;
3539									case KEY_TAB :
3540										if ( ! e.shiftKey ) {
3541											var last = $item.find("a:visible, [tabindex=\"0\"]:visible, [tabindex=\"1\"]:visible").last();
3542											var last_index = $item.find("a, [tabindex=\"0\"], [tabindex=\"1\"]").index( last );
3543											var index = $item.find("a, [tabindex=\"0\"], [tabindex=\"1\"]").index( $(this) );
3544
3545											if ( index == last_index ) {
3546												$item.find(".btn-close").focus();
3547												e.preventDefault();
3548											}
3549											return;
3550										}
3551										break;
3552								}
3553							});
3554
3555							$item.find("a, [tabindex=\"0\"]").not(".display_gallery_block").not(":visible").attr('tabindex', 1);
3556						});	
3557				}
3558				
3559		}
3560		
3561		
3562		
3563		var Page = {
3564			init : function()
3565			{
3566				this.Global.init();
3567				
3568				this.AdvancedSearch.init();
3569				this.AnnualReport.init();
3570				this.EconomicFinancialData.init();
3571				this.Home.init();
3572				this.PressRelease.init();
3573				
3574				this.EBanking.init();
3575				
3576				this.RegisterOfAIsAndLROs.init();
3577				
3578				this.OnlineCatalogue.init();
3579			},
3580			
3581			Global : {
3582				init : function()
3583				{
3584					/* WeChat QR */
3585						var $wechat_qr_obj = $(".wechat-qr-code");
3586						
3587						// [Button] Close
3588						$wechat_qr_obj.find(".btn-close").on("click keydown", function(e)
3589						{
3590							switch ( e.type )
3591							{
3592								case "keydown" :
3593									switch ( e.keyCode )
3594									{
3595										default : return; break;
3596										case KEY_ENTER : break;
3597										case KEY_ESCAPE : break;
3598									}
3599							}
3600							
3601							$("body").removeClass("show-pop-up");
3602							$wechat_qr_obj.removeClass("show");
3603							$(document).off("keydown.wechatqr");
3604						});

3605						
3606						$(".wechat-qr").on("click keydown", function(e)
3607						{
3608							switch ( e.type )
3609							{
3610								case "keydown" :
3611									switch ( e.keyCode )
3612									{
3613										default : return; break;
3614										case KEY_ENTER : break;
3615									}
3616							}
3617							
3618							$("body").addClass("show-pop-up");
3619							$wechat_qr_obj.addClass("show");
3620							$(document).on("keydown.wechatqr", function(e)
3621							{
3622								switch ( e.type )
3623								{
3624									case "keydown" :
3625										switch ( e.keyCode )
3626										{
3627											case KEY_TAB :
3628												$wechat_qr_obj.find(".btn-close").focus();
3629												e.preventDefault();
3630												break;
3631											case KEY_ESCAPE :
3632												$wechat_qr_obj.find(".btn-close").click();
3633												break;
3634										}
3635										break;
3636								}
3637							});
3638						});
3639						
3640					/* Note Link */
3641						/*$(".noteLink").on("click keydown", function(e)
3642						{
3643							switch ( e.type )
3644							{
3645								case "keydown" :
3646									switch ( e.keyCode )
3647									{
3648										default : return; break;
3649										case KEY_ENTER : break;
3650									}
3651									break;
3652							}
3653							
3654							var $target = $($(this).attr("href"));
3655							
3656							$("html,body").animate({
3657								scrollTop: $target.offset().top - $("header").height() - 30 }, 500
3658							);
3659						});*/
3660				}				
3661			},
3662			
3663
3664			AdvancedSearch : {
3665				init : function()
3666				{
3667					var _this = this;
3668					if ( $(".layout-advanced-search").length > 0 )
3669					{
3670						var $layout = $(".layout-advanced-search");
3671						var $mt = $layout.find(".modification-time");
3672						
3673						$mt.find(".radio").find("input").on("change", function(e)
3674						{
3675							_this.render();
3676						});
3677
3678						_this.render();
3679					}
3680				},
3681				render : function()
3682				{
3683					if ( $(".layout-advanced-search").length > 0 )
3684					{
3685						var $layout = $(".layout-advanced-search");
3686						var $mt = $layout.find(".modification-time");
3687						
3688						var $checked = $mt.find(".radio").find("input:checked");
3689						if ( $checked.length > 0 )
3690						{
3691							switch ( $checked.val() )
3692							{
3693								case "anytime" :
3694									var $obj = $(".select-wrapper.within-the-past")
3695									$obj.addClass("disabled");
3696									$obj.find("select").prop ( "disabled", true );
3697
3698									var $form_date = $(".date-picker-wrapper.from-date");
3699									$form_date.addClass("disabled");
3700									
3701									var $to_date = $(".date-picker-wrapper.to-date");
3702									$to_date.addClass("disabled");
3703									break;
3704								case "within-the-past" :
3705									var $obj = $(".select-wrapper.within-the-past")
3706									$obj.removeClass("disabled");
3707									$obj.find("select").prop ( "disabled", false );
3708
3709									var $form_date = $(".date-picker-wrapper.from-date");
3710									$form_date.addClass("disabled");
3711									
3712									var $to_date = $(".date-picker-wrapper.to-date");
3713									$to_date.addClass("disabled");
3714									break;
3715								case "date-range" :
3716									var $obj = $(".select-wrapper.within-the-past")
3717									$obj.addClass("disabled");
3718									$obj.find("select").prop ( "disabled", true );
3719								
3720									var $form_date = $(".date-picker-wrapper.from-date");
3721									$form_date.removeClass("disabled");
3722									
3723									var $to_date = $(".date-picker-wrapper.to-date");
3724									$to_date.removeClass("disabled");
3725									
3726									break;
3727							}
3728						}
3729					}
3730				}
3731			},
3732			
3733			AnnualReport : {
3734				init: function()
3735				{
3736					this.initDetail();
3737				},
3738
3739				/* Annual Report Detail */
3740					initDetail : function()
3741					{
3742						if ( $(".layout-annual-report-detail").length > 0 )
3743						{
3744							var $layout = $(".layout-annual-report-detail");
3745							var $pm = $layout.find(".print-media-box");
3746							
3747							$pm.find(".item").each(function()
3748							{
3749								var $item = $(this);
3750								$(this).find(".mobile-title").on("click", function(e)
3751								{
3752									if ( Fn.isMobileDeviceView() )
3753									{
3754										$item.addClass("show");
3755									}
3756								});

3757								
3758								// [Button] Back
3759									$(this).find(".btn-back").on("click", function(e)
3760									{
3761										$item.removeClass("show");
3762									});
3763							});
3764						}
3765					}
3766			},
3767			
3768			EconomicFinancialData : {
3769				init : function()
3770				{
3771					if ( $(".layout-economic-financial-data").length > 0 )
3772					{
3773						var $layout = $(".layout-economic-financial-data");
3774						$layout.find("#go-btn").on("click keyup", function( e ) {
3775							if ( e.type == "keyup" )
3776							{
3777								if ( e.keyCode != KEY_ENTER ) {
3778									return;
3779								}
3780							}
3781							window.location.hash = $("#sector").val();
3782						});
3783					}
3784				}
3785			},
3786			
3787			Home : {
3788				init : function()
3789				{
3790					var $layout = $(".layout-home");
3791					if ( $layout.length > 0 )
3792					{
3793						var $search = $layout.find(".search");
3794						var $field = $search.find(".input-field");
3795						
3796						$field.on("click", function(e)
3797						{
3798							e.stopPropagation();
3799							$field.focus();
3800						});
3801						
3802						$field.on("focusin", function(e)
3803						{
3804							$search.find(".multiple-select-wrapper").addClass("active");
3805							
3806							var $panel = $search.find(".search-panel");
3807							$panel.find("input[type='submit']").on("keydown", function(e)
3808							{
3809								switch ( e.type )
3810								{
3811									case "keydown" :
3812										switch ( e.keyCode )
3813										{
3814											case KEY_TAB :
3815												$search.find(".multiple-select-all").find("label").focus();
3816												e.stopPropagation();
3817												break;
3818										}
3819										break;
3820								}
3821							});
3822							
3823							$(document).on("keydown.homesearch", function(e)
3824							{
3825								switch ( e.type )
3826								{
3827									case "keydown" :
3828										switch ( e.keyCode )
3829										{
3830											case KEY_ESCAPE :
3831												$search.find(".multiple-select-wrapper").removeClass("active");
3832												$(document).off("keydown.homesearch");
3833												break;
3834										}
3835										break;
3836								}
3837							});
3838						});
3839						
3840						// Modification Time
3841							ModificationTime.init ( $(".layout-home") );
3842					}
3843				}
3844			},
3845
3846			PressRelease : {
3847				init : function()
3848				{
3849					var $layout = $(".layout-press-release");
3850					if ( $layout.length > 0 )
3851					{
3852						var $input_search = $layout.find(".input-search");
3853						var $icon_zoom = $input_search.find(".icon-zoom");
3854						var $btn_submit = $input_search.find(".btn-submit");
3855						$icon_zoom.on("click keydown", function(e)
3856						{
3857							if ( !Fn.isMobileView() )
3858							{
3859								switch ( e.type )
3860								{
3861									case "keydown" :
3862										switch ( e.keyCode )
3863										{
3864											default : return; break;
3865											case KEY_ENTER :
3866												if ( $input_search.hasClass("active") )
3867												{
3868													$input_search.removeClass("active");
3869													$input_search.stop().animate({ width:40 }, 500, function()
3870													{
3871														$input_search.removeAttr("style");
3872													});
3873													
3874												} else {
3875													$input_search.addClass("active");
3876													$input_search.stop().animate({ width:"100%" }, 500 );
3877												}
3878												return;
3879												break;
3880										}
3881									case "click" :
3882										$input_search.addClass("active");
3883										$input_search.stop().animate({ width:"100%" }, 500 );
3884										break;
3885									case "mouseover" :
3886										$input_search.addClass("active");
3887										$input_search.stop().animate({ width:"100%" }, 500 );
3888										
3889										break;
3890								}
3891								
3892							}
3893						});
3894					}
3895				}
3896			},
3897			
3898			EBanking : {
3899				init : function()
3900				{
3901					var $layout = $(".layout-e-banking");
3902					if ( $layout.length > 0 )
3903					{
3904						var $ev = $layout.find(".education-videos-container");
3905						var $panel = $ev.find(".panel");
3906						$panel.find("a").on("click keydown", function(e)
3907						{
3908							switch ( e.type )
3909							{
3910								case "keydown" :
3911									switch ( e.keyCode )
3912									{
3913										default : return; break;
3914										case KEY_ENTER : break;
3915									}
3916									break;
3917							}
3918							
3919							$ev.addClass("show-all");
3920						});

3921					}
3922				}
3923			},
3924			
3925			RegisterOfAIsAndLROs : {
3926				init : function()
3927				{
3928					var $layout = $(".layout-register-of-ais-and-lrds");
3929					if ( $layout.length > 0 )
3930					{
3931						$layout.find(".btn-more").on("click keydown", function(e)
3932						{
3933							switch ( e.type )
3934							{
3935								case "keydown" :
3936									switch ( e.keyCode )
3937									{
3938										default : return; break;
3939										case KEY_ENTER : break;
3940									}
3941									break;
3942							}
3943							
3944							$layout.addClass("show-all");
3945						});
3946					}
3947				}
3948			},
3949			
3950			OnlineCatalogue : {
3951				init : function()
3952				{
3953					var $layout = $(".layout-online-catalogue");
3954					if ( $layout.length > 0 )
3955					{
3956						$layout.find("table").tablesorter({
3957							widgets        : ['zebra', 'columns'],
3958							usNumberFormat : false,
3959							sortReset      : true,
3960							sortRestart    : true
3961						});
3962					}
3963				}
3964			}
3965						
3966		}
3967		
3968		
3969		var DatePicker = {
3970			init : function()
3971			{
3972				/* Custom Date Picker */
3973					$(".date-picker-wrapper").each(function()
3974					{
3975						var $wrapper = $(this);
3976						var $calendar = $wrapper.find(".date-picker-calendar");
3977
3978						var $input = $wrapper.find(".date-picker");
3979						
3980						function setDateFormat ( )
3981						{
3982							var year = $wrapper.prop("data-year");
3983							
3984							var month = $wrapper.prop("data-month");
3985							if ( month < 10 ) month = "0"+month;
3986							
3987							var date = $wrapper.prop("data-date");
3988							if ( date < 10 ) date = "0"+date;
3989							
3990							$input.val ( year + "-" + month + "-" + date );
3991							$input.change();
3992						}
3993
3994						function getCalendar ( year, month )
3995						{
3996							var html_calendar = "";
3997							
3998							/* Year and Month */
3999								html_calendar += '<div class="year-month-container">';
4000								html_calendar += '<div class="btn-prev" tabindex="0"></div>';
4001								html_calendar += '<div class="month">' + NAMES_OF_MONTH [ month - 1 ] + '</div>';
4002								html_calendar += '<div class="year">' + year + '</div>';
4003								html_calendar += '<div class="btn-next" tabindex="0"></div>';
4004								html_calendar += '</div>';
4005							
4006							/* Week */
4007								html_calendar += '<div class="week-container">';
4008								for ( var i = 0; i < 7; i++ )
4009								{
4010									html_calendar += '<div class="week"><div>' + NAMES_OF_THE_DAYS[ i ] + '</div></div>';
4011								}
4012								html_calendar += '</div>';
4013							
4014							
4015							/* Check Selected Date */
4016								var selected_date = null;
4017								if ( $input.val() != $input.attr("data-default-value") )
4018								{
4019									var date = new Date($input.val());
4020									if ( date.getFullYear() == year && date.getMonth() + 1 == month )
4021									{
4022										selected_date = date.getDate();
4023									}
4024								}
4025
4026							/* Check Today */
4027								var today = "";
4028								var today_date = new Date();
4029							
4030							/* Calendar */
4031								html_calendar += '<div class="day-container">';
4032								var date = DatePicker.getDate ( year, month );
4033								var day = DatePicker.getDay ( year, month - 1);
4034								
4035								var k = 0;
4036								for ( var i = 0; i < day; i++ )
4037								{
4038									if ( k % 7 == 0 ) html_calendar += '<div class="tr">';
4039									html_calendar += '<div class="day dim"></div>';
4040									k++;
4041									if ( k % 7 == 0 ) html_calendar += '</div>';
4042								}
4043								
4044								for ( var i = 1; i <= date; i++ )
4045								{
4046									if ( k % 7 == 0 ) html_calendar += '<div class="tr">';
4047									var selected = ( selected_date != null && selected_date == i ) ? "selected" : "";
4048
4049									// Today
4050										if ( year == today_date.getFullYear() && month == today_date.getMonth() + 1 && today_date.getDate() == i )
4051										{
4052											if ( today_date.getDate() == i ) today = "today";
4053										} else {
4054											today = "";
4055										}
4056									
4057									var available_date = [];
4058
4059									if ( $calendar.hasClass('ms-date-picker-calenda') ) {
4060										available_date = JSON.parse( day_list );
4061
4062										if ( available_date[ year ] && available_date[ year ][ month ] && available_date[ year ][ month ][ i ] && available_date[ year ][ month ][ i ] == 1 ) {
4063											html_calendar += '<div class="day ' + selected + ' ' + today + '" tabindex="0" data-date="'+i+'"><div class="date">' + i + '</div></div>';
4064										} else {
4065											html_calendar += '<div class="day disabled ' + selected + ' ' + today + '"><div class="date">' + i + '</div></div>';
4066										}
4067									} else {
4068										html_calendar += '<div class="day ' + selected + ' ' + today + '" tabindex="0" data-date="'+i+'"><div class="date">' + i + '</div></div>';
4069									}
4070									
4071									k++;
4072									if ( k % 7 == 0 ) html_calendar += '</div>';
4073								}
4074								
4075								if ( k % 7 != 0 )
4076								{
4077									for ( var i = k % 7; i < 7; i++ )
4078									{
4079										if ( k % 7 == 0 ) html_calendar += '<div class="tr">';
4080										html_calendar += '<div class="day dim"></div>';
4081										k++;
4082										if ( k % 7 == 0 ) html_calendar += '</div>';
4083									}
4084								}
4085								
4086								html_calendar += '</div>';
4087								
4088								return html_calendar;
4089						}
4090						
4091						function setYearMonth ( year, month )
4092						{
4093							$year_month_container = $calendar.find(".year-month-container");
4094							
4095							$calendar.html ( getCalendar ( year, month ) );
4096							
4097							$wrapper.prop ( "data-year", year );
4098							$wrapper.prop ( "data-month", month );
4099							

4100							$year_month_container.find ( ".month" ).text ( NAMES_OF_MONTH [ month - 1 ] );
4101							$year_month_container.find ( ".year" ).text ( year );
4102						}						
4103						
4104						function updateCalendar()
4105						{
4106							var date = new Date ( $input.val() );
4107							if ( date.isValid() )
4108							{
4109								$wrapper.prop ( "data-year", date.getFullYear() );
4110								$wrapper.prop ( "data-month", date.getMonth() + 1 );
4111								$wrapper.prop ( "data-date", date.getDate() );
4112								$calendar.html ( getCalendar ( date.getFullYear(), date.getMonth() + 1 ) );
4113							}
4114						}
4115						
4116						$input.on("blur", function(e)
4117						{
4118							if ( Fn.isResponsiveView() && $wrapper.hasClass("active") )
4119							{
4120								var date = new Date ( $input.val() );
4121								var year = $wrapper.prop ( "data-year" );
4122								var month = $wrapper.prop ( "data-month" );
4123								var date = $wrapper.prop ( "data-date" );
4124								
4125								if ( date.getFullYear() != year || date.getMonth() + 1 || month && date.getDate() != date )
4126								{
4127									updateCalendar();
4128								}
4129							}
4130						});
4131						
4132						
4133						$input.on("click keydown", function(e)
4134						{
4135							switch ( e.type )
4136							{
4137								case "keydown" :
4138									switch ( e.keyCode )
4139									{
4140										default : return; break;
4141										case KEY_TAB : 
4142											break;
4143										case KEY_ENTER : 
4144											if ( Fn.isResponsiveView() && $wrapper.hasClass("active") )
4145											{
4146												updateCalendar();
4147												e.preventDefault();
4148												e.stopPropagation();
4149												return;
4150											} 
4151											else if ( $wrapper.hasClass("active") )
4152											{
4153												DatePicker.hide();
4154												e.preventDefault();
4155												e.stopPropagation();
4156												return;
4157											}
4158											break;
4159										case KEY_ARROW_DOWN :
4160											// Next Date
4161											if ( $(this).val() != "" || ( $(this).attr("data-default-value") != undefined && $(this).val() != $(this).attr("data-default-value") ) )
4162											{
4163												var date = new Date( $(this).val() );
4164												if ( date.isValid() )
4165												{
4166													var d = new Date( date );
4167													d.setDate ( date.getDate() + 1 );
4168												} else {
4169													var d = new Date();
4170												}
4171												$wrapper.prop("data-year", d.getFullYear() );
4172												$wrapper.prop("data-month", d.getMonth() + 1 );
4173												$wrapper.prop("data-date", d.getDate() );
4174												setDateFormat();
4175												updateCalendar();
4176											}											
4177											e.preventDefault();
4178											e.stopPropagation();
4179											return;
4180											break;
4181										case KEY_ARROW_UP :
4182											// Prev Date
4183											if ( $(this).val() != "" || ( $(this).attr("data-default-value") != undefined && $(this).val() != $(this).attr("data-default-value") ) )
4184											{
4185												var date = new Date( $(this).val() );
4186												if ( date.isValid() )
4187												{
4188													var d = new Date( date );
4189													d.setDate ( date.getDate() - 1 );
4190												} else {
4191													var d = new Date();
4192												}
4193												$wrapper.prop("data-year", d.getFullYear() );
4194												$wrapper.prop("data-month", d.getMonth() + 1 );
4195												$wrapper.prop("data-date", d.getDate() );
4196												setDateFormat();
4197												updateCalendar();
4198											}											
4199											e.preventDefault();
4200											e.stopPropagation();
4201											return;
4202											break;
4203									}										
4204									break;
4205								case "click" :
4206									if ( $wrapper.hasClass("active") && !Fn.isResponsiveView() )
4207									{
4208										DatePicker.hide();
4209										return;
4210									}
4211									break;
4212							}
4213							
4214							if ( Fn.isResponsiveView() && $wrapper.hasClass("active") )
4215							{
4216								return;
4217							}
4218							
4219							
4220							if ( e.type != "keydown" )
4221							{
4222								DatePicker.hide();
4223							}
4224							
4225							switch ( e.type )
4226							{
4227								case "keydown" :
4228									switch ( e.keyCode )
4229									{
4230										default : return; break;
4231										case KEY_ENTER : break;
4232									}
4233									break;
4234							}
4235
4236
4237							
4238							$wrapper.addClass("active");
4239							
4240							
4241							var d = new Date ( $(this).val() );
4242							if ( !d.isValid() )
4243							{
4244								d = new Date ();
4245							}
4246							$wrapper.prop ( "data-year", d.getFullYear() );
4247							$wrapper.prop ( "data-month", d.getMonth() + 1 );
4248							$wrapper.prop ( "data-date", d.getDate() );
4249							
4250							// Set Date
4251								if ( $(this).val() == "" || $(this).val() == $(this).attr("data-default-value") )
4252								{
4253									setDateFormat();
4254								}
4255							
4256							
4257							$calendar.html ( getCalendar ( d.getFullYear(), d.getMonth() + 1 ) );
4258							var $day_container = $calendar.find(".day-container");
4259							
4260							
4261							
4262							$wrapper.on("click", function(e)
4263							{
4264								e.preventDefault();
4265								e.stopPropagation();
4266							});

4267							
4268							$calendar.on("click", function(e)
4269							{
4270								e.preventDefault();
4271								e.stopPropagation();
4272							});
4273							
4274							$(document).on("click", function(e)
4275							{
4276								DatePicker.hide();
4277							});
4278
4279							e.preventDefault();
4280							e.stopPropagation();
4281						});
4282						
4283						/* [Button] Date */
4284							$calendar.on("click keydown", ".day", function(e)
4285							{
4286								if ( !$(this).hasClass("dim") )
4287								{
4288									switch ( e.type )
4289									{
4290										case "keydown" :
4291											switch ( e.keyCode )
4292											{
4293												default : return; break;
4294												case KEY_ARROW_DOWN :
4295													var index = $(this).index();
4296													
4297													var pIndex = $(this).parent().index();
4298													if ( pIndex < $(this).parent().parent().find(".tr").length )
4299													{
4300														var $tr = $(this).parent().parent().find(".tr").eq( pIndex + 1 );
4301														
4302														if ( $tr.find(".day").eq( index ).hasClass("dim") )
4303														{
4304															$tr.find(".day").not(".dim").eq ( $tr.find(".day").not(".dim").length - 1 ).focus();
4305														} else {
4306															$tr.find(".day").eq ( index ).focus();
4307														}
4308													}
4309													e.preventDefault();
4310													e.stopPropagation();
4311													return;
4312													break;
4313												case KEY_ARROW_UP :
4314													var index = $(this).index();
4315													var pIndex = $(this).parent().index();
4316													if ( pIndex > 0 )
4317													{
4318														var $tr = $(this).parent().parent().find(".tr").eq( pIndex - 1 );
4319														
4320														if ( $tr.find(".day").eq ( index ).hasClass("dim") )
4321														{
4322															$tr.find(".day").not(".dim").eq(0).focus();
4323														} else {
4324															$tr.find(".day").eq ( index ).focus();
4325														}
4326													} else {
4327														$calendar.find(".btn-prev").focus();
4328													}
4329													e.preventDefault();
4330													e.stopPropagation();
4331													return;
4332													break;
4333												case KEY_ARROW_LEFT :
4334													var index = $(this).index();
4335													var total_dim = $(this).parent().find(".dim").length;
4336													if ( total_dim == index && $(this).parent().index() == 0 )
4337													{
4338														$calendar.find(".btn-prev").click();
4339														$day_container = $calendar.find(".day-container");
4340														$day_container.find(".day").not(".dim").last().focus();
4341													} else {
4342														if ( index > 0 )
4343														{
4344															$(this).parent().find(".day").eq( index - 1 ).focus();
4345														} else {
4346															var pIndex = $(this).parent().index();
4347															if ( pIndex > 0 )
4348															{
4349																var $tr = $(this).parent().parent().find(".tr").eq( pIndex - 1 );
4350																$tr.find(".day").not(".dim").eq ( $tr.find(".day").not(".dim").length - 1).focus();
4351															}
4352														}
4353													}
4354													e.preventDefault();
4355													e.stopPropagation();
4356													return;
4357													break;
4358												case KEY_ARROW_RIGHT :
4359													var index = $(this).index();
4360													var pIndex = $(this).parent().index();
4361													var total_pIndex = $(this).parent().parent().find(".tr").length - 1;
4362													
4363													if ( pIndex == total_pIndex && index == $(this).parent().find(".day").not(".dim").length - 1 )
4364													{
4365														$calendar.find(".btn-next").click();
4366														$day_container = $calendar.find(".day-container");
4367														$day_container.find(".day").not(".dim").eq(0).focus();
4368													} else {
4369														if ( index < $(this).parent().find(".day").length - 1)
4370														{
4371															$(this).parent().find(".day").eq( index + 1 ).focus();
4372														} else {
4373															var pIndex = $(this).parent().index();
4374															if ( pIndex < $(this).parent().parent().find(".tr").length - 1 )
4375															{
4376																var $tr = $(this).parent().parent().find(".tr").eq( pIndex + 1 );
4377																$tr.find(".day").not(".dim").eq ( 0 ).focus();
4378															}
4379														}
4380													}
4381													e.preventDefault();
4382													e.stopPropagation();
4383													return;
4384													break;												
4385												case KEY_ENTER : break;
4386											}
4387											break;
4388									}
4389
4390									if ( $(this).hasClass('disabled') ) {
4391										return false;
4392									}
4393									$wrapper.prop ( "data-date", $(this).attr("data-date") );
4394									setDateFormat();
4395									
4396									$calendar.find(".day").removeClass("selected");
4397									$(this).addClass("selected");
4398									
4399									if ( !Fn.isResponsiveView() && $wrapper.hasClass("active") )
4400									{
4401										DatePicker.hide();
4402									}
4403								}
4404							});

4405
4406							
4407						
4408						// [Button] Prev
4409							$calendar.on("click keydown", ".btn-prev", function(e)
4410							{
4411								switch ( e.type )
4412								{
4413									case "keydown" :
4414										switch ( e.keyCode )
4415										{
4416											default : return; break;
4417											case KEY_ENTER : 
4418											case KEY_ARROW_LEFT :
4419												break;
4420											case KEY_ARROW_RIGHT :
4421												$calendar.find(".btn-next").focus();
4422												$calendar.find(".btn-next").click();
4423												return;
4424												break;
4425											case KEY_ARROW_DOWN :
4426												$day_container = $calendar.find(".day-container");
4427												$day_container.find(".day").not(".dim").eq(0).focus();
4428												e.preventDefault();
4429												return;
4430												break;
4431										}
4432										break;
4433								}
4434								var year = parseInt($wrapper.prop("data-year"));
4435								var month = parseInt($wrapper.prop("data-month"));
4436								
4437								if ( month - 1 > 0 )
4438								{
4439									month -= 1;
4440								} else {
4441									month = 12;
4442									year --;
4443								}
4444								
4445								setYearMonth ( year, month );
4446								$calendar.find(".btn-prev").focus();
4447								e.preventDefault();
4448							});
4449							
4450							
4451						// [Button] Next
4452							$calendar.on("click keydown", ".btn-next", function(e)
4453							{
4454								switch ( e.type )
4455								{
4456									case "keydown" :
4457										switch ( e.keyCode )
4458										{
4459											default : return; break;
4460											case KEY_ENTER : 
4461											case KEY_ARROW_RIGHT :
4462												break;
4463											case KEY_ARROW_LEFT :
4464												$calendar.find(".btn-prev").focus();
4465												$calendar.find(".btn-prev").click();
4466												return;
4467												break;
4468											case KEY_ARROW_DOWN :
4469												$day_container = $calendar.find(".day-container");
4470												$day_container.find(".day").not(".dim").eq(0).focus();
4471												e.preventDefault();
4472												return;
4473												break;
4474										}
4475										break;
4476								}
4477								var year = parseInt($wrapper.prop("data-year"));
4478								var month = parseInt($wrapper.prop("data-month"));
4479								
4480								if ( month + 1  <= 12 )
4481								{
4482									month += 1;
4483								} else {
4484									month = 1;
4485									year ++;
4486								}
4487								
4488								setYearMonth ( year, month );
4489								$calendar.find(".btn-next").focus();
4490								e.preventDefault();
4491							});						
4492						
4493						// [Button] Back
4494							$wrapper.find(".btn-back").on("click keydown", function(e)
4495							{
4496								switch ( e.type )
4497								{
4498									case "keydown" :
4499										switch ( e.keyCode )
4500										{
4501											default : return; break;
4502											case KEY_ENTER : break;
4503										}
4504										break;
4505								}
4506								DatePicker.hide();
4507								e.preventDefault();
4508							});
4509						
4510						// [Button] Done
4511							$wrapper.find(".btn-done").on("click keydown", function(e)
4512							{
4513								switch ( e.type )
4514								{
4515									case "keydown" :
4516										switch ( e.keyCode )
4517										{
4518											default : return; break;
4519											case KEY_ENTER : break;
4520										}
4521										break;
4522								}
4523								DatePicker.hide();
4524								e.preventDefault();
4525							});
4526						
4527					});
4528
4529					
4530			},
4531			hide : function ( )
4532			{
4533				$(".date-picker-wrapper").removeClass("active");
4534			},
4535			getDate : function ( year, month )
4536			{
4537				var d = new Date ( year, month, 0 );
4538				return d.getDate();
4539			},
4540			getDay : function ( year, month )
4541			{
4542				var d = new Date ( year, month, 1 );
4543				return d.getDay();
4544			}
4545		}
4546		
4547		
4548	/* Print */
4549		var Print = {
4550			init : function()
4551			{
4552				/* Print Full Page */
4553					$(".header-print-btn").on("click keydown", function(e)
4554					{
4555						switch ( e.type )
4556						{
4557							case "keydown" :
4558								switch ( e.keyCode )
4559								{
4560									default : return; break;
4561									case KEY_ENTER : e.preventDefault(); break;
4562								}
4563								break;
4564						}
4565						
4566						$("body").removeClass("show-mobile-menu");
4567						$("body > div, body > footer").prop("ariaHidden", false);
4568						
4569						window.print();	
4570					});

4571				
4572				/* Print Content */
4573					$(document).on("click keydown", ".content-print-btn", function(e)
4574					{
4575						switch ( e.type )
4576						{
4577							case "keydown" :
4578								switch ( e.keyCode )
4579								{
4580									default : return; break;
4581									case KEY_ENTER : e.preventDefault(); break;
4582								}
4583								break;
4584						}
4585						
4586						var assets = '<link href="' + baseUrl + '/statics/assets/css/ui.css" rel="stylesheet" type="text/css"><link href="' + baseUrl + '/statics/assets/css/custom-ui.css" rel="stylesheet" type="text/css"><link href="' + baseUrl + '/statics/assets/css/print-ui.css" rel="stylesheet" type="text/css">';
4587						var content = $(this).parents(".print-wrapper")[0].outerHTML;
4588			
4589						var w = window.open("", 'Print_Page', 'scrollbars=yes');        
4590						w.document.write('<html><head>' + assets + '</head><body onload="window.print()">');
4591						w.document.write( '<div class="print-logo">' + $("header").find(".logo").html() + '</div>');
4592						w.document.write(content);
4593						w.document.write('

4593</body></html>');
4594						w.document.close();
4595						
4596						$( w.window ).on( 'load', function()
4597						{
4598							var UA = navigator.userAgent;
4599							var isMobile = (
4600								/\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
4601								/\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
4602							);
4603
4604							if (isMobile === false) {
4605								w.close();
4606							} else {
4607								w.history.replaceState('', '', '?print');
4608							}
4609						});
4610					});
4611			}
4612		}
4613		
4614		
4615
4616	/* Document Ready */
4617		$(document).ready(function()
4618		{
4619			try 
4620			{
4621				Runtime.render();
4622				if ( Input && Input.init ) Input.init();
4623				if ( Header && Header.init ) Header.init();
4624				if ( Menu && Menu.init ) Menu.init();
4625				if ( OptionGroup && OptionGroup.init ) OptionGroup.init();
4626				if ( FontSize && FontSize.init ) FontSize.init();
4627				if ( Share && Share.init ) Share.init();
4628				if ( Effect )
4629				{
4630					if ( Effect.imageSlider && Effect.imageSlider.init ) Effect.imageSlider.init();
4631				}
4632				
4633				if ( Tab && Tab.init ) Tab.init();
4634				if ( SelectContent && SelectContent.init ) SelectContent.init();
4635				if ( DatePicker && DatePicker.init ) DatePicker.init();
4636				
4637				if ( Template && Template.init ) Template.init();
4638				if ( Page && Page.init ) Page.init();
4639				if ( Download && Download.init ) Download.init();
4640

4641				if ( Print && Print.init ) Print.init();
4642				
4643				setTimeout ( Runtime.render, 100 );
4644			} catch(e){}
4645			$('.template-popup-content').each(function() {
4646				$(this).find('a[tabindex="2"]').keydown(function(e) {
4647					var keyCode = e.keyCode || e.which; 
4648					if ( keyCode == 9 ) {
4649						$( '.template-popup-content .btn-close[tabindex="1"]' ).focus();
4650						e.preventDefault();
4651					}
4652				});
4653				$(this).find('.title[tabindex="2"]' ).keydown(function(e) {
4654					var keyCode = e.keyCode || e.which; 
4655					if ( keyCode == 9 ) {
4656						$( '.template-popup-content .btn-close[tabindex="1"]' ).focus();
4657						e.preventDefault();
4658					}
4659				});
4660				$(this).find('.btn-close').keydown(function(e) {
4661					var keyCode = e.keyCode || e.which; 
4662					if ( keyCode == 9 ) {
4663						if(e.shiftKey) {
4664							if ($(this).closest('.template-popup-content').find('.title').length > 0) {
4665								$(this).closest('.template-popup-content').find('.title').focus();
4666							} else {
4667								$(this).closest('.template-popup-content').find('a').last().focus();
4668							}
4669
4670							e.preventDefault();
4671						}
4672					}
4673				});
4674			})
4675			$('.template-popup-detail-container').each(function() {
4676				$(this).find('a[tabindex="2"]').keydown(function(e) {
4677					var keyCode = e.keyCode || e.which; 
4678					if ( keyCode == 9 ) {
4679						$( '.btn-close[tabindex="1"]' ).focus();
4680						e.preventDefault();
4681					}
4682				});
4683				$(this).find('.title[tabindex="2"]' ).keydown(function(e) {
4684					var keyCode = e.keyCode || e.which; 
4685					if ( keyCode == 9 ) {
4686						$( '.template-popup-content .btn-close[tabindex="1"]' ).focus();
4687						e.preventDefault();
4688					}
4689				});
4690				$(this).find('.btn-close').keydown(function(e) {
4691					var keyCode = e.keyCode || e.which; 
4692					if ( keyCode == 9 ) {
4693						if(e.shiftKey) {
4694							if ($(this).closest('.template-popup-content').find('.title').length > 0) {
4695								$(this).closest('.template-popup-content').find('.title').focus();
4696							} else {
4697								$(this).closest('.template-popup-content').find('a').last().focus();
4698							}
4699
4700							e.preventDefault();
4701						}
4702					}
4703				});
4704			})
4705			$('ul.mobile .follow-us a').last().keydown(function(e) {
4706				if ($('body').hasClass('show-mobile-menu')) {
4707					var keyCode = e.keyCode || e.which; 
4708					if ( keyCode == 9 && !e.shiftKey ) {
4709						$( '.logo a' ).focus();
4710						e.preventDefault();
4711					}
4712				}
4713			});
4714			$('.logo a').keydown(function(e) {
4715				if ($('body').hasClass('show-mobile-menu')) {
4716					var keyCode = e.keyCode || e.which;
4717					if ( keyCode == 9 && e.shiftKey ) {
4718						$('ul.mobile .follow-us a').last().focus();
4719						e.preventDefault();
4720					}
4721				}
4722			});
4723		});
4724		
4725	/**
4726	* Runtime Renderer
4727	*/
4728		$(window).resize( Runtime.render );
4729		$(window).scroll( Runtime.windowScroll );
4730		$(window).on("keydown", function(e)
4731		{
4732			if ( e.target == document.body )
4733			{
4734				switch ( e.keyCode )
4735				{
4736					case KEY_SPACEBAR : 
4737					case KEY_ARROW_UP :
4738					case KEY_ARROW_DOWN :
4739						return false;
4740				}
4741			}
4742			
4743		});
4744    $(document).focusin(function(e) {
4745      if ($('body').hasClass('show-mobile-menu')) {
4746      	e.preventDefault();
4747        if (!e.target) {
4748          $("header a").first().focus();
4749        } else if ($(e.target).is($(document).find('a:visible').last()[0])) {
4750          $("header a").last().focus();
4751        } else if (e.target && !$(e.target).parents('header').length) {
4752          $("header a").first().focus();
4753        }
4754      }
4755      if ($('body').hasClass('show-header-search')) {
4756      	e.preventDefault();
4757        if (!e.target) {
4758          $(".top-search-container .btn-back").focus();
4759        } else if ($(e.target).is($(document).find('a:visible').last()[0])) {
4760          $(".top-search-container .multiple-select-panel").find("input[type='submit']").focus();
4761        } else if (e.target && !$(e.target).parents('.top-search-container').length) {
4762          $(".top-search-container .btn-back").focus();
4763        }
4764      }
4765      if ($('.template-popup-detail-container.shown').length) {
4766      	e.preventDefault();
4767        if (!e.target) {
4768          $(".template-popup-detail-container.shown .btn-close").focus();
4769        } else if ($(e.target).is($(document).find('a:visible').last()[0])) {
4770          $(".template-popup-detail-container.shown").find("a, [tabindex]").last().focus();
4771        } else if (e.target && !$(e.target).parents('.template-popup-detail-container.shown').length) {
4772          $(".template-popup-detail-container.shown .btn-close").focus();
4773        }
4774      }
4775    })
4776			
4777		function onYouTubeIframeAPIReady() 
4778		{
4779			if ( Video && Video.init ) Video.init();
4780		}
4781