// JavaScript Document
var infowindow;
//var map;

	function initialize() {
		//地図初期化
		var initPos = new google.maps.LatLng(toplat, toplng);
		var myOptions = {
			center : initPos,
			zoom : 11,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		map_canvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		 google.maps.event.addListener(map_canvas, 'click', function(event) {
			if(infowindow){
				infowindow.onRemove();
//				infowindow.close();
				hideLayer('layer2');
			}
		  });
                
		//マーカー1,2を作成
		for (i = 0; i < data.length; i++){
			var markerPos = new google.maps.LatLng(data[i].lat,data[i].lng);
			if(samelist){
				if(samelist.contains(data[i].sno)){
					createMarker2(map_canvas, markerPos,data[i].msg,data[i].sno,i,1);
				}else{
					createMarker(map_canvas, markerPos,data[i].msg,data[i].sno,i,1);
				}
			}else{
				createMarker(map_canvas, markerPos,data[i].msg,data[i].sno,i,1);
			}
		}
		for (i = 0; i < recomend_count; i++){
			var markerPos = new google.maps.LatLng(data[i].lat,data[i].lng);
			createMarker(map_canvas, markerPos,data[i].msg,data[i].sno,i,2);
			marker2[i].setMap(null);
		}
	}
		
		
	function createMarker(map, latlng, msg, sno,i,type) {
		if(type==1){
			markerOpts = {
				position : latlng,
				map : map
			};
		}else{
			markerOpts = {
				position : latlng,
				map : map,
				icon: 'http://maps.google.com/mapfiles/kml/pal3/icon21.png'
			};
		}
		if(type ==1){
			marker[i] = new google.maps.Marker(markerOpts);
			google.maps.event.addListener(marker[i], 'click', function() {
				dispLayer('layer1',sno);
			});
			google.maps.event.addListener(marker[i], 'mouseover', function() {
				if(infowindow) infowindow.onRemove();
				dispLayer('layer2',sno);
//				if(infowindow) infowindow.close();
    			infowindow = new InfoBox({latlng: marker[i].getPosition(), map: map, msg:getBaloonInfo(sno)});
			});
//			google.maps.event.addListener(marker[i], 'mouseout', function() {
//				hideLayer('layer2');
//			});
		}else{
			marker2[i] = new google.maps.Marker(markerOpts);
		}
		return marker;
	}


	function createMarker2(map, latlng, msg, sno,i,type) {
		var markerOpts = {
				position : latlng,
				map : map
		};

		if(type==1){
			markerOpts = {
				position : latlng,
				map : map
			};
		}else{
			markerOpts = {
				position : latlng,
				map : map,
				icon: 'http://maps.google.com/mapfiles/kml/pal3/icon21.png'
			};
		}
		if(type ==1){

//			var contentString = getSameInfo(sno);
//				infowindow = new google.maps.InfoWindow({
//				content: contentString,
//				disableAutoPan : true
//			});
			marker[i] = new google.maps.Marker(markerOpts);
			google.maps.event.addListener(marker[i], 'mouseover', function() {
//			if(infowindow) infowindow.close();
				if(infowindow) infowindow.onRemove();
//					infowindow.open(map_canvas,marker[i]);
    			infowindow = new InfoBox({latlng: marker[i].getPosition(), map: map, msg:getSameInfo(sno)});
				dispLayer('layer2',sno);
			});
//			google.maps.event.addListener(infowindow, 'closeclick', function(){
//				hideLayer('layer2');
//			});

		}else{
			marker2[i] = new google.maps.Marker(markerOpts);
		}
		return marker;
	}

  
	function dispLayer(lyer,sno){
		var objID=document.getElementById(lyer);
		var info = getMapInfo(sno);
		objID.style.display='block';
		objID.innerHTML = info;
		objID.className='open';
	}

	function hideLayer(lyer){
		var objID=document.getElementById(lyer);
		objID.style.display='none';
		objID.className='close';
	}
	
	function goDetail(sno){
		document.indexform.sno.value = sno;
		document.indexform.action = 'index.php?action=ldtl';
		document.indexform.submit();
	}
	
	function goList(){
		document.indexform.state.value = 'keyserch';
		document.indexform.action = 'index.php?action=llst';
		document.indexform.submit();
	}

	function chgMapIcon(id){
		marker[id].setMap(null);
		marker2[id].setMap(map_canvas); 
//		map_canvas.setCenter(marker2[1].getPosition());
	}

	function backMapIcon(id){
		marker2[id].setMap(null);
		marker[id].setMap(map_canvas); 
//		map_canvas.setCenter(marker2[1].getPosition());
	}

	if( ! Array.prototype.contains ){
		/**
		* @access public
		* @param value mixed 検索するオブジェクト
		* @return boolean 対象配列に既にオブジェクトが存在していれば true, そうでなければ false
		* 配列の値の重複チェックなどに使用。
		*/
		Array.prototype.contains = function( value ){
			for(var i in this){
				if( this.hasOwnProperty(i) && this[i] === value){
					return true;
				}
			}
			return false;
		}
	}
	
/* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 * @param {GLatLng} latlng Point to place bar at
 * @param {Map} map The map on which to display this InfoBox.
 * @param {Object} opts Passes configuration options - content,
 *   offsetVertical, offsetHorizontal, className, height, width
 */
function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  this.latlng_ = opts.latlng;
  this.map_ = opts.map;
//  this.offsetVertical_ = -195;
  this.offsetVertical_ = -49;
//  this.offsetHorizontal_ = 0;
  this.offsetHorizontal_ = -4;
  this.height_ = 165;
//  this.height_ = 120;
  this.width_ = 266;
//  this.width_ = 240;

  this.msg = opts.msg;

  var me = this;
  this.boundsChangedListener_ =
    google.maps.event.addListener(this.map_, "bounds_changed", function() {
      return me.panMap.apply(me);
    });

  // Once the properties of this OverlayView are initialized, set its map so
  // that we can display it.  This will trigger calls to panes_changed and
  // draw.
  this.setMap(this.map_);
}

/* InfoBox extends GOverlay class from the Google Maps API
 */
InfoBox.prototype = new google.maps.OverlayView();

/* Creates the DIV representing this InfoBox
 */
//InfoBox.prototype.remove = function() {
InfoBox.prototype.onRemove = function() {
  if (this.div_) {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  }
  this.setMap(null);
};



/* Redraw the Bar based on the current projection and zoom level
 */
InfoBox.prototype.draw = function() {
  // Creates the element if it doesn't exist already.
  this.createElement();
  if (!this.div_) return;

  // Calculate the DIV coordinates of two opposite corners of our bounds to
  // get the size and position of our Bar
  var pixPosition = this.getProjection().fromLatLngToDivPixel(this.latlng_);
  if (!pixPosition) return;

  // Now position our DIV based on the DIV coordinates of our bounds
//  this.div_.style.width = this.width_ + "px";
  this.div_.style.left = (pixPosition.x + this.offsetHorizontal_) + "px";
//  this.div_.style.height = this.height_ + "px";
  this.div_.style.top = (pixPosition.y + this.offsetVertical_) + "px";
  this.div_.style.display = 'block';
};

InfoBox.prototype.createElement = function(e) {
  var panes = this.getPanes();
  var div = this.div_;
  if (!div) {
    div = this.div_ = document.createElement("div");
	div.className = 'baroon';
    div.innerHTML = this.msg;


    div.style.display = 'none';
    panes.floatPane.appendChild(div);
    this.panMap();
  } else if (div.parentNode != panes.floatPane) {
    // The panes have changed.  Move the div.
    div.parentNode.removeChild(div);
    panes.floatPane.appendChild(div);
  } else {
    // The panes have not changed, so no need to create or move the div.
  }
}

/* Pan the map to fit the InfoBox.
 */
InfoBox.prototype.panMap = function() {
  // if we go beyond map, pan map
  var map = this.map_;
  var bounds = map.getBounds();
  if (!bounds) return;
  // Remove the listener after panning is complete.
  
  google.maps.event.removeListener(this.boundsChangedListener_);
  this.boundsChangedListener_ = null;

};