<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500|Permanent+Marker" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton|Roboto+Condensed" rel="stylesheet">
<div id="controls">
  <pre id="log"></pre>
  <form>
  <fieldset>
    <legend>Animation Options</legend>
    <div>
      <input type="radio" id="animation1" name="animation" value="flip" />
      <label for="animation1">Flip</label>
      <input type="radio" id="animation2" name="animation" value="anim2" />
      <label for="animation2">Two</label>
      <input type="radio" id="animation3" name="animation" value="anim3" />
      <label for="animation3">Three</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>
</div>
  <h1>What I'm Reminded When Reading Ross Gay</h1>

<div class="holder">
  <div class="innerText">


<div id="text">


</div>
</div>

</div>

/*SETUP*/
html {
  box-sizing: border-box;
  
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  background-color: #FFFFF8;
/* font-family: 'Permanent Marker', cursive; */
font-family: 'Roboto', sans-serif;
  font-size: 1.5vw;
  width: 99%;
  margin: auto;
}
@media (max-width: 599px) {
  body {
    /* font-size: 5.5vw; */
  }
}

@media (min-width: 900px) {
  body {
    /* font-size: 5vw;  */
  }
}

h1{
  color: #444;
font-family: 'Oswald', sans-serif;
  font-size: 200%;
  text-align: center;
}

#controls{
  position: absolute;
  left: 0;
  top: 50px;
  height: 200px;
  width: 250px;
/*   border: 2px solid black; */
}
.container{
  margin: 50px;
}

.line{
/*   border: 1px solid red; */
  background-color: #FFFFF8;
  
}

.innerText {

}


#text {
  font-weight: 800;
}

.holder{
/*   border: 2px solid #444; */
  display: flex;
  justify-content: center;
  align-items: center;
}

/*SETUP*/
let animation;

  const poem = [
stanzaOne = ["When we remain open",
"We become ourselves",
"Closed doors leave",
"The inside of the house in tact",
"But only to stay the same as its always been"],

stanzaTwo =["The wind ",
"Can hurt",
"When you\’re walking around",
"All open and raw",
"Becoming yourself",
"On the streets",
"Are filled with selves",
"And wind",
"And hurt",
"A cacophony of pain whistling ",
"Through the city"],

stanzaThree= ["Our bones carry the painful memories",
"That are to shy to scar",
"I often to try to share my bones in public",
"Offer people to look me in the eyes",
"And watch their tears ",
"Scroll down my face",],

stanzaFour=["Me and the wind go way back",
"I\’ve carved tiny holes through my body ",
"So the wind can",
"Play the flute through me",
"I would rather be a wind instrument ",
"Then be a another drum of sorrow ",
"Beaten ",
"Into the rhythm of a city"]
]

   poem.forEach(function(element, index) {
      var container = document.createElement("div")
       container.className+= "container";
     
     for(var i=0;i<element.length;i++){
       // console.log(element)
      
         var newDiv = document.createElement("p");
    //create a text node from the parameter passed to the function
    var newContent = document.createTextNode(element[i]);
    // //add the text node to the newly created  element
       container.appendChild(newDiv)
    newDiv.appendChild(newContent);
    newDiv.className += "line";
    newDiv.id += "line" + index;
    $textGrab = $("#text");
    $textGrab.append(container);
       
     }
     
   })


// based on user selection, activate coorelating animation

// radio buttons
const form = document.querySelector("form");
const log = document.querySelector("#log");

form.addEventListener(
  "submit",
  (event) => {
    const data = new FormData(form);
    let output = "";
    let animationValue = $("input[name='animation']:checked").val();
    console.log(animationValue)
     animation = animationValue;
    
    for (const entry of data) {
      output = `${output}${entry[0]}=${entry[1]}\r`;
    }
    log.innerText = output;
 
    event.preventDefault();
  },
  false,
);
//  ANimations

 $('.line').mouseenter(function() {
  //add the class of hover on mouse enter
    $(this).addClass('hover');
    
    $(".hover")
  // .velocity({backgroundColor:"#ffcc3a",rotateZ:"200deg"}, {duration: 400, delay:100, easing:"easeOutQuad"});
   // .velocity("flip");
   .velocity(animation);
   
    
    //mouseleave
  }).mouseleave(function() {
   
    $('.hover').velocity('reverse');
    
    $(this).removeClass('hover');
  });
  
// Animation Options 
  $.Velocity.RegisterUI("flip", {
      defaultDuration: 300,
      calls: [
        [
          {     backgroundColor:"#FFE0EF",
           rotateZ:"200deg",
          
          },
          1,
          { easing: "easeInSine" }
        ]
      ]
    });

 $.Velocity.RegisterUI("anim2", {
      defaultDuration: 300,
      calls: [
        [
          {     backgroundColor:"#FAC863",
           // rotateZ:"200deg",
           translateX: "-200px"
          
          },
          1,
          { easing: "easeInSine" }
        ]
      ]
    });

 $.Velocity.RegisterUI("anim3", {
      defaultDuration: 300,
      calls: [
        [
          {    
           backgroundColor:"#FFFFF8",
           translateY:"-30px",
           rotateZ: "-5deg",
            fontSize: "+=12px",
          
          },
          1,
          { easing: "easeInSine" }
        ]
      ]
    });


  /*FUNCTION TO CREATE STRUCTURED POEM ELEMENTS FROM STRUCTURED DATA */
  // theText.forEach(function(element, index) {
  //   // create a new element
  //   var newDiv = document.createElement("p");
  //   //create a text node from the parameter passed to the function
  //   var newContent = document.createTextNode(element);
  //   // //add the text node to the newly created  element
  //   newDiv.appendChild(newContent);
  //   newDiv.className += "line";
  //   newDiv.id += "line" + index;
  //   $textGrab = $("#text");
  //   $textGrab.append(newDiv);
  // });