/**
 * Created by Pascal on 05/04/16.
 */


$(function () {

    var mapLocation = document.getElementById('map');


    if (mapLocation != null) {

        //create height of element
        var mapWidth = window.getComputedStyle(mapLocation).width;
        mapWidth = parseInt(mapWidth.slice(0, -2));
        mapHeight = (mapWidth / 2);

        if(mapHeight < 280) mapHeight = 280;

        mapLocation.style.height = 280 + 'px';

        googleMaps(parseFloat(mapLocation.getAttribute('data-googlex')), parseFloat(mapLocation.getAttribute('data-googley')));
    }


    function googleMaps(googleX, googleY) {
        var zoom = 8; 

        var style = [{"featureType":"landscape.man_made","elementType":"all","stylers":[{"color":"#47443d"}]},{"featureType":"landscape.natural","elementType":"all","stylers":[{"color":"#3d3a37"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"weight":1.11},{"saturation":-100}]},{"featureType":"administrative.locality","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"off"},{"color":"#6e5b38"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#9c7e48"}]},{"featureType":"road.arterial","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#7a643c"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#2c385c"}]},{"featureType":"road.local","elementType":"labels","stylers":[{"visibility":"off"}]}];

        var styledMap = new google.maps.StyledMapType(style);

        var mapOptions = {
            // How zoomed in you want the map to start at (always required)
            zoom: zoom,
            minZoom: zoom,
            maxZoom: zoom,
            disableDefaultUI: true,
            draggable: false,
            scrollwheel: false,
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
            },


            // The latitude and longitude to center the map (always required)
            center: new google.maps.LatLng(googleX, googleY)
        }


        var map = new google.maps.Map(mapLocation, mapOptions);

        var marker = new google.maps.Marker({
            position: {lat: googleX, lng: googleY},
            optimized: false,
            map: map,
            icon: '/img/googleMapsMarker.png',
            zIndex: 10
        });
        map.mapTypes.set('map_style', styledMap);
        map.setMapTypeId('map_style');
        marker.setMap(map);

        map.addListener('center_changed', function() {
            // 3 seconds after the center of the map has changed, pan back to the
            // marker.
            window.setTimeout(function() {
                map.panTo(marker.getPosition());
            }, 3000);
        });

        marker.addListener('click', function() {
            map.setZoom(8);
            map.setCenter(marker.getPosition());
        });
    }
});