$(document).ready(function() {

    var url = 'https://datahaven.carto.com/api/v2/viz/9d3d5dca-4ab6-11e6-b760-0ee66e2c9693/viz.json';

    var options = {
        zoom: 9,
        center: [41.469852, -72.682523]
    };

    var sublayerOptions = {
        sql: "SELECT * FROM all_age_adjusted_to_map",
        cartocss: $('#base-css').text()
    };

    var sublayer;

    var map_obj = new L.map('map-container', options);
    L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
        attribution: 'OpenStreetMap'
    }).addTo(map_obj);

    cartodb.createLayer(map_obj, url)
        .addTo(map_obj)
        .done(function(layer) {
            sublayer = layer.getSubLayer(0);
            sublayer.set(sublayerOptions);
            sublayer.setInteractivity('cartodb_id, town, zip, diabetes, heart_disease, homicide, substance_abuse');

            createSelector(sublayer);
        })
        .error(function(err) {
            console.log(err);
        });

    function createSelector(layer) {
        var css = '';
        var $menu = $('#condition-menu');
        $menu.change(function(e) {
            var condition = $('#condition-menu').val();
            $('#condition-head').text($('#condition-menu option:selected').text().toLowerCase());
            css = $('#' + condition + '-css').text();
            layer.setCartoCSS(css);
            layer.infowindow.set({
                'template': function(object) {
                    var rate = +object.content.data[condition];
                    object.rate = rate.toFixed(2);
                    object.condition = condition.replace(/_/g, ' ');
                    return Mustache.render($('#infowindow_template').html(), object);
                }
            });
        });
        $menu.change();
    }
});