%body.trans-quick
  .bg-word.trans-quick#behind
  .bg-word.trans-quick#infront
  #container
    %button#last
    %button#next
    #card.trans-quick
      %h1#word
      %span#language
      %p#description
%a{:href => "http://www.thebookoflife.org/untranslatable-words/", :target => "_blank"}
  %img{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/380275/bookoflifelogo.png"}

$_bg: #AEE5D8;
$_copy: #555;
$_secondary: #e0b0d5;
$_card: #FFF;
$font-stack: 'Libre Baskerville', Georgia, serif;
$cardWidth: 21rem;

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  font-size: 18px;
}
body {
  overflow: hidden;
  background: $_bg url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/380275/paper-3.png") repeat fixed center;
  font-family: $font-stack;
  color: $_copy;
}
a {
  width: 100px;
  height: 100px;
  z-index: 200;
  position: absolute;
  bottom: 0.2rem;
  left: 0.2rem;
  opacity: 0.3;
  transition: all 0.2s;
}
a:hover {
  opacity: 0.5;
}
a img{
  padding: 0;
  margin: 0;
  height: 100%;
  width: auto;
}
.trans-quick {
  transition: all 0.4s;  
}
#container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.bg-word{
  cursor: default;
  padding: 2rem 0;
  user-select: none;
  font-size: 40vw;
  line-height: 34vw;
  word-wrap: break-word;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}
#behind {
  color: $_secondary;
  opacity: 0.3;
}
#infront {
  color: $_copy;
  opacity: 0.035;
  z-index: 20;
}

#card {
  overflow: hidden;
  z-index: 10;
  padding: 3rem;
  width: 95vw;
  max-width: $cardWidth;
  min-height: 3 * $cardWidth / 4; //4:3 aspect ratio
	box-shadow: 0 50px 70px -50px rgba(0, 0, 0, 0.45), 
    0 50px 200px -50px rgba(0, 0, 0, 0.5);
  background: $_card;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}
#card * {
  transition: opacity 0.4s, text-shadow 0.8s, color 0.4s, transform 0s;
  opacity: 1;
}
#word {
  align-self: flex-end;
  font-size: 2rem;
  line-height: 1rem;
}
#language {
  font-size: 1.1rem;
  align-self: flex-end;
  font-style: italic;
  line-height: auto;
  color: $_secondary;
}
#description {
  width: 100%;
}
button {
  margin: 20px;
  width: 0px;
  height: 0px;
  z-index: 25;
  background: transparent;
  border-radius: 0;
  outline: none;
  border: none;
}
#last {
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 20px solid rgba(255,255,255,0.5);
  transition: 0.1s;
  &:hover {
  	border-right: 20px solid rgba(255,255,255,0.9);
  }
}
#next {
	order: 3;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid rgba(255,255,255,0.5);
  transition: 0.1s;
  &:hover {
  	border-left: 20px solid rgba(255,255,255,0.9);
  }
}
#container > button:active ~ #card{
  transition: 0.05s 0s;
  transform: translateY(0.5rem);  
}
body.fadeout {
  background: $_secondary url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/380275/paper-3.png") repeat fixed center;
}
body.fadeout .bg-word#infront {
  opacity: 0;
}
#card.fadeout #word, 
#card.fadeout #description, 
#card.fadeout #language, {
  opacity: 0;
  color: transparent;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);  
  transform: translateY(-$cardWidth) scale(3);
  transition: all 1.2s 0.1s, color 0.5s 0s, text-shadow 0.5s 0s;
}
#card.fadeout #description {
  transform: translateY($cardWidth) translateX(-6rem) scale(2);
}

@media (max-width: 600px) {
  a {
    width: 50px;
    height: 50px;
  }
  button{
    padding: 0;
  }
  #last {
    margin: 0 0.4rem 0 0;
  }
  #next {
    margin: 0 0 0 0.4rem;
  }
  #card {
    padding: 1rem;
    min-height: 10rem;
  }
  #word {
    font-size: 1.5rem;
  }
  #language, #description {
    font-size: 0.8rem;
  }
}

var words = [{
  id: 1,
  word: 'Forelsket',
  language: 'Norwegian',
  description: 'The indescribable euphoria experienced as you begin to fall in love.'
}, {
  word: 'Saudade',
  language: 'Portuguese',
  description: 'A bitter-sweet melancholic yearning for something beautiful that is now gone.'
}, {
  word: 'Eudaimonia',
  language: 'Ancient Greek',
  description: 'Often translated as ‘happiness’, it really means the deepest kind of fulfilment, often comprising a flourishing work and love life.'
}, {
  word: 'Querencia',
  language: 'Spanish',
  description: 'A place where we feel safe, a ‘home’ from which we draw our strength and inspiration.'
}, {
  word: 'Mono no aware',
  language: 'Japanese',
  description: 'An acute sensitivity to the transience of lovely things; a melancholic awareness that everything nice will fade combined with a rich enjoyment of this short-lived beauty.'
}, {
  word: 'Dustsceawung',
  language: 'Old English',
  description: 'Contemplation of the fact that dust used to be other things – the walls of a city, the chief of the guards, a book, a great tree: dust is always the ultimate destination. Such contemplation may loosen the grip of our worldly desires.'
}, {
  word: 'Yūgen',
  language: 'Japanese',
  description: 'A mood in which one feels that the universe as a whole possesses a mysterious, elusive, but real, beauty. Moonlight, snow on distant mountains, birds flying very high in the evening sky all feed this sensibility.'
}, {
  word: 'Fika',
  language: 'Swedish',
  description: 'A traditional break from work usually involving a drink of coffee or tea. In Swedish offices, you are strongly expected to take a fika, no matter how busy you are. It’s democracy and community in a beverage.'
}, {
  word: 'Iktsuarpok',
  language: 'Inuit',
  description: 'A feeling of edgy anticipation that makes one keep on looking out the window to see if an expected visitor is coming up the path.'
}, {
  word: 'Ataraxia',
  language: 'Ancient Greek',
  description: 'A state of calm that Stoic philosophers aspired to. It’s a lack of agitation that comes from understanding the ways of the universe, accepting fate, knowing what one can control and focusing only on the things one can actually change.'
}, {
  word: 'Wabi-Sabi',
  language: 'Japanese',
  description: 'The quality of being attractive because of being imperfect in some way. Instead of getting annoyed and upset by imperfections, wabi-sabi suggests that we should see the flaw itself as being part of what is charming.'
}, {
  word: 'Verschlimmbessern',
  language: 'German',
  description: 'To accidentally make something worse in the process of attempting to mend or improve it.'
}, {
  word: 'Ya’aburnee',
  language: 'Arabic',
  description: 'The desire to die before another person, because of how unbearable it would be to learn of their death.'
}, {
  word: 'Gökotta',
  language: 'Swedish',
  description: 'To wake up early in the morning with the specific purpose of going outside to hear the first birds sing.'
}];

var body = document.body,
    card = document.getElementById('card'),
    cardWord = document.getElementById('word'),
    cardLang = document.getElementById('language'),
    cardDesc = document.getElementById('description'),
    bgWordBehind = document.getElementById('behind'),
    bgWordInfront = document.getElementById('infront'),
    lastBtn = document.getElementById('last'),
    nextBtn = document.getElementById('next'),
    i = 0,
    numWords = words.length,
    cardUrl = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/380275/lightpaperfibers.png',
    cardImg = new Image();

bgWordBehind.textContent = words[i].word;
bgWordInfront.textContent = words[i].word;
cardWord.textContent = words[i].word;
cardLang.textContent = words[i].language;
cardDesc.textContent = words[i].description;

cardImg.onload = function() {
  card.style.background = "#FFF url(" + cardUrl + ") repeat fixed center";
}
cardImg.src = cardUrl;

document.onkeydown = checkKey;
function checkKey(e) {
  e = e || window.event;
  if (e.keyCode == '37') {
    goLeft();
  } else if (e.keyCode == '39') {
    goRight();
  }
}
lastBtn.addEventListener("click", function(e) {
  goLeft();
}, false);
nextBtn.addEventListener("click", function(e) {
  goRight();
}, false);

function goLeft() {
  if (i > 0)
    i--;
  else
    i = numWords - 1;
  changeCard();
}

function goRight() {
  if (i < numWords - 1)
    i++;
  else
    i = 0;
  changeCard();
}

function changeCard() {
  setTimeout(loadBG, 400);
  setTimeout(loadCard, 900);
  card.className += " fadeout";
  body.className += " fadeout";
}

function loadBG() {
  bgWordBehind.textContent = words[i].word;
  bgWordInfront.textContent = words[i].word;
  removeClass(body, "fadeout");
}

function loadCard() {
  removeClass(card, "fadeout");
  cardWord.textContent = words[i].word;
  cardLang.textContent = words[i].language;
  cardDesc.textContent = words[i].description;
}

//Function to easily remove classes, it takes two parameters: 
//1. The element to have a class removed
//2. The name of the class we want to remove from our element
function removeClass(el, _class) {
  //Check if the element exists, 
  //if it has a class,
  //& specifically if it has the class we want to remove
  if (el && el.className && el.className.indexOf(_class) >= 0) {
    //Find the class to be removed (including any white space around it) using a regex search pattern
    var pattern = new RegExp('\\s*' + _class + '\\s*');
    //Replace that search with white space, therefore removing the class 
    el.className = el.className.replace(pattern, ' ');
  }
}