$(document).ready(function() {

var myLatLng = new google.maps.LatLng(30.5, 2.4);

MYMAP.init('#map_canvas', myLatLng, 2);


MYMAP.manageLayer('dates', true);



    $("#dates").click(function(e){

        MYMAP.manageLayer('dates', $(this).is(':checked'));

    });



});



var ICONS = {

'dates_passees':    '/squelettes-dist/img/plume-orange.png',

'dates_encours':    '/squelettes-dist/img/plume-bleue.png',

'dates_avenir':    '/squelettes-dist/img/plume-verte.png'

}



var LAYERS = {

    'dates': []

}



var MYMAP = {

    map: null,

    bounds: null 

}



MYMAP.init = function(selector, latLng, zoom) {

    this.directionsDisplay = new google.maps.DirectionsRenderer();

    var myOptions = {

        zoom:zoom,

        center: latLng,

        mapTypeControlOptions: { 

            mapTypeIds: ['basic', 'detailed'] 

        }

    }

    this.map = new google.maps.Map($(selector)[0], myOptions);

    this.directionsDisplay.setMap(this.map);

    this.bounds = new google.maps.LatLngBounds();

    this.layers = LAYERS;

    this.icons = ICONS;

    this.style();

}



// popup active

activeWindow = null;



// array des markers

markers = [];



MYMAP.initializeLayer = function(whattype) {



    // url du fichier json A CHANGER

    var json_data = '/spip.php?page=calendrier_total&lang=en';



    $.getJSON(json_data, function(mappable) {



        $.each(mappable, function(index, element) {

            var point = new google.maps.LatLng(element.lat,element.lng);

            var classee  = element.class_1;  

            for(var i = 1; i <60; i++) {

                window['name_'+i] = eval('element.name_'+i);

                window['class_'+i] = eval('element.class_'+i);

                window['titre_'+i] = eval('element.titre_'+i);

                window['info1_'+i] = eval('element.info1_'+i);

                window['info2_'+i] = eval('element.info2_'+i);

            }

            var marker = new google.maps.Marker({

                position: point,

                map: MYMAP.map,

                icon: MYMAP.icons[classee],

                title: name

            });

            MYMAP.layers[whattype].push(marker);

            //markers.push(marker);

            markers[element.id_evenement] = marker;



            var infoWindow = new google.maps.InfoWindow();



            var html='<div class="gmap_marker">';

            for(var i = 1; i < 60; i++){

                if(typeof window['name_'+i] != 'undefined'){ html += '<span class="' + window['class_'+i] + '">' + window['name_'+i] + '</span>'; } 

                if(typeof window['titre_'+i] != 'undefined'){ html += '<br /><span class="dates_titre">' + window['titre_'+i] + '</span>'; }  

                if(typeof window['info1_'+i] != 'undefined'){html += '<br /><span class="gmap_info1">' + window['info1_'+i] + '</span>'}

                if(typeof window['info2_'+i] != 'undefined'){html += '<br /><span class="gmap_info2">' + window['info2_'+i] + '</span><br /><br />'}

            }

            html += '<a href="javascript:;" onclick="getDirection(' + element.id_evenement + ');">Directions from your home</a>';

            html +='</div>';



            google.maps.event.addListener(marker, 'click', function() {

                if(activeWindow != null) {

                    activeWindow.close();

                }

                infoWindow.setContent(html);

                infoWindow.open(MYMAP.map, marker);

                activeWindow = infoWindow; 

            });



        }); // fin each



    }); // fin getJson









} // fin initializeLayer



MYMAP.manageLayer = function(whattype, value) {

    if(value && MYMAP.layers[whattype].length === 0){

        MYMAP.initializeLayer(whattype);

    }  

}



MYMAP.style = function() {

    var basicStyle = []; 

}



// ouvrir un marker

function openPopupMap(id){

    google.maps.event.trigger(markers[id], 'click');

    return false;

}



// tracer la route depuis le marker vers l'utilisateur

function getDirection(index,latitude) {



    // si l'utilisateur accepte la geoloc

    if (navigator.geolocation) {

        directionsService = new google.maps.DirectionsService();

        navigator.geolocation.getCurrentPosition(function(position) {                                                              

            var end = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

            var start = markers[index].getPosition();

            var request = {

                origin: start,

                destination: end,

                travelMode: google.maps.TravelMode.DRIVING

            };

            directionsService.route(request, function(response, status) {

                if (status == google.maps.DirectionsStatus.OK) {

                    MYMAP.directionsDisplay.setDirections(response);

                    MYMAP.directionsDisplay.setMap(MYMAP);

                } else {

                    alert("We have not been able to determine the route from your location");

                }

            });

        });

    } else {

        alert("The geolocation is not supported by your browser and / or your device");

    }



}