$(document).ready(function() {
    var url = 'https://datahaven.carto.com/api/v2/viz/403de1d2-4ae6-11e6-a70e-0ee66e2c9693/viz.json';

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

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

    var sublayer;
    var $cond_menu = $('#condition-menu');
    var $age_menu = $('#age-menu');

    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('zip,town,diabetes_0_19,diabetes_20_44,diabetes_45_64,diabetes_65_74,diabetes_75_84,diabetes_85plus,diabetes_all_ages,heart_disease_0_19,heart_disease_20_44,heart_disease_45_64,heart_disease_65_74,heart_disease_75_84,heart_disease_85plus,heart_disease_all_ages,homicide_0_19,homicide_20_44,homicide_45_64,homicide_65_74,homicide_75_84,homicide_85plus,homicide_all_ages,substance_abuse_0_19,substance_abuse_20_44,substance_abuse_45_64,substance_abuse_65_74,substance_abuse_75_84,substance_abuse_85plus,substance_abuse_all_ages');
            //sublayer.setInteractivity('zip,town');
            createSelector(sublayer);

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

    function createSelector(layer) {

        $cond_menu.change(function(e) {
            update(layer);
        });
        $age_menu.change(function(e) {
            update(layer);
        });
        $cond_menu.change();
        $age_menu.change();
    }

    function update(layer) {
        var condition = $cond_menu.val();
        var age = $age_menu.val();

        var column = condition + '_' + age;
        condition = condition.replace(/_/g, ' ');
        var age2 = 'ages ' + age.replace(/_/g, '-');
        age2 = age2.replace('ages all-ages', 'all ages');
        age2 = age2.replace('85plus', '85+');
        //var age2 = age.replace(/_/g, '-').replace('all-ages', 'all ages');

        var colors = ['#ffffb2','#fed976','#feb24c','#fd8d3c','#fc4e2a','#e31a1c','#b10026'];
        var allCSS = '#chime_full_to_map { polygon-fill:#ffffb2; polygon-opacity: 0.8; line-color: #fff; line-width: 0.5; line-opacity: 1; }';

        var quantilesql = new cartodb.SQL({ user: 'datahaven' });
        var query = "SELECT CDB_QuantileBins(array_agg(" + column + "::numeric), 7) FROM chime_full_to_map WHERE " + column + " IS NOT NULL AND " + column + " < 99999";
        quantilesql.execute(query)
            .done(function(data) {
                var breaks = data.rows[0].cdb_quantilebins;
                console.log(breaks);

                //colors.forEach(function(color, i) {
                breaks.reverse().forEach(function(val, i) {
                    var color = colors.reverse()[i];
                    allCSS += ' #chime_full_to_map [' + column + ' <= ' + val + '] { polygon-fill: ' + color + '; }';
                });
                layer.setCartoCSS(allCSS);
                sublayer.infowindow.set('template', function(object) {
                    var rate = +object.content.data[column];
                    object.rate = rate.toFixed(2);
                    object.condition = condition;
                    object.ages = 'ages ' + age.replace(/_/g, '-');
                    object.ages = object.ages.replace('ages all-ages', 'all ages');

                    return Mustache.render($('#infowindow_template').html(), object);
                });
                $('li.min').text(Math.round(breaks[6]));
                $('li.max').text(Math.round(breaks[0]));
                $('div.legend-title').text(condition + ', ' + age2 + ' per 10k residents');
                $('#condition-head').text(condition.charAt(0).toUpperCase() + condition.slice(1));
                $('#age-head').text(age2);
            })
            .error(function(err) {
                console.log(err);
            });
    }
});