var mode = 0;			// 0:表示モード、1:投稿モード
var gLocalSearch;
var input;
var gMap;
var mapEventHandler;
var markerBuf;

/////////////////////////////////////////////////////////////////////
// ■Google jax Feed API用初期設定
/////////////////////////////////////////////////////////////////////
// feeds API v1の読み込み
google.load("feeds", "1");

// Feed読み込み時のコールバック関数
function feedInit() {
	// ライブドアのRSSフィードの読み込み
	var feed = new google.feeds.Feed("http://weather.livedoor.com/forecast/rss/index.xml");

	// 主要14箇所+PR2個分のエントリーを取得
	feed.setNumEntries(14+2);

	feed.load(function(result) {
		if (!result.error) {
			// body部の"feed_or_console_pane"の部分に結果を埋め込む
			var container = document.getElementById("feed_or_console_pane");

			var titleComment = "<a href='http://weather.livedoor.com/weather_hacks/'>■livedoor 天気情報</a>"
			var titleDay = "";
			var titleContents = "";
			for (var i = 0; i < result.feed.entries.length; i++) {
				var entry = result.feed.entries[i];
				// "[ PR ]"で始まるエントリーは削除
				if( entry.title.substring(0, 6) == "[ PR ]" ){
					continue;
				}
				// "[ 今日の天気 ] "という文字列の削除
				entry.title = entry.title.replace("[ 今日の天気 ]", "" );
				titles = entry.title.split(" - ");

				titleDay = titles[3]
				titleContents += "<p><a href='" + entry.link + "'>●" + titles[0] + "</a><br />" + titles[1] + "<br />" + titles[2] + "</p>";
			}

			container.innerHTML = "<table id='console_sub'><tr class='console_title'><td>" + titleComment + "<br />" + titleDay + "のお天気</td></tr><tr class='console_content'><td>" + titleContents + "</td></tr></table>";
		}
	});
}

// Feed読み込み時のコールバック関数の指定
google.setOnLoadCallback(feedInit);

/////////////////////////////////////////////////////////////////////
// ■Google Maps API用初期設定
/////////////////////////////////////////////////////////////////////
// マーカ生成関数
function createMarker(point, name) {
	var marker = new GMarker(point);
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(name);
	});

	return marker;
}

/////////////////////////////////////////////////////////////////////
// ■Google Ajax Feed API用初期設定
/////////////////////////////////////////////////////////////////////
// ローカルサーチが実行されたときに呼び出されるコールバック関数
function OnLocalSearch() {
	if (!gLocalSearch.results){
		alert(input.value + " は見つかりませんでした。別なキーワードでもう一度検索して下さい。");
		return;
	}

	var first = gLocalSearch.results[0];

	if (first==null){
		alert(input.value + " は見つかりませんでした。別なキーワードでもう一度検索して下さい。");
		return;
	}

	var searchedLatLng = new GLatLng(parseFloat(first.lat), parseFloat(first.lng));
	gMap.setCenter(searchedLatLng, gMap.getZoom());
}

// 「移動」ボタンが押されたときに呼び出される関数
function CaptureForm(form) {
	// ローカルサーチの実行
	gLocalSearch.execute(form["query"].value);
	return false;
}

/////////////////////////////////////////////////////////////////////
// ■ページ表示時に呼び出される関数
/////////////////////////////////////////////////////////////////////
function load() {
	if (GBrowserIsCompatible()) {
		// GMap2オブジェクトの生成
		gMap = new GMap2( $("map_pane") );

		// 各種コントロールの追加
		gMap.addControl(new GLargeMapControl());
		gMap.addControl(new GMapTypeControl());
		gMap.addControl(new GOverviewMapControl());
		gMap.addControl(new GScaleControl());

		// なめらかズーム
		gMap.enableContinuousZoom();
		// ダブルクリックズーム
		gMap.enableDoubleClickZoom();

		// 地図の初期位置の座標
		var lat = 35.68121314194681;
		var lng = 139.76707935333252;
		if(google.loader.ClientLocation != null){
			lat = google.loader.ClientLocation.latitude;
			lng = google.loader.ClientLocation.longitude;
		}

		// 初期位置へ移動
		var centerPoint = new GLatLng(lat, lng);
		gMap.setCenter(centerPoint, 9);

		// Search API関連設定
		input = document.getElementById("query");
		input.focus();

		gLocalSearch = new GlocalSearch();
		gLocalSearch.setCenterPoint(gMap);
		gLocalSearch.setSearchCompleteCallback(null, OnLocalSearch);
	}

	// 起動時のモードは"表示モード"
	displayMode();

	$('manual_content').innerHTML = 
		  '<span class="manual_title">■お天気速報掲示板とは？</span>' + '<br />'
		+ '　お天気速報掲示板とは、各地のお天気の情報をリアルタイムにシェアするサービスです。' + '<br />'
		+ '　例えば台風が近づいているときに、「ただいま横浜で大雨が振り出しました。」という情報が投稿されれば、東京の人はこれを見て「降り出す前に早く帰ろう。」って感じで使うことができます。' + '<br />'
		+ '' + '<br />'
		+ '<span class="manual_title">■使い方</span>' + '<br />'
		+ '　使い方はいたって簡単。' + '<br />'
		+ '　起動時は表示モードになっており、各地で投稿された情報がGoogleマップと掲示板形式で見ることができます。' + '<br />'
		+ '　お天気の情報を投稿したいときには、上部「■表示モード」と書かれた部分の右にある[投稿モードに変更]ボタンを押すと、投稿モードに切り替わり、投稿者名・場所・状況(お天気の様子)を入力することができます。' + '<br />'
		+ '　最後に[投稿]ボタンを押せば完了です。' + '<br />'
		+ '' + '<br />'
		+ '<span class="manual_title">■注意</span>' + '<br />'
		+ '　「表示モード」のお天気情報は過去一週間分の投稿のみ表示されます。' + '<br />'
		;

	$('author').innerHTML = "Produced by <a href='http://nyanjiro.net/'>INUYAMA Nyanjiro</a>.";
}

/////////////////////////////////////////////////////////////////////
// ■その他
/////////////////////////////////////////////////////////////////////
// モード切替ボタン押下時
function changeMode(){
	if( mode == 0 ){
		mode = 1;

		// 右ペインを投稿モード用コンソールに書き換える
		postMode();
	}
	else{
		mode = 0;

		// 右ペインを表示モード用フィードリストに書き換える
		displayMode();
	}
}

// 表示モード時の画面表示
function displayMode(){
	// 地図の初期化
	gMap.clearOverlays();

	// モードペインの描画
	$('mode_pane').innerHTML = '■表示モード　　<input id="mode_button" type="button" value="投稿モードに変更" onClick="changeMode()"/>';

	// フィードorコンソールペインの描画
	feedInit();
	
	// 投稿レポートデータ取得
	var msg = "";
	new Ajax.Request(
		'postReport.php',
		{
			method: 'get',
			onComplete: getResponse,
			onFailure: getError,
			parameters: msg,
			requestHeaders: ['If-Modified-Since','Wed, 15 Nov 1995 00:00:00 GMT']
		}
	);

	// 投稿成功時のコールバック関数
	function getResponse( req ){
		writeData( req );
	}

	// 投稿失敗時のコールバック関数
	function getError( req ){
		alert( req.responseText );
	}

	GEvent.clearInstanceListeners( gMap );
}

// 投稿モード時の画面表示
function postMode(){
	// 地図の初期化
	gMap.clearOverlays();

	// モードペインの描画
	$('mode_pane').innerHTML = '■投稿モード　　<input id="mode_button" type="button" value="表示モードに変更" onClick="changeMode()"/>';

	// フィードorコンソールペインの描画
	var buf = "";

	buf += '<table>';
	buf += '<tr class="console_title">';
	buf += '<td>';
	buf += '■投稿メニュー';
	buf += '</td>';
	buf += '</tr>';
	buf += '<tr class="console_content">';
	buf += '<td>';
	buf += '●投稿者(16文字以内)' + '<br />';
	buf += '<input type="text" name="name" id="csl_name" size="18" value="通りすがり"/>さん';
	buf += '</td>';
	buf += '</tr>';
	buf += '<tr class="console_content">';
	buf += '<td>';
	buf += '●場所(左の地図をクリック)' + '<br />';
	buf += '緯度：<input type="text" class="disabledtext" disabled="true" name="lat" id="csl_lat" size="15" />' + '<br />';
	buf += '経度：<input type="text" class="disabledtext" disabled="true" name="lng" id="csl_lng" size="15" />' + '<br />';
	buf += '</td>';
	buf += '</tr>';
	buf += '<tr class="console_content">';
	buf += '<td>';
	buf += '●状況(256文字以内)' + '<br />';
	buf += '<textarea name="report" id="csl_report" rows="4"></textarea>' + '<br />';
	buf += '</td>';
	buf += '</tr>';
	buf += '<tr class="console_content">';
	buf += '<td>';
	buf += '<input type="button" name="post" id="csl_post" value="投稿" onClick="postReport()">';
	buf += '</td>';
	buf += '</tr>';

	$("feed_or_console_pane").innerHTML = buf;

	// マップクリック時のイベントハンドラの指定(画面クリック時のコールバック関数)
	mapEventHandler = GEvent.addListener( 
		gMap,
		'click',
		function mapClickedEvent(marker, clickedPoint){
			if( markerBuf && !marker ){
				gMap.removeOverlay( markerBuf );
			}

			var msg = "";
			msg += "●投稿者：" + "<br />";
			msg += $('csl_name').value + " さん<br />";
			msg += "●状況：" + "<br />";
			msg += $('csl_report').value + "<br />";
			gMap.addOverlay( markerBuf = createMarker( clickedPoint, msg ) );

			$('csl_lat').value = clickedPoint.y.toString().substring(0,9);
			$('csl_lng').value = clickedPoint.x.toString().substring(0,9);
		}
	);
}

// 投稿ボタン押下時
function postReport(){
	// パラメータチェック
	if( $('csl_name').value.length == 0 ){
		alert('投稿者名を入力してください。');
		return;
	}
	if( $('csl_name').value.length > 16 ){
		alert('投稿者名は16文字以内で入力してください。');
		return;
	}
	if( $('csl_lat').value.length == 0 ){
		alert('地図をクリックして座標を入力してください。');
		return;
	}
	if( $('csl_lng').value.length == 0 ){
		alert('地図をクリックして座標を入力してください。');
		return;
	}
	if( $('csl_report').value.length == 0 ){
		alert('状況を入力してください。');
		return;
	}
	if( $('csl_report').value.length > 256 ){
		alert('投稿者名は256文字以内で入力してください。');
		return;
	}

	// postパラメータの生成
	var msg = "";
	msg += "user_name=" + encodeURIComponent( $('csl_name').value );
	msg += "&latitude=" + encodeURIComponent( $('csl_lat').value );
	msg += "&longitude=" + encodeURIComponent( $('csl_lng').value );
	msg += "&report=" + encodeURIComponent( $('csl_report').value );

	// 投稿
	new Ajax.Request(
		'postReport.php',
		{
			method: 'post',
			onComplete: getResponse,
			onFailure: getError,
			parameters: msg,
			requestHeaders: ['If-Modified-Since','Wed, 15 Nov 1995 00:00:00 GMT']
		}
	);

	// 投稿成功時のコールバック関数
	function getResponse( req ){
		// 表示モードに切り替える
		changeMode();
	}

	// 投稿失敗時のコールバック関数
	function getError( req ){
		alert( "投稿処理に失敗しました。" );
		return;
	}
}

// マップの移動
function moveMap(lat, lng){
	gMap.panTo(new GLatLng(lat, lng));
}

// 地図とレポートペインにデータを書き込む
function writeData( req ){
	// レスポンスをJavascriptの変数へ変換
	eval( "var result = " + req.responseText );

	// 初期化
	gMap.clearOverlays();
	$('report_pane').innerHTML = "";

	if( result.length == 0 ){
		// レポートペインの描画
		$('report_pane').innerHTML = '現在投稿がありません。<br />投稿モードから投稿しちゃって下さい。<br />';

		return;
	}

	for( var i=0; i<result.length; i++ ){
		// 座標の取得
		var point = new GLatLng( result[i].latitude, result[i].longitude );

		// 投稿レポートの取得
		var msg = "";
		msg += "<span class='data_title'>●投稿時間：</span>";
		msg += result[i].post_time + "<br />";
		msg += "<span class='data_title'>●投稿者：</span>";
		msg += result[i].user_name + " さん<br />";
		msg += "<span class='data_title'>●状況：</span><br />";
		msg += result[i].report + "<br />";

		// 地図にマーカの書き込み
		gMap.addOverlay( createMarker( point, msg ) );

		msg += '<br /><a href="#main" onClick="moveMap(' + point.y.toString() + "," + point.x.toString() + ')">地図上の場所</a>';

		// レポートペインに書き込み
		$('report_pane').innerHTML += msg + "<hr />";
	}
}