/**
 * Google Maps 工場案内（jQuery Plugin）
 */

(function($) {
	function GMap() {
		this.mapTypeId = google.maps.MapTypeId.ROADMAP;
		this.scrollwheel = false;
		this.mapTypeControl = false;
		this.navigationControl = true;
		this.scaleControl = true;
		this.streetViewControl = true;

		this.factories_ext = null;
		this.map = null;
		this.currentInfoWindow = null;

		this._defaults = {
			zoom: 18,
			lat: 0,
			lng: 0,
			factories: null
		};
	}

	$.extend(GMap.prototype, {
		_attach: function(element) {
			this._target = element;

			/* 工場リスト用配列を生成 */
			this.factories_ext = new Array(this._get("factories").length - 1);
			for (i = 0; i < this._get("factories").length; i++) {
				this.factories_ext[i] = [null, null];
			}

			/* リスト生成 */
			this._createFactoryList();

			/* マップ生成 */
			this._createMap();
		},
		_createFactoryList: function() {		/* リスト生成 */
			var listHTML = "";

			listHTML += "<ol>";
			for (i = 0; i < this._get("factories").length; i++) {
				var factory = this._get("factories")[i];

				if (i == 0) {
					listHTML += "<li class=\"blue\">";
				} else {
					listHTML += "<li>";
				}
				listHTML += "<a href=\"javascript:GMAP.gMap._showInfoWindow(" + i + ");\">" + factory[0] + "</a></li>";
			}
			listHTML += "</ol>";

			this._target.append(listHTML);
		},
		_createMap: function() {
			/* 表示域の生成 */
			mapbox = $("<div id=\"factory_map\"></div>");
			this._target.append(mapbox);

			/* 地図を表示 */
			var mapOptions = {
				zoom: this._get("zoom"),
				mapTypeId: this.mapTypeId,
				center: new google.maps.LatLng(this._get("lat"), this._get("lng")),
				scrollwheel: this.scrollwheel,
				mapTypeControl: this.mapTypeControl,
				navigationControl: this.navigationControl,
				scaleControl: this.scaleControl,
				streetViewControl: true
			};
			this.map = new google.maps.Map(mapbox.get(0), mapOptions);

			/* 工場リストをループ */
			for (i = 0; i < this._get("factories").length; i++) {
				var factory = this._get("factories")[i];

				var centerPos = new google.maps.LatLng(factory[1], factory[2]);

				var icon = null;
				if (i == 0) {
					icon = "http://maps.google.co.jp/mapfiles/ms/icons/blue-dot.png";
				} else {
					icon = "http://maps.google.co.jp/mapfiles/ms/icons/red-dot.png";
				}

				/* 地図にマーカを表示 */
				var markerOptions = {
					title: factory[0],
					position: centerPos,
					map: this.map,
					icon: icon,
					idx: i
				};

				var marker = new google.maps.Marker(markerOptions);

				/* 吹き出しを表示 */
				var infoOptions = {
					position: centerPos,
					content: this._createInfoContent(factory[0], factory[3], factory[4], factory[5])
				};
				var infowindow = new google.maps.InfoWindow(infoOptions);

				/* 変数にオブジェクトを格納 */
				this.factories_ext[i][0] = marker;
				this.factories_ext[i][1] = infowindow;

				/* イベント生成 */
				google.maps.event.addListener(marker, 'click', function() {
					GMAP.gMap._showInfoWindow(this.idx);
				});
			}
		},
		_createInfoContent: function(title, pic, description, link) {		/* 吹き出し用HTMLの生成 */
			var infoHTML = "";
	
			infoHTML += "<div>";
			infoHTML += "<h3 style=\"font-size:120%;font-weight:bold;\">" + title + "</h3>";
			infoHTML += "<table>";
			infoHTML += "<tbody><tr>";
			infoHTML += "<td style=\"vertical-align:top;\"><img src=\"img/" + pic + "\" alt=\"" + title + "\" /></td>";
			infoHTML += "<td style=\"vertical-align:top;padding:0 0 0 10px;\">";
			infoHTML += description;
			if (link) {
				infoHTML += "<div style=\"margin:10px 0 0 0;\"><a href=\"" + link + "\">詳細&nbsp;&gt;&gt;</a></div>";
			}
			infoHTML += "</td>";
			infoHTML += "</tr></tbody>";
			infoHTML += "</table>";
			infoHTML += "</div>";
	
			return infoHTML;
		},
		_showInfoWindow: function(idx) {		/* 吹き出し表示 */
			if (this.currentInfoWindow) {
				this.currentInfoWindow.close();
			}

			var factory_ext = this.factories_ext[idx];
			factory_ext[1].open(this.map, factory_ext[0]);
			this.currentInfoWindow = factory_ext[1];
		},
		_get: function(key) {					/* 設定値の取得 */
			return this._defaults[key];
		}
	});

	$.fn.gMap = function(options) {
		$.extend($.gMap._defaults, options);
		$.gMap._attach(this);

		return this;
	};

	$.gMap = new GMap();
	window.GMAP = $;

})(jQuery);