var map;
var marker;
addrs = new Array();
images = new Array();
urls = new Array();
ids = new Array();
xs = new Array();
ys = new Array();
prices = new Array();
var disp=0;
var prefid=0;
var p_reid='';
var order=0;

function initialize()
{
	var pfid = getCookie('pfid');
	var xy = getCookie('xy');
        if (GBrowserIsCompatible()) {
                map = new GMap2(document.getElementById("map_canvas"));
                map.addControl(new TextualZoomControl());
                map.addControl(new GMapTypeControl());
		map.addControl(new GScaleControl());

                var x = 140;
                var y = 38;
                map.setCenter(new GLatLng(y, x), 5);

                var cx = 0;
                var cy = 0;
                GEvent.addListener(map, "moveend", function() {
                        var zoom = map.getZoom() - 5;
                        var dx = 25.26 / Math.pow(2 , zoom) / 4;
                        var dy = 17 / Math.pow(2 , zoom) / 4;
                        point = map.getCenter();
                        if (Math.abs(point.x - cx) > dx || Math.abs(point.y - cy) > dy){
                                if (!disp){
                                        dispData();
                                }
                        }
                        cx = point.x;
                        cy = point.y;
                        disp = 0;
                });
        }
	if (xy){
       		var sdata = xy.split("-");
        	var latlng = new GLatLng(sdata[1],sdata[0]);
        	map.setCenter(latlng, 10);
       		var str = '<span class=text12>直前に見た温泉&nbsp;<a href="onsen_detail.php?id='+sdata[2]+'">[詳細]</a></span>';
               	map.openInfoWindowHtml(latlng, str);
	}
	else if (pfid){
        	document.getElementById('prefid').selectedIndex = pfid;
		dispPref();
	}
	else{
        	document.getElementById('prefid').selectedIndex = 0;
		document.getElementById('no_prefid').style.display = 'block';	
	}
}

function dispPref()
{
	document.getElementById('no_prefid').style.display = 'none';
        var str = document.getElementById('prefid').value;
	if (str == 0){
        	map.setCenter(new GLatLng(38, 140), 5);
		return;
	}
        var sdata = str.split("-");
        prefid = sdata[2];
        var zoom = map.getZoom();
        //if (zoom < 5){
                zoom = 10;
        //}
        map.setCenter(new GLatLng(sdata[1], sdata[0]), zoom);
}

function dispData()
{
        map.clearOverlays();
        point = map.getCenter();
        zoom = map.getZoom();
        if (!prefid){
                document.getElementById('prefid').selectedIndex = 0;
        }
        var target_url = '/travel/api/get_onsen.php?zoom='+zoom+'&x='+point.x+'&y='+point.y+'&prefid='+prefid+'&order='+order;
        var funcRef = function(text_data){
                var places = text_data.split("\n");
                var infolist = "";
                for(var i=0; i<places.length; i++){
                        if (!places[i]){
                                continue;
                        }
                        var sdata = places[i].split("\t");
                        var rank = i + 1;
                        ids[i]    = sdata[0];
                        xs[i]     = sdata[1];
                        ys[i]     = sdata[2];
                        prices[i] = sdata[3];
                        addrs[i]  = sdata[4];
                        urls[i]   = sdata[5];
                        images[i] = sdata[6];
                        map.addOverlay(createMarker(i), 0);
                        infolist += '<div id='+sdata[0]+'>' + rank + '.' + '<a href="javascript:void(0);" onclick="dispMarker('+i+');selectLine(\''+ sdata[0] +'\');">'+ sdata[4]+'</a></div>';
		}
                document.getElementById('infolist').innerHTML = infolist;
        }
        httpRequest(target_url, funcRef);
        prefid = 0;
}

function dispMarker(i)
{
        createMarker(i, 1);
}

function createMarker(i, not_init)
{
        var latlng = new GLatLng(ys[i], xs[i]);
	var height = '';
	if (images[i]){
		height = 'width:220px;height:150px;';
	}
        var str = '<div style="'+height+'"><span class=text12>' + addrs[i] + '<a href="onsen_detail.php?id='+ids[i]+'">[詳細]';
	if (images[i]){
		str += '<br /><img src="'+images[i]+'" width=100>';
	}
	str += '</a></span></div>';

        if (not_init){
                map.openInfoWindowHtml(latlng, str);
                return;
        }

	var price = prices[i];
        var color = '#0000FF';
        if (price > 4.5){
                color = '#ff0000';
        }
        else if (price > 4){
                color = '#ff7300';
        }
        else if (price > 3.5){
                color = '#ffff00';
        }
        else if (price > 3){
                color = '#00ff00';
        }
        else if (price > 2.5){
                color = '#228B22';
        }
        else if (price > 2){
                color = '#00FFFF';
        }

        var newIcon = MapIconMaker.createMarkerIcon({width: 32, height: 32, primaryColor: color});
        var marker = new GMarker(latlng, {icon: newIcon});

        GEvent.addListener(marker,"click", function() {
		selectLine(ids[i]);
                map.openInfoWindowHtml(latlng, str);
        });
        return marker;
}

function selectLine(reid)
{
	var key = reid;
        var obj = document.getElementById(key);
       	obj.style.background = '#ffcccc';
        if (p_reid){
        	key = p_reid;
                obj = document.getElementById(key);
		if (obj){
                	obj.style.background = '#ffffff';
		}
	}
	p_reid=reid;
}

function setOrder()
{
        if (!order){
                document.getElementById("hpr").style.background = "#fff";
                document.getElementById("lpr").style.background = "#fcc";
                order = 1;
        }
        else{
                document.getElementById("hpr").style.background = "#fcc";
                document.getElementById("lpr").style.background = "#fff";
                order = 0;
        }
	dispData();
}