@import url('https://fonts.googleapis.com/css?family=Coustard|Fredericka+the+Great|Lateef');

.quote-style {
  font-family: 'Fredericka the Great', cursive;
  font-size: 50px;
  padding: 20px;
  color: #ff6700;
  text-shadow: 20px 0px 20px black;
}

.author-style {
  font-family: 'Lateef', cursive;
  font-size: 35px;
  text-align: right;
  padding: 0px 40px 20px 0px;
  text-shadow: 10px 0px 40px black;
}

.frame {
    widht: 650;
    height: 450;
    border: 10px groove black;
}
.quote-bck {
  background-size: 100%;
  opacity: 0.9;
  height: 400px;
  width: 600px;
  margin: 0 auto;
  line-height: 400px;
}

.center-quote {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

.buttons{
  margin-top: 20px;
  margin-bottom: 20px;
}

.title {
  font-family: 'Coustard', serif;
  text-align: center;
  font-size: 40px;
  margin-bottom: 50px;
}

var actualQuote = "";

function randomBackground() {
   $.ajax({
     url: 'https://codepen.io/lrvlr/pen/xPWZEm.js',
     type: 'GET',
     dataType: 'json',
     success(resp) {
        var idx = Math.floor( Math.random() * resp.length);
        $(".quote-bck").css("background-image","url(" + resp[idx].url +")");
        $(".quote-style").css("color", resp[idx].color);
        $(".author-style").css("color", resp[idx].color);
        $(".custom-bck").css("background-color", resp[idx].color);
      },
      error(jqXHR, status, errorThrown){
      console.log(jqXHR + "THERE WAS AN ERROR: " + errorThrown);    
      }   
   });
}

function getQuoteFromJson(){
    $.ajax({
     url: 'https://codepen.io/lrvlr/pen/gXvKNZ.js',
     type: 'GET',
     dataType: 'json',
     success(response) {
       var idx = Math.random() * response.length; 
       idx = Math.floor(idx);
       var quote = response[idx].quoteText;
       var author = response[idx].quoteAuthor;
       if (author === "") {
         author = "unknown author"
       }
       var html = "<span class='center-quote'> <p class='quote-style'>" + quote + "</p> <p class='author-style'><i>- " + author + " -</i></p></span>";
       actualQuote = "\"" + quote + "\" - " + author; 
       $(".message").html(html);
       randomBackground();
      },
      error(jqXHR, status, errorThrown){
      console.log(jqXHR + "THERE WAS AN ERROR: " + errorThrown);    
      }   
   });
}

function shareOnTwitter(){
  var link = "https://twitter.com/share?" + "text=" + actualQuote + "&hashtags=randomQuoteGen&url=https://codepen.io/lrvlr/pen/OOQQrr";
  window.open(link, "_blank");
}


$(document).ready(function() {
  getQuoteFromJson();
  $("#getQuote").on("click", getQuoteFromJson);
  $("#shareTw").on("click", shareOnTwitter);
});