var container = d3.select('#scatterPlot');
var legend = d3.select('#scatterPlot_legend');
d3.select('#title').text('PCA Result');

var vizcontrol = d3.select('#controls');
var viztable = vizcontrol.append('table').attr('align', 'center');


viztable.append('input').attr('autocomplete', 'off').attr('name', 'highlight')
      .attr('class', 'valid').attr('type', 'text').attr('value', '')
      .attr('id', 'highlight').attr('placeholder', 'Player Name').attr('tabindex', '3')
      .attr('spellcheck', 'false')
      .attr('autofocus');

highlight.addEventListener("keyup", function(event) {
   if (!highlight.value) sp.highlight(undefined);
   if (event.keyCode == 13) {
      sp.highlight(highlight.value);
   }
});


function init() {
   sp.options({
      id    : 'first',

      data: {
         identifier:    'name',
         abbreviation:  'aiorhuman',
         group:         'aiorhuman',
         sub_group:     'nameid',
         r_scale:       'rating',
         x:             'pca_x',
         y:             'pca_y'
      },

      // axes  : {
      //    x: { label:   'S' },
      //    y: { label:   'Points per Set' } 
      // },

      datapoints: {
         radius: {
            default: [5, 20],
            mobile:  [1, 1]
         },
         title:   "name",
      },

      legend: { 
         dom_element: legend,
         title:   'AI or HUMAN',
         text:    'Click Legend to select.<br> Click title to reset.',
         },

      display: {
         reset:         '#scatterPlot_legend',
         zoom:          true,
         bubble_legend: false,
         highlight: {
            radius:     100,
            fill:       undefined
         }
      }
   });

   sp.events({
      'element': { 'click': highlightMatch }
   });

   sp.colors({
      "AI":      "#2074A0",
      "Human":      "#66489F",
   });

   sp.duration(1000);
}

// function displayPerSet() {
//    sp.options({
//       data: {
//          identifier:    'name',
//          abbreviation:  'aiorhuman',
//          group:         'aiorhuman',
//          sub_group:     'nameid',
//          r_scale:       'rating',
//          x:             'pca_x',
//          y:             'pca_y'
//       },
//       // axes  : {
//       //    x: { label:   'Shots per Set' },
//       //    y: { label:   'Points per Set' } 
//       // }
//    })
// }



sp = scatterPlot();
init();


d3.json('./result_r.dat', function(err, data) {

   // nameid: "5.67"
   // nameid: "26.17"
   // aiorhuman: "6-0"
   // pca_y: 34
   // pca_x: 157
   // Tournament: "Maui"
   // name: "Michael Mmoh v. Kyle Edmund"
   // nameid: 'MichaelMmohKyleEdmundMaui2016'

   sp.data(data.data);
   container.call(sp);
   sp.update();
})

function highlightMatch(d, i, element) {
   var group = [];
   d3.selectAll('circle').each(function() { 
      var set = d3.select(this);
      if (set.attr('identifier') == d.name) {
         set.attr('r', 100);
         set.style('opacity', 1);
         group.push([set.attr('cx'), set.attr('cy')]);
      } else {
         set.attr('r', rating);
         set.style('opacity', .6);
      }
   })
   
}