<script>
document.addEventListener('DOMContentLoaded', function() {
  // OBJECT CONTAINER FOR QUOTES
  var quotes = {
    0: {
      "quote": "The only way out of today's misery is for people to become worthy of each other's trust.",
      "name": "Albert Schweitzer"
    },
    1: {
      "quote": "Life is a gift horse in my opinion.",
      "name": "J.D. Salinger"
    },
    2: {
      "quote": "Love, I find is like singing. Everybody can do enough to satisfy themselves, though it may not impress the neighbors as being very much.",
      "name": "Zora Neale Hurston"
    },
    3: {
      "quote": "The people of a nation are enslaved when, together, they are helpless to institute effective change, when the people serve the government more than the government serves them.",
      "name": "Gerry Spence"
    },
    4: {
      "quote": "It pays to be obvious, especially if you have a reputation for subtlety.",
      "name": "Isaac Asimov"
    },
    5: {
      "quote": "When the sword is once drawn, the passions of men observe no bounds of moderation.",
      "name": "Alexander Hamilton"
    },
    6: {
      "quote": "Don't play what's there, play what's not there.",
      "name": "Miles Davis"
    },
    7: {
      "quote": "By means of an image we are often able to hold on to our lost belongings. But it is the desperateness of losing which picks the flowers of memory, binds the bouquet.",
      "name": "Colette"
    },
    8: {
      "quote": "Every science has for its basis a system of principles as fixed and unalterable as those by which the universe is regulated and governed. Man cannot make principles, he can only discover them.",
      "name": "Thomas Paine"
    },
    9: {
      "quote": "The test of our progress is not whether we add more to the abundance of those who have much; it is whether we provide enough for those who have too little.",
      "name": "Franklin D. Roosevelt"
    },
    10: {
      "quote": "In view of the fact that God limited the intelligence of man, it seems unfair that he did not also limit his stupidity.",
      "name": "Konrad Adenauer"
    },
    11: {
      "quote": "Some would be sages if they did not believe they were so already.",
      "name": "Baltasar Gracián"
    },
    12: {
      "quote": "I suppose every child has a world of his own — and every man, too, for the matter of that. I wonder if that's the cause for all the misunderstanding there is in Life?",
      "name": "Lewis Carroll"
    },
    13: {
      "quote": "When the soul of a man is born in this country there are nets flung at it to hold it back from flight. You talk to me of nationality, language, religion. I shall try to fly by those nets.",
      "name": "James Joyce"
    },
    14: {
      "quote": "There is no act, however virtuous, for which ingenuity may not find some bad motive.",
      "name": "Thomas Jefferson"
    },
    15: {
      "quote": "Any nation or government that deprives an individual of freedom is in that moment committing an act of moral and spiritual murder.",
      "name": "Martin Luther King, Jr."
    },
    16: {
      "quote": "I am invisible, understand, simply because people refuse to see me.",
      "name": "Ralph Ellison"
    }
  };
  
  // LIST CONTAINING COLOR OPTIONS
  var colors = ["#ff1abc", "#bcff1a", "#1abcff", "#10ecd0", "#ff7c00", "#c6ff00", "#ffc719", "#eb0953", "#ff284d", "#fff400", "#e73d0e", "#0094a4"];
  
  // FUNCTION: RETURN TWITTER URL WITH QUOTE TEXT
  function tweetFormat(quote, author){
    var addedText = quote + " ~ " + author;
    return "https://twitter.com/intent/tweet?text="+addedText.replace(/\s/g, "+");
  };
  
  // FUNCTION: RANDOMLY SELECT QUOTE FROM CONTAINER
  function getAQuote(){
    // Roll for quote and inject to HTML
    var quoteNumber = Math.floor(Math.random()*17);
    document.getElementById('quote-placement').innerHTML = quotes[quoteNumber]["quote"];
    document.getElementById('author-placement').innerHTML = "~ " + quotes[quoteNumber]["name"];
    // Add quote to twitter button link for easy tweet
    document.getElementById('tweet-button').href = tweetFormat(quotes[quoteNumber]["quote"], quotes[quoteNumber]["name"]);
    // Spice up the quote with a random text color
    var colorPick = Math.floor(Math.random()*colors.length);
    document.getElementById('quote-placement').style.color = colors[colorPick];
  };

  // BOX, WRAP AND DELIVER
  getAQuote();
  [].forEach.call(document.querySelectorAll('#new-quote-button'), function(el) {
    el.addEventListener('click', function() {
      getAQuote();
    })
  })
})
</script>

<style>
  .full-page{
    background-color: blue;
  }
</style>
<div class="container-fluid">
  <div class = "row text-center" id="top-row">
    <button class = "btn btn-basic" id="new-quote-button">New Quote</button>
    <a href="#" target="_blank" class="btn btn-basic" id="tweet-button" role="button"><span class="fa fa-twitter"></span></a>
  </div>
  <div class = "row text-center" id="content-row">
    <div class="col-md-4 col-xs-1"></div>
    <div class = "col-md-4 col-xs-10 message">
      <p id="quote-placement"></p>
      <p id="author-placement"></p>
    </div>
    <div class="col-md-4 col-xs-1"></div>
  </div>
  <!--
  <div class="footer" id="bottom-row"># I <span class="fa fa-thumbs-o-up"></span> the QuickQuote page!</div> -->
</div>

body{
  background-color: #1c1c1c;
}
h2{
  color: #c9c9c9;
}
.message{
  background-color: #1c1c1c;
}
.btn{
  background-color: #1d1d1d;
  color:  #c9c9c9;
  border-color: #c9c9c9;
}
.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: right;
  color: #c9c9c9;
  font-family: sans-serif;
}
#top-row{
  padding-top: 20px;
  padding-bottom: 20px;
}
#content-row{
  padding-top: 250px;
  padding-bottom: 250px;
}
#quote-placement{
  font-family: 'IM Fell DW Pica', serif;
  font-size: 20pt;
  color: #ff1abc;
}
#author-placement{
  font-family: 'Times', serif;
  font-size: 16pt;
  color: white;
}

@media(max-height: 400px){
  #content-row{
    padding-top: 30px;
  }
}