<div class="selections cf">
    <form method="get" class="m-all t-1of3 d-1of3" autocomplete="off">
        <select id="country" name="country" onchange="this.form.submit()">
            <option value="894283V3+2H">894283V3+2H</option>        </select>
    </form>

    <div class="m-all t-1of3 d-1of3">
        <select id="region" name="region" onchange="getCities(this);" autocomplete="off">
                            <option value="Wybierz województwo">Wybierz województwo</option>
                    </select>
    </div>

    <div class="m-all t-1of3 d-1of3">
        <select id="city" class="m-all t-1of3 d-1of3 last-col" name="city" onchange="getStreets(this);" autocomplete="off">
            <option>Wybierz miasto</option>
        </select>
    </div>
</div>

<div class="cf">
    <label class="checkbox-inline diy">
        <input id="market" type="checkbox" name="typ" value="3" checked="checked" onclick="Filter()">Market budowlany    </label>
    <label class="checkbox-inline magazine">
        <input id="sklad" type="checkbox" name="typ" value="2" checked="checked" onclick="Filter()">Skład magazynowy    </label>
    <label class="checkbox-inline distributor">
        <input id="dystrybutor" type="checkbox" name="typ" checked="checked" value="1" onclick="Filter()">Dystrybutor    </label>
    <label class="checkbox-inline partner">
        <input id="partner" type="checkbox" name="typ" checked="checked" value="1" onclick="Filter()">Partner    </label>
</div>
<script type="text/javascript">

    //jQuery('#country').selectpicker();
    //jQuery('#region').selectpicker();
    //jQuery('#city').selectpicker();

    var countries = '{"1279":"Slovakia"}';
    var cities = '{"":{"1279":"Partizanske"}}';
    var streets = '{"Partizanske":{"1279":"nam. Mieru 597\/1"}}';
    var lats = '{"1279":"48.627649"}';
    var lngs = '{"1279":"18.3861045"}';
    var addresses = '{"1279":"N\u00e1m. mieru 597\/1, 958 01 Partiz\u00e1nske, Slovakia"}';
    var types = '{"1279":"4"}';
    var names = '{"1279":"VFS s.r.o."}';
    var phones = '{"1279":"0421 905 659 429"}';
    var wwws = '{"1279":""}';

    zoom = 3;

    var allowedtypes = [];
    
    function getAllowedTypes() {
        allowedtypes = [];
        if (jQuery('#market').prop('checked')) {
            allowedtypes.push(3);
        }
        if (jQuery('#sklad').prop('checked')) {
            allowedtypes.push(2);
        }
        if (jQuery('#dystrybutor').prop('checked')) {
            allowedtypes.push(1);
        }
        if (jQuery('#partner').prop('checked')) {
            allowedtypes.push(4);
        }
        return allowedtypes;
    }

    var addressHtml = [];

    // function paginateTable() {
    //     jQuery('.table-pagination').remove();
    //     if(jQuery('#results table tr').length > 20){
    //         jQuery('#results table').tablePaginate({navigateType:'navigator',recordPerPage:10});
    //     } else {
    //         jQuery('#results table').tablePaginate({navigateType:'full',recordPerPage:10});
    //     }
    // }

    sortSelectOptions('#region', true);
    function getAll() {
        clearMarkers();

        getAllowedTypes();

        obj = jQuery.parseJSON(streets);

        addressHtml = [];
        jQuery.each(obj, function(key, value) {
            jQuery.each(value, function(id, street, type) {
                SetPoint(id);
            });
        });

        map.setZoom(zoom);
                var latlng = new google.maps.LatLng(32.342524698541, -39.946083249459);

        center = new google.maps.LatLng(32.342524698541,-39.946083249459);
        map.panTo(center);
        
                jQuery('#results table tbody').append(addressHtml.join(''));
             var table = jQuery('#results table').DataTable({
                "destroy": true,
                "order": [[ 0, 'asc' ], [ 1, 'asc' ]],
                "pageLength": 20,
                "searching": false,
                "language": {
                    "paginate": {
                      "previous": "&larr;",
                      "next": "&rarr;"
                    }
                }
            } );
    }

    function getCities(element) {
        var selected = element.value;
        if (selected == "Wybierz województwo") {
            jQuery('#cities').empty();
            getAll();
            return;
        } else {
            obj = jQuery.parseJSON(cities);
            options = obj[selected];
            appendCities(options);
            zoomIt();
        }
    }
    
    function loadCities(value){
        if (value == "Wybierz województwo") {
            getAll();
            return;
        }
        
        obj = jQuery.parseJSON(cities);
        if(obj){
            options = obj[value];
            appendCities(options);
            console.log('oi')
            jQuery("select[name=region] option[value='"+value+"']").attr('selected', 'selected');
            //jQuery('#region').selectpicker('refresh');
            jQuery('#results table tbody').append(addressHtml.join(''));
                var table = jQuery('#results table').DataTable({
                "destroy": true,
                "order": [[ 0, 'asc' ], [ 1, 'asc' ]],
                "pageLength": 20,
                "searching": false,
                "language": {
                    "paginate": {
                      "previous": "&larr;",
                      "next": "&rarr;"
                    }
                }
            } );
        }else{
            getAll();
        }  
    }

    function appendCities(options) {
        olats = jQuery.parseJSON(lats);
        olngs = jQuery.parseJSON(lngs);
        oaddresses = jQuery.parseJSON(addresses);
        var $el = jQuery("#city");
        $el.empty(); // remove old options
        
        $el.append(jQuery("<option></option>").attr("value", 0).text('Wybierz miasto'));
        
        clearMarkers();
            
        var usedNames = {};
        addressHtml = [];
        jQuery.each(options, function(id, key) {
            if(!usedNames[key]){
                $el.append(jQuery("<option></option>")
                    .attr("value", id).text(key));
            }
            lat = olats[id];
            lng = olngs[id];
            address = oaddresses[id];
            SetPoint(id);
            usedNames[key] = key;
        });
		sortSelectOptions('#city', true);
        if (jQuery.fn.DataTable.isDataTable('#results table')) {
          jQuery('#results table').DataTable().clear().destroy();
        }
        jQuery('#results table tbody').append(addressHtml.join(''));
        var table = jQuery('#results table').DataTable({
            "destroy": true,
            "order": [[ 0, 'asc' ], [ 1, 'asc' ]],
            "pageLength": 20,
            "searching": false,
            "language": {
                "paginate": {
                  "previous": "&larr;",
                  "next": "&rarr;"
                }
            }
        } );
        //paginateTable();
        zoomIt();
        //Filter();
    }

    function sortSelectOptions(selector, skip_first) {
        var options = (skip_first) ? jQuery(selector + ' option:not(:first)') : jQuery(selector + ' option');
        var arr = options.map(function(_, o) { return { t: jQuery(o).text(), v: o.value, s: jQuery(o).prop('selected') }; }).get();
        arr.sort(function(o1, o2) {
          var t1 = o1.t.toLowerCase(), t2 = o2.t.toLowerCase();
          return t1.localeCompare(t2);
        }); 
        options.each(function(i, o) {
            o.value = arr[i].v;
            jQuery(o).text(arr[i].t);
            if (arr[i].s) {
                jQuery(o).attr('selected', 'selected').prop('selected', true);
            } else {
                jQuery(o).removeAttr('selected');
                jQuery(o).prop('selected', false);
            }
        }); 
    }

    function getStreets(element) {
        var id = element.value;
        if (id == '0') {

            selected = jQuery("#region option:selected").val();

            obj = jQuery.parseJSON(cities);
            options = obj[selected];
            appendCities(options);
        } else {
            clearMarkers();

            selected = jQuery("#region option:selected").val();
            obj = jQuery.parseJSON(cities);
            options = obj[selected];

            addressHtml = [];
            jQuery.each(options, function(id, key) {
                if(key == jQuery("#city option:selected").text()){
                    lat = olats[id];
                    lng = olngs[id];
                    address = oaddresses[id];
                    SetPoint(id);
                }
            });
			if (jQuery.fn.DataTable.isDataTable('#results table')) {
              jQuery('#results table').DataTable().clear().destroy();
            }
            console.log('here')
            jQuery('#results table tbody').append(addressHtml.join(''));
            zoomIt();
        }
        var table = jQuery('#results table').DataTable({
            "destroy": true,
            "order": [[ 0, 'asc' ], [ 1, 'asc' ]],
            "pageLength": 20,
            "searching": false,
            "language": {
                "paginate": {
                    "previous": "&larr;",
                    "next": "&rarr;"
                }
            }
        } );
        //paginateTable();
    }

    function zoomIt(){
        if(markers.length > 0){
            var bounds = markers.reduce(function(bounds, marker) {
                return bounds.extend(marker.getPosition());
            }, new google.maps.LatLngBounds());

            map.setCenter(bounds.getCenter());
            map.fitBounds(bounds);
        }
    }

</script>

    <style>
      #map-canvas {
        margin: 25px auto;
        height: 620px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzqwV2COu61ASo1ahiR0Ju8bzQOaE695E&v=3.exp"></script>
    <script>
      var geocoder;
      var map;
      var markers = [];

      function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(32.342524698541, -39.946083249459);
        var mapOptions = {
          zoom: 3,
          center: latlng
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                  getAll();
          //jQuery('#results').before('<span>Wybierz region</span>');
        
      }

      var olats = jQuery.parseJSON(lats);
      var olngs = jQuery.parseJSON(lngs);
      var ocountries = jQuery.parseJSON(countries);
      var oaddresses = jQuery.parseJSON(addresses);
      var otypes = jQuery.parseJSON(types);
      var onames = jQuery.parseJSON(names);
      var ophones = jQuery.parseJSON(phones);
      var owwws = jQuery.parseJSON(wwws);

      function SetPoint(id) {

        lat = olats[id];
        lng = olngs[id];
        land = ocountries[id];
        address = oaddresses[id];
        type = otypes[id];
        name = onames[id];
        phone = ophones[id];
        if (phone == 'null' || phone == null) {
          phone = '';
        }
        www = owwws[id];
        if (www == 'null' || www == null) {
          www = '';
        }

        var location = new google.maps.LatLng(lat, lng);

                  var point = 'https://stones.com.pl/wp-content/themes/stones/library/images/icons/wheretobuy-purple.png';
        
        selectedtype = parseInt(type);
        typesOrder = ["7","4","2","1","3","5","6"];
        countries = {Poland:'http://stones.com.pl/gdzie-kupic/', Detschland:'http://de.stones.com.pl/gdzie-kupic/', France:'http://stegu.fr/ou-acheter/', Ireland:'http://ie.stones.com.pl/where-to-buy/'};

        if (allowedtypes.indexOf(selectedtype) > -1) {
          if ( type==='7' ) {
              var zindex = 999;
            }
            else {
              var zindex = "";
            }
          var marker = new google.maps.Marker({
            id: id,
            position: location,
            map: map,
            icon: point,
            zIndex: zindex
          });

          var infowindow = new google.maps.InfoWindow({
            content: ''
          });

          var countryLink = '';

                        if(typeof countries[land] !== 'undefined'){
                countryLink = '<a href="'+countries[land]+'">Distribution</a>';
              }
          
          var infoHtml = "<p class='address-map-popup'>"
              + "<strong>" + name + "</strong><br/>"
              + address + "<br/><br/><br/>"
              + phone + "<br/>"
              + www + "<br/><br/>"
              + countryLink
              + "</p>";

          if (address) {
            var addressSplited = address.split(', ');
            address = addressSplited.shift() + "<br>" + addressSplited.join(', ');
            addressHtml.push(
                "<tr>");
            if(jQuery('.language-list .dropdown-toggle').text().trim() !== 'pl'){
              addressHtml.push('<td class="country">'
                  + land
                + '</td>');
            }
            addressHtml.push('<td style="display:none">' + typesOrder[type-1] + '</td>');
            addressHtml.push( "<td>"
                  + "<img class='point-icon' src='" + point + "'/>"
                  + name
                + "</td>"
                + "<td>"
                  + address
                + "</td>"
                + "<td>"
                  + phone + "<br/>"
                  + www
                + "</td>"
                + "<td>"
                  + "<a class='generate-marker-link' onclick='generateMarker(" + markers.length + "); '>Pokaż na mapie</a>"
                + "</td>"
                + "</tr>");
            // jQuery('#results table tbody').append(addressHtml.join(''));
          }

          bindInfoWindow(marker, map, infowindow, infoHtml);
          markers.push(marker);
        }
      }

      function generateMarker(markerPos){
        for (var i = 0; i < markers.length; i++) {
          if(i != markerPos){
            markers[i].setMap(null);
          }else{
            markers[i].setMap(map);
            map.setCenter(markers[i].position);
          }
        }
        jQuery('html, body').animate({scrollTop : jQuery('.header').height()},500);
      }

      function Filter() {
        getAllowedTypes();
        getAll();
      }

      /* deprecated, changed to setPoint method for google request balance*/

              var prev_infowindow;
        function bindInfoWindow(marker, map, infowindow, html) {
          google.maps.event.addListener(marker, 'mouseover', function() {
            if( prev_infowindow ) {
               prev_infowindow.close();
            }

            infowindow.setContent(html);
            infowindow.open(map, marker);

            prev_infowindow = infowindow;
          });
        }
      
      // Sets the map on all markers in the array.
      function setAllMap(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }

      // Removes the markers from the map, but keeps them in the array.
      function clearMarkers() {
        setAllMap(null);
        jQuery('#results table tbody').html('');
        markers = [];
      }

      function adjustZoom(results) {
        count = results.length;
        if (count == 1) {
          zoom = 12;
        } else {
          zoom = 6;
        }
        map.setZoom(zoom);
      }

      jQuery(window).load(function(){
        initialize()
        //google.maps.event.addDomListener(window, 'load', initialize);
      });

    </script>

    <div id="map-canvas"></div>

    
<div class="clearfix"></div>

<div id="results">
    <table class="table table-hover">
        <thead style="display: none;">
            <tr>
                <th>Type</th>
                <th>Name</th>
                <th>Address</th>
                <th>Contact</th>
                <th>Find</th>
            </tr>
        </thead>
        <tbody>
            
        </tbody>
    </table>
</div>
{"id":185,"date":"2016-02-03T12:20:55","date_gmt":"2016-02-03T11:20:55","guid":{"rendered":"http:\/\/stegu.pl\/?page_id=185"},"modified":"2016-07-28T09:49:06","modified_gmt":"2016-07-28T07:49:06","slug":"where-to-buy","status":"publish","type":"page","link":"https:\/\/stones.com.pl\/en\/where-to-buy\/","title":{"rendered":"Distribution"},"content":{"rendered":"\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":11,"featured_media":4384,"parent":0,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"acf":[],"_links":{"self":[{"href":"https:\/\/stones.com.pl\/en\/wp-json\/wp\/v2\/pages\/185"}],"collection":[{"href":"https:\/\/stones.com.pl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stones.com.pl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stones.com.pl\/en\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/stones.com.pl\/en\/wp-json\/wp\/v2\/comments?post=185"}],"version-history":[{"count":4,"href":"https:\/\/stones.com.pl\/en\/wp-json\/wp\/v2\/pages\/185\/revisions"}],"predecessor-version":[{"id":4386,"href":"https:\/\/stones.com.pl\/en\/wp-json\/wp\/v2\/pages\/185\/revisions\/4386"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stones.com.pl\/en\/wp-json\/wp\/v2\/media\/4384"}],"wp:attachment":[{"href":"https:\/\/stones.com.pl\/en\/wp-json\/wp\/v2\/media?parent=185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}