d3.csv("https://raw.githubusercontent.com/polygraph-cool/this-american-life/master/data/act1.csv")
  .then(function(data) {
  
	  // settings
  	const maleColor = "#6767FF"
    const femaleColor = "#FA676C"

    function showTooltip(episode) {
      // constants used in tooltip info
      const episodeData = data.filter(d => d.episode == episode)[0]
      const malePerc = d3.format(".01f")(episodeData.malePercent)
      const femalePerc = d3.format(".01f")(100 - episodeData.malePercent)

      // adjust the text
      d3.select(".tt-heading")
        .text(`#${episodeData.episode}: ${episodeData.title}`)

      d3.select(".tt-description")
        .text(`${episodeData.description}`)
      
      // size and label the bars
      d3.select(".female-bar")
      	.style("width", `${femalePerc}px`)
        .style("background-color", femaleColor)
      
      d3.select(".gender-label.female")
      	.style("color", femaleColor)
      	.text(`${femalePerc}% female dialogue`)
      
      d3.select(".male-bar")
      	.style("width", `${episodeData.malePercent}px`)
        .style("background-color", maleColor)
      
      d3.select(".gender-label.male")
        .style("color", maleColor)
      	.text(`${malePerc}% male dialogue`)

      d3.select(".chart-tooltip")
      	.transition()
      	.duration(200)
        .style("opacity", 0.9)
    }
  
    const svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
    
    const rects = d3.select("svg")
    	.selectAll(".rect")
    	.data(data)
    	.enter()
    	.append("rect")
    	.attr("class", "rect")
    	.attr("width", 32)
    	.attr("height", 8)
    	.attr("x", 15)
    	.attr("y", (d, i) => 8 * i)
    	.attr("fill", "steelblue")
    	.attr("stroke", "white")
    	.attr("stroke-width", 1)
    	.style("opacity", 0.3)
    
    rects
    	.on("mouseover", function(d, i) {
      	console.log(d)
//         console.log(this)
        
        d3.select(this)
        	.style("opacity", 1)
        	.style("cursor", "pointer")
        
        showTooltip(d.episode)
        
    	})
    	.on("mouseout", function(d, i) {
      	d3.select(this)
        	.style("opacity", 0.3)
        
        d3.select(".chart-tooltip")
        	.style("opacity", 0)
    	})
    	.on("click", function(d, i) {
      	window.open(`https://hw2.thisamericanlife.org/radio-archives/episode/${d.episode}`, "_blank")
    	})
  	
  });