var map = null;
var markers = new Array();

function load(cid,x,y,z) {
	if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
	    map.addControl(new GSmallMapControl());
	    map.addControl(new GMapTypeControl());
		map.addControl(new GOverviewMapControl(new GSize(150,100)),new GControlPosition(G_ANCHOR_BOTTOM_RIGHT,new GSize(0,0)));
		
		if(x){
			point_x = x;
			point_y = y;
			point_z = z;
		}else{
			point_x = 127.68432855606079;
			point_y = 26.215028654781662;
			var point_z = 17;
		}
		
		

		map.setCenter(new GLatLng(point_y, point_x),point_z,G_NORMAL_MAP);
		
		move(cid);
		
		GEvent.addListener(map, "moveend", function() {
			move(cid);
		});
	}else{
		alert("お使いのブラウザは、Google Maps に対応しておりません。");
	}
}

function move(cid){
	
	var cObj = map.getCenter();
	
	point_x = cObj.x;
	point_y = cObj.y;
	zoom =map.getZoom();
	
	addMarkerMove(cid);
}

function addMarkerMove(cid) {
	
	var Bounds = map.getBounds();
	var minX = Bounds.getNorthEast().lat();
	var minY = Bounds.getNorthEast().lng();
	var maxX = Bounds.getSouthWest().lat();
	var maxY = Bounds.getSouthWest().lng();
	
	var request = GXmlHttp.create();
	
	request.open('GET','/map_marker.php?cid='+cid+'&minX='+minX+'&minY='+minY+'&maxX='+maxX+'&maxY='+maxY, true);
	
	
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
		
			var html = request.responseText;
			if(html != ""){
				var lines = html.split("\n");
				var inner_html = "";
				
				for(var i=0;i<lines.length;i++){
					var line = lines[i];
					
					if(line != ""){
						
						var prms = line.split(",");
						var marker = addMarker(prms[0],prms[1],prms[3],prms[4],prms[5],prms[6],prms[7],prms[8]);
						
						if(cid == ""){
							inner_html += "";
							inner_html += "<div class='marker_item'>";
							inner_html += "<div class='item_list_img'><a href='javascript:popupMarker("+prms[3]+")'><img src=\"/_img/"+prms[3]+"_"+prms[6]+"_88."+prms[7]+"\" width=\"72\" /></a></div><div class='item_list_title'><a href='javascript:popupMarker("+prms[3]+")'><img src=\"/_ico/ico_"+prms[5]+".gif\" width=\"16\" /> " + prms[4] + "</a></div>";
							inner_html += "</div>";
							var marker_list = document.getElementById("marker_list");
							marker_list.innerHTML = inner_html;
						}
						

					}
				}

			}
		}
	}
	request.send(null);
	
	if(cid == ""){
	
		//国際通りフォトギャラリーをマーキング
		var requestPhoto = GXmlHttp.create();
		requestPhoto.open('GET','/map_marker.php?mode=photo&minX='+minX+'&minY='+minY+'&maxX='+maxX+'&maxY='+maxY, true);
		requestPhoto.onreadystatechange = function() {
			if (requestPhoto.readyState == 4) {
			
				var html = requestPhoto.responseText;
				if(html != ""){
					var lines = html.split("\n");
					var inner_html = "";
					for(var i=0;i<lines.length;i++){
						var line = lines[i];
						
						if(line != ""){
							var prms = line.split(",");
							var marker = addMarkerPhoto(prms[0],prms[1],prms[3],prms[4],prms[5]);
						}
					}
				}
			}
		}
		requestPhoto.send(null);
	}
}

function addMarker(lat,lng,id,name,category_id,image_id,ext,gbody) {
	
	var markerIcon = new GIcon();
	
	markerIcon.iconSize = new GSize(21,24);
	markerIcon.iconAnchor = new GPoint(14, 22);
	markerIcon.infoWindowAnchor = new GPoint(10, 5);
	markerIcon.infoShadowAnchor = new GPoint(18, 24);
	markerIcon.image = '/_ico/ico_' + category_id +'.gif';
	
	var point = new GLatLng(lat, lng);
	var marker = new GMarker(point,markerIcon);
	
	GEvent.addListener(marker, "click", function() {
		info_html  = "";
		info_html = infoHtml(id,name,category_id,image_id,ext,gbody);
		marker.openInfoWindowHtml(info_html);
	});
	map.addOverlay(marker);
	return marker;
}

function addMarkerPhoto(lat,lng,id,ext,gbody) {
	
	var markerIcon = new GIcon();

	markerIcon.image = '/thumbnai_photo.php?pid='+ id +'&ext='+ext;
	markerIcon.iconSize = new GSize(30,23);
	markerIcon.iconAnchor = new GPoint(14, 22);
	markerIcon.iconShadoAnchor = new GPoint(18, 24);
	markerIcon.infoWindowAnchor=new GPoint(18,10);
	
	var point = new GLatLng(lat, lng);
	var marker = new GMarker(point,markerIcon);
	
	GEvent.addListener(marker, "click", function() {
		var opt = {maxWidth:150};
		info_html  = "";
		info_html = infoHtmlPhoto(id,ext,gbody);
		marker.openInfoWindowHtml(info_html,opt);
	});
	map.addOverlay(marker);
	return marker;
	
}


function popupMarker(id){
	marker = markers[id];

	var html = "";
	var request = GXmlHttp.create();
	request.open('GET', "/map_marker.php?gid="+id, true);

	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			html = request.responseText;
			if(html != ""){
				
				var prms = html.split(",");
				var marker = addMarker(prms[0],prms[1],prms[3],prms[4],prms[5],prms[6],prms[7],prms[8]);
			
				info_html  = "";


				info_html = infoHtml(prms[3],prms[4],prms[5],prms[6],prms[7],prms[8]);
				marker.openInfoWindowHtml(info_html);
				
			}
		}
	}
	request.send(null);
}

function infoHtmlPhoto(id,ext,gbody){
	
	info_html  = "";
	info_html += "<div class='marker_info_photo' style='width:145px;'>";
	info_html += "<a href='/photo/?pid="+ id +"'><img src='/_photo/"+ id +"_140."+ ext +"' alt='+gbody+' width='140' height='111' /></a><p><a href='/photo/?pid="+ id +"'>" + gbody + "</a></p>";
	info_html += "</div>";

	return info_html;
}

function infoHtml(id,name,category_id,image_id,ext,gbody){
	
	var dir = categoryDir(category_id);
	
	info_html += "<div class='marker_info_img'>";
	if(location.href.match(/chatan/)){
		info_html += "<a href='/chatan"+ dir +"shop.php?sid="+ id +"'><img src='/_img/"+ id +"_"+ image_id +"_88."+ ext +"' alt='"+name+"' width='88' height='69' /></a>";
	}else{
		info_html += "<a href='"+ dir +"shop.php?sid="+ id +"'><img src='/_img/"+ id +"_"+ image_id +"_88."+ ext +"' alt='"+name+"' width='88' height='69' /></a>";
	}
	info_html += "</div>";
	
	if(location.href.match(/chatan/)){
		info_html += "<div class='marker_info_title'><p><a href='/chatan"+ dir +"shop.php?sid="+ id +"'>" + name + "</a></p>";
	}else{
		info_html += "<div class='marker_info_title'><p><a href='"+ dir +"shop.php?sid="+ id +"'>" + name + "</a></p>";
	}
	
	
	
	
	info_html += gbody;
	info_html += "</div>";
	info_html += "</div>";

	return info_html;
}
