/**
 * 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));
    // mapHeight = mapWidth / 2;
    // if(mapHeight < 350) mapHeight = 350;
    // if(mapHeight > 400) mapHeight = 400;
    // mapLocation.style.height = mapHeight + 'px';
    googleMapsPosition();


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

function googleMapsPosition() {
    if($(document).width() > 1110){
        mapLocation.style.height = '640px';
        mapLocation.style.width = '358px';
    }
    else{
        mapLocation.style.width = $('.route-page').width()+'px';
        mapLocation.style.height = ( $('.route-page').width()/ 16 * 9 )+'px';
    }
}


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

    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":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
    }


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

    var marker = new google.maps.Marker({
        position: {lat: googleX, lng: googleY},
        optimized: false,
        map: map,
        icon: '/images/structure/gm-marker.png',
        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() {
        map.setZoom(8);
        map.setCenter(marker.getPosition());
    });
}