var map;





function addSubmitListener(){
    if (document.getElementById('addressGo')!=null) {
        if (document.getElementById('addressGo').addEventListener) {
            document.getElementById('addressGo').addEventListener('click', function() {locateAddress(document.getElementById('address').value);}, false);
        }
        else {
            document.getElementById('addressGo').attachEvent('onclick', function() {locateAddress(document.getElementById('address').value);});
        }
    }    
}

//// locate the Entered Place or Address  on the map 
function locateAddress(address) {
  var geocoder = new GClientGeocoder();  
  var bounds = new GLatLngBounds(); 
  var add_index=0;
  var addresslist = address.split("|");
  var i;
  var add="";
  for(i=0;i<addresslist.length;i++){  
  add = addresslist[i];
      var point;     
      if (geocoder) {   
       
         geocoder.getLatLng(
            add,
            function(point) {                                                                   
               if (!point){
                  addSinglePoint(null,add);
                  alert("["+ address+ "] Fail to locate address, input again");  
               }
               else{
                  //map.setCenter(point, scale);
                  map.setCenter(point, 4); 
                  map.panTo(point);
                  var marker = new GMarker(point,{title:add});
                  
                  bounds.extend(point);
                  map.addOverlay(marker);
                  addSinglePoint(point,addresslist[add_index++]);
               }
               map.setZoom(map.getBoundsZoomLevel(bounds));
               map.setCenter(bounds.getCenter());     
            }
         ); //geocoder.getLatLng 
      }// if
  }// for loop
          
};

function addSinglePoint(point,place){
    var xpos;
    var ypos;
    this.place = place;
    
    if (point !=null){
        xpos= point.lat().toFixed(4);
        ypos = point.lng().toFixed(4);
    } else {
        xpos= "";
        ypos = "";
    }

    if (document.getElementById("magstring").value=="") {
        document.getElementById("magstring").value =  xpos + "," + ypos+ "@" + place; 
    } else {  
        document.getElementById("magstring").value = document.getElementById("magstring").value +"|" + xpos + "," + ypos+ "@" + place; 
    }
    //setTempMagstring();
    
} 

	

function loadMap() {
	var bounds = new GLatLngBounds(); 
	var geocoder = new GClientGeocoder();  
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    //map.addControl(new GMapTypeControl());
    map.addControl(new GLargeMapControl());
    map.addControl(new GScaleControl());

    //map.setMapType(G_HYBRID_MAP);
    map.setCenter(new GLatLng(24.692947,121.719546), 14); // Let the map of Taiwan will show in the map
    //var Tsize = new GSize(100, 100);
    //map.addControl(new GOverviewMapControl(Tsize));
    
    var customUI = map.getDefaultUI();
    // Remove MapType.G_HYBRID_MAP
    customUI.maptypes.hybrid = false;
    map.setUI(customUI);

    
  }
}




		
// get the result "distance" km  away from "place"
function getRecFromPlaceAndDist(place,distance) {
    map.clearOverlays();
    map.setCenter(new GLatLng(23.8388,120.9876), 0);
    var bounds = new GLatLngBounds();


    map.clearOverlays();
    geocoder.getLatLng(
        place,
        function(point) { 
           log("getRecFromPlaceAndDist() place=" + place + " distance=" + distance);                                                                  
           if (!point){
              alert("["+ place+ "] 無法正確定址，請輸入其他附近位址"); 
              //return null; 
           }
           else{
              map.setCenter(point, 17); 
              //map.panTo(point);
              var marker = new GMarker(point,{title:place}); 
              bounds.extend(point);
              map.addOverlay(marker);
              
              var lefttop =  getDestPointByStart2D(point,distance,-45);
              bounds.extend(lefttop);
              var rightbottom = getDestPointByStart2D(point,distance,135);
              bounds.extend(rightbottom);
              currentFocustRec = new GPolyline([
                        new GLatLng(lefttop.lat(), lefttop.lng()),
                        new GLatLng(lefttop.lat(), rightbottom.lng()),
                        new GLatLng(rightbottom.lat(), rightbottom.lng()),
                        new GLatLng(rightbottom.lat(), lefttop.lng()),
                        new GLatLng(lefttop.lat(), lefttop.lng())
                        ], "#0000ff", 2);    
              map.addOverlay(currentFocustRec);  
              
              var focusPoints = lefttop.lat().toFixed(4) +"," + lefttop.lng().toFixed(4)+ "|"+ rightbottom.lat().toFixed(4) +"," + rightbottom.lng().toFixed(4);
              return  focusPoints;          
           }
           map.setZoom(map.getBoundsZoomLevel(bounds));
           map.setCenter(bounds.getCenter());     
        }
     ); //geocoder.getLatLng 
     //return null;
    
}


function createMarker(point, text, title) {
    var marker = new GMarker(point,{title:title});
    GEvent.addListener(marker, "Click", function() {
        marker.openInfoWindowHtml('',{text:max});
     });
     return marker;
}





function locatePoint(lat,lng, name, address, tel,  piclink, hid, url) {
  
	//var bounds = new GLatLngBounds();
	
	
	var point  = new GLatLng(lat , lng,name,address);  
     
  var longcontent =  '<div style="width:250px; height:70px;">';    
  longcontent = longcontent + '<div style="float:left;padding:5px">'; 
  longcontent = longcontent + '	<a href="' + url + '"  TARGET=_BLANK><img src="' + piclink + '"></a>';  
  longcontent = longcontent + '</div>';        
  longcontent = longcontent + '<div>';   
  longcontent = longcontent + ' <a href="#content_' + hid + '"><img src="images/icons/arrow_redo.png" width=20 height=20 title="Back"/>' + name  + '</a>';                                                                               
 	longcontent = longcontent + ' <a name="map_' + hid + '"></a>';
 	
 	longcontent = longcontent + ' <br/><img src="images/icons/house.png" width=16 height=16 title="住址"/>' + address ;
 	//longcontent = longcontent + ' <br/><img src="images/icons/telphone.png" width=16 height=16 title="電話"/>' + tel;
 	longcontent = longcontent + '</div>';       
 	
 	
 	longcontent = longcontent + '</div>';
 	map.openInfoWindowHtml(point,longcontent,{maxContent:""});
 	map.panTo(point);
 	//var marker = new GMarker(point,{name:address}); 
 	//map.setCenter(point, 4); 
  
  //bounds.extend(point);
  //map.addOverlay(marker);
  //marker.showMapBlowup(add); 
  //map.setZoom(map.getBoundsZoomLevel(bounds));
  //map.setCenter(bounds.getCenter());     


}





function locateLink(lat,lng, name, address, title, description, piclink, url, link_id) {

  
	//var bounds = new GLatLngBounds();
	var point  = new GLatLng(lat , lng,name,address);  
	
	//log("piclink=" + piclink);
     
  var longcontent =  '<div style="width:350px; height:160px;">'; 
  longcontent = longcontent + '<div style="padding:6px; float:left">';
  longcontent = longcontent + "<a href='" + url + "' target=_blank><img src='" + piclink + "'></a>";  
  longcontent = longcontent + "</div>";     
  
  longcontent = longcontent + "<div>";
  longcontent = longcontent + "<font color=#5382D0>" + title + "</font><br/>";
 	longcontent = longcontent + description ;
 	longcontent = longcontent + '<a href="#link_' + link_id + '"><img src="images/icons/arrow_redo.png" width=16 height=16 title="Detail..."/></a>';
  longcontent = longcontent + "</div>";  
                                                                                  
 	longcontent = longcontent + '</div>';
 	
 	
 	//log("longcontent=" + longcontent);
 	
 	map.openInfoWindowHtml(point,longcontent,{maxContent:""});
 	map.panTo(point);
 	//var marker = new GMarker(point,{name:address}); 
 	//map.setCenter(point, 4); 
  
  //bounds.extend(point);
  //map.addOverlay(marker);
  //marker.showMapBlowup(add); 
  //map.setZoom(map.getBoundsZoomLevel(bounds));
  //map.setCenter(bounds.getCenter());     


}






function renderMap4Link(link_id) {
    //map.setCenter(new GLatLng(23.8388,120.9876), 0);
    //map.clearOverlays();
    //var bounds = new GLatLngBounds();
    var mm = new GMarkerManager(map); 
    magstring = document.getElementById("magstring-" + link_id).value;
    longcontent = document.getElementById("longcontent-" + link_id).value;
    //log("renderMap4Link()  magstring=" + magstring );
    //log("renderMap4Link()  longcontent=" + longcontent );
     //log("renderMap(" + magstring + ")");
    var prepoint;
    var trial;                                              
    var mags;
    var mag;
    var i,j;
    var fields;
    var pos;
    var pointarray = [];
    var trials = magstring.split("|");  
    for(i=0;i<trials.length;i++) {
        mags = trials[i].split("~");
        for(j=0;j<mags.length;j++){
            fields = mags[j].split("@");
            pos = fields[0].split(",");
            //map.setCenter(new GLatLng(pos[0] , pos[1]), 7);  
            var point  = new GLatLng(pos[0] , pos[1],fields[1],fields[1]);  
            pointarray.push(point); 
            if (i==0 && j==0) {
                longcontent = longcontent + "<br /><img src=" + document.getElementById('pic-'+ link_id).src + ">";                                                                                                   
                map.openInfoWindowHtml(point,longcontent,{maxContent:""});
                var marker = new GMarker(point); 
                mm.addMarker(marker,0,17);
            }
             
            //bounds.extend(point);       
            //map.addOverlay(marker);
            prepoint = point;       
        }    
    }       
    var polyline = new GPolyline(pointarray, "#ff0000", 3);
    map.addOverlay(polyline);
    mm.refresh(); 
    //map.setZoom(map.getBoundsZoomLevel(bounds));
    //map.setCenter(bounds.getCenter());     
      
    //showResult("test",longcontent ,firstPoint.lat().toFixed(4) ,firstPoint.lng().toFixed(4));  
    
}




function createMarker(point,html) {
  var marker = new GMarker(point);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });

  // The new marker "mouseover" listener        
  GEvent.addListener(marker,"mouseover", function() {
    marker.openInfoWindowHtml(html);
  });        
  
  return marker;
}


function renderMingsuMaker(lat,lng, name, address, tel,  piclink, hid, url) {

	var point  = new GLatLng(lat , lng,name,address);  
	var bounds = new GLatLngBounds();
  var mm = new GMarkerManager(map);
  
  var longcontent =  '<div style="width:250px; height:140px;">';    
  longcontent = longcontent + '<div style="float:left;padding:5px">'; 
  longcontent = longcontent + '	<a href="' + url + '"  TARGET=_BLANK><img src="' + piclink + '"></a>';  
  longcontent = longcontent + '</div>';        
  longcontent = longcontent + '<div>';   
  longcontent = longcontent + '<p>' + name  + '</p>';                                                                               
 	
 	longcontent = longcontent + ' <br/><img src="images/icons/house.png" width=16 height=16 title="住址"/>' + address ;
 	//longcontent = longcontent + ' <br/><img src="images/icons/telphone.png" width=16 height=16 title="電話"/>' + tel;
 	longcontent = longcontent + '</div>';       
 	
 	
 	
  
  
	var marker = createMingsuMarker(point, longcontent);
  mm.addMarker(marker,0,17); 
  mm.refresh();  
  map.openInfoWindowHtml(point,longcontent,{maxContent:""});
  //map.setZoom(map.getBoundsZoomLevel(bounds));
  //map.setCenter(bounds.getCenter());
        

}


// 最後不要map.openInfoWindowHtml
function renderMingsuMaker2(lat,lng, name, address, tel,  piclink, hid, url) {

	var point  = new GLatLng(lat , lng,name,address);  
	var bounds = new GLatLngBounds();
  var mm = new GMarkerManager(map);
  
  var longcontent =  '<div style="width:250px; height:140px;">';    
  longcontent = longcontent + '<div style="float:left;padding:5px">'; 
  longcontent = longcontent + '	<a href="' + url + '"  TARGET=_BLANK><img src="' + piclink + '"></a>';  
  longcontent = longcontent + '</div>';        
  longcontent = longcontent + '<div>';   
  longcontent = longcontent + '<p>' + name  + '</p>';                                                                               
 	
 	longcontent = longcontent + ' <br/><img src="images/icons/house.png" width=16 height=16 title="住址"/>' + address ;
 	//longcontent = longcontent + ' <br/><img src="images/icons/telphone.png" width=16 height=16 title="電話"/>' + tel;
 	longcontent = longcontent + '</div>';       
 	
 	
 	
  map.panTo(point);
  
	var marker = createMingsuMarker(point, longcontent);
  mm.addMarker(marker,0,17); 
  mm.refresh();  
  //map.openInfoWindowHtml(point,longcontent,{maxContent:""});
  //map.setZoom(map.getBoundsZoomLevel(bounds));
  //map.setCenter(bounds.getCenter());
        

}


function createMingsuMarker(point,html) {
  //var marker = new GMarker(point);
  
  var viewIcon = new GIcon(G_DEFAULT_ICON);
  viewIcon.image = "http://www.lifecitytech.com.tw/yilanplay/images/hotel.gif";   
  //viewIcon.image = "http://www.lifecitytech.com.tw/yilanplay/images/icons/flag_green.png";   
  viewIcon.iconSize = new GSize(25, 25); 
  // Set up our GMarkerOptions object
  var markerOptions = { icon:viewIcon };
  var marker = new GMarker(point, markerOptions);

  
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });

  // The new marker "mouseover" listener        
  GEvent.addListener(marker,"mouseover", function() {
    marker.openInfoWindowHtml(html);
  });        
  
  return marker;
}


function createLinkMarker(point,html) {
  //var marker = new GMarker(point);
  
  var viewIcon = new GIcon(G_DEFAULT_ICON);
  viewIcon.image = "http://www.lifecitytech.com.tw/yilanplay/images/pencils.gif";   
  viewIcon.iconSize = new GSize(25, 25); 
  // Set up our GMarkerOptions object
  var markerOptions = { icon:viewIcon };
  var marker = new GMarker(point, markerOptions);

  
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });

  // The new marker "mouseover" listener        
  GEvent.addListener(marker,"mouseover", function() {
    marker.openInfoWindowHtml(html);
  });        
  
  return marker;
}







/*------------------------------------------------------------------------------
magstring
  x1,y1@place1|x2,y2@place2~x3,y3@place3|xi,yi…
  (x1,y1)為單點所在地為 place1
  (x2,y2)所在地為place2,(x3,y3)所在地為place3，~此表兩點所連接的路徑
focuspoint
  搜尋地點的位址
------------------------------------------------------------------------------*/
function renderMingsuMap(magstring, focuspoint){
    //magstring = "24.840630,121.806801|24.838739,121.806107";
    
    //log("renderMingsuMap magstring=" + magstring + " focuspoint=" + focuspoint);
    //map.clearOverlays();
    var bounds = new GLatLngBounds();
    var mm = new GMarkerManager(map);
    var prepoint;
    var trial;                                              
    var mags;
    var mag;
    var i,j;
    var fields;
    var pos;
    var pointarray = [];
    var trials = magstring.split("|");  
    for(i=0;i<trials.length;i++) {
      fields = trials[i].split("@");
      pos = fields[0].split(",");
      //log("pos[0]=" + pos[0] + " pos[1]=" + pos[1]);
      if (pos[0] != '0.000000') {
        //map.setCenter(new GLatLng(pos[0] , pos[1]), 12);  
        var point  = new GLatLng(pos[0], pos[1]);
        
        
       
        //var html = fields[1] + fields[2];
        var hid = fields[1];
        var name = fields[2];
        var address = fields[3];
        var piclink = fields[4];
        var url = "";
       
        
        var longcontent =  '<div style="width:250px; height:70px;">';    
				longcontent = longcontent + '<div style="float:left;padding:5px">'; 
				//longcontent = longcontent + '	<a href="' + url + '"  TARGET=_BLANK><img src="' + piclink + '" height="60px"></a>';  
				longcontent = longcontent + '	<a href="product_detail.php?hid=' + hid + '" ><img src="' + piclink + '" height="60px"></a>';
				longcontent = longcontent + '</div>';        
				longcontent = longcontent + '<div>';   
				//longcontent = longcontent + ' <a href="#content_' + hid + '"><img src="images/icons/arrow_redo.png" width=20 height=20 title="Back"/>' + name  + '</a>';                                                                           
				longcontent = longcontent + ' <a href="product_detail.php?hid=' + hid + '" >' + name  + '</a>';    
				longcontent = longcontent + ' <a name="map_' + hid + '"></a>';
				longcontent = longcontent + ' <br/><img src="images/icons/house.png" width=16 height=16 title="住址"/>' + address ;
				//longcontent = longcontent + ' <br/><img src="images/icons/telphone.png" width=16 height=16 title="電話"/>' + tel;
				longcontent = longcontent + '</div>';       
				
				
				longcontent = longcontent + '</div>';
				
				
				//log("longcontent=" + longcontent);
				      
				      
        
        var marker = createMingsuMarker(point, longcontent);

        mm.addMarker(marker,0,17); 
        
        
        if (i==0) {
        	map.openInfoWindowHtml(point, longcontent,{maxContent:""});    
        }
                
        //bounds.extend(point);   
      }    
    }      
    // Create our "tiny" marker icon
    if ( focuspoint != "") {
      fields = focuspoint.split("@");
      pos = fields[0].split(",");
      var point  = new GLatLng(pos[0], pos[1]);
      var marker = createBlueMarker(point, fields[1]); 
      
      GEvent.addListener(marker, "click", function() {
		    marker.openInfoWindowHtml(fields[1]);
		  });
      
      mm.addMarker(marker,0,12); 
      map.openInfoWindowHtml(point,fields[1],{maxContent:""});
      //bounds.extend(point);   
    }

    mm.refresh();  
    //map.setZoom(map.getBoundsZoomLevel(bounds));
    //map.setCenter(bounds.getCenter());            
}


function renderLinkMap(magstring, focuspoint){
    //magstring = "24.840630,121.806801|24.838739,121.806107";
    
    //log("renderLinkMap magstring=" + magstring + " focuspoint=" + focuspoint);
    map.clearOverlays();
    var bounds = new GLatLngBounds();
    var mm = new GMarkerManager(map);
    var prepoint;
    var trial;                                              
    var mags;
    var mag;
    var i,j;
    var fields;
    var pos;
    var pointarray = [];
    var trials = magstring.split("|");  
    for(i=0;i<trials.length;i++) {
      fields = trials[i].split("@");
      pos = fields[0].split(",");
      //log("pos[0]=" + pos[0] + " pos[1]=" + pos[1]);
      if (pos[0] != '0.000000') {
        map.setCenter(new GLatLng(pos[0] , pos[1]), 12);  
        var point  = new GLatLng(pos[0], pos[1]);
        var html = fields[1] + fields[2];
        
        var marker = createLinkMarker(point, html);

        mm.addMarker(marker,0,17); 
        
        
        /*if (i==0) {
        	map.openInfoWindowHtml(point, html,{maxContent:""});    
        }*/
                
        bounds.extend(point);   
      }    
    }      
    // Create our "tiny" marker icon
    if ( focuspoint != "") {
      fields = focuspoint.split("@");
      pos = fields[0].split(",");
      var point  = new GLatLng(pos[0], pos[1]);
      var marker = createBlueMarker(point, fields[1]); 
      mm.addMarker(marker,0,12); 
      map.openInfoWindowHtml(point,fields[1],{maxContent:""});
      bounds.extend(point);   
    }

    mm.refresh();  
    map.setZoom(map.getBoundsZoomLevel(bounds));
    map.setCenter(bounds.getCenter());            
}