// for ie
if (!Array.prototype.find) {
	Array.prototype.find = function (predicate) {
		if (this === null) {
			throw new TypeError('Array.prototype.find called on null or undefined');
		}
		if (typeof predicate !== 'function') {
			throw new TypeError('predicate must be a function');
		}
		var list = Object(this);
		var length = list.length >>> 0;
		var thisArg = arguments[1];
		var value;

		for (var i = 0; i < length; i++) {
			value = list[i];
			if (predicate.call(thisArg, value, i, list)) {
				return value;
			}
		}
		return undefined;
	}
}

$(function(){
	const $document = $(document);
	const shop_id = $('#gmap').data('shop-id');
	const is_shop_detail = !!shop_id;
	const is_home = $('#gmap').data('map-type') === 'home';
	const is_shop_detail_access = $('body').hasClass('access');

	const zoom = 16;

	let _ww = $(window).width();
	let markers = [];
	let info_windows = [];
	let currentId = 0;
	let $storeDetails;
	let shop;


	// data-shop-idの指定があれば（店舗詳細ページ）
	if ( is_shop_detail ) {
		if ( !is_shop_detail_access ) {
			$('#gmap').height(670);
		}

		shop = _branch.find(function(item){
			return item.id === shop_id
		});

		currentId = _branch.indexOf(shop);
	}

	const store_detail_promise = $.ajax({
		url: 'https://zengolf.jp/seec-api/get_top.php',
		dataType: 'html'
	}).done(function (msg){
		$storeDetails = $(msg);
	})

	setTimeout(function(){
		const labelDir = {
			right: new google.maps.Point(18, -22),
			left: new google.maps.Point(-18, -22)
		};

		for ( let i in _branch ) {
			const shop = _branch[i];
			const _id = i;

			const latLng = new google.maps.LatLng(shop.lat, shop.lng);

			// マーカー画像を用意
			// markerWithLabel用
			const markerImg = {
				url: defaultMarkerUrl,
				size: new google.maps.Size(58, 34),
				scaledSize: new google.maps.Size(58, 34),
				origin: new google.maps.Point(0, 0),
				anchor: new google.maps.Point(58/2, 34)
			};
			// infoWindow用
			const iwMarkerImg = {
				url: iwMarkerUrl, // 透過画像
				size: new google.maps.Size(58, 34),
				scaledSize: new google.maps.Size(58, 34),
				origin: new google.maps.Point(0, 0),
				anchor: new google.maps.Point(58/2, 34)
			};

			// マーカーとラベルを設定
			const marker = new MarkerWithLabel({
				position: latLng,
				icon: markerImg,
				clickable: false,
				map: storeMap,
				labelContent: shop.short_name || shop.name,
				labelAnchor: (function(){
					if ( is_shop_detail && shop_id === shop.id ) {
						// labelAnchorは後から変更不可なため、生成時に位置調整
						return new google.maps.Point(30, -38);
					}
					return (shop.label_dir === 'left') ? labelDir.left : labelDir.right;
				}()),
				labelClass: (shop.label_dir === 'left') ? 'index-store__map__shop-name-label index-store__map__shop-name-label--left' : 'index-store__map__shop-name-label',
				labelStyle: { fontSize: 15 },
				// 	animation: google.maps.Animation.BOUNCE
			})

			// クリック用の透過マーカー設定
			// ！ markerWithLabelのピンクリックでInfoWindowが開かなくなっているので、InfoWindow用に標準のマーカーを透過して重ねる
			const iw_marker = new google.maps.Marker({
				position: latLng,
				map: storeMap,
				icon: iwMarkerImg,
				});

			markers.push(marker);

			// 店舗データ読み込み完了後 インフォウィンドウ生成
			store_detail_promise.then(function () {
				const info_window = new google.maps.InfoWindow({
					content: $storeDetails.find('.storeDetail[data-id=' + _id + ']').clone().show().get(0),
				});
				info_windows.push(info_window);

				if (!is_shop_detail) {
					const openCurrentInfoWindow = () => {
						closeAllInfoWindow();

						info_window.open({
							anchor: iw_marker, // 透過マーカーの方をInfoWindowに紐付け
							map: storeMap
						});

						// マップ パン
						storeMap.panTo(new google.maps.LatLng(shop.lat, shop.lng));
						storeMap.panBy(0, -110);

						// マーカー画像変更
						markers[currentId].setIcon({
							url: defaultMarkerUrl,
							size: new google.maps.Size(58, 34),
							scaledSize: new google.maps.Size(58, 34),
						})
						marker.setIcon({
							url: currentMarkerUrl,
							size: new google.maps.Size(58, 34),
							scaledSize: new google.maps.Size(58, 34),
						})

						currentId = markers.indexOf(marker);
					};

					marker.addListener('click', openCurrentInfoWindow) // markerWithLabel = 店名ラベルクリック時
					iw_marker.addListener('click', openCurrentInfoWindow) // デフォルトのgoogleMapマーカー = ピンクリック時
				}
			});

		}

		// init
		if ( is_home ) {

			markers[currentId].setIcon({
				url: currentMarkerUrl,
				size: new google.maps.Size(58, 34),
				scaledSize: new google.maps.Size(58, 34),
			});

			store_detail_promise.then(function () {
				new google.maps.event.trigger(markers[currentId], 'click');
			});

		} else if ( is_shop_detail ) {
			// アイコンを大きく
			markers[currentId].setIcon({
				url: currentMarkerUrl,
				size: new google.maps.Size(93, 55),
				scaledSize: new google.maps.Size(93, 55),
				origin: new google.maps.Point(0, 0),
				anchor: new google.maps.Point(93/2, 53)
			});

			// ラベルのスタイルを変更
			markers[currentId].set('labelClass', 'index-store__map__shop-name-label index-store__map__shop-name-label--current');

			storeMap.setZoom(zoom);
			storeMap.setCenter(new google.maps.LatLng(shop.lat, shop.lng));
			if (!is_shop_detail_access) {
				if (_ww >= 768) {
					storeMap.panBy(_ww * .235, -66 / 2);
				} else {
					storeMap.panBy(0, -66);
				}
			}
		}

	}, 1000);

	// PC
	$document.on('click', '.storelist__select a', function(e){
		e.preventDefault();
		const id = $(this).data('id');
		new google.maps.event.trigger( markers[id], 'click' );
	});

	// SP
	$document.on('change', '.js-store-select', function(){
		const shop_id = $(this).val();
		const selected_shop = _branch.find(function(item){
			const _id = item.name;
			return _id === shop_id;
		});
		const id = _branch.indexOf(selected_shop);

		if ( id !== -1 ) {
			new google.maps.event.trigger( markers[id], 'click' );
		}
	});


	/**
	 * インフォウィンドウを閉じる
	 */
	function closeAllInfoWindow() {
		for ( let i in info_windows ) {
			info_windows[i].close(storeMap);
		}
	}

});