window.onload = layout;

function layout(){
	putShadows();
	setCSSColorForPages();
	menuHighlighter();
	inputClearer();
}

function inputClearer(){
	var formInputs = document.getElementsByTagName('input');
	for(var $i = 0; $i < formInputs.length; $i++){
		formInputs[$i].onfocus = clearIt;
	}
}

function clearIt(){
	if(this.value == this.defaultValue){
		this.value= "";	
	}
}

function putShadows(){
	var shadows = document.createElement('div');
	shadows.setAttribute('id', 'bg_shadows');
	var targetElement = document.getElementById('page_content');
	targetElement.parentNode.insertBefore(shadows, targetElement);
	
	var menuShadows = document.createElement('div');
	menuShadows.setAttribute('id', 'menu_shadows');
	var header = document.getElementById('header');
	header.appendChild(menuShadows);
}

function menuHighlighter(){
	var menu = document.getElementById('menu');
	var menuLinks = menu.getElementsByTagName('a');
	
	var linkDefaultColor = '#c3c8c7';
	
	var header = document.getElementById('header');
	var headerDefaultColor = header.style.backgroundColor;
	
	var linkOverColors = [];
	linkOverColors[4] = '#e9dc1c';
	linkOverColors[3] = '#e3163d';
	linkOverColors[2] = '#8cd049';
	linkOverColors[1] = '#ef8e01';
	linkOverColors[0] = '#00adef';

			menuLinks[0].onmouseover = function(){
				this.style.color = linkOverColors[0];
				var header = document.getElementById('header');
				header.style.backgroundColor = linkOverColors[0];
				var footer = document.getElementById('footer');
				footer.style.backgroundColor = linkOverColors[0];				
			}
		
			menuLinks[0].onmouseout = function(){
				this.style.color = linkDefaultColor;
				var header = document.getElementById('header');
				header.style.backgroundColor = headerDefaultColor;
				var footer = document.getElementById('footer');
				footer.style.backgroundColor = headerDefaultColor;				
			}
			
			menuLinks[1].onmouseover = function(){
				this.style.color = linkOverColors[1];
				var header = document.getElementById('header');
				header.style.backgroundColor = linkOverColors[1];
				var footer = document.getElementById('footer');
				footer.style.backgroundColor = linkOverColors[1];				
			}
		
			menuLinks[1].onmouseout = function(){
				this.style.color = linkDefaultColor;
				var header = document.getElementById('header');
				header.style.backgroundColor = headerDefaultColor;
				var footer = document.getElementById('footer');
				footer.style.backgroundColor = headerDefaultColor;				
			}	
			
			menuLinks[2].onmouseover = function(){
				this.style.color = linkOverColors[2];
				var header = document.getElementById('header');
				header.style.backgroundColor = linkOverColors[2];
				var footer = document.getElementById('footer');
				footer.style.backgroundColor = linkOverColors[2];				
			}
		
			menuLinks[2].onmouseout = function(){
				this.style.color = linkDefaultColor;
				var header = document.getElementById('header');
				header.style.backgroundColor = headerDefaultColor;
				var footer = document.getElementById('footer');
				footer.style.backgroundColor = headerDefaultColor;				
			}
			
			menuLinks[3].onmouseover = function(){
				this.style.color = linkOverColors[3];
				var header = document.getElementById('header');
				header.style.backgroundColor = linkOverColors[3];
				var footer = document.getElementById('footer');
				footer.style.backgroundColor = linkOverColors[3];				
			}
		
			menuLinks[3].onmouseout = function(){
				this.style.color = linkDefaultColor;
				var header = document.getElementById('header');
				header.style.backgroundColor = headerDefaultColor;
				var footer = document.getElementById('footer');
				footer.style.backgroundColor = headerDefaultColor;				
			}	
			
			menuLinks[4].onmouseover = function(){
				this.style.color = linkOverColors[4];
				var header = document.getElementById('header');
				header.style.backgroundColor = linkOverColors[4];
				var footer = document.getElementById('footer');
				footer.style.backgroundColor = linkOverColors[4];				
			}
		
			menuLinks[4].onmouseout = function(){
				this.style.color = linkDefaultColor;
				var header = document.getElementById('header');
				header.style.backgroundColor = headerDefaultColor;
				var footer = document.getElementById('footer');
				footer.style.backgroundColor = headerDefaultColor;				
			}		
}

function setCSSColorForPages(){	
	var iid = document.getElementsByTagName('body')[0];
	var idn = iid.getAttribute('id');
	var e = document.getElementById(idn);
	if(e != null && idn == 'services'){
		var h = document.getElementById('header'); h.style.backgroundColor = '#8cd049';
		var f = document.getElementById('footer'); f.style.backgroundColor = '#8cd049';		
	} else if(e != null && idn == 'about-us'){
		var h = document.getElementById('header'); h.style.backgroundColor = '#ef8e01';
		var f = document.getElementById('footer'); f.style.backgroundColor = '#ef8e01';		
	} else if(e != null && idn == 'blog'){
		var h = document.getElementById('header'); h.style.backgroundColor = '#e3163d';
		var f = document.getElementById('footer'); f.style.backgroundColor = '#e3163d';		
	} else if(e != null && idn == 'contact-us'){
		var h = document.getElementById('header'); h.style.backgroundColor = '#e9dc1c';
		var f = document.getElementById('footer'); f.style.backgroundColor = '#e9dc1c';		
	}
}