/**
 * gmap.js
 * @version	1.5.0.1 - 19:03 2009/01/21
 * @author	Toki
 *
 * mark: [
 * 	{
 * 		latlng:		[経度, 緯度] （必須）
 * 		iconsrc:	'カスタムアイコンのパス' （オプション）
 * 		html:		'マーカーをクリックしたときの表示する内容' （オプション）
 * 		id:			'地図をコントロールする要素を作成（要素を作成するコンテナのid名）' （オプション）
 * 		page:		'複数ページで使用する際、それぞれのページで中心位置を変えたいときのbodyのクラス名' （オプション）
 * 	}
 * ]
 *
 * Google Maps API リファレンス - Google Maps API - Google Code
 * http://code.google.com/intl/ja/apis/maps/documentation/reference.html
 */

 Kaas.loadStyleSheet('gmaps');

 Kaas.addEvent(window, 'load', function() {
	
	var b = document.getElementsByTagName('body')[0];
	if (Kaas.hasClassName(b, 'shoplistIndex')) Kaas.setGmaps.init();
	if (Kaas.hasClassName(b, 'company'))  Kaas.setGmaps.init('class');
		
	// Kaas.setGmaps.getGeoCoder('東京都新宿区新宿3-18-1');
	
});


Kaas.setGmaps = {
	
	iconsrc: '../img/gmap_icon.png',
	
	defaultZoom: 16,
	
	infoWindowMaxWidth: 300,
	
	anchorToGMap: '#sectionGmaps',
	
	
	init: function(c) {
		
		var gmaps = document.getElementById('gmaps');
		gmaps.innerHTML = '<div id="gContainer"></div>';
		
		this.gmap = new GMap2(document.getElementById('gContainer'));
		
		/**
		 * 中心位置を設定
		 *
		 * 1. 中心位置を mark の1つ目の位置にセット {Null}
		 * @usage
		 * ----------------------------
		 * Kaas.addEvent(window, 'load', function() {
		 * 	Kaas.setGmaps.init();
		 * });
		 * ----------------------------
		 * var center = this.mark[0].latlng;
		 *
		 * 2. 中心位置を直接入力 {Number}
		 * @usage
		 * ----------------------------
		 * Kaas.addEvent(window, 'load', function() {
		 * 	Kaas.setGmaps.init(34.6800535, 135.1841097);
		 * });
		 * ----------------------------
		 * var center = [arguments[0], arguments[1]];
		 *
		 * 3. 複数ページで使用する際、bodyのクラス名から中心位置を変えたいとき {String}
		 * @see	getCenter()
		 * @usage
		 * ----------------------------
		 * Kaas.addEvent(window, 'load', function() {
		 * 	Kaas.setGmaps.init('c');
		 * });
		 * ----------------------------
		 * var center = this.getCenter();
		 */
		
		var center;
		// 3. 複数ページで使用する際、bodyのクラス名から中心位置を変えたいとき
		if (c == 'class')
			center = this.getCenter();
			
		// 2. 中心位置を直接入力
		else if (typeof c == 'number')
			center = [arguments[0], arguments[1]];
			
		// 1. 中心位置を mark の1つ目の位置にセット
		else
			center = this.mark[0].latlng;
		
		
		// 中心位置を設定
		this.gmap.setCenter(new GLatLng(center[0], center[1]), this.defaultZoom);
		
		
		// コントローラ作成
		this.gmap.addControl(new GMapTypeControl());
		this.gmap.addControl(new GLargeMapControl());
		// this.gmap.addControl(new GSmallMapControl());
		
		// マーカー作成
		for (var i = 0, l = this.mark.length; i < l; i++) {
			
			var marker = this.createGMarker(i);
			this.gmap.addOverlay(marker);
			
			/**
			 * mark[i] に id がある場合、クリックするとセンターを移動するための制御要素を作成
			 * @see onSetCenter()
			 */
			if (this.mark[i].id != undefined) this.onSetCenter(i, marker);
			
		}
		
	},
	
	/**
	 * マーカー作成
	 * @param	i	:	mark のインデックス
	 * @return	{GMarker}
	 */
	createGMarker: function(i) {
		
		var m = this.mark[i];
		// Icon
		var iconsrc = (m.iconsrc != undefined)? m.iconsrc : this.iconsrc;
		var markerOpt = (iconsrc)? { icon: this.createGIcon(iconsrc) } : {};
		
		var marker = new GMarker(new GLatLng(m.latlng[0], m.latlng[1]), markerOpt);
		// infoWindow 幅の指定
		var infoWindowOpt = this.gmap.getInfoWindow();
		infoWindowOpt.maxWidth = this.infoWindowMaxWidth;
		
		if (m.html != undefined) GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(m.html, infoWindowOpt); });
		
		return marker;
		
	},
	
	/**
	 * カスタムアイコン作成
	 * @todo	とりあえず影のパスやサイズ等は固定（変えたい場合はカスタマイズ）
	 * @param	src	:	アイコンのパス
	 * @return	{GIcon}
	 */
	createGIcon: function(src) {
		
		var icon = new GIcon(G_DEFAULT_ICON);
		icon.image = src;
		icon.shadow = '../img/gmap_shadow.png';
		icon.iconSize = new GSize(25, 32);
		icon.shadowSize = new GSize(25, 38);
		icon.iconAnchor = new GPoint(13, 32);
		
		return icon;
		
	},
	
	/**
	 * クリックイベント
	 * マップコントロールのハンドラとなる要素をクリックするとセンターを移動
	 * @param	i		:	mark のインデックス
	 * @param	marker	:	対応するマーカー
	 * @return	{Void}
	 */
	onSetCenter: function(i, marker) {
		
		var m = this.mark[i];
		if (!document.getElementById(m.id)) return;
		
		var g = this.gmap;
		
		var a = this.createCenterControlElement(i);
		a.i = i;
		
		anchor = this.anchorToGMap;
		
		a.onmouseover = function() {
			Kaas.addClass(this, 'handlerOver');
		};
		a.onmouseout = function() {
			Kaas.removeClass(this, 'handlerOver');
		};
		a.onclick = function() {
			
			g.panTo(new GLatLng(m.latlng[0], m.latlng[1]));
			
			
			if (m.html != undefined) {
				var w = this.infoWindowMaxWidth;
				var infoWindowOpt = g.getInfoWindow();
				infoWindowOpt.maxWidth = w;
				var timerId = setTimeout(function() {
					marker.openInfoWindowHtml(m.html, infoWindowOpt);
				}, 300);
			}
			// 
			if (anchor) {
				window.location.href = anchor;
				return false;
			}
			
		};
		
	},
	
	/**
	 * マップコントロールのハンドラとなる要素を作成
	 * @param	i	:	mark のインデックス
	 * @return	{Object}
	 */
	createCenterControlElement: function(i) {
		
		var m = this.mark[i];
		var div = document.createElement('div');
		div.id = m.id + 'Handler';
		div.className = 'handler';
		div.innerHTML = '地図上に表示';
		
		return document.getElementById(m.id).appendChild(div);
		
	},
	
	/**
	 * body の class名と連動させて最初の表示位置を変える時
	 * @return	{Array}
	 */
	getCenter: function() {
		
		var bodyClassNames = document.getElementsByTagName('body')[0].className.split(' ');
		var bodyClassName = bodyClassNames[bodyClassNames.length - 1];
		var m = this.mark;
		
		for (var i = 0, l = m.length; i < l; i++) {
			if (m[i].page == bodyClassName) return m[i].latlng;
		}
		
	},
	
	/**
	 * 緯度・経度をユーザープロンプトで出力
	 * @param	address	:	緯度・経度を調べたい住所
	 * @return	{Void}
	 */
	getGeoCoder: function(address) {
		
		var geocoder = new GClientGeocoder();
		var g = this.gmap;
		
		geocoder.getLatLng(address, function(e) {
			if (e != null) {
				g.panTo(e);
				var str = e.toString().replace(/\(/, '');
				prompt(address, str.replace(/\)/, ''));
			} else {
				alert('指定した住所はありません\n' + address);
			}
		});
		
	},
	
	
	gmap: {}
	
};