var windowHeight = window.innerHeight;

document.addEventListener('resize', function() {
	windowHeight = window.innerHeight;
})

function outerHeight(el) {
	var height = el.offsetHeight;
	var style = getComputedStyle(el);

	height += parseInt(style.marginTop) + parseInt(style.marginBottom);
	return height;
}

function parallax (el, speedFactor, outerHeight) {
	var foo = document.querySelectorAll(el);

	var getHeight;
	var firstTop;
	var paddingTop = 0;

	//get the starting position of each element to have parallax applied to it
	foo.forEach(function(subEl){
	    firstTop = subEl.getBoundingClientRect().top;
	});

	if (outerHeight) {
		getHeight = function(el) {
			return outerHeight(el);
		};
	} else {
		getHeight = function(el) {
			return el.clientHeight;
		};
	}

	// function to be called whenever the window is scrolled or resized
	function update(){
		var pos = window.scrollY;

		foo.forEach(function(subEl){
			var element = subEl;
			var top = element.getBoundingClientRect().top;
			var height = getHeight(element);

			element.style.top = -(Math.round((firstTop - pos) * speedFactor)) + "px";
		});
	}
	document.addEventListener('scroll', update, true)
	document.addEventListener('resize', update)
	update()
};

parallax(".hero", -0.6);