var opt = {
	scrollRanges:30,	// 地図スクロールで再検索する移動量(Default: 30)
	decimal:8,			// 緯度経度パラメータで採用する小数点桁数(Default: 8)
	timeOutMS:5000		// WebAPI呼び出し時のタイムアウトミリ秒(Default: 5000)
};
var iconIDs = ["uniqlo_store", "uniqlo_store_gray"];
var poiInfoData = new Object();

UNIQLO = {
	map:null,
	withinService: null,
	poibuilder: null,

	init: function(){
		var self = this;
		
		// 初期値を取得
		self.pdata = initVal;
		
		// 地図生成
		self.map = new MMap(document.getElementById("map"));
		self.map.centerMarkHide();
		self.map.centerAndZoom( new MPoint(self.pdata.lon, self.pdata.lat),7);
		self.map.addControl(cnt = new MLargeMapControl());
		// スケールルーラーを表示
         var scl = new MScaleControl();
         self.map.addControl(scl, new MControlPosition(M_ANCHOR_BOTTOM_RIGHT, 5, 5));
		
		// ☆ボタンの動きを追加(デフォルトでは動きなし)
		cnt.zc.onmousedown=function(){
			self.map.smoveToRPoint(new MPoint(self.pdata.lon,self.pdata.lat));
		};
		
		// 表示されているマップの範囲を求める
		//var bounds;
		var bounds = self.map.getBoundsLatLng();
		document.getElementById("tenpo_minnl").value = bounds["minY"];
		document.getElementById("tenpo_minel").value = bounds["minX"];
		document.getElementById("tenpo_maxnl").value = bounds["maxY"];
		document.getElementById("tenpo_maxel").value = bounds["maxX"];
		
		// イベント登録
		MEvent.addListener(self.map, "moveend", function(){searchPoi();});
		MEvent.addListener(self.map, "zoom", function(){searchPoi();});
		MEvent.addListener(self.map, "click", function(overlay,rpoint){self.map.panToLatLng(rpoint)});
		
		// PoiWithin インスタンス生成
		self.withinService = self.withinService || MAPION.jsmf.service.FactoryGetter.getFactory("BlockPoiWithin").createWithForm(document.forms["PoiWithin"],opt)
		.filter(function(data){
			// 既存のPOIを削除
			if(UNIQLO.tenpo_pb) UNIQLO.tenpo_pb.resetPoi();
			
			// アイコン設定
			var pois = data.poi;
			if(pois.length > 0){
				for(var i=0; i<pois.length; i++){
					pois[i].pos = new MPoint(pois[i].longitude, pois[i].latitude);
					
					// POI情報をセット
					if(self.pdata.poi == pois[i].id){
						poiInfoData = pois[i];
					}
					
					// 通常アイコン
					if(pois){
						if(pois[i].id == self.pdata.poi){
							iconName = iconIDs[0];
						}else{
							iconName = iconIDs[1];
						}
					}
					pois[i].icon_width = 40;
					pois[i].icon_height = 40;
					pois[i].icon_src = "http://fr.mapion.co.jp/map_icons/bm/"+iconName+".png";
					pois[i].iconAnchor = new MPoint(parseInt(pois[i].icon_width) / 2, parseInt(pois[i].icon_height) / 2);
				}
			}

			// POIBuilderクラスのインスタンス生成
			self.tenpo_pb = new MAPION.jsmf.viewcontrol.POIBuilder({
				"map": self.map,
				"ie": "UTF-8",
				"oe": "UTF-8",
				"iconTemplate": self.template.icon,
				"listItemTemplate": self.template.listItem		// リスト出力がない場合でも設定が必要
			})
			self.tenpo_pb.build(pois).show();
		})
		
		.catchError(function(e){
			alert(e.toString());
		})
		.fire();
	}
}

/**
 * PoiDataの再検索
 */
function searchPoi(){
	var zoom = UNIQLO.map.getZoomLevel();
	if(zoom >1){
		// 表示されているマップの範囲を求める
		var bounds = UNIQLO.map.getBoundsLatLng();
		document.getElementById("tenpo_minnl").value = bounds.minY;
		document.getElementById("tenpo_minel").value = bounds.minX;
		document.getElementById("tenpo_maxnl").value = bounds.maxY;
		document.getElementById("tenpo_maxel").value = bounds.maxX;
		
		// 現在のZoomLevelを取得
		document.getElementById("tenpo_scl").value = zoom;
		printScl = zoom+1;
		
		// 現在の緯度経度を設定
		var currentNlEl = UNIQLO.map.getCenterLatLng();
		document.getElementById("tenpo_nl").value = currentNlEl.y;
		document.getElementById("tenpo_el").value = currentNlEl.x;
		
		UNIQLO.withinService.fire();
	}else{
		// 既存のPOIを削除
		if(UNIQLO.tenpo_pb) UNIQLO.tenpo_pb.resetPoi();
	}
}

UNIQLO.template = {
	icon: '<div>'+
				'<div class="iconTemplateClose">'+
			'<a href="javascript:void(0);" onclick="" style="text-decoration:none;">'+
				'#$ if( data.pois.length > 1) { $#'+
				'<img src="$(icon_src)" height="$(icon_height)" width="$(icon_width)" style="border-style:none;">'+
				'#$ } else{$#'+
				'<img src="$(icon_src)" height="$(icon_height)" width="$(icon_width)" style="border-style:none;">'+
				'#$ } $#'+
			'</a>'+
		'</div>'+
		
		'<div class="iconTemplateMouseover" onmouseover="">'+
		'<table cellpadding="0" cellspacing="0" style="background-color:#ffffff;border:1px solid #999999;">'+
			'<tr>'+
				'<td align="left">'+
				'<a href="/map/uc/PoiInfo?grp=uniqlo&oe=UTF-8&ie=UTF-8&vo=mbml&poi_code=$(id)" onclick="" onmouseover="$(FUNC.scrollListFunc)" style="text-decoration:none;">'+
					'<img src="$(icon_src)" height="$(icon_height)" width="$(icon_width)" style="border-style:none;">'+
				'</a>'+
				'</td>'+
				'<td nowrap="nowrap" style="font-size:12px;padding-right: 5px;padding-left:3px;background-color:#EFEFEF;">'+
					'<a style="text-decoration:none;color:C90030;" onmouseover="this.style.color=\'#C90030\';'+
					(!MBrowser.opera?'this.style.textDecoration=\'underline\';':'') +'$(FUNC.scrollListFunc)" onmouseout="this.style.color=\'#C90030\';'+
					(!MBrowser.opera?'this.style.textDecoration=\'none\'':'')+'" href="/map/uc/PoiInfo?grp=uniqlo&oe=UTF-8&vo=mbml&poi_code=$(id)">'+
					'$(name)'+
					'</a>'+
				'</td>'+
			'</tr>'+
		'</table>'+
		"</div>",

		
	listItem: '<div></div>'
}