// Create XML Request

var xmlHttp;
var xmlHttp2;
var xmlHttp3;
dataset = null;

/////////////////////////////////////////
//
// DM Card Shop Database v1.0
//
// Written by Nat Chan, Summer 2008
//
/////////////////////////////////////////


function loaddist(){
    try{  // Firefox, Opera 8.0+, Safari  
            xmlHttp = new XMLHttpRequest();
            xmlHttp3 = new XMLHttpRequest();
            xmlHttp2 = new XMLHttpRequest();  
            }
    catch (e)
        {  // Internet Explorer  
            try{   
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");  
                xmlHttp3=new ActiveXObject("Msxml2.XMLHTTP");   
                xmlHttp2=new ActiveXObject("Msxml2.XMLHTTP");    }
            catch (e)
            {    
                try {      
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
                    xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");      
                    xmlHttp3=new ActiveXObject("Microsoft.XMLHTTP");      }
                catch (e)
                {      
                    alert("Your browser does not support AJAX!");      
                    return false;      
                }    
             } 
         }
    xmlHttp2.open('POST','distsearch.php',true);
    xmlHttp2.onreadystatechange = listdist;
    xmlHttp2.send("");
}

function listdist(){
    if(xmlHttp2.readyState == 4){
        var selectHTML = "<select style='width:100%' id='distsel' onchange='loadshopfrom(this); loadtourfrom(this)'>\n";
        var xmlDoc = xmlHttp2.responseXML.documentElement;
        var data = xmlDoc.getElementsByTagName("district");
        
        for(var i=0; i < data.length; i++){
            var dataid = data[i].getElementsByTagName("id")[0].firstChild.nodeValue;
            selectHTML += "<option city=0 country="+dataid+">&nbsp;"
                           +data[i].getElementsByTagName("chinese")[0].firstChild.nodeValue+"</option>";
            var datachild = xmlDoc.getElementsByTagName(dataid);
            for(var j=0; j < datachild.length; j++){
                var childid = datachild[j].getElementsByTagName("id")[0].firstChild.nodeValue;
                selectHTML += "<option city="+childid+" country="+dataid+">&nbsp;>>&nbsp;"
                           +datachild[j].getElementsByTagName("chinese")[0].firstChild.nodeValue+"</option>";
            }
        }
        selectHTML += "</select>";
        document.getElementById("distlist").innerHTML = selectHTML;
    }
}

function loadshopfrom(sel) {
    var i = sel.selectedIndex;
    loadshop(sel.options[i].getAttribute("city"), sel.options[i].getAttribute("country"));
}
function loadshop(city, country){
    var url = "shopsearch.php?city="+city+"&country="+country;
    xmlHttp.open('GET',url,true);
    xmlHttp.onreadystatechange = listshop;
    xmlHttp.send("");
}

function listshop(){
    var color = new Array();
    color[0] = "#6699CC";
    color[1] = "#336699";
    if(xmlHttp.readyState == 4){
        var xmlDoc=xmlHttp.responseXML.documentElement;
        var shoplistHTML = "";
        var data = xmlDoc.getElementsByTagName("shop");
        
        for(var i=0; i < data.length; i++){
            var name = data[i].getElementsByTagName("name")[0].firstChild.nodeValue;
            var address = data[i].getElementsByTagName("address")[0].firstChild.nodeValue;
            var lat = data[i].getElementsByTagName("lat")[0].firstChild.nodeValue;
            var lng = data[i].getElementsByTagName("lng")[0].firstChild.nodeValue;
            var shopid = parseInt(data[i].getElementsByTagName("id")[0].firstChild.nodeValue);
            var method = data[i].getElementsByTagName("method")[0].firstChild.nodeValue;
            shoplistHTML += "<div onclick='shopinfo(this)' shopid='"+shopid+"' lat='"+lat+"' lng='"+lng+"' name='"+name+"' address='"+address+"' method='"+method+"' "
            + "style='padding: 8px; width:auto; height:40px; border:1px black double; color: white; background-color:"+color[i%2]+"'>"
            +(i+1)+". "+name+"<br/>&nbsp;&nbsp;&nbsp;&nbsp;"+address+"</div>\n";
        }
        document.getElementById("shoplist").innerHTML = shoplistHTML;
    }
}

function shopinfo(shop){
    // Map listout
    map.clearOverlays();
    var position = new GLatLng(parseFloat(shop.getAttribute("lat")), parseFloat(shop.getAttribute("lng")));
    var marker = new GMarker(position);
    map.addOverlay(marker);
    map.setZoom(16);
    map.panTo(position);
    
    // Shop Infomation
    var infoHTML = "<img src='shopphoto/"+shop.getAttribute("shopid")+".jpg' style='position:relative; top:20px; float:right' /><br/>"
    + "<font color=blue>" + shop.getAttribute("name") + "</font><br/>地址："+ shop.getAttribute("address") +"<br/>&nbsp;<br/>前往方法：<br/>" + shop.getAttribute("method");
    document.getElementById("info").innerHTML = infoHTML;
}
                    
function loadtourfrom(sel) {
    var i = sel.selectedIndex;
    loadtour(sel.options[i].getAttribute("city"), sel.options[i].getAttribute("country"));
}
function loadtour(city, country){
    var url = "toursearch.php?city="+city+"&country="+country;
    xmlHttp3.open('GET',url,true);
    xmlHttp3.onreadystatechange = showtour;
    xmlHttp3.send("");
}

function showtour(){
    var color = new Array();
    color[0] = "#FF9999";
    color[1] = "#FF6666";
    if(xmlHttp3.readyState == 4){
        var xmlDoc=xmlHttp3.responseXML.documentElement;
        var shoplistHTML = "";
        var data = xmlDoc.getElementsByTagName("tour");
        var box = document.getElementById("tourlist");
        box.innerHTML = '';
        
        for(var i=0; i < data.length; i++){
            var name = data[i].getElementsByTagName("name")[0].firstChild.nodeValue;
            var venue = data[i].getElementsByTagName("venue")[0].firstChild.nodeValue;
            var lat = data[i].getElementsByTagName("lat")[0].firstChild.nodeValue;
            var lng = data[i].getElementsByTagName("lng")[0].firstChild.nodeValue;
            var method = data[i].getElementsByTagName("method")[0].firstChild.nodeValue;
            var date = data[i].getElementsByTagName("date")[0].firstChild.nodeValue;
            var org = data[i].getElementsByTagName("org")[0].firstChild.nodeValue;
            
            var colortone = color[i%2];
            if(org == "DM Sanctuary") colortone = "#3366CC";
            
            var element = document.createElement('div');
            element.style.padding = "8px";
            element.style.height = "40px"; 
            element.style.border = "1px black double"; 
            element.style.color = "white";
            element.style.backgroundColor = colortone;
            element.setAttribute('tourid', parseInt(data[i].getElementsByTagName("id")[0].firstChild.nodeValue));
//            element.setAttribute('onclick', 'tourinfo(this)');
            element.setAttribute('name', name);
            element.setAttribute('venue', venue);
            element.setAttribute('lat', lat);
            element.setAttribute('lng', lng);
            element.setAttribute('method', method);
            element.setAttribute('ref', data[i].getElementsByTagName("ref")[0].firstChild.nodeValue );
            element.setAttribute('date', date);
            element.setAttribute('org', org);
            element.innerHTML = "<div style='float:left; width:120px; height:40px; border:0px;' align='right' onclick='tourinfo(this.parentNode)'>"+date+"</div>"
                                + "<div style='float:left; padding-left:15px; width:265px; height:40px; border:0px;' onclick='tourinfo(this.parentNode)'>"+name+"<br/>主辦："+org+"</div>";
            box.appendChild(element);
        }    
    }
}            
    
function tourinfo(tour){
    // Map listout
    map.clearOverlays();
    var position = new GLatLng(parseFloat(tour.getAttribute("lat")), parseFloat(tour.getAttribute("lng")));
    var marker = new GMarker(position);
    map.addOverlay(marker);
    map.setZoom(16);
    map.panTo(position);
    
    // Shop Infomation
    var infoHTML = "<font color=blue>" + tour.getAttribute("name") + "</font><br/>主辦："+ tour.getAttribute("org") +"<br/>時間："+ tour.getAttribute("date") +"<br/>地點："+ tour.getAttribute("venue") 
                    + "<br/>&nbsp;<br/>前往方法：<br/>" + tour.getAttribute("method") + "<br/>&nbsp;<br/><a href="+tour.getAttribute("ref")+" target='_blank'>詳情請按此查詢</a>";
    document.getElementById("info").innerHTML = infoHTML;
}