var PromiseWrapper = d => new Promise(resolve => d3.csv(d, p => resolve(p)));

Promise
  .all([
    PromiseWrapper("german.csv"),
    PromiseWrapper("british.csv"),
    PromiseWrapper("malaysian.csv"),
    PromiseWrapper("hong_kong.csv"),
    PromiseWrapper("filipino.csv"),
    PromiseWrapper("american.csv"),
    PromiseWrapper("indonesian.csv"),
    PromiseWrapper("singaporean.csv"),
    PromiseWrapper("thai.csv"),
    PromiseWrapper("french.csv"),
    PromiseWrapper("indian.csv"),
    PromiseWrapper("australian.csv"),
    PromiseWrapper("danish.csv"),
    PromiseWrapper("swedish.csv"),
    PromiseWrapper("finnish.csv"),
    PromiseWrapper("vietnamese.csv"),
    PromiseWrapper("egyptian.csv"),
    PromiseWrapper("uae.csv"),
    PromiseWrapper("arabian.csv"),
    PromiseWrapper("norwegian.csv")
  ])
  .then(resolve => {
    createAdjacencyMatrix(
      resolve[0],
      resolve[1],
      resolve[2],
      resolve[3],
      resolve[4],
      resolve[5],
      resolve[6],
      resolve[7],
      resolve[8],
      resolve[9],
      resolve[10],
      resolve[11],
      resolve[12],
      resolve[13],
      resolve[14],
      resolve[15],
      resolve[16],
      resolve[17],
      resolve[18],
      resolve[19]
    );
  });

function createAdjacencyMatrix(
    german,
    british,
    malaysian,
    hong_kong,
    american,
    filipino,
    indonesian,
    singaporean,
    thai,
    french,
    indian,
    australian,
    danish,
    swedish,
    finnish,
    vietnamese,
    egyptian,
    uae,
    arabian,
    norwegian
  ) {

  // KEY
  var keyMatrix = [];
  const characteristics = ["Personality", "Humor", "Intelligence", "Looks", "Interests", "Money"];
  const rank = [1, 2, 3, 4, 5, 6];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
      var grid = {
        id: `${source}-${target}`,
        x: b,
        y: a,
        percentage: 0
      };
      keyMatrix.push(grid);
    });
  });

  d3.select(".key")
    .append("g")
    .attr('transform', 'translate(5, 40)')
    .selectAll("rect").data(keyMatrix).enter()
    .append("rect")
    .attr("class", "key")
    .attr("width", 15)
    .attr("height", 15)
    .attr("x", d => d.x * 15)
    .attr("y", d => d.y * 15)
    .style('fill', '#ccc')
    .style('fill-opacity', '.25');

  d3.select(".key")
    .append('g')
      .attr('transform', 'translate(100, 52)')
    .selectAll('text').data(characteristics).enter()
    .append('text')
      .attr('y', (d, i) => i * 15)
      .text(d => d)
      .style('text-anchor', 'start')
      .style('font-family', 'Roboto')
      .style('font-size', '10px');

  d3.select(".key")
    .append('g')
    .attr('transform', 'translate(10,140)')
    .selectAll('text').data(rank).enter()
    .append('text')
    .attr('x', (d, i) => i * 15)
    .text(d => d)
    .style('font-family', 'Roboto')
    .style('font-size', '10px');

  // GERMAN
  var germanHash = {};
  german.forEach(edge => {
    var id = `${edge.source}-${edge.target}`;
    germanHash[id] = edge;
  });

  var germanMatrix = [];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
        var grid = {
          id: `${source}-${target}`,
          x: b,
          y: a,
          percentage: 0
        };
      if (germanHash[grid.id]) {
          grid.percentage = germanHash[grid.id].percentage;
        }
      germanMatrix.push(grid);
    });
  });

  d3.select(".german")
    .append("g")
    .selectAll("rect").data(germanMatrix).enter()
    .append("rect")
      .attr("class", "grid")
      .attr("width", 15)
      .attr("height", 15)
      .attr("x", d => d.x * 15)
      .attr("y", d => d.y * 15)
      .style("fill-opacity", d => d.percentage);

  // BRITISH
  var britishHash = {};
  british.forEach(edge => {
    var id = `${edge.source}-${edge.target}`;
    britishHash[id] = edge;
  });

  var britishMatrix = [];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
      var grid = {
        id: `${source}-${target}`,
        x: b,
        y: a,
        percentage: 0
      };
      if (britishHash[grid.id]) {
        grid.percentage = britishHash[grid.id].percentage;
      }
      britishMatrix.push(grid);
    });
  });

  d3.select(".british")
    .append("g")
    .selectAll("rect").data(britishMatrix).enter()
    .append("rect")
    .attr("class", "grid")
    .attr("width", 15)
    .attr("height", 15)
    .attr("x", d => d.x * 15)
    .attr("y", d => d.y * 15)
    .style("fill-opacity", d => d.percentage);

  // MALAYSIAN
  var malaysianHash = {};
  malaysian.forEach(edge => {
    var id = `${edge.source}-${edge.target}`;
    malaysianHash[id] = edge;
  });

  var malaysianMatrix = [];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
      var grid = {
        id: `${source}-${target}`,
        x: b,
        y: a,
        percentage: 0
      };
      if (malaysianHash[grid.id]) {
        grid.percentage = malaysianHash[grid.id].percentage;
      }
      malaysianMatrix.push(grid);
    });
  });

  d3.select(".malaysian")
    .append("g")
    .selectAll("rect").data(malaysianMatrix).enter()
    .append("rect")
    .attr("class", "grid")
    .attr("width", 15)
    .attr("height", 15)
    .attr("x", d => d.x * 15)
    .attr("y", d => d.y * 15)
    .style("fill-opacity", d => d.percentage);

  // HONG KONG
  var hongKongHash = {};
  hong_kong.forEach(edge => {
    var id = `${edge.source}-${edge.target}`;
    hongKongHash[id] = edge;
  });

  var hongKongMatrix = [];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
      var grid = {
        id: `${source}-${target}`,
        x: b,
        y: a,
        percentage: 0
      };
      if (hongKongHash[grid.id]) {
        grid.percentage = hongKongHash[grid.id].percentage;
      }
      hongKongMatrix.push(grid);
    });
  });

  d3.select(".hong_kong")
    .append("g")
    .selectAll("rect").data(hongKongMatrix).enter()
    .append("rect")
    .attr("class", "grid")
    .attr("width", 15)
    .attr("height", 15)
    .attr("x", d => d.x * 15)
    .attr("y", d => d.y * 15)
    .style("fill-opacity", d => d.percentage);

  // filipino
  var filipinoHash = {};
  filipino.forEach(edge => {
    var id = `${edge.source}-${edge.target}`;
    filipinoHash[id] = edge;
  });

  var filipinoMatrix = [];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
      var grid = {
        id: `${source}-${target}`,
        x: b,
        y: a,
        percentage: 0
      };
      if (filipinoHash[grid.id]) {
        grid.percentage = filipinoHash[grid.id].percentage;
      }
      filipinoMatrix.push(grid);
    });
  });

  d3.select(".filipino")
    .append("g")
    .selectAll("rect").data(filipinoMatrix).enter()
    .append("rect")
    .attr("class", "grid")
    .attr("width", 15)
    .attr("height", 15)
    .attr("x", d => d.x * 15)
    .attr("y", d => d.y * 15)
    .style("fill-opacity", d => d.percentage);
  
  // american
  var americanHash = {};
  american.forEach(edge => {
    var id = `${edge.source}-${edge.target}`;
    americanHash[id] = edge;
  });

  var americanMatrix = [];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
      var grid = {
        id: `${source}-${target}`,
        x: b,
        y: a,
        percentage: 0
      };
      if (americanHash[grid.id]) {
        grid.percentage = americanHash[grid.id].percentage;
      }
      americanMatrix.push(grid);
    });
  });

  d3.select(".american")
    .append("g")
    .selectAll("rect").data(americanMatrix).enter()
    .append("rect")
    .attr("class", "grid")
    .attr("width", 15)
    .attr("height", 15)
    .attr("x", d => d.x * 15)
    .attr("y", d => d.y * 15)
    .style("fill-opacity", d => d.percentage);

  // indonesian
  var indonesianHash = {};
  indonesian.forEach(edge => {
    var id = `${edge.source}-${edge.target}`;
    indonesianHash[id] = edge;
  });

  var indonesianMatrix = [];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
      var grid = {
        id: `${source}-${target}`,
        x: b,
        y: a,
        percentage: 0
      };
      if (indonesianHash[grid.id]) {
        grid.percentage = indonesianHash[grid.id].percentage;
      }
      indonesianMatrix.push(grid);
    });
  });

  d3.select(".indonesian")
    .append("g")
    .selectAll("rect").data(indonesianMatrix).enter()
    .append("rect")
    .attr("class", "grid")
    .attr("width", 15)
    .attr("height", 15)
    .attr("x", d => d.x * 15)
    .attr("y", d => d.y * 15)
    .style("fill-opacity", d => d.percentage);

  // singaporean
  var singaporeanHash = {};
  singaporean.forEach(edge => {
    var id = `${edge.source}-${edge.target}`;
    singaporeanHash[id] = edge;
  });

  var singaporeanMatrix = [];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
      var grid = {
        id: `${source}-${target}`,
        x: b,
        y: a,
        percentage: 0
      };
      if (singaporeanHash[grid.id]) {
        grid.percentage = singaporeanHash[grid.id].percentage;
      }
      singaporeanMatrix.push(grid);
    });
  });

  d3.select(".singaporean")
    .append("g")
    .selectAll("rect").data(singaporeanMatrix).enter()
    .append("rect")
    .attr("class", "grid")
    .attr("width", 15)
    .attr("height", 15)
    .attr("x", d => d.x * 15)
    .attr("y", d => d.y * 15)
    .style("fill-opacity", d => d.percentage);

  // thai
  var thaiHash = {};
  thai.forEach(edge => {
    var id = `${edge.source}-${edge.target}`;
    thaiHash[id] = edge;
  });

  var thaiMatrix = [];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
      var grid = {
        id: `${source}-${target}`,
        x: b,
        y: a,
        percentage: 0
      };
      if (thaiHash[grid.id]) {
        grid.percentage = thaiHash[grid.id].percentage;
      }
      thaiMatrix.push(grid);
    });
  });

  d3.select(".thai")
    .append("g")
    .selectAll("rect").data(thaiMatrix).enter()
    .append("rect")
    .attr("class", "grid")
    .attr("width", 15)
    .attr("height", 15)
    .attr("x", d => d.x * 15)
    .attr("y", d => d.y * 15)
    .style("fill-opacity", d => d.percentage);

  // french
  var frenchHash = {};
  french.forEach(edge => {
    var id = `${edge.source}-${edge.target}`;
    frenchHash[id] = edge;
  });

  var frenchMatrix = [];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
      var grid = {
        id: `${source}-${target}`,
        x: b,
        y: a,
        percentage: 0
      };
      if (frenchHash[grid.id]) {
        grid.percentage = frenchHash[grid.id].percentage;
      }
      frenchMatrix.push(grid);
    });
  });

  d3.select(".french")
    .append("g")
    .selectAll("rect").data(frenchMatrix).enter()
    .append("rect")
    .attr("class", "grid")
    .attr("width", 15)
    .attr("height", 15)
    .attr("x", d => d.x * 15)
    .attr("y", d => d.y * 15)
    .style("fill-opacity", d => d.percentage);

  // indian
  var indianHash = {};
  indian.forEach(edge => {
    var id = `${edge.source}-${edge.target}`;
    indianHash[id] = edge;
  });

  var indianMatrix = [];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
      var grid = {
        id: `${source}-${target}`,
        x: b,
        y: a,
        percentage: 0
      };
      if (indianHash[grid.id]) {
        grid.percentage = indianHash[grid.id].percentage;
      }
      indianMatrix.push(grid);
    });
  });

  d3.select(".indian")
    .append("g")
    .selectAll("rect").data(indianMatrix).enter()
    .append("rect")
    .attr("class", "grid")
    .attr("width", 15)
    .attr("height", 15)
    .attr("x", d => d.x * 15)
    .attr("y", d => d.y * 15)
    .style("fill-opacity", d => d.percentage);

  // australian
  var australianHash = {};
  australian.forEach(edge => {
    var id = `${edge.source}-${edge.target}`;
    australianHash[id] = edge;
  });

  var australianMatrix = [];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
      var grid = {
        id: `${source}-${target}`,
        x: b,
        y: a,
        percentage: 0
      };
      if (australianHash[grid.id]) {
        grid.percentage = australianHash[grid.id].percentage;
      }
      australianMatrix.push(grid);
    });
  });

  d3.select(".australian")
    .append("g")
    .selectAll("rect").data(australianMatrix).enter()
    .append("rect")
    .attr("class", "grid")
    .attr("width", 15)
    .attr("height", 15)
    .attr("x", d => d.x * 15)
    .attr("y", d => d.y * 15)
    .style("fill-opacity", d => d.percentage);

  // danish
  var danishHash = {};
  danish.forEach(edge => {
    var id = `${edge.source}-${edge.target}`;
    danishHash[id] = edge;
  });

  var danishMatrix = [];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
      var grid = {
        id: `${source}-${target}`,
        x: b,
        y: a,
        percentage: 0
      };
      if (danishHash[grid.id]) {
        grid.percentage = danishHash[grid.id].percentage;
      }
      danishMatrix.push(grid);
    });
  });

  d3.select(".danish")
    .append("g")
    .selectAll("rect").data(danishMatrix).enter()
    .append("rect")
    .attr("class", "grid")
    .attr("width", 15)
    .attr("height", 15)
    .attr("x", d => d.x * 15)
    .attr("y", d => d.y * 15)
    .style("fill-opacity", d => d.percentage);

  // swedish
  var swedishHash = {};
  swedish.forEach(edge => {
    var id = `${edge.source}-${edge.target}`;
    swedishHash[id] = edge;
  });

  var swedishMatrix = [];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
      var grid = {
        id: `${source}-${target}`,
        x: b,
        y: a,
        percentage: 0
      };
      if (swedishHash[grid.id]) {
        grid.percentage = swedishHash[grid.id].percentage;
      }
      swedishMatrix.push(grid);
    });
  });

  d3.select(".swedish")
    .append("g")
    .selectAll("rect").data(swedishMatrix).enter()
    .append("rect")
    .attr("class", "grid")
    .attr("width", 15)
    .attr("height", 15)
    .attr("x", d => d.x * 15)
    .attr("y", d => d.y * 15)
    .style("fill-opacity", d => d.percentage);

  // finnish
  var finnishHash = {};
  finnish.forEach(edge => {
    var id = `${edge.source}-${edge.target}`;
    finnishHash[id] = edge;
  });

  var finnishMatrix = [];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
      var grid = {
        id: `${source}-${target}`,
        x: b,
        y: a,
        percentage: 0
      };
      if (finnishHash[grid.id]) {
        grid.percentage = finnishHash[grid.id].percentage;
      }
      finnishMatrix.push(grid);
    });
  });

  d3.select(".finnish")
    .append("g")
    .selectAll("rect").data(finnishMatrix).enter()
    .append("rect")
    .attr("class", "grid")
    .attr("width", 15)
    .attr("height", 15)
    .attr("x", d => d.x * 15)
    .attr("y", d => d.y * 15)
    .style("fill-opacity", d => d.percentage);
    
  // vietnamese
  var vietnameseHash = {};
  vietnamese.forEach(edge => {
    var id = `${edge.source}-${edge.target}`;
    vietnameseHash[id] = edge;
  });

  var vietnameseMatrix = [];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
      var grid = {
        id: `${source}-${target}`,
        x: b,
        y: a,
        percentage: 0
      };
      if (vietnameseHash[grid.id]) {
        grid.percentage = vietnameseHash[grid.id].percentage;
      }
      vietnameseMatrix.push(grid);
    });
  });

  d3.select(".vietnamese")
    .append("g")
    .selectAll("rect").data(vietnameseMatrix).enter()
    .append("rect")
    .attr("class", "grid")
    .attr("width", 15)
    .attr("height", 15)
    .attr("x", d => d.x * 15)
    .attr("y", d => d.y * 15)
    .style("fill-opacity", d => d.percentage);

  // egyptian
  var egyptianHash = {};
  egyptian.forEach(edge => {
    var id = `${edge.source}-${edge.target}`;
    egyptianHash[id] = edge;
  });

  var egyptianMatrix = [];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
      var grid = {
        id: `${source}-${target}`,
        x: b,
        y: a,
        percentage: 0
      };
      if (egyptianHash[grid.id]) {
        grid.percentage = egyptianHash[grid.id].percentage;
      }
      egyptianMatrix.push(grid);
    });
  });

  d3.select(".egyptian")
    .append("g")
    .selectAll("rect").data(egyptianMatrix).enter()
    .append("rect")
    .attr("class", "grid")
    .attr("width", 15)
    .attr("height", 15)
    .attr("x", d => d.x * 15)
    .attr("y", d => d.y * 15)
    .style("fill-opacity", d => d.percentage);

  // uae
  var uaeHash = {};
  uae.forEach(edge => {
    var id = `${edge.source}-${edge.target}`;
    uaeHash[id] = edge;
  });

  var uaeMatrix = [];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
      var grid = {
        id: `${source}-${target}`,
        x: b,
        y: a,
        percentage: 0
      };
      if (uaeHash[grid.id]) {
        grid.percentage = uaeHash[grid.id].percentage;
      }
      uaeMatrix.push(grid);
    });
  });

  d3.select(".uae")
    .append("g")
    .selectAll("rect").data(uaeMatrix).enter()
    .append("rect")
    .attr("class", "grid")
    .attr("width", 15)
    .attr("height", 15)
    .attr("x", d => d.x * 15)
    .attr("y", d => d.y * 15)
    .style("fill-opacity", d => d.percentage);
    
  // arabian
  var arabianHash = {};
  arabian.forEach(edge => {
    var id = `${edge.source}-${edge.target}`;
    arabianHash[id] = edge;
  });

  var arabianMatrix = [];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
      var grid = {
        id: `${source}-${target}`,
        x: b,
        y: a,
        percentage: 0
      };
      if (arabianHash[grid.id]) {
        grid.percentage = arabianHash[grid.id].percentage;
      }
      arabianMatrix.push(grid);
    });
  });

  d3.select(".arabian")
    .append("g")
    .selectAll("rect").data(arabianMatrix).enter()
    .append("rect")
    .attr("class", "grid")
    .attr("width", 15)
    .attr("height", 15)
    .attr("x", d => d.x * 15)
    .attr("y", d => d.y * 15)
    .style("fill-opacity", d => d.percentage);

  // norwegian
  var norwegianHash = {};
  norwegian.forEach(edge => {
    var id = `${edge.source}-${edge.target}`;
    norwegianHash[id] = edge;
  });

  var norwegianMatrix = [];
  characteristics.forEach((source, a) => {
    rank.forEach((target, b) => {
      var grid = {
        id: `${source}-${target}`,
        x: b,
        y: a,
        percentage: 0
      };
      if (norwegianHash[grid.id]) {
        grid.percentage = norwegianHash[grid.id].percentage;
      }
      norwegianMatrix.push(grid);
    });
  });

  d3.select(".norwegian")
    .append("g")
    .selectAll("rect").data(norwegianMatrix).enter()
    .append("rect")
    .attr("class", "grid")
    .attr("width", 15)
    .attr("height", 15)
    .attr("x", d => d.x * 15)
    .attr("y", d => d.y * 15)
    .style("fill-opacity", d => d.percentage);

  // MOUSE OVER FUN
  d3.selectAll("rect.key").on("mouseover", keyOver);
  d3.selectAll("rect.key").on("mouseout", keyOut);

  function keyOut(d) {

    d3.selectAll("rect.key ")
      .style("fill", "#ccc")
      .style("fill-opacity", .25)
      .style('stroke-width', '0px');

    // d3.selectAll("rect.grid ")
    //   .style("")
    //   .style("fill-opacity", d => d.percentage);

    d3.selectAll("rect.grid")
      .attr('width', function (p) {
      return p.x * 15 == d.x * 15 && p.y * 15 == d.y * 15 ? '0' : '15'
    })
      .attr('height', function (p) {
        return p.x * 15 == d.x * 15 && p.y * 15 == d.y * 15 ? '0' : '15'
      })
      .attr('x', function (p) {
        return p.x * 15 == d.x * 15 && p.y * 15 == d.y * 15 ? p.x * 15 : p.x * 15
      })
      .attr('y', function (p) {
        return p.x * 15 == d.x * 15 && p.y * 15 == d.y * 15 ? p.y * 15 : p.y * 15
      })
      .style("fill", function (p) {
        return p.x * 15 == d.x * 15 && p.y * 15 == d.y * 15 ? "red" : p.percentage;
      });

  }

  function keyOver(d) {

    d3.selectAll("rect.key ")
      .style("fill", function (p) {
        return p.x * 15 >= d.x * 15 && p.y * 15 >= d.y * 15 ? '#ccc' : 'white'
      })
      .style("fill-opacity", function (p) {
        return p.x * 15 == d.x * 15 || p.y * 15 == d.y * 15 ? ".25" : "0"
      })
      .style("stroke", function (p) {
        return p.x * 15 == d.x * 15 && p.y * 15 == d.y * 15 ? '#999' : ''
      })
      .style("stroke-width", function (p) {
        return p.x * 15 == d.x * 15 && p.y * 15 == d.y * 15 ? '2px' : '0px'
      });

    d3.selectAll("rect.grid ")
      .attr('width', function(p) {
        return p.x * 15 == d.x * 15 && p.y * 15 == d.y * 15 ? '150' : '0'
      })
      .attr('height', function (p) {
        return p.x * 15 == d.x * 15 && p.y * 15 == d.y * 15 ? '150' : '0'
      })
      .attr('x', function (p) {
        return p.x * 15 == d.x * 15 && p.y * 15 == d.y * 15 ? 0 : d.x * 15
      })
      .attr('y', function (p) {
        return p.x * 15 == d.x * 15 && p.y * 15 == d.y * 15 ? 0 : d.y * 15
      })
      .style("fill", function (p) {
        return p.x * 15 == d.x * 15 && p.y * 15 == d.y * 15 ? "red" : "grey"
      });

  }

}