//TODO: remove if IE no problem
////if ($.browser.msie) {
//	var v = parseInt($.browser.version, 10);
//	if (v <= 8) {
//		delete JSON;
//	}
//}


/*
$(document).on('mobileinit', function() {
	'use strict';

	$.mobile.ajaxEnabled = false;
	$.mobile.hashListeningEnabled = false;
	$.mobile.linkBindingEnabled = false;
});
*/
$(document).ready(function() {
	slideShow = $('.slideShow').slideShow({
		transition: {
			mode: 'fade',
			speed: 3000
		},
		interval: 7.0,
		slideSize: {
			width: '100%',
			height: '100%'
		}
	});
});

//$(function() {
$(document).on('pageinit', function() {
	'use strict';

	var defaultNiceScrollOptions = {
		cursorcolor: '#666666',
		cursorwidth: '15px',
		cursorborder: '0px solid #fff',
		cursorborderradius: '1px'
	};

	var pop_up_selector = '#partner_pop_up, #site_map_pop_up, #about_us_pop_up, #contact_us_pop_up, #work_pop_up, #reference_pop_up, #history_pop_up, #service_pyro_pop_up, #service_close_pop_up, #service_aerial_pop_up, #service_multimedia_pop_up, #service_water_pop_up, #service_waterscreen_pop_up, #service_watercurtin_pop_up, #service_fogscreen_pop_up, #service_light_pop_up, #service_laser_pop_up, #service_projection_pop_up, #service_fire_pop_up, #service_filmtvsfx_pop_up, #service_explosion_pop_up, #service_stage_pop_up, #service_stunt_pop_up, #service_logistics_pop_up, #service_trading_pop_up, #service_professionalproducts_pop_up, #service_pyrotechnics_pop_up, #service_santai_pop_up, #follow_us_pop_up';
	$(pop_up_selector).hide();

	$('.one-menu-button').hide();
	setTimeout(function() {
//		$('.initial-logo').fadeOut(1000, function() {
			// roll out menu buttons animation
			var i = 0;
			$('.one-menu-button').each(function() {
				var $this = $(this),
					time = 600;
				setTimeout(function() {
					$this.effect('slide', {}, time);
				}, time * i);
				i++;
			});
//			setTimeout(function() {
//				var i = 0;
//				$('.one-menu-button').each(function() {
//					i++;
//					$(this).effect('slide', {}, 1000 * i);
//				});
//			}, 2000);
//		});
	}, 1);

	function getInputLocationHashs(input) {
		var hashs;
		if (input && input.length && input.length > 0) {
			hashs = input.split(',', 2);
		}
		return hashs;
	}

	function getLocationHashs() {
		return getInputLocationHashs(location.hash);
	}

	// v scroll
	function pageVScrollUp() {
		pageVScrollDirection('up');
	}

	function pageVScrollDown() {
		pageVScrollDirection('down');
	}

	function pageVScrollDirection(direction) {
		var from = $('.v-page-current'),
			nextPage;
		switch (direction) {
			case 'up':
			nextPage = from.prev();
			break;
			case 'down':
			nextPage = from.next();
			break;
		}
		pageVScroll({
			nextPage: nextPage
		});
	}

	var isPageVScrolling = false;
	function pageVScroll(options) {
		var currentPage = $('.v-page-current'),
			nextPage = options.nextPage;
		if (nextPage) {
			var id = nextPage.attr('id');
			if (id) {
				if (!isPageVScrolling) {
					isPageVScrolling = true;
					var top = $('#' + id).offset().top;
					$('html, body').animate({
						scrollTop: top
					}, {
						duration: 600,
						complete: function() {
							currentPage.removeClass('v-page-current');
							nextPage.addClass('v-page-current');
							var hashs = getLocationHashs();
							if (hashs) {
								var hash1 = hashs[0];
								location.hash = hash1 + ',' + id;
							} else {
								location.hash = '#' + id;
							}
							updateNiceScrollPosition();
							isPageVScrolling = false;
						}
					});
				}
			}
		}
	}

	// h scroll
	/*function pageHScrollLeft() {
		pageHScrollDirection('left');
	}

	function pageHScrollRight() {
		pageHScrollDirection('right');
	}

	function pageHScrollDirection(direction) {
		var currentPage = $('.h-page-current'),
			nextPage;
		switch (direction) {
			case 'left':
			nextPage = currentPage.prev();
			break;
			case 'right':
			nextPage = currentPage.next();
			break;
		}
		$(pop_up_selector).fadeOut({
				duration: 'fast',
				complete: function() {
					pageHScroll({
						nextPage: nextPage
					});
				}
		});
	}*/

	var isPageHScrolling = false;
	function pageHScroll(options) {
		var currentPage = $('.h-page-current'),
			currentPageIndex = currentPage.index('.h-page'),
			nextPage = options.nextPage,
			nextPageIndex = nextPage.index('.h-page');
		if (nextPage.length == 1 && !nextPage.hasClass('h-page-current')) {
			var id = nextPage.attr('id');
			if (id) {
				if (!isPageHScrolling) {
					isPageHScrolling = true;
					var container = $('<div></div>');
					container.css({
						overflow: 'hidden',
						position: 'absolute',
						top: 0,
						left: 0,
						width: 0,
						height: '100%',
						zIndex:2
					});

					nextPage.css({
						width: $(window).width()
					});
					container.insertAfter(nextPage);
					nextPage.appendTo(container);

//					if (nextPageIndex > currentPageIndex) {
//						container.css({
//							right: 0,
//							left: 'auto'
//						});
//						nextPage.css({
//							right: 0,
//							left: 'auto'
//						});
//					} else {
						nextPage.css({
							left: 0
						});
//					}

					var startScroll = function() {
						container.animate({
							width:$(window).width()
						}, {
							duration: 800,
							easing: 'easeInOutExpo',
							complete: function() {
								var height = currentPage.height();
								currentPage.removeClass('h-page-current').attr('style','').height(height);
								nextPage.addClass('h-page-current').attr('style','').height(height).insertAfter(container);
								container.remove();
								location.hash = '#' + id;
								updateNiceScrollPosition();
								isPageHScrolling = false;
							}
						});
					}

					var vCurrentPage = $('.v-page-current'),
						vCurrentPageId = vCurrentPage.attr('id'),
						top = vCurrentPageId ? $('#' + vCurrentPageId).offset().top : 0;
					if (top != 0) {
						$('html, body').animate({
							scrollTop: 0
						}, {
							duration: 200,
							complete: function() {
								vCurrentPage.removeClass('v-page-current');
								startScroll();
							}
						});
					} else {
						vCurrentPage.removeClass('v-page-current');
						startScroll();
					}
				}
			}
		}
	}

	// mouse event
	$('.v-page').on('mousewheel', function(e, delta) {
		var direction = delta > 0 ? 'up' : 'down';
		pageVScrollDirection(direction);
		return false;
	}).on('swipeup', function() {
		pageVScrollDown();
	}).on('swipedown', function() {
		pageVScrollUp();
	});

	$('.h-page').on('swipeleft', function() {
		pageHScrollRight();
	}).on('swiperight', function() {
		pageHScrollLeft();
	});

	// keyboard event
	$(document).keydown(function(e) {
		var direction,
			code = e.keyCode ? e.keyCode : e.which,
			focused = $(document.activeElement);
		if (focused.length > 0) {
			var nodeName = focused.prop('nodeName');
			nodeName = nodeName.toLowerCase();
			var nodeNames = ['input', 'textarea'],
				index = $.inArray(nodeName, nodeNames);
			if (index != -1) {
				return;
			}
		}
		switch (code) {
			case 37: // arrow left
				e.preventDefault();
				direction = 'left';
				break;
			case 39: // arrow right
				e.preventDefault();
				direction = 'right';
				break;
			case 33: // page up
			case 38: // arrow up
				e.preventDefault();
				direction = 'up';
				break;
			case 34: // page down
			case 40: // arrow down
			case 32: // space
				e.preventDefault();
				direction = 'down';
				break;
		}
		switch (direction) {
			case 'left':
				pageHScrollLeft();
				break;
			case 'right':
				pageHScrollRight();
				break;
			case 'up':
				pageVScrollUp();
				break;
			case 'down':
				pageVScrollDown();
				break;
		}
	});

	// build menu
	var menu = $('#menu');
	$('.h-page').each(function(index, element) {
		var e = $(this);
		if (!e.hasClass('one-invisible')) {
			var title = e.attr('title'),
				id = e.attr('id'),
				src = e.attr('data-menu-img'),
				hoverSrc = e.attr('data-menu-hover-img');
//			$('<li class="dropdown">'+
//					'<a href="#' + id + '" data-toggle="dropdown" class="dropdown-toggle">'+
//						'<img id="menu_' + id + '" alt="' + title + '" title="' + title + '" src="' + src + '" />'+
//					'</a>'+
//				'</li>').appendTo(menu);
			$('#menu_' + id).hover(function(e) {
				if (!$('#' + id).hasClass('h-page-current'))
					$(this).attr('src', hoverSrc);
			}, function(e) {
				if (!$('#' + id).hasClass('h-page-current'))
					$(this).attr('src', src);
			});
		}
	});
	// menu event
	$('#menu a, #bottom_menu a, #site_map a, .one-dropdown-a').on('click', function(e) {
		var returnValue = true;

		var href = $(this).attr('href'),
			index = href.lastIndexOf('#');
		if (index != -1) {
			href = href.substring(index);
		}

		if ($(this).hasClass('one-dropdown-a')) {
			returnValue = true;
		}

		if (href.length <= 1 || $(this).hasClass('one-non-clickable')) {
			returnValue = true;
		} else {
			var index2 = href.indexOf(',');
			if ($(href).hasClass('h-page-current')) {
				setTimeout(function() {
					location.href = href;
				}, 100);
			} else {
				$(pop_up_selector).fadeOut({
					duration: 'fast',
					complete: function() {
						if (index == -1) {
							location.href = href;
						} else if (index2 > index) {
							setTimeout(function() {
								var href2 = href.substring(0, index2);
								pageHScroll({
									nextPage: $(href2)
								});
								setTimeout(function() {
									location.href = href;
								}, 2000);
							}, 100);
						} else {
							setTimeout(function() {
								pageHScroll({
									nextPage: $(href)
								});
							}, 100);
						}
					}
				});
			}
		}

		return returnValue;
	});
	function resetMenuImages() {
		$('.h-page').each(function(index, element) {
			var e = $(this),
				id = e.attr('id'),
				src = e.attr('data-menu-img');
			$('#menu_' + id).attr('src', src);
		});
	}
	function activeMenuImage() {
		var e = $('.h-page-current'),
			id = e.attr('id'),
			src = e.attr('data-menu-active-img');
		$('#menu_' + id).attr('src', src);
	}

	// sub-menu
	$('.sub-menu-button').hover(function(e) {
		$(this).attr('src', 'images/submenu_button_on.png');
		$(this).parents('li').first().find('.sub-menu-title').animate({ opacity: 1 }, { queue: false });
	}, function(e) {
		$(this).attr('src', 'images/submenu_button.png');
		$(this).parents('li').first().find('.sub-menu-title').animate({ opacity: 0 }, { queue: false });
	});
	$('.sub-menu-title').corner('4px');

	// smoothDivScroll
	function updateNiceScrollPosition() {
		$('.news-container').getNiceScroll().resize();
	}

	//work
	$('#work_scroll').on('mouseenter', function() {
		$(this).getNiceScroll().resize();
	}).niceScroll($.extend({}, defaultNiceScrollOptions));

	$('.mosaic-fade').mosaic({
//		animation	:	'slide'
	});

	//$("#popup6").fancybox({ // Apply online
	$("a[target=popup]").fancybox({ // Popup Page
		'transitionIn'		: 'elastic',
		'transitionOut'		: 'elastic',
		/*'autoScale'     	: false,*/
		'type'				: 'iframe',
		'width'				: 730,
		'height'			: 520,
		/*'hideOnOverlayClick': false,
		'centerOnScroll'	: true,*/
		'scrolling'   		: 'auto',
		/*'onClosed':function() {
			$('#footer').show();
		},*/
		'onComplete': function() {
		  //$(document).scrollTop(0);
		  $("#fancybox-wrap").css({'z-index':'10002'});
		  //$('#footer').hide();
	   }
	});

	// news
	$('.news-container').on('mouseenter', function() {
		updateNiceScrollPosition();
	}).niceScroll($.extend({}, defaultNiceScrollOptions));
	//$('.news-date').first().css({ 'text-align': 'center' });
	var smoothDivScrollOptions = {
		hotSpotScrollingStep: 5
	};
	if ($.browser.msie) {
		var v = parseInt($.browser.version, 10);
		if (v <= 8) {
			smoothDivScrollOptions = { };
		}
	}
	$('#news_containers').smoothDivScroll(smoothDivScrollOptions);

	$('.pop-up-left-side, .pop-up-right-side').on('mouseenter', function() {
		$(this).getNiceScroll().resize();
	}).niceScroll($.extend({}, defaultNiceScrollOptions));

	// contact us
	$('#contact_us_form').validate();
	$('#contact_us_submit_button').click(function() {
		var isValid = $('#contact_us_form').valid();
		if (isValid) {
			var data = $('#contact_us_form').serialize();
			$('#contact_us_submit_button').prop('disabled', true);
			$.ajax({
				url: 'contact_us_ajax.php',
				type: 'POST',
				cache: false,
				data: data
			}).always(function() {
				$('#contact_us_submit_button').prop('disabled', false);
			}).fail(function() {
				alert('Network error!');
			}).done(function(data) {
				var response = { };
				try {
					response = $.parseJSON(data);
				} catch (err) {
				}
				var result = response.result,
					isSuccess = false;
				if (!!result && result.length && result.length > 0 && result.toLowerCase() == 'success') {
					isSuccess = true;
				}
				if (!isSuccess) {
					alert('Send contact us information failure, please try again!');
				} else {
					$('#contact_us_form').get(0).reset();
					$('#contact_us_submit_button').prop('disabled', true);
					grecaptcha.reset();
					alert('Send contact us information success.');
				}
			});
		}
	});

	// window event
	$(window).resize(function(e) {
		var height = $(this).height(),
			width = $(this).width(),
			pageHeight = height - $('#footer').height() + 1;
		$('.v-page, .h-page').height(pageHeight);

		if (width > height) {
			$('.home-bg').css({ 'background-size': '100% auto' });
		} else {
			$('.home-bg').css({ 'background-size': 'auto 100%' });
		}

		$('#work_iframe').height(pageHeight);
	}).trigger('resize');

	$(window).hashchange(function() {
		var hashs = getLocationHashs();
		if (hashs) {
			var hash1 = hashs[0];
			if (hashs.length == 1) {
				var id = $(hash1 + '_container').children('.v-page').first().attr('id');
				if (id) {
					//$.mobile.urlHistory.ignoreNextHashChange = true;
					location.hash = hash1 + ',' + id;
				}
			}

			// before change to page-current
			if (hash1 == '#service') {
				$('#service_menu_container').fadeIn({ duration: 600, queue: false });
			} else {
				$('#service_menu_container').hide();
			}

			// special pop up
			var tmpPopUpId = null;
			switch (hash1) {
				case '#partner':
					tmpPopUpId = 'partner_pop_up';
					break;

				case '#site_map':
					tmpPopUpId = 'site_map_pop_up';
					break;

				case '#about_us':
					tmpPopUpId = 'about_us_pop_up';
					break;

				case '#reference':
					tmpPopUpId = 'reference_pop_up';
					break;

				case '#history':
					tmpPopUpId = 'history_pop_up';
					break;

				case '#service_pyro':
					tmpPopUpId = 'service_pyro_pop_up';
					break;

				case '#service_close':
					tmpPopUpId = 'service_close_pop_up';
					break;

				case '#service_aerial':
					tmpPopUpId = 'service_aerial_pop_up';
					break;

				case '#service_multimedia':
					tmpPopUpId = 'service_multimedia_pop_up';
					break;

				case '#service_water':
					tmpPopUpId = 'service_water_pop_up';
					break;

				case '#service_waterscreen':
					tmpPopUpId = 'service_waterscreen_pop_up';
					break;

				case '#service_watercurtin':
					tmpPopUpId = 'service_watercurtin_pop_up';
					break;

				case '#service_fogscreen':
					tmpPopUpId = 'service_fogscreen_pop_up';
					break;

				case '#service_light':
					tmpPopUpId = 'service_light_pop_up';
					break;

				case '#service_laser':
					tmpPopUpId = 'service_laser_pop_up';
					break;

				case '#service_projection':
					tmpPopUpId = 'service_projection_pop_up';
					break;

				case '#service_fire':
					tmpPopUpId = 'service_fire_pop_up';
					break;

				case '#service_filmtvsfx':
					tmpPopUpId = 'service_filmtvsfx_pop_up';
					break;

				case '#service_explosion':
					tmpPopUpId = 'service_explosion_pop_up';
					break;

				case '#service_stage':
					tmpPopUpId = 'service_stage_pop_up';
					break;

				case '#service_stunt':
					tmpPopUpId = 'service_stunt_pop_up';
					break;

				case '#service_logistics':
					tmpPopUpId = 'service_logistics_pop_up';
					break;

				case '#service_trading':
					tmpPopUpId = 'service_trading_pop_up';
					break;

				case '#service_professionalproducts':
					tmpPopUpId = 'service_professionalproducts_pop_up';
					break;

				case '#service_pyrotechnics':
					tmpPopUpId = 'service_pyrotechnics_pop_up';
					break;

				case '#service_santai':
					tmpPopUpId = 'service_santai_pop_up';
					break;

				case '#contact_us':
					tmpPopUpId = 'contact_us_pop_up';
					break;

				case '#follow_us':
					tmpPopUpId = 'follow_us_pop_up';
					break;

				case '#work':
					//todo: resize #work_pop_up height and topmargin for large screens
					//console.log($(window).height());
					if($(window).height()>730){
						//changed to apply style using css
						//$('#work_pop_up').css("height","560px");
						//$('#work_pop_up').css("margin-top","-280px");
						$('#work_pop_up').addClass('workpopup_large');
						$('#work_pop_up').removeClass('workpopup_small');
						//console.log('lar');
					}else{
						//$('#work_pop_up').css("height","370px");
						//$('#work_pop_up').css("margin-top","-220px");
						$('#work_pop_up').addClass('workpopup_small');
						$('#work_pop_up').removeClass('workpopup_large');
						//console.log('sm');
					}
					//console.log('#work', $(window).height());
					tmpPopUpId = 'work_pop_up';
					break;
			}
			if (tmpPopUpId != null) {
				var $tmpPopUp = $('#' + tmpPopUpId);
				$tmpPopUp.fadeIn();
//				if ($tmpPopUp.hasClass('one-invisible')) {
//					$tmpPopUp.show({
//						duration: 1000
//					});
//				} else {
//					$tmpPopUp.show({
//						duration: 400
//					});
//				}
			}

			var currentPage = $(hash1);
			if (!currentPage.hasClass('h-page-current') && currentPage.hasClass('h-page'))
				currentPage.addClass('h-page-current');

			if (hashs.length > 1) {
				var hash2 = hashs[1];
				currentPage = $('#' + hash2);
				if (!currentPage.hasClass('v-page-current') && currentPage.hasClass('v-page')) {
					currentPage.addClass('v-page-current');
					// scroll to current v page
					setTimeout(function() {
						pageVScroll({
							nextPage: currentPage
						});
					}, 100);
				}
			}

			// slide show background
			var isPlaying = false,
					slideShow = $('.slideShow').data('slideShow');
			if (slideShow) {
				isPlaying = slideShow.isPlaying();
			}
			switch (hash1) {
				case '#work':
				case '#service_pyro':
				case '#service_close':
				case '#service_aerial':
				case '#service_multimedia':
				case '#service_water':
				case '#service_waterscreen':
				case '#service_watercurtin':
				case '#service_fogscreen':
				case '#service_light':
				case '#service_laser':
				case '#service_projection':
				case '#service_fire':
				case '#service_filmtvsfx':
				case '#service_explosion':
				case '#service_stage':
				case '#service_stunt':
				case '#service_logistics':
				case '#service_trading':
				case '#service_professionalproducts':
				case '#service_pyrotechnics':
				case '#service_santai':
				case '#news':
					if (isPlaying) {
						slideShow.togglePlayback();
					}
					break;

				default:
					{
						if (slideShow) {
							if (!isPlaying) {
								slideShow.togglePlayback();
							}
						} else {
							slideShow = $('.slideShow').slideShow({
								transition: {
									mode: 'fade',
									speed: 7000
								},
								interval: 3.0,
								slideSize: {
									width: '100%',
									height: '100%'
								}
							});
						}
					}
					break;
			}

			resetMenuImages();
			activeMenuImage();
		}
	});
	if (location.hash) {
		$(window).hashchange();
	} else {
		location.hash = '#home';
	}
});

// swipeup & swipedown
// http://maiagallo.blogspot.hk/2012/12/jquery-mobile-adding-swipe-up-and-swipe.html
(function() {
// initializes touch and scroll events
        var supportTouch = $.support.touch,
                scrollEvent = "touchmove scroll",
                touchStartEvent = supportTouch ? "touchstart" : "mousedown",
                touchStopEvent = supportTouch ? "touchend" : "mouseup",
                touchMoveEvent = supportTouch ? "touchmove" : "mousemove";

 // handles swipeup and swipedown
        $.event.special.swipeupdown = {
            setup: function() {
                var thisObject = this;
                var $this = $(thisObject);

                $this.bind(touchStartEvent, function(event) {
                    var data = event.originalEvent.touches ?
                            event.originalEvent.touches[ 0 ] :
                            event,
                            start = {
                                time: (new Date).getTime(),
                                coords: [ data.pageX, data.pageY ],
                                origin: $(event.target)
                            },
                            stop;

                    function moveHandler(event) {
                        if (!start) {
                            return;
                        }

                        var data = event.originalEvent.touches ?
                                event.originalEvent.touches[ 0 ] :
                                event;
                        stop = {
                            time: (new Date).getTime(),
                            coords: [ data.pageX, data.pageY ]
                        };

                        // prevent scrolling
                        if (Math.abs(start.coords[1] - stop.coords[1]) > 10) {
                            event.preventDefault();
                        }
                    }

                    $this
                            .bind(touchMoveEvent, moveHandler)
                            .one(touchStopEvent, function(event) {
                        $this.unbind(touchMoveEvent, moveHandler);
                        if (start && stop) {
                            if (stop.time - start.time < 1000 &&
                                    Math.abs(start.coords[1] - stop.coords[1]) > 30 &&
                                    Math.abs(start.coords[0] - stop.coords[0]) < 75) {
                                start.origin
                                        .trigger("swipeupdown")
                                        .trigger(start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown");
                            }
                        }
                        start = stop = undefined;
                    });
                });
            }
        };

//Adds the events to the jQuery events special collection
        $.each({
            swipedown: "swipeupdown",
            swipeup: "swipeupdown"
        }, function(event, sourceEvent){
            $.event.special[event] = {
                setup: function(){
                    $(this).bind(sourceEvent, $.noop);
                }
            };
        });

        $('#contact_us_submit_button[disabled]').on('click', function(e){
        	e.preventDefault();
        	alert('Please fill the verification before submit');
        });

        $('#contact_us_submit_button').prop('disabled', true);
    })();

//actions after reCaptcha verification - enable submit button
function verifyCallback(){
	$('#contact_us_submit_button').prop('disabled', false);
}