var map = null;
var infoWidth = 290;
var baseIcon = new GIcon();
var hotels = [];
baseIcon.shadow = "";
baseIcon.iconSize = new GSize(15, 15);
baseIcon.shadowSize = new GSize(0, 0);
baseIcon.iconAnchor = new GPoint(7,7);
baseIcon.infoWindowAnchor = new GPoint(7, 2);
    
function initialize(lang, hotel_no) {
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallZoomControl3D(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10,10)));
        map.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10)));
        
        initLegend();
        
        var file = "/xml/pinsFR.xml?";
        infoWidth = 290;
        
        if(lang == "ENG")
        {
            file = "/xml/pinsENG.xml?";
            infoWidth = 320;
        }

        GDownloadUrl(file+Math.floor(Math.random()*999999999999999999), function(data) {
            if (!hotel_no) {
                var xml = GXml.parse(data);
                  
                var props = xml.documentElement.getElementsByTagName("Carte")[0];
        
                map.setCenter(new GLatLng(parseFloat(props.getAttribute("Latitude")), parseFloat(props.getAttribute("Longitude"))), parseInt(props.getAttribute("Zoom")));
                loadHotels(xml.documentElement.getElementsByTagName("Hotels")[0].getElementsByTagName("Point"));
                loadAttraits(xml.documentElement.getElementsByTagName("Attraits")[0].getElementsByTagName("Point"), lang);
            } else {
                var xml = GXml.parse(data);
                
                hotel = xml.documentElement.getElementsByTagName("Hotels")[0].getElementsByTagName("Point")[hotel_no-1];

                map.setCenter(new GLatLng(parseFloat(hotel.getAttribute("Latitude")), parseFloat(hotel.getAttribute("Longitude"))), parseInt(18));
                map.addOverlay(genMarkerHotel(hotel));
                
                var html = "<strong>"+hotel.getAttribute("Nom")+"</strong><br/>"+hotel.getAttribute("Adresse")+", "+hotel.getAttribute("Ville")+", "+hotel.getAttribute("Province")+", "+ hotel.getAttribute("CodePostal") +"<br/><br/><div style='width:"+infoWidth+"px;height:40px;'>"+hotel.getAttribute("Description")+"</div><br/><a href='"+hotel.getAttribute("URL")+"'>"+hotel.getAttribute("URL")+"</a>";
                hotels[0].openInfoWindowHtml(html);
               
                loadAttraits(xml.documentElement.getElementsByTagName("Attraits")[0].getElementsByTagName("Point"), lang);
            }
        }); 
    }
}

function addArrondissement(lang){
   
    var line = new GPolygon.fromEncoded({
      polylines: [{
                   points: "_sdpH~~ggN?}fayB~b`|@??|fayB_c`|@?",
                   levels: "PPPPP",
                   color: "#ff0000",
                   opacity: 1,
                   weight: 3,
                   numLevels: 18,
                   zoomFactor: 2
                  },
                  {
                   points: "chw|Gl_qqLVrCuBzAtBvLwAdA|ClUwEfFEnXlEr@pNfFtDzKtB|DtDoBdShSjYzKfw@ziAfGcOKybA}Li\\V}EeO_QqEcEqFuLeLgNoMoIyd@}LoBeFg^_E",
                   levels: "PDDDDEEHBEBFEEFJEFDHBDCDGEEP",
                   color: "#0000ff",
                   opacity: 0,
                   weight: 3,
                   numLevels: 18,
                   zoomFactor: 2
                  }],
      fill: true,
      color: "#0000ff",
      opacity: 0.2,
      outline: true
    }); 

    var html = "<center><strong>Arrondissement touristique</strong></center>";
        
    var tr = document.createElement("tr");
    tr.style.cursor = "pointer";

    tr.onmouseover = function() {
        this.style.backgroundColor = "#c5bdab";
    }
        
    tr.onmouseout = function() {
        this.style.backgroundColor = "#e4e2d2";
    }
        
    var tdIco = document.createElement("td");
    var tdTitle = document.createElement("td");
        
    tdIco.innerHTML = "<img style='width:15px;height:6px;' src='/img/line.gif'/>";

    if (lang == "ENG") {
      tdTitle.innerHTML = "Touristic area";
    } else {
      tdTitle.innerHTML = "Arrondissement touristique";
    }
        
    tr.appendChild(tdIco);
    tr.appendChild(tdTitle);
        
    document.getElementById("attraits").appendChild(tr);
    
    map.addOverlay(line);
}

function initLegend () {
    document.getElementById("legend").style.top = "35px";
    document.getElementById("legend").style.left = (document.getElementById("map").offsetLeft + document.getElementById("map").offsetWidth - document.getElementById("legend").offsetWidth - 10) + "px";
    setTransparent(document.getElementById("legend"),90);
}
    
function setTransparent (obj,percent) {
    if(typeof(obj.style.filter)=='string'){obj.style.filter='alpha(opacity:'+percent+')';}
    if(typeof(obj.style.KHTMLOpacity)=='string'){obj.style.KHTMLOpddacity=(percent/100);}
    if(typeof(obj.style.MozOpacity)=='string'){obj.style.MozOpacity=(percent/100);}
    if(typeof(obj.style.opacity)=='string'){obj.style.opacity=(percent/100);}
}
        
            
function loadHotels (markers) {
    for (var i = 0; i < markers.length; i++) {
        map.addOverlay(genMarkerHotel(markers[i]));
    }
}
    
function genMarkerHotel (marker) {
    var latlng = new GLatLng(parseFloat(marker.getAttribute("Latitude")),parseFloat(marker.getAttribute("Longitude")));
        
    var width = parseInt(marker.getAttribute("Width"));
    var height = parseInt(marker.getAttribute("Height"));
        
    var iconPin = new GIcon();
    iconPin.shadow = "";
    iconPin.iconSize = new GSize(width, height);
    iconPin.shadowSize = new GSize(0, 0);
    iconPin.iconAnchor = new GPoint(parseInt(marker.getAttribute("BulleX")), parseInt(marker.getAttribute("BulleY")));
    iconPin.infoWindowAnchor = new GPoint(parseInt(marker.getAttribute("BulleX")), parseInt(marker.getAttribute("BulleY")));
    iconPin.image = marker.getAttribute("Image")+"?"+Math.floor(Math.random()*999999999999999999);
        
    var pin = new GMarker(latlng,{icon:iconPin});
        
    var html = "<strong>"+marker.getAttribute("Nom")+"</strong><br/>"+marker.getAttribute("Adresse")+", "+marker.getAttribute("Ville")+", "+marker.getAttribute("Province")+", "+ marker.getAttribute("CodePostal") +"<br/><br/><div style='width:"+infoWidth+"px;height:40px;'>"+marker.getAttribute("Description")+"</div><br/><a href='"+marker.getAttribute("URL")+"'>"+marker.getAttribute("URL")+"</a>";
          
    GEvent.addListener(pin, "click", function() {
        pin.openInfoWindowHtml(html);
    });
    
    hotels.push(pin);
    
    return pin;
}
    
function loadAttraits (markers, lang) {
    for (var i = 0; i < markers.length; i++) {
        map.addOverlay(genMarkerAttrait(markers[i],i));
    }
    
    addArrondissement(lang);
}
    
function genMarkerAttrait (marker,index) {
    var latlng = new GLatLng(parseFloat(marker.getAttribute("Latitude")),parseFloat(marker.getAttribute("Longitude")));
            
    var numIcon = new GIcon(baseIcon);
    numIcon.image = "/img/" + (index+1) + ".gif";
        
             
    var pin = new GMarker(latlng,{ icon:numIcon });
        
    var html = "<center><strong>"+(index+1)+" - "+marker.getAttribute("Nom")+"</strong></center>";
          
    GEvent.addListener(pin, "click", function() {
        pin.openInfoWindowHtml(html);
    });
        
    var tr = document.createElement("tr");
    tr.style.cursor = "pointer";

    tr.onmouseover = function(){
        this.style.backgroundColor = "#c5bdab";
        pin.openInfoWindowHtml(html);
    }
        
    tr.onmouseout = function(){
        this.style.backgroundColor = "#e4e2d2";
        pin.closeInfoWindow();
    }
        
    var tdIco = document.createElement("td");
    var tdTitle = document.createElement("td");
        
    tdIco.innerHTML = "<img style='width:15px;height:15px;' src='"+numIcon.image+"'/>";
        
    tdTitle.innerHTML = marker.getAttribute("Nom");
        
    tr.appendChild(tdIco);
    tr.appendChild(tdTitle);
        
    document.getElementById("attraits").appendChild(tr);
    
    return pin;
}