///////////////////////////////////////////////////
//                  MAP                          //
///////////////////////////////////////////////////

//Variable globale
var maMap;

    function initialize() {
        
        var monDivMap = document.getElementById('map');

        // Coordonnées
        var adresseArras = '12 place du trente-troisième, arras, france';
        var adresseParis = '77 Boulevard exelmans, paris, france';
        var adresseLyon = '1 rue du puits gaillot, lyon, france';
        var titreArras = 'Agence Arras';
        var titreParis = 'Agence Paris';
        var titreLyon = 'Agence Lyon';
        var contenuArras = '\
            <p style="color: #000;" class="vcard">\n\
            \n\ <span class="fn org">Activ\'Company</span><br />\n\
            <span class="adr"><span class="street-address">12 place du trente-troisième</span><br />\n\
            <span class="postal-code">62000</span> <span class="locality">Arras</span></span></p>\n\
        ';
        var contenuLyon = '\
            <p style="color: #000;" class="vcard">\n\
            \n\ <span class="fn org">Activ\'Company</span><br />\n\
            <span class="adr"><span class="street-address">1 rue du puit Gaillot</span><br />\n\
            <span class="postal-code">69001</span> <span class="locality">Lyon</span></span></p>\n\
        ';
        var contenuParis = '\
            <p style="color: #000;" class="vcard">\n\
            \n\ <span class="fn org">Activ\'Company</span><br />\n\
            <span class="adr"><span class="street-address">77 boulevard Exelmans</span><br />\n\
            <span class="postal-code">75016</span> <span class="locality">Paris</span></span></p>\n\
        ';

        villeArras = new Array(adresseArras, titreArras, contenuArras);
        villeParis = new Array(adresseParis, titreParis, contenuParis);
        villeLyon = new Array(adresseLyon, titreLyon, contenuLyon);
        
        villes = new Array(villeArras, villeParis, villeLyon);
        
        //Config de la map
        var mesOptionsMap = {
            center: new google.maps.LatLng(48.8432838,2.2593706),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            streetViewControl: true
          }

        // Création de la carte
        maMap = new google.maps.Map(
            monDivMap,
            mesOptionsMap
        );

        localisationVille(villes);

    }

    function localisationVille(villes)
    {
        var monImageMarker = new google.maps.MarkerImage('/images/frontend/puce_activ4.png');
        var geocoder = new google.maps.Geocoder();
        var index = 0;
        for (var i = 0; i <= (villes.length-1); i++) {

           geocoder.geocode({'address': villes[i][0]},
           function(results, status) {

              if (status == google.maps.GeocoderStatus.OK) {
                  var pointCourant = results[0].geometry.location;

                 // Création du Marker
                   var monMarker = new google.maps.Marker({
                        // Coordonnées GPS suite à l'adresse'
                        position: pointCourant,
                        map: maMap,
                        title: villes[index][1],
                        icon: monImageMarker
                    });
                    //Ajout de la fenetre d'informations au marqueur
                    var infoBulle = new google.maps.InfoWindow({
                        content: villes[index][2]+'<div id="StreetView" style="overflow: none; width: 400px; height: 200px; text-align:center">Street View en cours de chargement ...</div>'
                    });
                   
                    google.maps.event.addListener(monMarker, 'click', function() {
                        infoBulle.open(maMap,monMarker);
                        document.getElementById("StreetView").innerHTML="";

                        var panoramaOptions = {
                          position: pointCourant,
                          pov: {
                            heading: 0,
                            pitch: 0,
                            zoom: 1
                          }
                        };

                        StreetView = new  google.maps.StreetViewPanorama(document.getElementById("StreetView"), panoramaOptions);

                        //StreetView.setPov({heading:30, pitch:0, zoom:4});
                        //StreetView.setPosition(new google.maps.LatLng(pointCourant));
                        //maMap.setStreetView(StreetView);

                    });
                    index++;  

              } else {
                    alert("Geocode was not successful for the following reason: " + status);
              }

            });              
        }
    }