<script type="text/javascript">
  $(function() {

    var country_info = <%== @countries.to_json %>

    var vectormap = new jvm.WorldMap({
      container: $('#ca_map'),
      map: 'ca',
      backgroundColor: '#7d7d7d',
      zoomButtons: false,
      selectedRegions: 'ni',
      zoomOnScroll: false,
      regionStyle: {
        initial: {
          fill: '#EBEBEB',
          "fill-opacity": 1,
          stroke: 'none',
          "stroke-width": 0,
          "stroke-opacity": 1
        },
        hover: {
          fill: '#3C81BA',
          "fill-opacity": 0.8
        },
        selected: {
          fill: '#3C81BA'
        },
        selectedHover: {
          fill: '#3C81BA'
        }
      },

      onRegionOver: function() {
        document.body.style.cursor = 'pointer';
      },
      onRegionOut: function() {
        document.body.style.cursor = 'default';
      },

      onRegionLabelShow: function(e, el, code) {
        var country = country_info[code];
        if (country) {
          el.text(country.name);
          vectormap.clearSelectedRegions();
          vectormap.setSelectedRegions(code);
          $("#info-boxes")
            .find(".country_map_name").text(country.name).end()
            .find("[data-country-properties]").text(""+country.properties).end()
            .find("[data-country-resorts]").text(""+country.resorts);
        }
      },

      onRegionClick: function(e, code) {
        var country = country_info[code];
        if (country) {
          Turbolinks.visit(country.url);
        }
      }

    });

  });
</script>