function init(){
			/* Set body's height */
			var body = document.getElementById('index');
			body.style.height = document.body.clientHeight;

			var topLeft = document.getElementById('topLeft');
			var topRight = document.getElementById('topRight');
			var btmLeft = document.getElementById('btmLeft');
			var btmRight = document.getElementById('btmRight');

			if( navigator.appName.match("Explorer") == null){
			/* If broswer other than IE */
				/* topLeft is always focused. So no need to unDim/dim 	*/
				
				topLeft.addEventListener('mouseover', 
					function(){findLabel(this.id).style.display = "block"}, false);
				topLeft.addEventListener('mouseout',
					function(){findLabel(this.id).style.display = "none"} , false);

				topRight.addEventListener('mouseover', unDim, false);
				topRight.addEventListener('mouseout', dim, false);
				
				btmLeft.addEventListener('mouseover', unDim, false);
				btmLeft.addEventListener('mouseout', dim, false);
				
				btmRight.addEventListener('mouseover', unDim, false);
				btmRight.addEventListener('mouseout', dim, false);
						
				var divArray = document.getElementsByTagName("div");

				for( index in divArray){
					var el = divArray[index];
					if(el.className == "colorBox"){
						el.style.borderColor = "black"
						el.addEventListener('click', colorifyBackground, false);
					}
				}
			}else{ /* if IE */
				/* unDim & dim are not needed since css pseudo-elem :hover works in IE */
				/* We still have to show labels below our squares though */
				function ieSqMouseOverFunc(elId){
					findLabel(elId).style.display = "block";
				}
				function ieSqMouseOutFunc(elId){
					findLabel(elId).style.display = "none";
				}

				topLeft.onmouseover = function(){ieSqMouseOverFunc(topLeft.id)}
				topLeft.onmouseout = function(){ieSqMouseOutFunc(topLeft.id)}
				
				topRight.onmouseover = function(){ieSqMouseOverFunc(topRight.id)}
				topRight.onmouseout = function(){ieSqMouseOutFunc(topRight.id)}
								
				btmLeft.onmouseover = function(){ieSqMouseOverFunc(btmLeft.id)}
				btmLeft.onmouseout = function(){ieSqMouseOutFunc(btmLeft.id)}
								
				btmRight.onmouseover = function(){ieSqMouseOverFunc(btmRight.id)}
				btmRight.onmouseout = function(){ieSqMouseOutFunc(btmRight.id)}
				
				var divArray = document.getElementsByTagName("div");
				for(var i = 0; i < divArray.length; i++){
					var el = divArray[i];
					if(el.className == "colorBox"){
						el.style.borderColor = "black";
						el.onclick = colorifyBackground;
					}
				}
			}/*end of browser check */
				
		} /* end of init */
		function unDim(){
			this.style.opacity = 1;
			findLabel(this.id).style.display = "block";
			
		}
		function dim(){
			this.style.opacity = .3;
			findLabel(this.id).style.display = "none";
		}
		
		function colorifyBackground(){
				document.getElementById('index').style.backgroundColor = this.style.backgroundColor;
				this.style.borderColor = "white";
				if(typeof(lastBtn) == "undefined"){
					lastBtn = this;
				}else{
					lastBtn.style.borderColor = "black";
					lastBtn = this;
				}
		}

		function findLabel( labelToMe ){
			var labels = document.getElementsByTagName('label');
			for(var i = 0; i < labels.length; i++){
				if(labels[i].htmlFor == labelToMe){
					return labels[i];
				}
			}
		}