<script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="https://d3js.org/colorbrewer.v1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">



<div class = "container">
<h1>Visualizing the Flow of Poetry</h1>
  <h2> Poems By  <a href= "https://en.wikipedia.org/wiki/Hafez" target = “_blank”>Hafiz</a> </h2>


<!--   <div class = "smallVoice"> Press the button to draw the flow of three poems together. </div> -->

    <div id="flowMany">
    <input name="updateButton" 
           type="button" 
           value="PLAY" 
           onclick="" />
</div>
<div id="linesContainer" class="svg-container">
</div>

body {
  background-color: #044686;
  font-weight: 400;
  color:#C4D4E4;
  width: 100vw;
/*   padding: 5%; */
  font-size: 25px;
  font-family: Oswald;

}
#container {
     position: relative;
   width: 100vw;
  height: 80vh;
 }

.svg-container {
    display: inline-block;
    position: relative;
    width: 100vw;
    vertical-align: top;
    overflow: hidden;
}

a{
  color: white;
}
#linesContainer {
  width: 100vw;
  position:absolute;
  left:0;

}

path{
    fill: none;
}

input{
  background-color: #C4D4E4;
  color: #FFCB47;
  height: 5vh;
  width: 54vw;
  margin-left:23%;
  color:#044686;
  font-weight:800;
  font-size: 115%;
  
}

h1{
  font-size: 150%;
  width: 65%;
  font-weight: 500;
  margin: auto;
  text-align:center;
}
h2{
  font-size: 130%;
  text-align:center;
  width: 65%;
  font-weight: 500;
  margin: auto;
}

#flowMany{
   
  
  
}

/*Global */

let holdNumbers = [];
let holdWords = [];
let poemData;
let poemsMargin = {top: 0, right: 0, bottom: 50, left: 0}
let poemsWidth = 1060 - poemsMargin.left - poemsMargin.right;
// let poemsWidth = 900
let poemsHeight = 450 - poemsMargin.top - poemsMargin.bottom;
// let chartDiv = document.getElementById("chart");
// let charts = d3.select(chartDiv).append("svg");

var charts = d3.select("div#linesContainer")
  .append("svg")
  .attr("preserveAspectRatio", "xMinYMin meet")
  .attr("viewBox", "0 0 1060 450")
  .classed("svg-content", true)
  .classed("svg-content-dark", true);

let xScaleLines = d3.scaleLinear().range([85, poemsWidth-75])

let yScaleLines = d3.scaleLinear().range([poemsHeight,85])


let lineColors = ["#FFCB47","#FF6A00","#AACCFF"]
var colorScale = d3.scaleOrdinal(lineColors);

d3.json("https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/poems.json", function(poemData) {
// console.log(poemData[0].stanzas)

/* 1) SETUP */
poemData.forEach(function(element, index, arr){

holdNumbers = [];
holdWords = [];

let numbersAndWords = arr[index].stanzas.map(function(o) {

  for (j = 0; j < o.length; j++){
    let theWords = o[j].split(',').pop()
    let theNumbers = o[j].length
    // console.log(theWords)
    holdNumbers.push(theNumbers)
    holdWords.push(theWords)
    /* Trying to add spaces for stanza breaks */
    // wordspoemData.push(" ")
  }

});

/* Set the number of characters in each line and the cooresponding lines as entries in the poemData structure */

arr[index].lines = []
for (var i = 0; i<holdNumbers.length;i++){

let newEntry = {
"words":holdWords[i],
"numbers":holdNumbers[i]
}

arr[index].lines.push(newEntry)

}

}) // end setup forEach


/*2) PLOT

*/
  const poemLines = d3.line()
    // .curve(d3.curveMonotoneY)
   .curve(d3.curveStep)
  // .curve(d3.curveStepBefore)
  // .curve(d3.curveBasis)
  // .curve(d3.curveBasisClosed)
  // .curve(d3.curveStepAfter)
 // .curve(d3.curveCardinal)
 // .curve(d3.curveNatural)
  .x(function(d, index) { return xScaleLines(index); })
  .y(function(d) { return yScaleLines(d.numbers); });


  xScaleLines.domain(d3.extent(poemData[0].lines, function(d, index) { return index; }));
  yScaleLines.domain([0, d3.max(poemData[0].lines, function(d, index) { return d.numbers; })]);

poemData.forEach(function(element, index, arr){

let newNumbersAndWords = arr[index].lines.map(function(o, i) {

  // console.log(o)
charts.append("circle")
  // .data(data[0s])
  .datum(o)
  .attr("fill", (d,i)=> colorScale(index))
  .attr("class", "linesDot")
  .attr("r", 3.5)
  .attr("cx", function(d) { return xScaleLines(i); })
  .attr("cy", function(d){ return yScaleLines(d.numbers);})


  /* Text */
charts.append("text")
  .datum(o)
  .attr("class", "linesText")
  .attr("text-anchor", "middle")
  // .attr("stroke", "rgba(59, 73, 85, 1)")
  .attr("fill", (d,i)=> colorScale(index))
  // .attr("textLength", "90")
  .attr("dy", function(d, index) { return "-.55em"})
  // .attr("dy", function(d, index) { // return i%Math.PI+"em"})
  // .attr("dx", "0.45em")
  .attr("x", function(d) { return xScaleLines(i); })
  .attr("y", function(d,i){ return yScaleLines(d.numbers);})
  // .style("font", "10px sans-serif")
  .attr("font-family", "Slabo 27px")
  .attr("font-size", "10px")
   // .attr("transform", "rotate(-3)")
.text(function(d) { return d.words; })


})




});  //  end map

d3.select("#flowMany").on("click", function() {
  // console.log("working")
poemData.forEach(function(element, index, arr){

  var paths = charts.append("path")
  .datum(arr[index].lines)
  .attr("class", "line") 
  .attr("d", poemLines)
  // .style("stroke", function(d,i){return i})
  // .style("stroke", function(d) {return lineColors[index]});
  // .stroke("stroke", function(d) {return colorScale});
  .attr("stroke", (d,i)=> colorScale(index))
  .attr("stroke-width", 2)


  // .style("stroke", "rgba(119, 20, 39, .9)")

// Variable to Hold Total Length
let totalLength = paths.node().getTotalLength();
let animTime = 10000
// Set Properties of Dash Array and Dash Offset and initiate Transition
paths
  // .attr("d", (d,i) => console.log(d));
.attr("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-dashoffset", totalLength)
  .transition() // Call Transition Method
  .duration(animTime) // Set Duration timing (ms)
  .ease(d3.easeLinear) // Set Easing option
  .attr("stroke-dashoffset", 0) // Set final value of dash-offset for transition
  .on("end", function(){
    d3.selectAll('.linesText')
      .transition()
        .duration(animTime/3) // Set Duration timing (ms)
        .attr("font-size", 7)
        .duration(animTime/3) // Set Duration timing (ms)
    d3.selectAll("linesDot")
      .transition()
      .duration(animTime/3) // Set Duration timing (ms)
      .attr("r", .11)

   d3.select(this)
    .transition()
    .duration(animTime/3) // Set Duration timing (ms)
    .delay(animTime)
    .attr("stroke-width", 1)
  })
 

})
})

});  // end json