var map , getXML , HotelIcon, PointIcon ;
var aryMarker = new Array();
var aryLabel = new Array();
var Defautl_ShowLabel = false;
var EnableTesting = false;
var _HItem;
var _PItem;
var ActColor = '#FFCC00';
var bgColor = '#FFE888';
var fgColor = '#F7F5F0';



function changeColor(div,s) {

    
    if(div.id == _HItem)
        div.style.backgroundColor = ActColor;
    else
        div.style.backgroundColor = (s==1)?bgColor:fgColor;
    
}

function changeColor_p(div,s) {

    if(div.id == _PItem)
        div.style.backgroundColor = ActColor;
    else
        div.style.backgroundColor = (s==1)?bgColor:fgColor;

}

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("MapArea"));
        map.setCenter(new GLatLng(25.100344277767, 121.549477736419), 15 );
        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);
        
        // --------------- testing function ------------------ //
        if(EnableTesting) {
            var container = document.createElement("div");
            container.id = 'ctlLoadKml';
            container.innerHTML = '<a href="" onclick="LoadKml();return false">從Goolge載入地圖</a>';
            container.className = 'ShowLabel';
            var pos = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(190,5));
            pos.apply(container);
            map.getContainer().appendChild(container);
        }
        

        map.addControl(new GMenuMapTypeControl(true,false));	
    
    } /* end GBrowserIsCompatible() */
    
    searchHotelByKeyWord('台北');
    
} /* end initialize() */

function LoadKml() {
    var url = prompt('請輸入從Googlemap複製 [在google地球中檢視] 中的完整網址:' , 'http://maps.google.com/maps/ms?ie=UTF8&hl=zh-TW&msid=109776578722090036343.0004466d39e15408db07a&msa=0&output=nl')
            var geoXML = new GGeoXml( url , function() {

            if (geoXML.loadedCorrectly()) {
                map.addOverlay(geoXML);

                geoXML.gotoDefaultViewport(map);
                     
            }
        });
}

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) {
    
    var marker = new GMarker(point,{icon:Icon});

   
    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(kw,ap,showTxt) {
    var xmlap , Icon
    if(ap=='Hotel')
        xmlap = 'xmlHotel.asp?intHotelPK=' + kw;
        
    if(ap=='Point')
        xmlap = 'xmlPoint.asp?pointkey=' + kw;

    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");
            
            
            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),Icon,_key);
                map.addOverlay(_m);
                


                aryMarker[_key] = _m;
                aryLabel[_key] = label;
                
                if(showTxt)
                    GEvent.trigger(_m, "click");
            
            } else {
                GEvent.trigger(aryMarker[_key], "click");
            }
    
            map.panTo(_latlng);
    
        }
        
    });
}      




function CreateHtml ( markers , ap) {

    var content,pic;
        if(markers.getAttribute("pic")) {
            pic = '<img src="' + markers.getAttribute("pic") + '" alt="' + markers.getAttribute("cname") + '" width="90" height="60" border="0" />';
        } 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')
        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;
}



// 依關鍵字
function searchHotelByKeyWord(strKW){
    _HItem = '';
    var kw;
    var form = document.getElementById('frmSearch');
    var divHotelList = document.getElementById('divHotelList');
    
    if(strKW){
        kw=strKW;
    } else {
        kw = form.HotelKeyword.value;
            if(kw=="" || kw == '請輸入飯店關鍵字'){
                alert('請輸入搜尋飯店關鍵字');
                return false;
            }
    }
       
    var _H = new sack();
	_H.setVar("HotelKeyword", kw ); // recomended method of setting data to be parsed.
	_H.requestFile = "ajaxHotelKeyWord.asp";
	_H.method = 'post';
	_H.element = 'divHotelList';
	_H.onCompletion = triggerFirstHotel; 
	_H.runAJAX();
    changeHotelFnTitle('飯店關鍵字：' + kw);

}

// 依區域
function searchHotelByTown(strTown){
    _HItem = '';
    var form = document.getElementById('frmSearch');
    var divHotelList = document.getElementById('divHotelList');
    var _City = form.selCity.value;
    var _Town = form.selTown.value;  
    var _H = new sack();
	_H.setVar("selCity", _City);
	_H.setVar("selTown", _Town); 
	_H.requestFile = "ajaxHotelByTown.asp";
	_H.method = 'post';
	_H.element = 'divHotelList';
	_H.onCompletion = triggerFirstHotel;
	_H.runAJAX();
    changeHotelFnTitle('依 ' + _City + _Town + ' 搜尋飯店列表');
}


// 依景點列表
function searchHotelByPoint(){
    _HItem = '';

    var form = document.getElementById('frmSearch');
    var divHotelList = document.getElementById('divHotelList');
    var _CityName = form.selCity2.options[form.selCity2.selectedIndex].text
    var _TownName = form.selTown2.options[form.selTown2.selectedIndex].text
    var _pointkey = form.selPoint.value;
    
    if(_pointkey=="") {
        alert('此區域沒有符合景點，請重新選取')
        return false;
    }
    
    var _pointname = form.selPoint.options[form.selPoint.selectedIndex].text
    var _H = new sack();
	_H.setVar("pointkey", _pointkey); 
	_H.requestFile = "ajaxHotelByPoint.asp";
	_H.method = 'post';
	_H.element = 'divHotelList';
	// _H.onCompletion = triggerFirstHotel;
	_H.onCompletion = function() { triggerFirstHotel();ShowAllHotel();}
	_H.runAJAX();
    changeHotelFnTitle('依 ' + _CityName + _TownName + ' '+ _pointname + ' 搜尋飯店列表');
}



// 依縣市取區域 (飯店)
function ajaxGetTown(strCity,ctl,wsType){
    
    var form = document.getElementById('frmSearch');
    var obj = document.getElementById(ctl);
    var ap;
        if(wsType=='Hotel')ap="ajaxGetTown.asp";
        if(wsType=='Point')ap="ajaxGetTown2.asp";
    
    obj.options.length = 0;
    var _H = new sack();
	_H.setVar("selCity", strCity);
	_H.requestFile = ap;
	_H.method = 'post';
	_H.onCompletion = function() { eval(_H.response); }
	_H.runAJAX();
}

function ajaxGetTownPoint(TownsID){
    
    var form = document.getElementById('frmSearch');
    var obj = document.getElementById('selPoint');
    
    obj.options.length = 0;
    var _H = new sack();
	_H.setVar("TownsID", TownsID);
	_H.requestFile = "ajaxGetTownPoint.asp";
	_H.method = 'post';
	_H.onCompletion = function() { eval(_H.response); }
	_H.runAJAX();
}

function SetHotel(HotelPKey , lnk){

    LoadDat(HotelPKey,'Hotel',true);
    var form = document.getElementById('frmSearch')
    var _H = new sack();
	_H.setVar("HotelPKey", HotelPKey); // recomended method of setting data to be parsed.
	_H.requestFile = "ajaxGetHotelPoints.asp";
	_H.method = 'post';
	_H.element = 'divPointList';
	_H.onCompletion = function() {
	    
        if(_HItem) 
            document.getElementById(_HItem).style.backgroundColor = fgColor;
            
        _HItem = 'H' + HotelPKey;
        document.getElementById(_HItem).style.backgroundColor = ActColor;
        
        
        _PItem = '';
        if(divPointList.childNodes.length > 0)
            
            _PItem = divPointList.childNodes[0].id;
    
            document.getElementById(_PItem).style.backgroundColor = ActColor;

        changePointFnTitle(lnk.innerHTML);
        
        
	
	}
	
	_H.runAJAX();

	
}


function SetPoint(PointPKey){
       
    if(_PItem) 
        document.getElementById(_PItem).style.backgroundColor = fgColor;
        
    _PItem = 'P' + PointPKey;
        document.getElementById(_PItem).style.backgroundColor = ActColor;
    
    
    
    LoadDat(PointPKey,'Point',true);  

}



function changeHotelFnTitle(strtitle) {

    document.getElementById('HotelFnTitle').innerHTML =  strtitle;

}

function changePointFnTitle(strtitle) {

    document.getElementById('PointFnTitle').innerHTML = strtitle + ' 鄰近景點列表';
    
}


function triggerFirstHotel() {
    var divHotelList = document.getElementById('divHotelList');
        if(divHotelList.childNodes.length > 0) {
            map.clearOverlays();
            aryMarker=[];
            aryLabel=[];
            var firstHotel = document.getElementById('firstHotel');
            divHotelList.childNodes[0].style.backgroundColor = ActColor;
            //firstHotel.fireEvent("onclick");
            
            
            var evt;
            var el = document.getElementById('firstHotel');
            if (document.createEvent){
            evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("click", true, true, window,
            0, 0, 0, 0, 0, false, false, false, false, 0, null);
            }
            (evt)? el.dispatchEvent(evt):(el.click && el.click());
        }
}

function ShowAllHotel() {
    var h = document.getElementById("divHotelList");

    for(var i=0;i < h.childNodes.length;i++) {
        
       
        LoadDat(h.childNodes[i].id.substr(1),'Hotel',false);
    }

}

function ShowAllPoint() {
    var h = document.getElementById("divPointList");

    for(var i=0;i < h.childNodes.length;i++) {
        
       
        LoadDat(h.childNodes[i].id.substr(1),'Point',false);
    }

}


// 繼承 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;
      }