//Variables
var trigger = $(".trigger");
var flyout  = $(".flyout");
var close   = $(".btn-close");

//Fade in/out the flyout when clicking on the trigger 
$(trigger).on("click", function(e) {
  $(flyout).fadeToggle("fast");
  e.stopPropagation();
});

//Fade out the flyout when clicking on the Close button
$(close).on("click", function(e){
  $(flyout).fadeToggle("fast");
  e.stopPropagation();
});

//Fade out the flyout when clicking anywhere on the page
$(document).on("click", function(e) {
  if ($(e.target).closest(flyout).length === 0) {
    $(flyout).fadeOut("fast");
  }
});

//Fade out the flyout when pressing the ESC key
$(document).on("keydown", function(e) {
  if (e.keyCode === 27) {
    $(flyout).fadeOut("fast");
  }
});