<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/p5.js" type="text/javascript"></script>

    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/p5.dom.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.4.3/velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.4.3/velocity.ui.min.js"></script>

<script src="https://assets.codepen.io/255459/jquery.blast.min.js"></script>

<script src="https://assets.codepen.io/255459/jquery.lettering.js"></script>

<script src="https://assets.codepen.io/255459/jquery.shuffleLetters.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
<link href="https://assets.codepen.io/255459/slabtext_1.css" rel="stylesheet">
<h3 class = "instructions">Unfolding Poem:<br> Click Text to Reveal Reveal Lines. <br> Then Click Lines to Reveal Stanzas</h3>

<div id="container">
  <div id="holder"></div>
</div>

@font-face {
  font-family: grow;
  font-weight: bold;
  src: url("https://assets.codepen.io/255459/AlteHaasGroteskBold.ttf");
}
@font-face {
  font-family: weird;
  font-weight: bold;
  src: url("fonts/Adamas-Regular.otf");
}
@font-face {
  font-family: decorative;
  font-weight: bold;
  src: url("fonts/fina_font.ttf");
}
@font-face {
  font-family: bebas;
  font-weight: bold;
  src: url("https://assets.codepen.io/255459/BEBAS___.ttf");
}
body {
  background: #fcfcfc;
  color: #444;
  font-family: bebas;
  width: 1000px;
  height: 1000px;
  top: 0;
}

.instructions {
  font-family: bebas;
  display: inline-block;
  background-color: rgba(18, 44, 52, 0.1);
}

.starter {
  font-size: 10em;
  text-transform: uppercase;
}

h3 {
  font-family: bebas;
}


.headline {
  width: 100%;
  font-size: 2em;
 
}
.stanza {
  font-size: 1.5em;
  font-family: grow;
}

.poemBefore {

  left: 10%;
  opacity: 0;
  position: relative;
  line-height: -1;
  margin-top: 0px;
  margin-bottom: 0px;
  width: 750px;
  margin: auto;
}

.stanzaHolder {

}

var the_poem;
var flag;
//load the poem
function preload(){
//no callback here, just loading the data in to a variable called the_poem. This could be any poem in the JSON structure {"stage": "any_string ", "lines": ["any", "array, "of", "strings"]}
 
the_poem = loadJSON('https://assets.codepen.io/255459/poem_2.json')
//with callback load the poem in from JSON file. This could be any poem in the JSON structure {"stage": "any_string ", "lines": ["any", "array, "of", "strings"]}
// the_poem = loadJSON('poem.json', runJewels)
//runJewels is a callback (not well named) to the function that will take in the JSON data and put it on to the page for me.
}
function setup(){
flag = false;
noCanvas();
//call the start up function and send it as an argument: my poem data stored in the variable the_poem
startUp(the_poem);
}
//create the element which will be the 'start' button 
//and add an event listener to the start element that will call the funcition.
function startUp(data){
var container = document.getElementById('container')
var start = createElement("h1", 'Us Humans')
start.id('start')
start.addClass('starter')
  // start.parent(container)
var starter = $("#start")
  
  // Shuffle the contents of container
  starter.shuffleLetters();


//call a function to animate in the first lines of poem
start.mousePressed(present)
}
function present(){
//use velocity js to animate the start element up to the top and then on complete it calls the next function which will animate in the next lines
$('#start')
 // .velocity("slideUp", { duration: 1500 })
.velocity({
    properties: { translateZ: '-=150', translateY: '-=150'},
    options: { duration: 1500, complete: function() { 
runJewels()
    	console.log('hi'); 
    }}	//end options and complete function
}); 	// end velocity animation

}	//end function


//runJewels is one big  javascript closure function, which will allow me to keep the lines associated with their titles
function runJewels (){
// iterate over the json file holding the poem and creating variables to hold
//for some reason the_poem.length isn't working 
  let holder = document.getElementById('holder')
  console.log(holder)
for (var i =0; i < 5; i++){
  // ask shiffman how to iterate through the number of objects in json array
  // would I use for each here instead?
var stageHolder = createElement('div', ' ')
stageHolder.id(i)
  // stageHolder.parent(holder)
//creates an element for each of the first level items of the poem	
var stage = createElement('div', the_poem[i].stage);
stage.id('stage'+i)
//add class to make opacity 0 until it animates in with velocity below
 // why am I adding 2 classes here?
stage.addClass('poemBefore')
stage.addClass('headline')
stage.parent(stageHolder)
  
  // Shuffle the contents of container
  var stageContainer = $("#stage"+i)
  stageContainer.shuffleLetters();

//setting position here-but I will want to do this with velocity I think
// stage.position(100, y);

//call the function to create the stanzas for each headline
makeStanza(stage, i)
}	//end for loop

//and here is where we animate the headlines in
$('.headline')
 .velocity({
 	properties:{top: '-=200'}, options:{ duration: 0 }
 })
.velocity({
    properties: { opacity: 1 },
    options: { delay: 100, duration: 1000 }
});
}	// endrun runJewels


function makeStanza (stage, line){
stage.mousePressed(showText)
//or call a function to hide itself and call the one to create and animate in the last lines

function showText(){
//create an element to hold each stanza

// var stanzaHolder = createElement('div', ' ')
// stanzaHolder.addClass('stanzaHolder')
// stanzaHolder.id('stanzaholder'+line)

for(var i =0; i<the_poem[line].lines.length; i++){
var theLinesOfPoem = createElement('p', the_poem[line].lines[i])
// theLinesOfPoem.id('stanza'+i)

//blast this text to bring it in by letter?
// blast stanza by letter and then animate in?
// theLinesOfPoem.position(windowWidth/6, (i+1)*(TWO_PI*PI) + 300)
theLinesOfPoem.addClass('poemBefore')
theLinesOfPoem.addClass('stanza')
theLinesOfPoem.addClass('stanza'+ line)
// theLinesOfPoem.parent(stanzaHolder);

var grabMe = select('#'+ line)
// theLinesOfPoem.parent(stanzaHolder);
theLinesOfPoem.parent(grabMe);
  
  // Shuffle the contents of container
var stanzaContainer = $(".stanza"+line)

  stanzaContainer.shuffleLetters();
} 	//end for loop


//this actually needs to be another for loop to animate each line of each stanza one at a time so they can each be shuffled, which is happening above now for each stanza container
$stanza = $('.stanza'+line)
// $stanza
console.log($stanza)
// $('.stanza')
$stanza

.velocity({
    // properties: { top: -300, left: 150},
    properties: { top: -200,},
    options: { delay: 0, duration: 500 }
})

.velocity({
    properties: { opacity: .7,  },
    options: { delay: 0, duration: 3500, sequenceQueue: false }
})

$headline = $('#stage'+line)
$headline

.velocity({
    // properties: { scale: 1.4, top: '-= 155' },
    // properties: { scale:.7},
    // options: {  duration: 1000, sequenceQueue: false }
});

//and then make one that says all headlines not $headline 
//or headline 1 and 2 drop

}	//endShowText

 // velocityStuff()
}	//end makeStanza


// function velocityStuff(){


	
// }
//actually maybe I want to get out of this loop and set individually what happens when each of the three is clicked?s



//i dont think this is working
// function callFitText () {
// jQuery(".starter").fitText();
// // $(this).addClass('magictime puffIn');
// }
//alternate world in which I use jquery or underscore.js to link the data together
//this would be to structure the format further, but is not necessary with our two level poem
// var myObject = {
//   title: "we be",
//   text: "mischevious angels" ,
// }
// qould jquery or underscore.js be better for this ? forEach {
// var stage = "stage"
// var lines = "lines"
//this would be like the d3 way?