if(typeof(App) == undefined){ App = function(){} }

App.Map = function (arg){
	this.parent        = arg.parent;
	this.layout_div    = arg.layout_div;
	this.canvas_elem   = arg.canvas_elem;
	this.canvas        = undefined; // GMap2 instance
	this.center_marker = undefined;
	this.shop_icon     = undefined;
	this.do_not_center = undefined; // when displaying map
}

App.Map.prototype.searchInit =
function ( is_new_search ){
	if( this.canvas ){
		this.canvas.clearOverlays();
	}
}

App.Map.prototype.changeSearchResultViewMode =
function ( display ){
	if( display == 'block' ){
		this.layout_div.style.display = 'block';
	}else{
		this.layout_div.style.display = 'none';
	}
}

App.Map.prototype.updateSearchResult =
function ( res ){
	if (GBrowserIsCompatible() == false ||
		this.parent.current_view_mode != 'map'){ return }
	var center_point;
	if(this.canvas == undefined){
		// 地図作成
		this._gmapInit( res );
		var map = this.canvas;
		// 全店舗が入る拡縮サイズを取得
		center_point = this.zoomMap( res );
	}else{
		var map = this.canvas;
		map.clearOverlays();
		var marker = this.center_marker;
		map.addOverlay( marker );
		center_point = new GLatLng( res.map.center.Latitude,
			res.map.center.Longitude );
		marker.setPoint( center_point );
	}

	if( this.do_not_center ){
		this.do_not_center = undefined;
	}else{
		this.canvas.setCenter( center_point );
	}
	this._addShopOverlay( res.shop );
	this._updateResultShopList( res.shop );
	this._makePager( res );
}

App.Map.prototype.zoomMap =
function ( res ){
	var map = this.canvas;
	if( map == undefined ){ return }
	var bounds = new GLatLngBounds();
	var cll = new GLatLng( res.map.center.Latitude,
		res.map.center.Longitude );
	bounds.extend( cll );
	for(var i=0; i<res.shop.length; i++){
		var s = res.shop[i];
		var ll = new GLatLng( s.Latitude, s.Longitude );
		bounds.extend( ll );
	}
	var level = map.getBoundsZoomLevel( bounds );
	map.setZoom( level );
	return bounds.getCenter();
}

App.Map.prototype._updateResultShopList =
function ( shops ){
	var html = '<table style="width:100%">';
	for (var i=0; i< shops.length; i++){
		var s = shops[ i ];
		var letter = String.fromCharCode("A".charCodeAt(0) + i);

		html += '<tr><td rowspan="2"><img src="' + s.PictureUrl.MbSmallImg + '" alt=""/></td><td class="keep_item"><p><a class="move-to" href="javascript:void(0)" onclick="myApp.search_recent.shop[' + i + '].marker.no_pan_on_close=1;GEvent.trigger(myApp.search_recent.shop[' + i + '].marker,\'click\')">' + letter + '</a>[' + s.GenreName + '] ' + s.GenreCatch + '</p><p style="clear:left"><strong>' + s.ShopName + '</strong> - ' + s.StationName + '</p></td></tr>';

		html += '<tr><td class="keep_item" valign="bottom"><p style="text-align:right" id="map-list-add-kouho-' + i + '">'
		if(this.parent.kouho_check_hash[ s.ShopIdFront ]){
			html += '<span style="color:#EA8C00">[追加済み]</span>';
		}else{
			html += '<input type="button" onclick="myApp.addToKouhoList(' + i + ')" value="≫候補リストに追加" style="font-size:0.8em"/>';
		}
		html += '</p></td></tr><tr><td colspan="2" style="height:10px"></td></tr>';
	}
	html += '</table></div>';
	$('map-result-list').innerHTML = html;
}

App.Map.prototype._makePager =
function ( res ){
	var pager_html = this.parent._makePager( res.pager );
	var html1 = '<div style="font-size:0.9em;margin-bottom:20px">';
	var html2 = '<p style="margin-bottom:5px;margin-top:0"><strong style="font-size:1em">' + res.pager.total_items + '</strong> 件見つかりました:</p>'
	var html3 = '</div>';

	var top_pager = html1 + html2 + pager_html + html3;
	var bottom_pager = html1 + pager_html + html3;
	$('map-pager').innerHTML = top_pager;
	$('map-pager-bottom').innerHTML = bottom_pager;
}

App.Map.prototype._gmapInit =
function ( res ){
	if(this.canvas != undefined){ return }
	var map = new GMap2( this.canvas_elem );
	map.addControl( new GLargeMapControl() );
	map.addControl( new GMapTypeControl() );
	var center_icon = new GIcon();
	center_icon.image = "http://labs.google.com/ridefinder/images/mm_20_green.png";
	center_icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	center_icon.iconSize   = new GSize(12, 20);
	center_icon.shadowSize = new GSize(22, 20);
	center_icon.iconAnchor = new GPoint(6, 20);
	center_icon.infoWindowAnchor = new GPoint(5, 1);
	var cll = new GLatLng( res.map.center.Latitude,
		res.map.center.Longitude );
	map.setCenter( cll, 13 );
	var marker = new GMarker(cll, center_icon);
	map.addOverlay( marker );

	var shop_base_icon = new GIcon();
	shop_base_icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	shop_base_icon.iconSize   = new GSize(20, 34);
	shop_base_icon.shadowSize = new GSize(37, 34);
	shop_base_icon.iconAnchor = new GPoint(9, 34);
	shop_base_icon.infoWindowAnchor = new GPoint(9, 2);
	shop_base_icon.infoShadowAnchor = new GPoint(18, 25);

	this.canvas = map;
	this.center_marker = marker;
	this.shop_icon = shop_base_icon;
}

App.Map.prototype._addShopOverlay =
function ( shops ){
	for (var i=0; i<shops.length; i++){
		var s = shops[i];
		var letter = String.fromCharCode("A".charCodeAt(0) + i);
		var icon = new GIcon( this.shop_icon );
		icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
		var ll = new GLatLng( s.Latitude, s.Longitude );
		var marker = new GMarker(ll, icon);

		marker.letter = letter;
		// for later GEvent(marker,'click')
		s.marker = marker;
		// for marker to marker navigation
		if(i == 0){
			if(shops.length == 1){
				s.index_next = i;
				s.index_prev = i;
			}else{
				s.index_next = i+1;
				s.index_prev = shops.length - 1;
			}
		}else if(i == shops.length - 1){
			s.index_next = 0;
			s.index_prev = i-1;
		}else{
			s.index_next = i+1;
			s.index_prev = i-1;
		}

		marker = this._addShopFukidashi( marker, s, i );
		this.canvas.addOverlay( marker );
	}
}

App.Map.prototype._addShopFukidashi =
function ( marker, shop, i ){
	var _instance = this;
	GEvent.addListener(marker, 'click', function (){
		_instance.canvas.savePosition();
		marker.openInfoWindowHtml(
			_instance._makeShopInfoHtml( shop, i )
		);
	});
	GEvent.addListener(marker, 'infowindowclose', function (){
		if( marker.no_pan_on_close ){
			marker.no_pan_on_close = undefined;
			return;
		}
		_instance.canvas.returnToSavedPosition();
	});
	return marker;
}

App.Map.prototype._makeShopInfoHtml =
function ( s, i ){
	var html = '<table style="width:350px;font-size:0.9em;margin-bottom:10px">'

	html += '<tr><td colspan="2"><span style="display:block;padding:10px;background:#880000;color:#FFF;float:left;margin-right:5px">' + s.marker.letter + '</span><h4 style="border:none">[' + s.GenreName + '] ' + s.ShopCatch + '</h4></td></tr>';

	html += '<tr><td><img src="' + s.PictureUrl.MbSmallImg + '" alt=""/><p style="font-size:0.5em;color:#999;margin:0;margin-top:2px;padding:0">※写真提供：ホットペッパー.jp</p></td><td class="result_item"><p>' + s.GenreCatch + '</p><p style="font-size:1.0em"><strong>' + s.ShopName + '</strong></p><p style="margin-top:10px;font-size:1.0em">' + s.BudgetAverage + ' / ' + s.Capacity + '席</p><p style="margin-top:10px">' + s.StationName + ': ' + s.KtaiAccess + '</p><p>' + this.parent._makeOptionText(s) + '</p><p>' + s.Open + '</p><p><a href="' + s.ShopUrl + '" target="_blank"><strong>詳細はこちら</strong></a></p><p style="text-align:right;font-size:1em;margin-top:10px" id="map-add-kouho-' + i + '">';

	if(this.parent.kouho_check_hash[ s.ShopIdFront ]){
		html += '<span style="color:#EA8C00">[追加済み]</span>';
	}else{
		html += '<input type="button" onclick="myApp.addToKouhoList(\'' + i + '\')" value="候補リストに追加≫" />';
	}
	html += '</p></td></tr>';
	html += '</table>';
	html += '<p style="font-size:0.8em;font-weight:bold"><a href="javascript:void(0)" onclick="myApp.search_recent.shop[' + s.index_prev + '].marker.no_pan_on_close=1;GEvent.trigger(myApp.search_recent.shop[' + s.index_prev + '].marker,\'click\')">≪前の店</a>　<a href="javascript:void(0)" onclick="myApp.search_recent.shop[' + s.index_next + '].marker.no_pan_on_close=1;GEvent.trigger(myApp.search_recent.shop[' + s.index_next + '].marker,\'click\')">次の店≫</a>　';
	html += '<a href="javascript:void(0)" onclick="myApp.search_recent.shop[' + i + '].marker.no_pan_on_close=1;myApp.map.do_not_center=1;myApp.do_not_pan_to_anchor=1;myApp.doSearchLatLon(' + s.Latitude + ',' + s.Longitude + ')">この店の近くで再検索</a></p>';
	html += '<br style="clear:both"/>';
	return html;
}

App.Map.prototype.addToKouhoList_postHook =
function (i){
	var html = '<span style="color:#EA8C00;font-size:1em">[追加されました]</span>';
	if($('map-add-kouho-' + i)){
		$('map-add-kouho-' + i).innerHTML = html;
	}
	if($('map-list-add-kouho-' + i)){
		$('map-list-add-kouho-' + i).innerHTML = html;
	}
}

App.Map.prototype.updateKouhoListHtml =
function (html){
	$('map-kouho-list').innerHTML = html;
}

App.Map.prototype.setLoadingImage =
function (html){
	$('map-result-list').innerHTML =
		'<p style="height:50px"><img src="image/ajax_load_gray.gif" \/> searching...</p>';
	$('map-pager').innerHTML = '';
	$('map-pager-bottom').innerHTML = '';
}

App.Map.prototype.displayError =
function ( errmsg ){
	$('map-result-list').innerHTML =
		'<p style="color:#880000">' + errmsg + '</p>';
}