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?