const geojson = 'https://feyderm.github.io/data/Arts and Culture (2010-2013) - Shape.geojson';

const checkbox = d3.select('#checkbox');
const dropdown = d3.select('.dropdown');

// populate drop-down
dropdown.selectAll('option')
        .data(dropdown_options)
        .enter()
        .append('option')
        .attr('value', option => option.value)
        .text(option => option.text);

const width = 700;
const height = 650;

const svg = d3.select('#map')
              .append('svg')
              .attr('height', height)
              .attr('width', width);

const projection = d3.geo.mercator()
                     .center([-76.6180827, 39.323953])
                     .scale([140000])
                     .translate([270, 165]);

const path = d3.geo.path()
               .projection(projection);

d3.json(geojson, json => {
  svg.selectAll('path')
     .data(json.features)
     .enter()
     .append('path')
     .attr('class', 'neighborhoods')
     .attr('d', path)
     .attr('stroke', '#808080')
     .attr('fill', '#b3b3b3')
     .call(updateFill)
     .on('mouseover', d_path => displayDatum(d_path))
     .on('mouseout', hideDatum);
});

dropdown.on('change', () => {
  checkbox.property('checked', true);

  d3.selectAll('.neighborhoods')
    .call(updateFill);
});

checkbox.on('change', () => {
  d3.selectAll('.neighborhoods')
    .call(updateFill);
});

function updateFill (neighborhood) {
  const scaleFill = getScaleFill();
  
  neighborhood.transition()
              .duration(500)
              .attr('fill', d_path => {
                const is_path_downtown = d_path.properties.csa2010 === 'Downtown/Seton Hill';
                return is_path_downtown && !isDowntownChecked() ? '#b3b3b3' : scaleFill(d_path);
              });
}

function getScaleFill () {
  // first of two scales for linear fill; ref [1]
  const scaleViridis = d3.scale.linear()
                         .domain(d3.range(0, 1, 1 / (viridis_colors.length - 1)))
                         .range(viridis_colors);

  // second of two scales for linear fill; ref[1]
  const scaleNormalized = d3.scale.linear()
                            .domain(getExtent())
                            .range([0, 1]);

  const parseData = getParser(getDropDownSelection());

  function scaleFill (d_path) {
    return scaleViridis(scaleNormalized(parseData(d_path)));
  }
  return scaleFill;
}

function getExtent () {
  let d = d3.selectAll('path').data();

  if (!isDowntownChecked()) {
    d = d.filter(d_path => d_path.properties.csa2010 !== 'Downtown/Seton Hill');
  }

  const parseData = getParser(getDropDownSelection());
  const d_selected = d.map(d_path => parseData(d_path));

  return d3.extent(d_selected);
}

function isDowntownChecked () {
  return checkbox.property('checked');
}

function getDropDownSelection () {
  return dropdown.property('value');
}

function getParser (dataset) {
  // dataset-specific accessor
  function parser (d) {
    return +d.properties[dataset];
  } 
  return parser;
}

function displayDatum (d_path) {
  const parseData = getParser(getDropDownSelection());
  const datum = parseData(d_path).toFixed(2); 
  const neighborhood = d_path.properties.csa2010;

  d3.select('#neighborhood')
    .text(neighborhood);
  d3.select('#datum')
    .text(datum);
}

function hideDatum () {
  d3.select('#neighborhood')
    .text('\u00A0');
  d3.select('#datum')
    .text('\u00A0');
}

// references
// [1] http://stackoverflow.com/questions/17671252/d3-create-a-continous-color-scale-with-many-strings-inputs-for-the-range-and-dy