window.onload = initAll;

var j = document.getElementsByTagName("input").length;
var inputFocus = new Array(document.getElementsByTagName("input").length);
var inputMousePos = new Array(document.getElementsByTagName("input").length);
var overImage = new Image();
overImage.src = 'http://www.dermaellite-bg.com/images/button_on.gif';

function initAll() {
	var allLinks = document.getElementsByTagName("a");

	for (var i=0; i<allLinks.length; i++) {
		
		if(allLinks[i].className == "menuLink"){
			allLinks[i].onclick = toggleMenu;
			allLinks[i].onmouseover = rollOn;
			allLinks[i].onmouseout = rollOff;
		}
		
		if(allLinks[i].className == "Link"){
			allLinks[i].onmouseover = rollOn;
			allLinks[i].onmouseout = rollOff;
		}
	}
	
	for(var i=0;i < document.getElementsByTagName("input").length;i++){
		if(document.getElementsByTagName("input")[i].className == "inp"){
			eventHandler(document.getElementsByTagName("input")[i]);
		}
	}
	eventHandler(document.getElementsByTagName("textarea")[0]);	
	
	
}

function toggleMenu() {
	var thisMenu = document.getElementById("fld").style;

	if (thisMenu.display == "block")  {
		thisMenu.display = "none";
	}
	else {
		thisMenu.display = "block";
	}
	
	return false;
}

function rollOn(){
	var numId = this.id;
	var numId = numId;

	
	if(numId.length == 10){
		var divId = numId.substr(9,10);
	}
	else{
			var divId = numId.substr(10,11);
	}

	div = "menu" + divId;
	document.getElementById(div).style.background = " URL('"+overImage.src+"') repeat-y";
}

function rollOff(){
	var numId = this.id;
	var numId = numId;

	if(numId.length == 10){
		var divId = numId.substr(9,10);
	}
	else{
			var divId = numId.substr(10,11);
	}

	div = "menu" + divId;
	document.getElementById(div).style.background = " URL('http://www.dermaellite-bg.com/images/button.gif')";
}

function eventHandler(element){
if(element){
	element.onmouseover = setMouse;
	element.onmouseout = unsetMouse;
	element.onclick = setFocus;
	element.onfocus = setFocus;
	element.onblur = unsetFocus;
}
}

function setMouse(){
	inputMousePos[this.id] = 1;

	Styler(this);
}
function setFocus(){
	inputFocus[this.id] = 1;

	Styler(this);	
}
function unsetMouse(){
	inputMousePos[this.id] = 0;
	
	Styler(this);
}
function unsetFocus(){
	inputFocus[this.id] = 0;
	
	Styler(this);
}

function Styler(element){
	if(inputFocus[element.id] == 1){
		element.style.border = "1px solid #5ec4ff";
		element.style.backgroundColor = "#fafafa";
	}else if(inputFocus[element.id] == 0 && inputMousePos[element.id] == 1){
		element.style.backgroundColor = "#fafafa";
	}else if(inputFocus[element.id] == 1 && inputMousePos[element.id] == 0){
		element.style.border = "1px solid #5ec4ff";
		element.style.backgroundColor = "#fafafa";		
	}else if(inputMousePos[element.id] == 1){
		element.style.backgroundColor = "#fafafa";		
	}else {
		element.style.border = "1px solid #000";
		element.style.backgroundColor = "#f0f0f0";	
	}
}