function createProvinceOpenings(data) {
  let chartContainer = d3.select('.chart-container');
  let tooltip = chartContainer.append('div').attr('class', 'tooltip');

  let chart = d3.select('.openings-chart');
  
  categoryArray = [];
  class Category {
    constructor(icon, title, img) {
      this.icon = icon;
      this.title = title;
      this.img = img;
      categoryArray.push(this)
    }
  }
  let haircut = new Category('haircut', 'Can I get a haircut?', '/polopoly_fs/1.4969555.1591296646!/httpImage/image.png_gen/derivatives/landscape_150/image.png')
  let dinner = new Category('dinner', 'Can I go out for dinner?', '/polopoly_fs/1.4969562.1591296843!/httpImage/image.png_gen/derivatives/landscape_150/image.png')
  let shopping = new Category('shopping', 'Can I go shopping?', '/polopoly_fs/1.4969569.1591296898!/httpImage/image.png_gen/derivatives/landscape_150/image.png')
  let school = new Category('schools', 'Are schools open?', '/polopoly_fs/1.4969575.1591297040!/httpImage/image.png_gen/derivatives/landscape_150/image.png')
  let gyms = new Category('gyms', 'Can I go to the gym?', '/polopoly_fs/1.4969577.1591297089!/httpImage/image.png_gen/derivatives/landscape_150/image.png')
  let travel = new Category('travel', 'Can I travel?', '/polopoly_fs/1.4969579.1591297145!/httpImage/image.png_gen/derivatives/landscape_150/image.png')
  let gathering = new Category('hangout', 'How many can gather?', '/polopoly_fs/1.4969583.1591297198!/httpImage/image.png_gen/derivatives/landscape_150/image.png')

  //iconList = ['haircut', 'dinner', 'shopping', 'schools', 'gyms', 'travel', 'hangout']
  //titleList = ['Haircuts', 'Dinners', 'Shopping', 'Schools', 'Gyms', 'Travel', 'Gatherings']

  //chart.append('div') //blank
  categoryArray.forEach(category => chart.append('div').attr('class', 'column-title').text(category.title))

  data.forEach(province => {
    let container = chart.append('div').attr('class', 'container')
    //let background = container.append('div').attr('class', 'background')
    let title = container.append('div').attr('class', 'row-title').text(province['province'])

    categoryArray.forEach(category => {

      let provinceText = province[category.icon].split(';'); 
      console.log(provinceText)   
      let provinceStatus = provinceText.splice(0,1)[0]
      let provinceHover = provinceText.join(';').trim()

      let container = chart.append('div').attr('class', 'container')
      let background = container.append('div').attr('class', 'background')
        .style('background', provinceStatus.toLowerCase().trim() === 'no' ? '#fff2f5' : category.icon === 'hangout' ? 'none' : '#f3f3f3')
    
    let iconDiv;
    if (provinceStatus.toLowerCase().trim() === 'yes') {
      iconDiv = container.append('div').attr('class', `icon-div ${category.icon}`)
      iconDiv.append('img').attr('class', `icon ${category.icon}`).attr('src', category.img)
    }
    if (category.icon === 'hangout') {
      iconDiv = container.append('div').attr('class', `icon-div ${category.icon}`)
      iconDiv.append('img').attr('class', `icon ${category.icon}`).attr('src', category.img)
      let hangoutNumber = container.append('div').attr('class', `gathering`)
        .text(province[category.icon].split(';')[0])
    }

    container
      .on('mousemove', function(e) {           tooltip.style('display', 'block')
          tooltip.html(`<div class='bold tip-title'>${category.title}</div><div class='tip-text'><span class='bold'>${province.province}:</span> ${category.icon === 'hangout' ? provinceHover : province[category.icon]}</div>`);
          let node = chartContainer.node();
          let [x, y] = d3.mouse(node)
          let [w, h] = [tooltip.node().offsetWidth, tooltip.node().offsetHeight] 
          let [cW, cH] = [node.offsetWidth, node.offsetHeight]
          //console.log([x, y])

          tooltip.style('left', `${Math.min(cW - w, Math.max(0, x - w/2))}px`)
          tooltip.style('top', `${Math.min(cH - h, Math.max(0, y > cH - h - 50? y - 5 - h : y + 50))}px`)
     })
      .on('mouseover', function() {
        if (iconDiv) {
          iconDiv.node().classList.add('active')
        }
      })
      .on('mouseout', function() {
        if (iconDiv) {
          iconDiv.node().classList.remove('active')
        }
       tooltip.style('display', 'none')
      })
    })    
  })
}



async function createCharts() {
  //let data = await d3.json('data.json');
  let data = await d3.json('https://beta.ctvnews.ca/content/dam/common/exceltojson/province-openings.txt')
  createProvinceOpenings(data)
}

window.onload = () => createCharts();