Event.observe(window, 'load', function(event) { ramen_load() }, false);


var ramenURL = "http://www.ramen-road.net";							//ドキュメントルート
var defzoom    = 5;												//デフォルトズーム
var deflat     = 36.79573727239849; 							//デフォルト緯度
var deflng     = 138.22736263275146; 							//デフォルト経度
var defRamenDivId = 'box_gmap_shop'; 							//選択店舗表示ID
var defGetXmlDataUrl = ramenURL + "/search/get_markers/";		//マーカー座標
var defCakeAjaxUrl1  = ramenURL + "/search/detail/"; 			//個別表示用cakePHP
var defCakeAjaxUrl2  = ramenURL + "/search/get_ramen_info/"; 	//吹き出しデータ取得URL
var defCakeAjaxUrl3  = ramenURL + "/search/get_ramen_list/"; 	//店舗一覧データ取得URL

var map;
var ramens = new Object;
var ramen_markers = new Array;

var icon = new GIcon();
icon.image = "http://www.ramen-road.net/images/common/gmap_pin.png";
icon.iconSize = new GSize(25.0, 31.0);
icon.iconAnchor = new GPoint(12.5, 31.0);
icon.infoWindowAnchor = new GPoint(12.0, 15.0);

//ローディング
function setWaiting(divId) { 
    var divObj = $(divId); 
	Element.update(divObj, "<div width='616' height='200' align='center' valign='middle'><img src='http://www.ramen-road.net/images/common/loading.gif' /></div>");
}

//Google Maps API 呼出
function ramen_load() { 
    if (GBrowserIsCompatible()) { 
        map = new GMap2(document.getElementById("area_map")); 
        map.setCenter(new GLatLng(deflat, deflng), defzoom); 
		map.addControl(new GLargeMapControl()); 
		map.addControl(new GMapTypeControl()); 
		
		//イベント登録
		GEvent.addListener(map, 'dragend', DisplayMarkers);
		GEvent.addListener(map, 'zoomend', DisplayMarkers);
		map.enableContinuousZoom();
		map.enableScrollWheelZoom();
		
		//マーカー描画
		DisplayMarkers();
    } 
}

//マーカー描画
function DisplayMarkers() {
	if ($F('price_min') != "" && $F('price_max') != "") {
		var smallnum 	= Number($F('price_min'));
		var bignum 		= Number($F('price_max'));
		if (smallnum > bignum) {
			alert("値段の条件を変更して下さい。");
			return;
		}
	}
	
    //表示範囲を取得
    var dispParams = getRect();

    //xml呼び出しURLの整形
    var params = Form.serialize('form1');
    var callUrl = defGetXmlDataUrl + dispParams + '?' + params;
    
    //xmlを呼び出しマーカーに追加
    GDownloadUrl(callUrl, function(data, responseCode) {
    	
    	//マーカーを削除
		map.clearOverlays();
        var xml = GXml.parse(data);
        var markers = xml.documentElement.getElementsByTagName("base_info");
        for (var i = 0; i < markers.length; i++) {
            var point = new GLatLng(parseFloat(markers[i].getAttribute("latitude")),parseFloat(markers[i].getAttribute("longitude")));
	    	var shop_id = markers[i].getAttribute('id');
            map.addOverlay(createRamenMarker(point, shop_id));
        }
    });
}

//URLパラメータの生成
function getRect() {
    var cObj   = map.getBounds();
    var center = cObj.getCenter();
    var span   = cObj.toSpan();
    var dispParams    = center.y + '/' + center.x + '/' + span.y + '/' + span.x;
    return dispParams;
}

//マーカー生成
function createRamenMarker(point, shop_id) {
    var marker = new GMarker(point, icon);
    GEvent.addListener(marker, 'click', function(){
        display(shop_id);
    });
    ramens["ramen_" + shop_id] = marker;
    ramen_markers.push(marker);
    return marker;
}

//マーカクリック時アクション
function display (shop_id) { 
    setWaiting(defRamenDivId); 
    new Ajax.Updater(defRamenDivId, defCakeAjaxUrl1 + shop_id, {method: 'get', onComplete: function(request) {}}); 
}