code_test.js

 var PranaSnippet = {
    triggerOn: false,
    alreadyTriggered: false,
    currentlyInTriggerArea: false,

    Model: {},
    Controller: {},
    View: {}
  }

window.onscroll = function (e) {

  var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  var documentHeight = Math.max( document.body.scrollHeight, document.body.offsetHeight,
        document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);


  if (documentHeight - (viewportHeight + window.pageYOffset) > (documentHeight / 10)) {
     PranaSnippet.currentlyInTriggerArea = false;
     PranaSnippet.alreadyTriggered = false;
   }

   else {
    PranaSnippet.currentlyInTriggerArea = true;
   }

  if (PranaSnippet.currentlyInTriggerArea && !PranaSnippet.alreadyTriggered && !PranaSnippet.triggerOn && PranaSnippet.View.isUserLoggedIn()) {
     PranaSnippet.triggerOn = true;
     PranaSnippet.alreadyTriggered = true;
     PranaSnippet.Controller.build(PranaSnippet.Model, PranaSnippet.View);
    }
}


PranaSnippet.Model.Mask = function() {
  var mask = document.createElement("div");
  mask.className = "mask";

  mask.style.top =  "0px";
  mask.style.left =  "0px";
  mask.style.width =  "100%";
  mask.style.height =  "100%";
  mask.style.zIndex = "999";
  mask.style.backgroundColor = "rgba(0, 0, 0, 0.77)";
  mask.style.position =  "fixed";

  return mask;
}

PranaSnippet.Model.Overlay = function() {
  var overlay = document.createElement("div");
  overlay.className = "overlay";

  overlay.style.zIndex = "1001";
  overlay.style.position = "fixed";
  overlay.style.top = "50%";
  overlay.style.left = "50%";
  overlay.style.width =  "370px";
  overlay.style.height = "270px";
  overlay.style.marginLeft = "-187px";
  overlay.style.marginTop = "-187px";
  overlay.style.backgroundColor = "white";

  return overlay;
}

PranaSnippet.Model.Title = function() {
  var title = document.createElement("div");
  title.className = "title";

  title.style.marginTop =  "25px";
  title.style.marginBottom =  "25px";
  title.style.textAlign =  "center";
  title.style.lineHeight =  "1em";
  title.style.fontFamily = "'Crimson Text',serif";
  title.style.letterSpacing = ".05em";
  title.style.fontWeight =  "normal";
  title.style.display = "block";
  title.style.fontSize = "1.2em";

  return title;
}

PranaSnippet.Model.Contents = function() {
  var contents = document.createElement("div");
  contents.className = "contents";

  contents.style.color =  "#c6631D";
  contents.style.marginLeft =  "40px";
  contents.style.textTransform =  "uppercase";
  contents.style.fontFamily = "'Crimson Text',serif";
  contents.style.fontSize = "0.8em";

  return contents;
}

PranaSnippet.Model.Total = function() {
  var total = document.createElement("div");
  total.className = "total";

  return total;
}

PranaSnippet.Model.Cost = function() {
  var cost = document.createElement("div");
  cost.className = "cost";

  return cost;
}

PranaSnippet.Model.Images = function() {
  var images = document.createElement("div");
  images.className = "images";

  return images;
}

PranaSnippet.Model.ButtonContainer = function() {
  var buttonContainer = document.createElement("div");
  buttonContainer.className = "button-container";

  buttonContainer.style.marginBottom =  "25px";
  buttonContainer.style.marginTop =  "25px";
  buttonContainer.style.textAlign =  "center";

  return buttonContainer;
}

PranaSnippet.Model.CloseButton = function() {
  var closeButton = document.createElement("button");
  closeButton.className = "close-button";

  closeButton.style.background =  "#c6631D";
  closeButton.style.height = "35px";
  closeButton.style.width = "100px";
  closeButton.style.border = "none";
  closeButton.style.cursor = "pointer";
  closeButton.style.fontFamily = "'Crimson Text',serif";
  closeButton.style.margin = "4px";
  closeButton.addEventListener ("click", function() {
    PranaSnippet.triggerOn = false;

    var overlay = document.getElementsByClassName('overlay')[0];
    var mask = document.getElementsByClassName('mask')[0];
    document.body.removeChild(overlay);
    document.body.removeChild(mask);
  });

  return closeButton;
}

PranaSnippet.Model.CartButton = function() {
  var cartButton = document.createElement("button");
  cartButton.className = "cart-button";

  cartButton.style.background =  "#e0e0e0";
  cartButton.style.height = "35px";
  cartButton.style.width = "100px";
  cartButton.style.border = "none";
  cartButton.style.cursor = "pointer";
  cartButton.style.fontFamily = "'Crimson Text',serif";
  cartButton.addEventListener ("click", function() {
    self.location.href = "checkout/cart/";
  });
  return cartButton;
}

PranaSnippet.Model.Span = function() {
  var span = document.createElement("span");
  span.className = "button-span";

  span.style.fontSize =  "0.9em";
  span.style.letterSpacing = "0.05em";

  return span;
}

PranaSnippet.Controller.build = function(snippetModel, view) {

  var model = {
    mask: snippetModel.Mask(),
    overlay: snippetModel.Overlay(),
    title: snippetModel.Title(),
    contents: snippetModel.Contents(),
    total: snippetModel.Total(),
    cost: snippetModel.Cost(),
    images: snippetModel.Images(),
    buttonContainer: snippetModel.ButtonContainer(),
    closeButton: snippetModel.CloseButton(),
    cartButton: snippetModel.CartButton(),
    closeSpan: snippetModel.Span(),
    cartSpan: snippetModel.Span()
  }

   document.body.appendChild(model.mask);
   document.body.appendChild(model.overlay);
   model.overlay.appendChild(model.title);
   model.overlay.appendChild(model.contents);
   model.contents.appendChild(model.total);
   model.contents.appendChild(model.cost);
   model.contents.appendChild(model.images);
   model.overlay.appendChild(model.buttonContainer);
   model.buttonContainer.appendChild(model.closeButton);
   model.buttonContainer.appendChild(model.cartButton);
   model.closeButton.appendChild(model.closeSpan);
   model.cartButton.appendChild(model.cartSpan);

   view.writeToView(model);
}

PranaSnippet.View.writeToView = function(model) {
    model.title.innerHTML = "Your Recently Added Items";
    model.total.innerHTML = "Number of Items: " + this.getItemCount();
    model.cost.innerHTML = "Cost of Items: $" + this.getTotal();
    model.images.innerHTML = "Images: ";

    var imageArr = this.getImages();
       for (var i = 0; i < imageArr.length; i++) {
          var img = new Image();
          img.src = imageArr[i];
          model.images.appendChild(img);
        }

    model.closeButton.firstChild.innerHTML = "CLOSE";
    model.closeButton.firstChild.style.color = "white";
    model.cartButton.firstChild.innerHTML = "VIEW CART";
}

PranaSnippet.View.getTotal = function() {
  var sum = 0;
  var productDetails = document.getElementsByClassName("product-details");

    for (var i = 0; i < productDetails.length; i++) {
      var quantity = parseInt(productDetails[i].getElementsByTagName('strong')[0].innerHTML);
      var price = Number(productDetails[i].getElementsByTagName('span')[0].innerHTML.replace(/[^0-9\.]+/g,""));
          sum += price * quantity;
    }
  return sum;

}

PranaSnippet.View.getImages = function() {
  var imgArr = [];
  var imageElements = document.getElementsByClassName("product-image");

    for (var i = 0; i < imageElements.length; i++) {
      imgArr.push([imageElements[i].firstChild.src]);
    }

  return imgArr;

}

PranaSnippet.View.getItemCount = function() {
    var sum = 0;
    var productDetails = document.getElementsByClassName("product-details");

      for (var i = 0; i < productDetails.length; i++) {
        sum += parseInt(productDetails[i].getElementsByTagName('strong')[0].innerHTML);
      }

    return sum;
}

PranaSnippet.View.isUserLoggedIn = function() {
  return 1 || (document.getElementsByClassName("myaccount-logged-in").length !== 0);
}