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

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


$(function () {

    if (mapLocation != null) {
        initMap();
    }

});

function initMap() {
    //create height of element
    var mapWidth = window.getComputedStyle(mapLocation).width;
    mapWidth = parseInt(mapWidth.slice(0, -2));
    var mapHeight = mapWidth;
    if(mapHeight < 350) mapHeight = 350;
    if(mapHeight > 460) mapHeight = 460;
    mapLocation.style.height = mapHeight + 'px';

    var marker = mapLocation.getAttribute('data-marker-type');

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


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

    var marker = '/img/googleMarker.png';
    var so = '/img/so-googleMarker.png';
    var vso = '/img/vso-googleMarker.png';

    if(markerType == 'so') marker = so;
    if(markerType == 'vso') marker = vso;

    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,

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

        styles: [
            {
                "featureType": "administrative",
                "elementType": "all",
                "stylers": [
                    {
                        "visibility": "on"
                    },
                    {
                        "lightness": 33
                    }
                ]
            },
            {
                "featureType": "landscape",
                "elementType": "all",
                "stylers": [
                    {
                        "color": "#f2e5d4"
                    }
                ]
            },
            {
                "featureType": "poi.park",
                "elementType": "geometry",
                "stylers": [
                    {
                        "color": "#c5dac6"
                    }
                ]
            },
            {
                "featureType": "poi.park",
                "elementType": "labels",
                "stylers": [
                    {
                        "visibility": "on"
                    },
                    {
                        "lightness": 20
                    }
                ]
            },
            {
                "featureType": "road",
                "elementType": "all",
                "stylers": [
                    {
                        "lightness": 20
                    }
                ]
            },
            {
                "featureType": "road.highway",
                "elementType": "geometry",
                "stylers": [
                    {
                        "color": "#c5c6c6"
                    }
                ]
            },
            {
                "featureType": "road.arterial",
                "elementType": "geometry",
                "stylers": [
                    {
                        "color": "#e4d7c6"
                    }
                ]
            },
            {
                "featureType": "road.local",
                "elementType": "geometry",
                "stylers": [
                    {
                        "color": "#fbfaf7"
                    }
                ]
            },
            {
                "featureType": "water",
                "elementType": "all",
                "stylers": [
                    {
                        "visibility": "on"
                    },
                    {
                        "color": "#acbcc9"
                    }
                ]
            }
        ]

    }


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

    var marker = new google.maps.Marker({
        position: {lat: googleX, lng: googleY},
        optimized: false,
        map: map,
        icon: marker,
        zIndex: 10
    });
    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() {
        window.open('http://maps.google.com/?q='+googleX+','+googleY);
        map.setZoom(8);
        map.setCenter(marker.getPosition());
    });

}