$(document).ready(function() {
    initialize()
    function initialize() {
        var zooms = 12;
        var paramsList = $('.all-shops-cord');
        zooms = +(paramsList.attr('param-zoom'));
        //console.log(zooms)
        var autoCenter = paramsList.data('autocentr');
        var startLat = 50.435;
        var startLng = 30.60;

        if(autoCenter) {
            var newStartI = 0;
            var newStartLat = 0;
            var newStartLng = 0;

            $(paramsList).find('span').each(function() {
                newStartI ++;
                newStartLat = newStartLat + (+($(this).data('lat')));
            })
            startLat = newStartLat / newStartI;

            newStartI = 0;
            $(paramsList).find('span').each(function() {
                newStartI ++;
                newStartLng = newStartLng + (+($(this).data('lng')));
            })
            startLng = newStartLng / newStartI;
        }

        var start_position = new google.maps.LatLng(startLat, startLng);

        var styles = [
            {
                stylers: [
                    {saturation: -100}
                ]
            }
        ];
        var settings = {
            styles: styles,
            zoom: zooms,
            scrollwheel: false,
            center: start_position,
            mapTypeControl: true,
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            navigationControl: false,
            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
            scaleControl: true,
            streetViewControl: true,
            rotateControl: true,
            zoomControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

        var image1 = new google.maps.MarkerImage('images-new/markers/marker-we-1.png', new google.maps.Size(34, 48), new google.maps.Point(0, 0), new google.maps.Point(16, 35));

        var markers = [];

        $(paramsList).find('span').each(function() {
                    var newLat = $(this).data('lat');
                    var newLng = $(this).data('lng');

                    var newName = $(this).text();

                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(newLat, newLng),
                        map: map,
                        title: newName,
                        icon: image1
                    });
                    markers.push(marker);
                }
            );

        var clusterStyles = [
            {
                url: 'images-new/markers/clasters.png',
                height: 36,
                width: 36
            }

        ];
        markerClusterer = new MarkerClusterer(map, markers, {
            maxZoom: 10,
            gridSize: 100,
            minimumClusterSize:1,
            styles: clusterStyles
        });
    }

    $('.cities-tile .addCity i').click(function () {
        $(this).parent().parent().addClass('vis');
    })
    $('.hidden_shops ul li').click(function () {
        $('.hidden_shops ul li').removeClass('active');
        $(this).addClass('active');

        var newNameActiveCity = $(this).find('span.s_').text();
        var newPhonesActiveCity = $(this).find('span.s_').text();

        var newPhonesAdressGraph = $(this).find('.p_').html();

        $(this).parents('.hidden_shops').parent().parent().removeClass('vis')

        $(this).parents('.hidden_shops').parent().find('i').html(newNameActiveCity);

        $('.phone-graph-map-wr').empty().html(newPhonesAdressGraph);




        var newCordActiveCity = $(this).find('.p_').find('.adress-map-wr');

       // console.log(newCordActiveCity.length )
        $('.all-shops-cord').empty();
        var newZooms  = 17 ;
        if(newCordActiveCity.length > 1) {
            newZooms  = 12 ;
            newCordActiveCity.each(function () {
                $('.all-shops-cord').append($(this).html())
            })
        } else {
            $('.all-shops-cord').html(newCordActiveCity.html());
        }

        $('.all-shops-cord').attr('param-zoom',newZooms);

        initialize();
    })

    $('body').on('click', '.adress-map-wr', function () {
        if($(this).parents('.phone-graph-map-wr').find('.adress-map-wr').length > 1 || $(this).find('span').hasClass('first-click-adress')) {
            $('.adress-map-wr span').removeClass('active');
            $(this).find('span').addClass('active');
            $('.all-shops-cord').attr('param-zoom',18);
            $('.all-shops-cord').html( $(this).html());
            initialize();
        }

    })
    
})