<link href="https://fonts.googleapis.com/css?family=Oswald:300,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet">
<div id = "app">




<!-- <div id = "programming"> programming
  </div> -->
  <div id = "cc" > <a href = "https://en.wikipedia.org/wiki/Dervish#Whirling_dervishes"> bar chart </a>  </div>


</div> <!-- end app -->

/*SETUP*/

html {
box-sizing: border-box;

}
*,
*:before,
*:after {
box-sizing: inherit;
}
body{

background-color: #000712;
font-family: 'Oswald';
/* font-family: 'Ropa Sans', sans-serif; */
color:#FFFFF8;
font-size: 2.1vw;
width: 100%;
margin:auto;
}
@media (max-width: 599px) {
body {
/*  background: purple; */
}
}

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

/*CONTAINER FOR EVERYTHING*/

#app{
  position: relative;
/* background-color: rgba(68, 68, 68, .05); */
width : 95%;
margin-left: auto;
margin-right: auto;
height: 30vh;
margin-bottom: 30vh;
margin-top: 30vh;
/*  border: solid 1px #84FFA6; */
}

@media (min-width: 900px) {
#app{
/*   width: 80%; */

}
}

@media (min-width: 1600px) {
#app{
/*   width: 70%; */

}
}


#cc{
/* border: solid 5px #0F3B72; */
position: relative;
width: 90%;
margin: auto;
  padding:.5em;
  height: 80%;
/*   margin-top: 5em; */
  top: 1em;
/*   background-color: rgba(253, 200, 189, .05); */

}


.byWord{
/* position: absolute; */
/* text-align: center; */
float: left;
  font-size: 250%;
text-transform: uppercase;
/* padding:.1em; */
  color: #FFFFF8;
border: solid 0em rgba(168, 34, 34, .39);
/* border: solid 1.5em rgba(8, 103, 136, 1); */
 text-shadow: 0em 0em #B4331A;
 box-shadow: 0em 0em 0em 0em #70171A;
  
}

/* @media (min-width: 900px) {
.byWord{
left: 22vw;

}
} */

/*PROGRAMMING LANGUAGE*/
// have blast js create elements from each of the letters in the div #cc
$("#cc").blast({
delimiter: "character",// Set the delimiter type (see left)
search: false,
tag: "div", // Set the wrapping element type (e.g. "div")
customClass: "byWord", // Add a custom class to wrappers
generateIndexID: true,// Add #customClass-i to wrappers
generateValueClass: true,
returnGenerated: true
});


var $elementWord = $('#cc')

// $elementWord.velocity({ p: {translateX: '+=2em',}, o:{ duration: 150, delay: 10,}})

//collect the letters by the custom class added to each by blast.js and put them in an array
var $element = $('.byWord').toArray()

var $elements = $('.byWord')

var easings = ['easeInElastic', 'easeInOutQuad',"easeOutCirc","easeInBack", "easeInQuad"]


/* COLOR CREATIONS*/

  var colors = chroma
    .scale(["#AD06FF", "#D90429"])
    // .scale(["#0085FF", "#D90429"])
    // .scale(["#FDC8BD", "#D90429"])
    // .scale(["#2B2D42", "#D90429"])
    .mode("lch")
    .colors($element.length);

  let colorSet = [];

  for (var i = 0; i < $element.length; i++) {
    var cSet = {
      e: $element[i],
      p: {  color: colors[i] },
      o: { duration:500 }
    };

    colorSet.push(cSet);
  }
  // $.Velocity.RunSe,quence(colorSet);

/*Language Animation to Register!*/

$.Velocity.RegisterUI("whirling", {
    defaultDuration: 900,
    calls: [

            [ {scale: [1, 3.5] }, 1, {  loop:true, delay: 500, easing: easings[0]} ],

    ]
});
$.Velocity.RegisterUI("whirlingBack", {
    defaultDuration: 3000,
    calls: [

            [ {
              
// rotateX:[0,-90],
textShadowY: '+=.05em',
textShadowBlur: ['+=0em', '+=2em'],
scale:[1.2, 1],
borderBottomWidth: "+=2em",
// borderTopWidth: "+=2em",              
borderRadius: ['0%', '5%'],
// paddingLeft: "+=.5em"
              
// letterSpacing: [-1, 1]
              
// backgroundColor: ["#B4331A", "#000712" ]
 // boxShadowX:['0em', '.5em'] 
 // boxShadowBlur:['0em', '.5em']               
              
              
              
              }, 1, {sequenceQueue: false, loop: true, delay: 200,  easing: easings[4]} ],

    ]
});


//set up a variable to hold each of the letter's animation
var timeTable = [ ]

  for (var i = 0; i < $element.length; i++) {
    var one = {
      e: $element[i],
      p: {  backgroundColor: colors[i] },
      o: { duration:1500, sequenceQueue: false }
    };

    // timeTable.push(one);
  }


for(var i = 0;i<$element.length; i++){
  
 var two = {e:$element[i],
 p: 'whirlingBack',


 o:{ duration: 4000, delay: 400,
    sequenceQueue: false, loop:true 

 // loop: true
   }}
 
 timeTable.push(two)

  
  }
$.Velocity.RunSequence(timeTable);



var timeTableTwo = [ ]



for(var i = 0;i<$element.length; i++){
  
 var whirlBack = {e:$element[i],
 p: 'whirlingBack',


 o:{ duration: 1000, delay: 2000,
  loop:true 

 // loop: true
   }}
 
 timeTableTwo.push(whirlBack)

  
  }
// $.Velocity.RunSequence(timeTableTwo);