// use this in the body tag
// you can have two body tags if you need
// onload="ControlImages1();"


// choose hide or show

function ControlImage(id){
ShowImage(id);
}

// do hide or show
function ShowImage(id){
document.getElementById(id).style.height = "";
}

function HideImage(id){
document.getElementById(id).style.height = "0";
}


// image groups

// < 21
function ControlImages1(){
hideAll();
ControlImage('small');
ControlImage('img1');
ControlImage('img2');
ControlImage('img3');
ControlImage('footer');
}

	// < 28
	function ControlImages2(){
	hideAll();
	ControlImage('mid');
	ControlImage('img4');
	ControlImage('img5');
	ControlImage('img6');
	ControlImage('footer');
	}

		// < 35
		function ControlImages3(){
		hideAll();
		ControlImage('mid0');
		ControlImage('img7');
		ControlImage('img8');
		ControlImage('img9');
		ControlImage('img10');
		ControlImage('footer');
		}
		
			// > 42
			function ControlImages4(){
			hideAll();
			ControlImage('large');
			ControlImage('img11');
			ControlImage('img12');
			ControlImage('footer');
			}
			
			
			

function hideAll(){

	HideImage('small');
	HideImage('mid');
	HideImage('mid0');
	HideImage('large');
	HideImage('footer');
	
	HideImage('img1');
	HideImage('img2');
	HideImage('img3');
	HideImage('img4');
	HideImage('img5');
	HideImage('img6');
	HideImage('img7');
	HideImage('img8');
	HideImage('img9');
	HideImage('img10');
	HideImage('img11');
	HideImage('img12');
}