gistfile1.txt

(function(jQuery) {
	"use strict";

	var numberOfProducts;
	var subTotal;
	//Fetches and scrapes cart for number of products and subtotal
	var getData = function(){
		jQuery.get('http://www.warbyparker.com/checkout/cart', function(data){
			numberOfProducts = jQuery('.cart-total-qty').text();
			subTotal = jQuery(data).find('.price').last().text();
			if(subTotal === ""){
				subTotal = "$0.00";
			}
		});
	};

	//checks if page is on the bottom 10%, returns true of false
	var is10Percent = function(){
		return jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height() - (jQuery(document).height()*0.1);
	};

	//calls function to get the initial data from cart
	getData();
	var checkIfRan = false;

	//creates the overlay for the site where the content will live
	var overlay = document.createElement('div');
	overlay.setAttribute('id', 'overlay');

	//creates the backdrop that will blackout the rest of the page
	var backdrop = document.createElement('div');
	backdrop.setAttribute('id', 'backdrop');

	//checks if the window is being scrolled through
	jQuery(window).scroll(function() {
		getData();
		if(is10Percent()) {
			if(!checkIfRan){
				checkIfRan = true;
				//injects divs into page
				jQuery('body')[0].appendChild(backdrop);
				jQuery('body')[0].appendChild(overlay);
				jQuery('#overlay').html('<div style="padding:0 10px 0 10px"><div style="text-align:center; padding:10% 2% 2% 2%"><img src ="http://s2.warbyparker.com/skin/frontend/enterprise/warby/images/logo.png"/></div><div style="text-align:center; padding:10px 2% 2% 2%"><h2 style="color:#006699">Number of Items in Cart: </h2><h2>'+numberOfProducts + '</h2></div><div style="text-align:center; padding:10px 2% 2% 2%"> <h2 style="color:#006699"> Total Price: </h2><h2>' + subTotal +' </h2><div style="text-align:center; padding:10px 2% 2% 2%"><button type="button" title="Checkout" class="button2 btn-checkout" onclick="window.location=\'https://www.warbyparker.com/checkout/onepage/\'"><span><span>Checkout</span></span></button></div></div></div>');
				jQuery('#overlay').css({
					'position':'fixed',
					'top': '25%',
					'left': '25%',
					'width': '50%',
					'height': '50%',
					'min-width':'300px',
					'min-height':'380px',
					'clear':'both',
					'background-color': '#fff',
					'border-radius':'10px',
					'z-index':' 10000'
				});
				//black out whole page
				jQuery('#backdrop').css({
					'position':'fixed',
					'top': '0',
					'left': '0',
					'width': '100%',
					'height': '100%',
					'background-color': '#000',
					'filter':'alpha(opacity=70)',
					'-moz-opacity':'0.7',
					'-khtml-opacity': '0.7',
					'opacity':' 0.7',
					'z-index':' 9999'
				});
			}
		}
	});
})(jQuery);