// JavaScript Document
// works for links with an a link surrounding an image
window.onload = rolloverInit;
//image inside a link therefore parentNode is the link therefore if the parent of the image is a link
function rolloverInit() {
    for(var i=0; i<document.images.length; i++){ // looping through the document-  document.images is an array of the images on the page
		if(document.images[i].parentNode.tagName == "A"){ //if image inside the link then do the following function
			setupRollover(document.images[i]);		 //need to do function pass the current image	
		}
	}	//parentNode is the parent above the image- in this case the link is the parent of the image
}   // Then we'll look at the tagname

function setupRollover(thisImage) { //thisImage is the current image passed to the function as the rolloverInit
	thisImage.outImage = new Image(); //create new object- setting it to be a new image object adding on to existing object .outImage
	thisImage.outImage.src = thisImage.src;  //Now we'll set the source: in this case, store the current image on the page
	thisImage.onmouseout = rollOut; //trigger the rollOut function
	
	thisImage.overImage = new Image();
	thisImage.overImage.src= "images2008/design/nav/" + thisImage.id + "_hover.jpg"; //Need to set the path this time for the image
	thisImage.onmouseover = rollOver;	
}
//this is whatever is being passed- in this case an image
function rollOut() {
	this.src = this.outImage.src; //keyword that based on context- event handler is passing the image- so changing the source
}

function rollOver() {
	this.src = this.overImage.src;
}