// This is already in the DOM. It's where we're gonna drop in the ad.
var adZone = document.querySelector("#adzone");

// Dependency-free Ajax library
axios({
  method: 'GET',
  url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/example-ad.html'
}).then(function(response) {
  
  // Any DOM manipulation we want to do we can do upfront
  var adHTML = "<div class='ad'>" + response.data + "</div>";
    
  // The CSS Way (not used in this tutorial)
  // adZone.classList.add("loaded");
  // We're going to do this mostly in JS
  
  // We need to figure this out!
  var ajaxContentHeight = 0;
  
  // We need a dummy element
  var testerElement = document.createElement("div");
  // That is exactly as wide as were we're putting the ad
  testerElement.style.width = adZone.offsetWidth;
  // Position it off screen though, nobody needs to see it
  testerElement.classList.add("test-height-element");
  // Temporarily put the ad in there
  testerElement.innerHTML = adHTML;
  // Plop it on the page for a sec
  document.body.appendChild(testerElement);
  // If there are any images in it, we need to wait for them to
  // load, otherwise our measuremenets will be off
  imagesLoaded(testerElement, function() {
    // Now we can measure the height!
    ajaxContentHeight = testerElement.offsetHeight + "px";
    // Nuke the dummy element
    testerElement.remove();
    // Drop the ad in the real place
    // It's collapsed by default
    adZone.innerHTML = adHTML;
    // Now apply some styles to allow it to transition 
    adZone.style.transition = "1s";
    adZone.style.maxHeight = ajaxContentHeight;
    // After it's done, remove the max height, in case of reflow
    setTimeout(function() {
      adZone.style.maxHeight = "none";
    }, 1001);
    
  });

});