//triggers onload events
window.onload=function(){
	if(typeof addEvents == "function")addEvents();
	if(typeof screenWidth == "function")screenWidth();
	if(typeof setFormFocus == "function")setFormFocus();
}

//used to determine whether to fade in or out
var hover = false;
//used to determine if you are still in the same element
var noFade = false;
//Keeps track of the current rollover element
var currentElement;

//used so you don't have to srite document.getelementbyid so many times
function $(id) {
  return document.getElementById(id);
}

//adds mouseover events to navigation buttons
function addEvents(){
	if($("home")){
		if($("navhomecover")){
			$("navhomecover").onmouseover = function(){mouseOver("navhomecover")};
		}
		//$("home").onmouseout = function(){mouseOut("home")};
	}
	if($("portfolio")){
		if($("navportfoliocover")){
			$("navportfoliocover").onmouseover = function(){mouseOver("navportfoliocover")};
		}
		//$("navportfoliocover").onmouseout = function(e){mouseOut("portfolio", e)};
	}
	if($("bio")){
		if($("navbiocover")){
			$("navbiocover").onmouseover = function(){mouseOver("navbiocover")};
		}
		//$("bio").onmouseout = function(){mouseOut("bio")};
	}
	if($("blog")){
		if($("navblogcover")){
			$("navblogcover").onmouseover = function(){mouseOver("navblogcover")};
		}
		//$("blog").onmouseout = function(){mouseOut("blog")};
	}
	if($("contact")){
		if($("navcontactcover")){
			$("navcontactcover").onmouseover = function(){mouseOver("navcontactcover")};
		}
		//$("contact").onmouseout = function(){mouseOut("contact")};
	}
}

//checks if the current button should fade or not
//if noFade = false then it sets hover to true and calls the funtion to fade
function mouseOver(id){
	if(noFade == false){
		if(currentElement){
			   obj.style.opacity = 0;
			   obj.style.filter = 'alpha(opacity=0)';
		}
		currentElement = $(id);
		hover = true;
		hoverFade(id);
	}
}


//Determines if the nav should fade out or not
//Considering what element they are coming from and going to
//This prevents the buttons from blinking when rolling from the text to the image
function mouseOut(id, e){
	if(e){
		
		//Works for IE
		if(e.toElement){
			//If staying in the same element dont fade out
			if(e.toElement.id == id || e.toElement.id == id + "image" || e.toElement.id == id + "text"){
				noFade = true;
			}
			//If not then sets the variables to fade out and resets other variables
			else{
				noFade = false;
				hover = false;
				id = "nav" + id + "cover";
				hoverFade(id);
			}
		}
		
		//Works for Mozilla
		else{
			//If staying in the same element dont fade out
			if(e.relatedTarget.id == id || e.relatedTarget.id == id + "image" || e.relatedTarget.id == id + "text"){
				noFade = true;
			}
			//If not then sets the variables to fade out and resets other variables
			else{
				noFade = false;
				hover = false;
				id = "nav" + id + "cover";
				hoverFade(id);
			}
		}
	}
}

//Controls the fading of the navigation
function hoverFade(id) {
	obj = $(id);
	//if hover = true then the element will fade in
	if(hover){
		for (var i=0;i<11;i++){
			setTimeout('setOpacity('+i+')',15*i);
		}
		return false;
	}
	//if hover = false the element will fade out
	else{
		var count = -1;
		for (var i=10;i>=0;i--){
			count++;
			setTimeout('setOpacity('+i+')',15*count);
		}
		return false;
	}
}

function setOpacity(value)
{	
	obj.style.opacity = value/10;
	obj.style.filter = 'alpha(opacity=' + value*10 + ')';
}