var myGMapObj = null;
var httpObj = undefined;


/**
 * @param DOMelement targDIV
 */
function CreateGMap(targDIV) {

	if (!GBrowserIsCompatible())
	{//マップのロードに失敗しました
		alert("お使いのブラウザでは地図を表示できません");
		return ;
	}

	myGMapObj = new GMap2(targDIV);

	//myGMapObj.addControl(new GMapTypeControl());
	myGMapObj.addControl(new GLargeMapControl());
	// 小さい地図表示
	myGMapObj.addControl(new GOverviewMapControl());

//	myGMapObj.addMapType(G_SATELLITE_3D_MAP);
//	myGMapObj.addControl(new GHierarchicalMapTypeControl());
//	myGMapObj.addControl(new GLargeMapControl());

	// マウスホールズームを有効にする
	myGMapObj.enableScrollWheelZoom();

	return myGMapObj;
}

/**
 * @param string jsonUrl
 * @param JQuery targListDIV
 * @param JQuery targWaitDIV
 * @param JQuery targTotal
 * @param string rankUrl
 * @param JQuery targRankDIV
 */
function RegenerateGMap( jsonUrl, targListDIV, targWaitDIV, targTotal, rankUrl, targRankDIV ) {

	// 二重読み込みを阻止
	var loadingFlag = false;
	var requestUrl = jsonUrl;
	var totalAds = 0;

	var PointDataReload = function () {
		var centerPoint = myGMapObj.getCenter();
		Lat.val(centerPoint.lat());
		Lng.val(centerPoint.lng());

		// 既に読み込み中なら何もしない
		if (loadingFlag) {	return;	}
		loadingFlag = true;
		// リストを読み込み中にする
		targListDIV.empty();
		targWaitDIV.show();

		// 地図に表示されている範囲を求める.
		var latlngBounds = myGMapObj.getBounds();
		var sw = latlngBounds.getSouthWest();
		var ne = latlngBounds.getNorthEast();

		// URLを構築
		var jsonUrlParam = "swlat=" + sw.lat() + "&swlng=" + sw.lng() + "&nelat=" + ne.lat() + "&nelng=" + ne.lng();
		var msec = (new Date()).getTime();
		requestUrl = jsonUrl + "?cache=" + msec + '&' + jsonUrlParam;
		// URL確認のため残しとく
		//targListDIV.text(requestUrl);

		// 求人情報を読み込む
		httpObj = GXmlHttp.create();
		httpObj.open("get", requestUrl);
		httpObj.onreadystatechange = function(){
			if( (httpObj.readyState == 4) && (httpObj.status == 200) ) {
				// 総ヒット数を渡す
				targWaitDIV.hide();
				totalAds = AddAdsMarker( targListDIV );
				targTotal.text(totalAds);
			}

		}
		httpObj.send(null);
		// ランキングHTMLを読み込む
		targRankDIV.load(rankUrl + "?" + jsonUrlParam);

		loadingFlag = false;
	}

	// イベントを登録
	GEvent.clearListeners(myGMapObj,'dragend');
	GEvent.clearListeners(myGMapObj,'zoomend');
	GEvent.addListener(myGMapObj, 'dragend', PointDataReload);
	GEvent.addListener(myGMapObj, 'zoomend', PointDataReload);
	GEvent.addListener(myGMapObj, "infowindowopen", function(){
		loadingFlag = true;
	});
	GEvent.addListener(myGMapObj, "infowindowclose", function(){
		loadingFlag = false;
	});

	PointDataReload();

}

/**
 * マーカーとリストを表示
 * @param JQuery targListDIV
 */
function AddAdsMarker( targListDIV ) {
	eval ("var pointArray =" + httpObj.responseText);
	var totalAds = pointArray.length;

	// マーカーを消す
	myGMapObj.clearOverlays();

	for (var i=0; i<totalAds; i++) {
		var Point = null;
		Point = pointArray[i];

		// マーカーを表示
		var LatLng = new GLatLng(Point['Ad']['lat'], Point['Ad']['lng']);
		//var AdMarker = new GMarker( LatLng );
		var AdMarker = CreateCustomMarker( Point['Ad']['lat'], Point['Ad']['lng'], '../img/map/pin'+Point['Ad']['tip']+'.png', new GSize(19, 25), new GPoint(9, 25) );
		myGMapObj.addOverlay( AdMarker );

		// 情報ウィンドウのHTMLはコントローラで処理済み
		var bubbleMess = Point['bubbleMess'];

		// 一覧を表示
		var listDIV = document.createElement('div');
		var JQListDIV = $(listDIV);
		JQListDIV
			.html(Point['listHtml'])
			.addClass('clearfix')
			.attr('id', 'l'+Point['Ad']['id'])
			.appendTo(targListDIV);

		// マーカークリックのクロージャ
		var closureClick = GEvent.callbackArgs(
			AdMarker,
			function(bubbleMess){
				this.openInfoWindowHtml(bubbleMess);
			},
			bubbleMess
		);
		var closureScroll = GEvent.callbackArgs(
			JQListDIV, // This is a JQuery object
			function(targListDIV){
				this.animate( {backgroundColor: '#E35A5A'}, 'normal' )
					.animate( {backgroundColor: '#FFFFFF'}, 'slow');
				targListDIV.scrollTo( this, {speed: 100} );
			},
			targListDIV // This is a JQuery Object
		);
		var evObj = new Array(AdMarker, JQListDIV);
		var closureMouseover = GEvent.callbackArgs(
			evObj,
			function (bubbleMess, targListDIV) {
				this[0].openInfoWindowHtml(bubbleMess);
				this[1].animate( {backgroundColor: '#E35A5A'}, 'normal' )
					.animate( {backgroundColor: '#FFFFFF'}, 'slow');
				targListDIV.scrollTo( this[1], {speed: 100} );
			},
			bubbleMess, targListDIV
		);

		// マーカークリックイベントを追加
		/*
		GEvent.bind(AdMarker, 'click', closureClick, function(){
			this.apply(arguments);
		});
		GEvent.bind(AdMarker, 'mouseover', closureScroll, function(){
			this.apply(arguments);
		});*/
		GEvent.bind(AdMarker, 'mouseover', closureMouseover, function(){
			this.apply(arguments);
		});
		GEvent.bindDom(JQListDIV.children('a')[0],'mouseover',closureClick,function(){
			this.apply(arguments);
		});

	}

	return totalAds;
}

function CreateCustomMarker (Lat, Lng, Image, Size, Anchor) {

	// アイコン設定
	var customIcon = new GIcon(G_DEFAULT_ICON);
	customIcon.image = Image;
	customIcon.iconSize = Size;
	customIcon.iconAnchor = Anchor;

	return new GMarker(new GLatLng(Lat,Lng),customIcon);

}

/**
 * 開閉メニュー
 * @param JQuery targBtn
 * @param JQuery targElem
 * @param String image_dir_url
 */
function iniOpenCloseMenu (targBtn, targElem, image_dir_url) {
	var openFlag = true;
	targBtn.click(function () {
		if (openFlag == true) {
			targElem.animate(
				{height: "11px"},
				{duration: "fast"}
			);
			$(this).css('background-image', "url('"+image_dir_url+"bg_gmap_search_open.jpg')");
			openFlag = false;
		} else {
			targElem.animate(
				{height: "100px"},
				{duration: "fast"}
			);
			$(this).css('background-image', "url('"+image_dir_url+"bg_gmap_search_close.jpg')");
			openFlag = true;
		}
	}).css('cursor', 'n-resize');

}