var mugHeight;
var beerHeight;
var percentFilled;
var roundedPercent;
var game = Math.floor((Math.random() * 100) + 1);

function getHeights(){
	mugHeight = $('#mug').height();
	beerHeight = $('#beer').height();
	percentFilled = (beerHeight / mugHeight) * 100;
  roundedPercent = Math.round(percentFilled);
	$('#percent-filled').html('Pourcentage versé: ' + roundedPercent + '%');
};

$('#handle').hover(
  function(){
    $('#beer').addClass('fill');
    $('#beer').css('animation-play-state', 'running');
    $('#pour').addClass('pouring');
  },
  function(){
    getHeights();
    $('#beer').css('animation-play-state', 'paused');
    $('#pour').removeClass('pouring');
    if (roundedPercent === 0) {
      // do nothing
    } else if (roundedPercent === game) {
    	$('#result').html('Vous avez atteint la consigne... Bravo !');
    } else if((game - roundedPercent) < 5 && (game - roundedPercent) > -5 ){
      $('#result').html('Assez proche !');
    } else {
      $('#result').html('Manque de précision !');
    }
  }
);

$('#mug').click(function(){
  $('#beer').removeClass('fill');
  getHeights();
  $('#result').html('');
	game = Math.floor((Math.random() * 100) + 1);
  $('#target').html(game);  
})

$(document).ready(function(){
	$('#target').html(game);  
});