YAHOO.util.Event.onDOMReady(preload);

function preload(){
	
	if(document.images){
		preload_image_object = new Image();
		
		image_url = new Array();
		
		image_url[0] = "/site/images/interface/homepage/img-welcome-engineering.jpg";
		image_url[1] = "/site/images/interface/homepage/img-welcome-field-service.jpg";
		image_url[2] = "/site/images/interface/homepage/img-welcome-substation.jpg";
		image_url[3] = "/site/images/interface/homepage/img-welcome-switchgear.jpg";
		image_url[4] = "/site/images/interface/homepage/img-welcome-training.jpg";
		//#5 corresponds to the default image that's displayed onload this accommadates a last minute change in fucntion
		image_url[5] = "/site/images/interface/homepage/img-welcome-default.jpg";

	
		var i = 0;
		for(i=0; i<5; i++){
			preload_image_object.src = image_url[i];
		}
		
		var nav_items = YAHOO.util.Dom.getElementsByClassName('navimation', 'div');
		
		for(i=0; i<5; i++){
			YAHOO.util.Event.on(nav_items[i], 'mouseover', switchForeground, image_url[i]);
			//this switches the image back to the default on mouseout
			
		}
		YAHOO.util.Event.on('homepage_main_nav', 'mouseleave', switchToBackground, image_url[5]);
	}
		
}

function switchForeground(el,new_image){



		hide_attrs = {
			opacity: {to: 0}
		};
		show_attrs = {
			opacity: {to: 1}
		};

		var top_image = document.getElementById("top_image");
		var bottom_image = document.getElementById("bottom_image");

		bottom_image.src = top_image.src;



		YAHOO.util.Dom.setStyle(top_image, 'opacity', '0');

		top_image.src = new_image;

		var anim = new YAHOO.util.Anim(top_image, show_attrs, 0.25 );
		anim.animate();
}


//Same as the above function but the YUI mouseleave event sends different parameters
function switchToBackground(event, el,new_image){



		hide_attrs = {
			opacity: {to: 0}
		};
		show_attrs = {
			opacity: {to: 1}
		};
		
		var top_image = document.getElementById("top_image");
		var bottom_image = document.getElementById("bottom_image");
		
		bottom_image.src = top_image.src;
		
		
		
		YAHOO.util.Dom.setStyle(top_image, 'opacity', '0');
		
		top_image.src = new_image;
		
		var anim = new YAHOO.util.Anim(top_image, show_attrs, 0.25 );
		anim.animate();
}