/* 名前空間を定義 */
var ecblib = ecblib || {};
ecblib.ui = ecblib.ui || {};
/*!
 * UIの表示に関する関数群
 * 
 * @requires module:jquery1.11+
 * @requires module:js.cookie.js
 * @requires module:modernizr-custom.js
 */
(function () {
	/* ローカル用の名前空間 */
	var _ui = ecblib.ui;

	/*!
	 * megamenu ui
	 */
	jQuery(document).ready(function () {
		var megamenuForHover = function () {
			jQuery('.js-animation-megamenu-hover').hover(function () {
				jQuery(this).children('.js-submenu-hover').stop(true).slideDown(200);
				jQuery(this).find('.block-icon-image--angle-up').addClass('block-icon-image--angle-down');
			}, function () {
				jQuery(this).children('.js-submenu-hover').stop(true).slideUp(200);
				jQuery(this).find('.block-icon-image--angle-up').removeClass('block-icon-image--angle-down');
			});
		}();

		var megamenuForClick = function () {
			jQuery('.js-animation-megamenu-click').children('a').on('click', function (e) {
				var $this = jQuery(this);
				jQuery('.js-ani {
					if (!jQuery(this).is($this)) {
						jQuery(this).siblings('.js-submenu-click').stop(true).slideUp(200);
						jQuery(this).find('.block-icon-image--angle-up').removeClass('block-icon-image--angle-down');
					}
				});

				jQuery(this).find('.block-icon-image--angle-up').addClass('block-icon-image--angle-down');
				jQuery(this).siblings('.js-submenu-click').stop(true).slideDown(200);
				return false;
			});
			jQuery(document).on('click touchstart', function (e) {
				if (!jQuery(e.target).closest('.js-animation-megamenu-click').length) {
					jQuery('.js-animation-megamenu-click').children('.js-submenu-click').stop(true).slideUp(200);
				}
			});
		}();
	});

	/*!
	 * 動的なカテゴリを生成するAJAX
	 */
	jQuery(document).ready(function () {
		jQuery('.js-dynamic-category').each(function () {
			var category = jQuery(this).data('category') != undefined ? jQuery(this).data('category') : '';
			jQuery(this).load(ecblib.sys.wwwroot + '/shop/js/category.aspx?category=' + category);
		});
	});

	/*!
	 * 動的なジャンルを生成するAJAX
	 */
	jQuery(document).ready(function () {
		jQuery('.js-dynamic-genre').each(function () {
			var genre = jQuery(this).data('genre') != undefined ? jQuery(this).data('genre') : '';
			jQuery(this).load(ecblib.sys.wwwroot + '/shop/js/genre.aspx?genre=' + genre);
		});
	});

	/*!
	 * カート内件数のバッジ表示
	 */
	jQuery(document).ready(function () {
		_ui.showCartCount();
	});

	_ui.showCartCount = function () {
		if(!jQuery('.js-cart-count').length) return;
		jQuery.ajax({
			url: ecblib.sys.wwwroot + "/shop/js/cart.aspx",
			cache: false,
			dataType: "html",
			success: function (html) {
				var count = jQuery(html).data('count');
				if (!count) {
					jQuery('.js-cart-count').hide();
				} else {
					jQuery('.js-cart-count').text(count)
						.show();
				}
			}
		});
	};

	/*!
	 * アラート表示
	 */
	_ui.alert = function (title, msg, options) {

		jQuery(document.activeElement).blur();

		var template = ecblib.tmpl.ui.ALERT;
		template = ecblib.sys.render(template, { Title: title });

		var defaults = { quit: function () { }, ok: function () { }, width: null, height: null };
		var options = jQuery.extend({}, defaults, options);
		var gloupId = 'stdui-dialog' + getUUID();

		var $obj = jQuery(template);
		var $overlay = jQuery('<div class="modal-overlay-alert" />');

		var action = function () {
			return {
				close: function () {
					$overlay.remove();
					$obj.remove();

					/* 一番最後に開かれたダイアログをアクティブにする */
					jQuery(document).off('keyup.' + gloupId);

					if (jQuery('.js-modal-alert,.js-modal-dialog').last().length > 0) {
						jQuery('.js-modal-alert,.js-modal-dialog').last().addClass('js-active');
					} else {
						/* 背景固定解除 */
						setBackGroundFixed(false);
					}
				}
			};
		}();

		var showDialog = function () {
			/* 他のダイアログはアクティブを削除する */
			jQuery('.js-modal-alert,.js-modal-dialog').removeClass('js-active');

			/* 背景を固定にする */
			setBackGroundFixed(true);

			/* 幅、高さの設定 */
			if (options.width) {
				$obj.css('width', options.width);
			}
			if (options.height) {
				$obj.css('height', options.height);
			}

			$obj.find('.js-modal-body-wrapper').text(msg).html(function () {
				return jQuery(this).text().replace(/\r?\n/g, '<br>');
			});

			$overlay.appendTo('body');
			$obj.appendTo('body');

			var screen = getCenterScreen($obj);
			$obj.css('position', 'absolute')
				.css('top', screen.y + 'px')
				.css('left', screen.x + 'px');
		};

		/* OKボタン押下 */
		$obj.find(':button').on('click', function () {
			options.ok.apply(this, arguments);
			action.close();
		});

		/* ×ボタン、オーバーレイ領域、ESC押下 */
		$obj.find('.js-modal-close').on('click', function () {
			options.quit.apply(this, arguments);
			action.close();
		});
		$overlay.on('click', function () {
			options.quit.apply(this, arguments);
			action.close();
		});
		jQuery(document).on('keyup.' + gloupId, function (e) {
			if ($obj.hasClass("js-active") && e.keyCode === 27) { // etc
				options.quit.apply(this, arguments);
				action.close();
			}
		});

		showDialog();
	};

	/*!
	 * ダイアログ表示
	 * 
	 * モーダル表示(引数はIDを指定)
	 * ecblib.ui.dialog('modal');
	 */
	_ui.dialog = function (id, options) {

		jQuery(document.activeElement).blur();

		var template = ecblib.tmpl.ui.MODAL_DIALOG;

		var defaults = { quit: function () { }, buttons: {}, links: {}, width: null, height: null };
		var options = jQuery.extend({}, defaults, options);
		var gloupId = 'stdui-dialog' + getUUID();
		var $obj = jQuery(template);
		var $overlay = jQuery('<div class="modal-overlay" />');
		var $contents = jQuery("#" + id);

		var action = function () {
			return {
				close: function () {
					$overlay.remove();
					$obj.remove();

					/* 一番最後に開かれたダイアログをアクティブにする */
					jQuery(document).off('keyup.' + gloupId);

					if (jQuery('.js-modal-alert,.js-modal-dialog').last().length > 0) {
						jQuery('.js-modal-alert,.js-modal-dialog').last().addClass('js-active');
					} else {
						/* 背景固定解除 */
						setBackGroundFixed(false);
					}
				}
			};
		}();

		var quitEvent = function () {
			var ret = options.quit.apply(this, [action]);
			if (ret == undefined || ret) {
				action.close();
			}
		};

		var showDialog = function () {
			/* 他のダイアログはアクティブを削除する */
			jQuery('.js-modal-alert,.js-modal-dialog').removeClass('js-active');

			/* 背景を固定にする */
			setBackGroundFixed(true);

			/* 幅、高さの設定 */
			if (options.width) {
				$obj.css('width', options.width);
			}
			if (options.height) {
				$obj.css('height', options.height);
			}

			$obj.find('.js-modal-title').text($contents.data('title'));
			$obj.find('.js-modal-content').append($contents.html());

			$overlay.appendTo('body');
			$obj.appendTo('body');

			var screen = getCenterScreen($obj);
			$obj.css('position', 'absolute')
				.css('top', screen.y + 'px')
				.css('left', screen.x + 'px');

			/* ボタン押下 */
			$obj.find(':button,:submit,:image').on('click', function () {
				if (jQuery(this).attr('name') && options.buttons[jQuery(this).attr("name")]) {
					var ret = options.buttons[jQuery(this).attr("name")].apply(this, [action]);
					if (jQuery(this).attr('type') == 'submit' && (ret == undefined || ret)) {
						$obj.find('form').submit();
					}
					return ret;
				}
			});

			$obj.find('a').on('click', function () {
				if (jQuery(this).attr('name') && options.links[jQuery(this).attr("name")]) {
					return options.links[jQuery(this).attr("name")].apply(this, [action]);
				}
			});


			/* ×ボタン、オーバーレイ領域、ESC押下 */
			$obj.find('.js-modal-close').on('click', function () {
				quitEvent.apply(this, arguments);
			});
			$overlay.on('click', function () {
				quitEvent.apply(this, arguments);
			});
			jQuery(document).on('keyup.' + gloupId, function (e) {
				if ($obj.hasClass("js-active") && e.keyCode === 27) {
					quitEvent.apply(this, arguments);
				}
			});
		};

		showDialog();
	};

	/*!
	 * ヘッダー警告表示
	 */
	_ui.showHeaderWarning = function (contentsHtml, options) {
		var template = ecblib.tmpl.ui.WARNING;
		template = ecblib.sys.render(template, { Contents: contentsHtml });

		var defaults = { quit: function () { } };
		var options = jQuery.extend({}, defaults, options);
		var action = function () {
			return {
				close: function () {
					$obj.slideUp(200);
				}
			};
		}();

		var $obj = jQuery(template);
		$obj.find('.js-header-warning-close').on('click', function () {
			var ret = options.quit.apply(this, [action]);
			if (ret == undefined || ret) {
				action.close();
			}
		});

		$obj.hide();
		$obj.prependTo('body');
		$obj.slideDown(200);

	};

	/*!
	 * ツールチップを表示する
	 */
	_ui.showToolTip = function (jQuerySelector, options) {
		var defaults = { tooltip: '', position: 'top', diptimeSec: 3, classname: 'balloontip' };
		var options = jQuery.extend({}, defaults, options);

		jQuery(jQuerySelector).each(function () {
			var $this = this;
			jQuery($this).showBalloon({
				classname: options.classname,
				contents: options.tooltip,
				position: options.position,
				html: true
			});
			if (options.diptimeSec) {
				setTimeout(function () {
					jQuery($this).hideBalloon();
				}, 1000 * options.diptimeSec);

			}
		});
	};

	/*!
	 * ツールチップを非表示にする
	 */
	_ui.hideToolTip = function (jQuerySelector) {
		jQuery(jQuerySelector).hideBalloon();
	};

	/*!
	 * コンテキストメニューを表示する
	 */
	_ui.showContextMenu = function (jQuerySelector, templateid, options) {
		var defaults = { offsetY: 0, offsetX: 0, links: {} };
		var options = jQuery.extend({}, defaults, options);
		var $template = jQuery(templateid);
		var gloupId = 'stdui-contextmenu' + getUUID();

		var innerContextMenu = function () {
			$offset = jQuery(jQuerySelector).offset();
			$template.find('span').off('click');
			$template.find('span').on('click', function () {
				if (jQuery(this).attr('name') && options.links[jQuery(this).attr("name")]) {
					return options.links[jQuery(this).attr("name")].apply(this, arguments);
				}
			});

			if ($template.is(":hidden")) {
				$template.css('position', 'absolute')
					.css('top', $offset.top + options.offsetY + jQuery(jQuerySelector).outerHeight())
					.css('left', $offset.left + options.offsetX)
					.fadeIn().promise().done(function () {
						jQuery(document).on('click.' + gloupId + ' touchend.' + gloupId, function () {
							$template.fadeOut();
							jQuery(document).off('click.' + gloupId + ' touchend.' + gloupId);
						});
					});
			}
		};

		jQuery(jQuerySelector).each(function () {
			innerContextMenu.apply(this, arguments);
		});

	};

	/*!
	 * ツールチップUI
	 */
	jQuery(document).ready(function () {
		jQuery.balloon.defaults.css = null;
		jQuery('[data-tooltip]').each(function () {

			var tooltip = jQuery(this).data('tooltip').replace(/\r?\n/g, '<br>');
			var position = jQuery(this).data('tooltip-position');
			if (!position) {
				position = 'top';
			}

			jQuery(this).on({
				'focusin': function () {
					jQuery(this).hideBalloon()
						.showBalloon({
							classname: 'balloontip',
							contents: tooltip,
							position: position,
							html: true
						});
				},
				'focusout': function () {
					jQuery(this).hideBalloon();
				}
			});
		});
	});

	/*!
	 * 郵便番号サジェストUI
	 */
	/*  郵便番号検索 */
	var timerId_lookupzip_ = null;
	var zipcache_lookupzip_ = '';
	var timerId_zipcache_ = null;
	_ui.zipcodeSuggest = function (zip, pref, addr, addr2, cnt, offsetX, offsetY) {
		var timerOffset = 300;
		var zip_id = '#' + zip + cnt;
		var pref_id = '#' + pref + cnt;
		var addr_id = '#' + addr + cnt;
		var addr2_id = '#' + addr2 + cnt;
		var defaultXOffset = 0;
		var defaultYOffset = jQuery(zip_id).outerHeight();
		offsetX = offsetX + defaultXOffset;
		offsetY = offsetY + defaultYOffset;
		jQuery(zip_id).bind('keyup paste', function () {
			jQuery('ul.js-ziplist').remove();
			clearTimeout(timerId_zipcache_);
			timerId_zipcache_ = setTimeout(function () {
				if (zipcache_lookupzip_ == jQuery(zip_id).val()) {
					zipcache_lookupzip_ = jQuery(zip_id).val();
					return false;
				}
				zipcache_lookupzip_ = jQuery(zip_id).val();
			}, timerOffset);
			clearTimeout(timerId_lookupzip_);
			timerId_lookupzip_ = setTimeout(function () {
				if (!jQuery(zip_id).val().match(/^[0-9]{3}[\-]{0,1}[0-9]{0,4}$/)) {
					return true;
				}

				jQuery.get('../search/lookupzipjson.aspx', {
					zip: jQuery(zip_id).val(),
					charset: 'UTF-8'
				}, function (data, status) {
					var of = jQuery(zip_id).offset();
					var ul = jQuery('<ul></ul>').addClass('js-ziplist block-ziplist--ziplist-frame dropdown');
					ul.css('position', "absolute");
					ul.css('top', of.top + offsetY);
					ul.css('left', of.left + offsetX);
					var searchCount = 0;
					var tempzip, temppref, tempaddr, tempaddr2;
					jQuery.each(data, function (key, item) {
						searchCount++;
						tempzip = item.zip;
						temppref = item.pref;
						tempaddr = item.addr;
						tempaddr2 = item.addr2;
						var li = jQuery('<li><span>' + key + ' ' + item.pref + ' ' + item.addr + ' ' + item.addr2 + '</span></li>');
						li.bind('click', function () {
							jQuery(zip_id).val(item.zip);
							jQuery(pref_id).val(item.pref);
							jQuery(addr_id).val(item.addr);
							jQuery(addr2_id).val(item.addr2);
							jQuery('ul.js-ziplist').remove();
							jQuery(zip_id).blur();
							jQuery(pref_id).change();
							jQuery(addr_id).focus();
							jQuery(addr2_id).blur().focus();
							return false;
						});
						ul.append(li);
					});
					if ((searchCount == 1) && (zipcache_lookupzip_.replace("-", "").length == 7)) {
						jQuery(zip_id).blur().focus();
						//IMEの入力を確定させた後に値を詰めなおし
						setTimeout(function(){
						jQuery(zip_id).val(tempzip);
						jQuery(pref_id).val(temppref);
						jQuery(addr_id).val(tempaddr);
						jQuery(addr2_id).val(tempaddr2);
						jQuery('ul.js-ziplist').remove();
						jQuery(pref_id).change();
						jQuery(addr_id).focus();
							jQuery(addr2_id).focus();
						}, 0);
						return false;
					} else if (searchCount != 0) {
						jQuery(document.body).append(ul);
					}
				}, 'json');
			}, timerOffset);
		});
	};

	/*!
	 * 非推奨ブラウザ警告表示
	 * @requires module:js.cookie.js
	 * @requires module:modernizr-custom.js
	 */
	jQuery(document).ready(function () {

		/* スマートフォンでは非推奨ブラウザを警告しない */
		if (ecblib.sys.isModeSmartPhone()) return;

		if (Cookies.get("confirmOldbrowserBanner") == "true") {
			return;
		}

		if (isOldIE() || isDetectBrowser()) {
			_ui.showHeaderWarning(ecblib.msg.ui.TOO_OLD_BROWSER, {
				quit: function (act) {
					Cookies.set("confirmOldbrowserBanner", "true", {
						expires: 365,
						path: '/'
					});
				}
			});
		}

		/* IE <= 10の場合、trueが返却される */
		function isOldIE() {
			var userAgent = window.navigator.userAgent.toLowerCase();
			return userAgent.indexOf('msie') >= 0;
		}

		/* 非推奨ブラウザか？ */
		function isDetectBrowser() {

			/* 対象ブラウザ */
			var isTergetBrowser = function () {
				var userAgent = window.navigator.userAgent.toLowerCase();
				if (userAgent.indexOf('msie') >= 0 || userAgent.indexOf('trident') >= 0) {
					return true;
				}
				if (userAgent.indexOf('edge') >= 0) {
					return true;
				}
				if (userAgent.indexOf('firefox') >= 0) {
					return true;
				}
				if (userAgent.indexOf('chrome') >= 0) {
					return true;
				}
				if (userAgent.indexOf('safari') >= 0) {
					return true;
				}
				return false;
			};

			if (!isTergetBrowser()) { return false; }
			if (Modernizr.cssgrid || Modernizr.cssgridlegacy) {
				return false;
			}
			/* 非推奨ブラウザ */
			return true;
		}

	});


	/** private method.... */

	/* センタースクリーン取得 */
	function getCenterScreen($obj) {
		var x = ((jQuery(window).width() - $obj.outerWidth()) / 2) + jQuery(window).scrollLeft();
		var y = ((jQuery(window).height() - $obj.outerHeight()) / 2);
		if (x < 0) x = 0;
		if (y < 0) y = 0;
		return {
			x: x, y: y
		};
	}

	/* ユニークIDを取得する */
	function getUUID() {
		var randam = Math.floor(Math.random() * 1000);
		return randam + new Date().getTime().toString();
	}

	/* 背景を固定する */
	var _currentScrolltop = 0;
	function setBackGroundFixed(isFixed) {
		var $wrapper = jQuery('body').children('.wrapper');
		if (isFixed) {
			if ($wrapper.css('position') === 'fixed') { return; }
			_currentScrolltop = jQuery(window).scrollTop();
			$wrapper.css('position', 'fixed').css({ 'top': -_currentScrolltop });
		} else {
			if ($wrapper.css('position') !== 'fixed') { return; }
			$wrapper.css('position', '');
			jQuery('html, body').prop({ scrollTop: _currentScrolltop });
		}
	}

	/*!
	 * ローディング（読み込み中）イメージ
	 */
	_ui.loadingImage = function () {
		var result = '<div class="block-loading">'
					+ '<div class="block-loading--balls">'
					+ '<span class="block-loading--ball block-loading--ball-1"></span>'
					+ '<span class="block-loading--ball block-loading--ball-2"></span>'
					+ '<span class="block-loading--ball block-loading--ball-3"></span>'
					+ '<span class="block-loading--ball block-loading--ball-4"></span>'
					+ '<span class="block-loading--ball block-loading--ball-5"></span>'
					+ '<span class="block-loading--ball block-loading--ball-6"></span>'
					+ '<span class="block-loading--ball block-loading--ball-7"></span>'
					+ '<span class="block-loading--ball block-loading--ball-8"></span>'
					+ '</div>' 
					+ '</div>';
		return result;
	};

	/*!
	 * ローディング（読み込み中）小サイズ イメージ
	 */
	_ui.loadingImageMin = function () {
		var result = '<div class="block-loading-min">'
					+ '<div class="block-loading-min--balls">'
					+ '<span class="block-loading-min--ball block-loading-min--ball-1"></span>'
					+ '<span class="block-loading-min--ball block-loading-min--ball-2"></span>'
					+ '<span class="block-loading-min--ball block-loading-min--ball-3"></span>'
					+ '<span class="block-loading-min--ball block-loading-min--ball-4"></span>'
					+ '<span class="block-loading-min--ball block-loading-min--ball-5"></span>'
					+ '<span class="block-loading-min--ball block-loading-min--ball-6"></span>'
					+ '<span class="block-loading-min--ball block-loading-min--ball-7"></span>'
					+ '<span class="block-loading-min--ball block-loading-min--ball-8"></span>'
					+ '</div>' 
					+ '</div>';
		return result;
	};

})();