// JavaScript Document

// you need these 3 functions for 'positon()' and 'matchHeight()' to work.
// but you can also use them independently to write/simplify your own.

function getStyle(id) {
	return document.getElementById(id).style;
}
function getHeight(id) {
	return document.getElementById(id).offsetHeight;
}
function getTop(id) {
	return document.getElementById(id).offsetTop;
}

// positions id1 bellow id2 plus some 'gap' ie. position('footer', 'container', 0)
function position (id1, id2, gap) {
	var heightID2 = getHeight(id2);
	var topID2 = getTop(id2);
	var styleID1 = getStyle(id1);
	styleID1.top = heightID2 + topID2 + gap + 'px';
	styleID1.display = 'block';
}


// match the height of elem1 with respect to elem2, plus extra pixels if desired
function matchHeight(id1, id2, extra) {
	var h2 = getHeight(id2);
	var styleID1 = getStyle(id1);
	styleID1.height = h2 + extra + 'px';
	styleID1.display = 'block';
}

// global functions

function position (id1, id2, gap) {

	var heightID1 = getHeight(id1);
	
	var topID1 = getTop(id1);
	var styleID2 = getStyle(id2);
	
	styleID2.top = heightID1 + topID1 + gap + 'px';
	styleID2.display = 'block';
	
}

// variables


onload=function() {
	
	
	// pairing left & right side background with final height
	h = getHeight('bodyC');
	
	CM = getStyle('bodyL');
	CM.height =  h  + 'px';
	
	CM = getStyle('bodyR');
	CM.height =  h  + 'px';
	
	position('bodyC', 'foot', 0);
	
	// pairing content background with final height
	h = getHeight('foot');
	t = getTop('foot');
	
	CM = getStyle('container');
	CM.height = t + h + 'px';
	

}