$(function(){

    // Make a GET request with an AJAX call to fetch data from the json file, which contains stats on Marcell Ozuna's career homeruns from MLB Statcast via BaseballSavant.com

    // Documentation: http://api.jquery.com/jquery.ajax/
    // Example GET request: https://stackoverflow.com/questions/9269265/ajax-jquery-simple-get-request

    $.ajax({
        url: 'ozuna.json',
        method: 'GET',
        dataType:"json",
    }).then(function(data){

        for (i = 0; i < data.length; i++) {

            // On each of the SVG's of the baseball stadiums, use a for loop to iterate over each of the 48 items in the array. Then, append a circle with a class of `homerun` to the div.

            $(".layer_1").append("<svg><circle class='homerun'></svg>");
            $(".layer_2").append("<svg><circle class='homerun'></svg>");
            $(".layer_3").append("<svg><circle class='homerun'></svg>");
            $(".layer_4").append("<svg><circle class='homerun'></svg>");

            // Marcell Ozuna hit a total of 22 homeruns last season
            // if (data[i].game_year === 2017) {
            //  // console.log(data[i].game_year);
            //  // $(".layer_2").append("<svg><circle class='homerun'></svg>");
            //  // $(".layer_3").append("<svg><circle class='homerun'></svg>");
            // } else {
            //  // $(".layer_1").append("<svg><circle class='homerun'></svg>");
            //  // $(".layer_4").append("<svg><circle class='homerun'></svg>");
            // }

            // This refers to each of the circles. Each of the circles contains the following attributes. The user sees a small red dot with a black border.
            $(".homerun").each(function(index){
                $(this).attr({
                    cx: data[index].hc_x,
                    cy: data[index].hc_y,
                    r: 4.71,
                    fill:"#a82254",
                    stroke:"#000",
                   "stroke-width": 1,
                })

                $(this).hover(function(){
                    changeText(data, index);
                    showSidebar();
                })
            });
        }
    });

    // When you hover over one of the circles, change the text in the sidebar. It takes two parameters, the data from the AJAX call and the index of the object in the array.
    function changeText(data, index) {
        $(".sidebar__date").html(data[index].game_date);
        $(".team--home").html(data[index].home_team);
        $(".team--away").html(data[index].away_team);
        $(".sidebar__tb").html(data[index].inning_topbot);
        $(".sidebar__inning").html(data[index].inning);
        $(".sidebar__description").html(data[index].des_long);
        $(".sidebar__pitch").html(data[index].pitch_type);
        $(".value--balls").html(data[index].balls);
        $(".value--strikes").html(data[index].strikes);
        $(".value--outs").html(data[index].outs_when_up);
    }

    // Show the game details. By default, the sidebar is empty and a user will see only the attribution until they hover over the first red dot.
    function showSidebar() {
        $(".sidebar").show();
    }
});

[
  {
   "pitch_type":"four-seam fastball",
   "release_speed": 92.4,
   "game_date":"March 31, 2014",
   "game_year": 2014,
   "des_long":"In the bottom of the 3rd, Marcell Ozuna homers off a 92.4 mph four-seam fastball to left field. A. J. Ellis scores. Christian Yelich scores. Giancarlo Stanton scores.",
   "des_short":"Marcell Ozuna homers on a line drive to left field.",
   "home_team":"MIA",
   "away_team":"COL",
   "balls": 3,
   "strikes": 1,
   "outs_when_up": 0,
   "inning_topbot":"bottom",
   "inning":"3rd",
   "hc_x": 19.08,
   "hc_y": 85.34,
   "hit_distance_sc":"null"
  },

    $.ajax({
        url: 'ozuna.json',
        method: 'GET',
        dataType:"json",
    }).then(function(data){

    // Marlins Park
    addHomeRuns(data, '.layer_1', 'all');
    addHomeRuns(data, '.layer_2', 2017);
    // Busch
    addHomeRuns(data, '.layer_3', 'all');
    addHomeRuns(data, '.layer_4', 2017);

    });


  // On each of the SVG's of the baseball stadiums, use a for loop to iterate over each of the 48 items in the array. Then, append a circle with a class of `homerun` to the div.
  function addHomeRuns(data, layerClass, year)
  {
    var svg = $(layerClass).get(0);

    $.each(data, function(i, obj) {

      var showHomer = year === 'all' || obj.game_year === year;
      if (showHomer)
      {
        var circle = document.createElementNS(svg.namespaceURI, 'circle');
        circle.setAttribute('cx', obj.hc_x);
        circle.setAttribute('cy', obj.hc_y);
        circle.setAttribute('r', 4.71);
        circle.setAttribute('fill',"#a82254");
        circle.setAttribute('stroke',"#000");
        circle.setAttribute('stroke-width', 1);
        svg.appendChild(circle);
      }

      $(circle).hover(function() {
        changeText(obj);
        showSidebar();
      });
    });
  }