/* ---------------------------------------------------------------------------------------------|
|	Script by: David Lebron																		|
|   Date: July 2008																				|
|	Description: these functions create a rollover effect for the navigation.  the background	|
|	image for the <li> tag is change to a yellow/orange arrow and when the button is clicked	|
|	the corresponding function is called to set the button color and image and disallows clicking 
|	the nav again.																				|
   --------------------------------------------------------------------------------------------*/

//function that reads in the tag ID, changes the <li> image to a yellow arrow for visual
//first we check to see if the button is already 'set' because it was previously clicked, if so,
//the link color stays fixed and doesn't change.
function mOver(itemID) {
	//first check background image, if _clicked.gif skip

	var tagOver = document.getElementById(itemID);
	var tagImgOver = "images/nav_arrow.gif" 	//image path and image filename
		
		//if the background-image is NOT the _clicked.gif image, then continue normal mouseover
		if(tagOver.style.backgroundImage.match("_clicked.gif") != "_clicked.gif") {
	
	  		//import the image to change the background css property for the <li> tag
			 tagOver.style.background = 'url(' + tagImgOver + ') no-repeat left 50%;'; 
		} 
}

//onmouseout remove background list item image for navigation visual
function mOut(itemID) {
	//check to see if this button is _clicked.gif, if so, don't mouse out

	var tagOut = document.getElementById(itemID);
 	var tagImgOut = "none;";
	  
		//if the background-image is NOT the _clicked.gif image, then continue normal mouseover
		if(tagOut.style.backgroundImage.match("_clicked.gif") != "_clicked.gif") {
	
	  		 //removes the background-image for navigation visual
	  			tagOut.style.background = tagImgOut;
		} 
}

//this function reads in the url and checks to see what page we're on,
//then assigns the correct image to the menu button for a visual of where you are.
function pageCheck() {
	var strUrl = document.URL;  //give me the URL of the current page
	var pageName = new Array("index.html","about.html","portfolio-1.html","portfolio-2.html","services.html","contact.html");
	
	//loop through the array and find the page we are currently on
	for(i = 0; i < pageName.length; i++) {
	
	 var pageUrl = strUrl.match( pageName[i] );  //returns the page name if match found

		//if current page is the same as the pageName (array value), set corresponding button
		 if(pageUrl==pageName[i]) {
			//section to force background-image on <li> tag
			var page = pageName[i].replace(/.html/i, "");
			var	newTagID = setMenuID(page); //set the correct <li> ID for the pagename we are on.
				setNewBGImage(newTagID); //ex: "home", "portfolio" <li> id="<name>" tagname
		}
	} 
}

//use tagName of <li> tag and set the new Background Image
function setNewBGImage(tagName) {
	var tagObj = document.getElementById(tagName);
	var newBGImg = "images/nav_arrow_clicked.gif"; //change to image of choice
	
		tagObj.style.background = 'url('+newBGImg+') no-repeat left 50%;'; 
		
		//call to function to set text color of link
		setLinkColor(tagName);
}

//function that sets the link color onClick
function setLinkColor(aTagID) {
	//aTag = anchor tag id
	var aTag = document.getElementById(aTagID + "link");  //ie. 'homelink'
		aTag.style.color = "#ff9c00"; //changes link color for clicked button
}

function setMenuID (pName) {
	//here we translate the stripped page filename and change to the <li id> tag to set the background image
	switch(pName) {
		case "index":
		  var tagID = "home";
		  return(tagID);
		  break;
		  
		case "portfolio-1":
		  var tagID = "portfolio";
		  return(tagID);
		  break;
		  
		case "portfolio-2":
		  var tagID = "portfolio";
		  return(tagID);
		  break;
		  
		default:
		  var tagID = pName;  //just return the pagename because it matches the <li> tag
		  return(tagID);
	}
}