// JavaScript Document
// Some simple JavaScript to adjust the template according to their screen resolution:
window.onload = function()
{
	var headerHeight  = document.getElementById('header').offsetHeight;
	var navHeight	  = document.getElementById('nav').offsetHeight;
	var pageContent   = document.getElementById('page_content');
	var contentHeight = pageContent.offsetHeight;
	var container 	   = document.getElementById('container')
	var containerWidth = container.offsetWidth;
	
	var rightShadow	  = document.getElementById('right_shadow');
	var leftShadow	  = document.getElementById('left_shadow');
	var footer		  = document.getElementById('footer');
	
	// Only adjust if greater than 768:
	if(container.offsetWidth - 75 > 768)
		pageContent.style.width = (container.offsetWidth - 75) + "px";
	
	rightShadow.style.height = contentHeight + "px";
	leftShadow.style.height = contentHeight + "px";
	footer.style.top = (headerHeight + navHeight + contentHeight) + "px";
	footer.style.width = containerWidth + "px";
}

// We need to do the same when they resize the window:
window.onresize = function()
{
	var headerHeight  = document.getElementById('header').offsetHeight;
	var navHeight	  = document.getElementById('nav').offsetHeight;
	var pageContent   = document.getElementById('page_content');
	var contentHeight = pageContent.offsetHeight;
	var container 	   = document.getElementById('container')
	var containerWidth = container.offsetWidth;
	
	var rightShadow	  = document.getElementById('right_shadow');
	var leftShadow	  = document.getElementById('left_shadow');
	var footer		  = document.getElementById('footer');
	
	// Only adjust if greater than 768:
	if(container.offsetWidth - 75 > 768)
		pageContent.style.width = (container.offsetWidth - 75) + "px";
	
	rightShadow.style.height = contentHeight + "px";
	leftShadow.style.height = contentHeight + "px";
	footer.style.top = (headerHeight + navHeight + contentHeight) + "px";
	footer.style.width = containerWidth + "px";
}