var map , getXML , HotelIcon, PointIcon ;
var aryMarker = new Array();
var aryLabel = new Array();
var Defautl_ShowLabel = false;

function initialize() {
    
    if(GBrowserIsCompatible()) {

        HotelIcon = new GIcon(G_DEFAULT_ICON);
        HotelIcon.image = "http://map.hotel.com.tw/googlemaps/images/house.png";
        HotelIcon.iconSize = new GSize(32, 32);
        HotelIcon.shadowSize = new GSize(55, 32)
        HotelIcon.infoWindowAnchor = new GPoint(16, 0);
        
        
        PointIcon = new GIcon(G_DEFAULT_ICON);
        PointIcon.image = "http://map.hotel.com.tw/googlemaps/images/s_scene2.png";
        PointIcon.iconSize = new GSize(32, 32);
        PointIcon.shadowSize = new GSize(55, 32)
        //PointIcon.iconAnchor = new GPoint(0,0);
        PointIcon.infoWindowAnchor = new GPoint(16, 0);

        
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(25.100344277767, 121.549477736419), 9 );
        map.addControl(new GLargeMapControl());
        map.addControl(new GOverviewMapControl());
        map.addControl(new GScaleControl() ); //比例尺
	    // map.addMapType(G_SKY_VISIBLE_MAP);
	    // map.enableScrollWheelZoom();
	   
        var container = document.createElement("div");
        container.id = 'ctlLabelsw';
        
        container.innerHTML = '<a href="" onclick="showLabelName();return false">顯示飯店名稱</a>';
        
        container.className = 'ShowLabel';
        var pos = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(80,5));
        pos.apply(container);
        map.getContainer().appendChild(container);
       
        map.addControl(new GMenuMapTypeControl(true,false));
        LoadDat('%27%E5%8D%97%E6%8A%95%E7%B8%A3%27' , '', '', '', '','Hotel','ch');
        
    
    } /* end GBrowserIsCompatible() */
    
    
    
} /* end initialize() */



function showLabelName() {
    Defautl_ShowLabel = (!Defautl_ShowLabel);
    var ctl = document.getElementById("ctlLabelsw");
    for (var labelkey in aryLabel) {
            if(Defautl_ShowLabel) {
                ctl.className = 'markertip';
                aryLabel[labelkey].show();
            } else {
                ctl.className = 'ShowLabel';
                aryLabel[labelkey].hide();
            }
    }
}



function createMarker(point,html,Icon,key,pic) {
    
    var marker = new GMarker(point,{icon:Icon});


    GEvent.addListener(marker, 'infowindowopen', function () { 
        var ctl = document.getElementById(key);
        if(ctl) ctl.innerHTML = '<img src="' + pic + '" width="90" height="60" border="0" />';
        
    }); 
   
    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
    });

    GEvent.addListener(marker, "mouseover", function() {
        
        aryLabel[key].show();
    });
    
    GEvent.addListener(marker, "mouseout", function() {
        if(!Defautl_ShowLabel) aryLabel[key].hide();
    });

    return marker;
}


function LoadDat(strXianList,strAreaList,strBAreaList,strClassList,strHIDList,ap,hl) {
    var xmlap , Icon
    xmlap = 'xmlByHN12.asp?strXianList=' + strXianList + '&strAreaList=' + strAreaList + '&strBAreaList=' + strBAreaList + '&strClassList=' + strClassList  + '&strHIDList=' + strHIDList+ '&hl=' + hl;

    Icon = eval(ap + 'Icon');

    GDownloadUrl(xmlap , function(data) {
        var xml = GXml.parse(data);
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            var _latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                 parseFloat(markers[i].getAttribute("lng")));
            var _title = markers[i].getAttribute("cname");
            var _key = ap + markers[i].getAttribute("xid");
            var _pic = markers[i].getAttribute("pic");
            
            
            if(!aryMarker[_key]){


                var label = new ELabel(_latlng , _title  , "markertip", new GSize(20,-20), 70);
                (Defautl_ShowLabel)?label.show():label.hide();
                map.addOverlay(label);
                
                var _m = new createMarker(_latlng,CreateHtml(markers[i],ap,hl),Icon,_key,_pic);
                map.addOverlay(_m);
                

                aryMarker[_key] = _m;
                aryLabel[_key] = label;
                
                // GEvent.trigger(_m, "click");
            
            } else {
                
                // GEvent.trigger(aryMarker[_key], "click");
            }
    
            
    
        }
        document.getElementById('btnLoading').style.display="none";
        map.panTo(_latlng);
        
       
    });
}      




function CreateHtml ( markers , ap,hl) {

    var content,pic;
        if(markers.getAttribute("pic")) {
            // pic = '<img src="' + markers.getAttribute("pic") + '" alt="' + markers.getAttribute("cname") + '" width="90" height="60" border="0" />';
            pic = '<span id="' + ap + markers.getAttribute("xid") + '"></span>';

        } else {
            pic = '';
        }
        
        content = '<table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="data_table">' +
                  '<div class="pic">' + pic + '</div>' + 
                  '<div class="data">' +
                  '<h1>' + markers.getAttribute("cname")+ '</h1>' +
                  '<address>' + markers.getAttribute("addr") + '</address>' +
                  '<p>' + markers.getAttribute("feature") + '</p>'          
    
    if(ap=='Hotel')
        if(hl=='en')
		if(markers.getAttribute("url")) {
			content += '<div class="order"><a href="' + markers.getAttribute("url") + '" target="_blank">more</a> | <a href="https://secure.hotel.com.tw/hotel/default.asp?getinfo=1&lg=en&strHID=' + markers.getAttribute("xid") + '" target="_blank">Booking</a></div></div></div></td></tr></table>'
		} else {
			content += '<div class="order"><a href="https://secure.hotel.com.tw/hotel/default.asp?getinfo=1&lg=en&strHID=' + markers.getAttribute("xid") + '" target="_blank">Booking</a></div></div></div></td></tr></table>'
		}
        if(hl=='ch')
        	content += '<div class="order"><a href="' + markers.getAttribute("url") + '" target="_blank">前往飯店首頁</a> | <a href="https://secure.hotel.com.tw/hotel/default.asp?getinfo=1&strHID=' + markers.getAttribute("xid") + '" target="_blank">線上訂房</a></div></div></div></td></tr></table>'
    if(ap=='Point')
        content += '<div class="order"><a href="http://travel.network.com.tw/tourguide/point/showpage/' + markers.getAttribute("xid") + '.html" target="_blank">前往景點詳細介紹</a></div></div></div></td></tr></table>'

    return content;
}


// 繼承 Goverlay

      function ELabel(point, html, classname, pixelOffset, percentOpacity, overlap) {
        // Mandatory parameters
        this.point = point;
        this.html = html;
        
        // Optional parameters
        this.classname = classname||"";
        this.pixelOffset = pixelOffset||new GSize(0,0);
        if (percentOpacity) {
          if(percentOpacity<0){percentOpacity=0;}
          if(percentOpacity>100){percentOpacity=100;}
        }        
        this.percentOpacity = percentOpacity;
        this.overlap=overlap||false;
        this.hidden = false;
      } 
      
      ELabel.prototype = new GOverlay();

      ELabel.prototype.initialize = function(map) {
        var div = document.createElement("div");
        div.style.position = "absolute";
        div.innerHTML = '<div class="' + this.classname + '">' + this.html + '</div>' ;
        map.getPane(G_MAP_FLOAT_SHADOW_PANE).appendChild(div);
        this.map_ = map;
        this.div_ = div;
        if (this.percentOpacity) {        
          if(typeof(div.style.filter)=='string'){div.style.filter='alpha(opacity:'+this.percentOpacity+')';}
          if(typeof(div.style.KHTMLOpacity)=='string'){div.style.KHTMLOpacity=this.percentOpacity/100;}
          if(typeof(div.style.MozOpacity)=='string'){div.style.MozOpacity=this.percentOpacity/100;}
          if(typeof(div.style.opacity)=='string'){div.style.opacity=this.percentOpacity/100;}
        }
        if (this.overlap) {
          var z = GOverlay.getZIndex(this.point.lat());
          this.div_.style.zIndex = z;
        }
        if (this.hidden) {
          this.hide();
        }
      }

      ELabel.prototype.remove = function() {
        this.div_.parentNode.removeChild(this.div_);
      }

      ELabel.prototype.copy = function() {
        return new ELabel(this.point, this.html, this.classname, this.pixelOffset, this.percentOpacity, this.overlap);
      }

      ELabel.prototype.redraw = function(force) {
        var p = this.map_.fromLatLngToDivPixel(this.point);
        var h = parseInt(this.div_.clientHeight);
        this.div_.style.left = (p.x + this.pixelOffset.width) + "px";
        this.div_.style.top = (p.y +this.pixelOffset.height - h) + "px";
      }

      ELabel.prototype.show = function() {
        if (this.div_) {
          this.div_.style.display="";
          this.redraw();
        }
        this.hidden = false;
      }
      
      ELabel.prototype.hide = function() {
        if (this.div_) {
          this.div_.style.display="none";
        }
        this.hidden = true;
      }
      
      ELabel.prototype.isHidden = function() {
        return this.hidden;
      }
      
      ELabel.prototype.supportsHide = function() {
        return true;
      }

      ELabel.prototype.setContents = function(html) {
        this.html = html;
        this.div_.innerHTML = '<div class="' + this.classname + '">' + this.html + '</div>' ;
        this.redraw(true);
      }
      
      ELabel.prototype.setPoint = function(point) {
        this.point = point;
        if (this.overlap) {
          var z = GOverlay.getZIndex(this.point.lat());
          this.div_.style.zIndex = z;
        }
        this.redraw(true);
      }
      
      ELabel.prototype.setOpacity = function(percentOpacity) {
        if (percentOpacity) {
          if(percentOpacity<0){percentOpacity=0;}
          if(percentOpacity>100){percentOpacity=100;}
        }        
        this.percentOpacity = percentOpacity;
        if (this.percentOpacity) {        
          if(typeof(this.div_.style.filter)=='string'){this.div_.style.filter='alpha(opacity:'+this.percentOpacity+')';}
          if(typeof(this.div_.style.KHTMLOpacity)=='string'){this.div_.style.KHTMLOpacity=this.percentOpacity/100;}
          if(typeof(this.div_.style.MozOpacity)=='string'){this.div_.style.MozOpacity=this.percentOpacity/100;}
          if(typeof(this.div_.style.opacity)=='string'){this.div_.style.opacity=this.percentOpacity/100;}
        }
      }

      ELabel.prototype.getPoint = function() {
        return this.point;
      }
      ELabel.prototype.U = function() {
        return this.point;
      }
      ELabel.prototype.V = function() {
        return this.point;
      }
      ELabel.prototype.W = function() {
        return this.point;
      }
      ELabel.prototype.X = function() {
        return this.point;
      }
      ELabel.prototype.Y = function() {
        return this.point;
      }
      ELabel.prototype.Z = function() {
        return this.point;
      }