//This is a function that automatically loads once the html markup has loaded (but the cool part is it doesn't have to wait for html images to be loaded).
$().ready(function(){

	//This line of code sets up the rollover.  It uses CSS-style syntax to target which tags get "rollover-ized"
	//This particular one targets any  <img> tag that has "class=roll"...  that's contained within an <a> tag.
	attachRollOverEvent("a img.roll");

	//This line will preload as many images as you have listed within the parens (separated by commas, and in quotes)
	//Just change the image name(s) to any image you want to preload...
	$.preloadImages("images/backbutton_on.jpg", "images/backbutton_off.jpg", "images/bottom.jpg", "images/contact_on.jpg", "images/contact_off.jpg", "images/gwen.jpg", "images/intro.jpg", "images/nav_off.jpg", "images/nav_on.jpg", "images/photo_backbutton_on.jpg", "images/photo_backbutton_off.jpg", "images/photo_contact_on.jpg", "images/photo_contact_off.jpg", "images/photo_floor.jpg", "images/photo_gwen.jpg", "images/photo_intro.jpg", "images/photo_nav_on.jpg", "images/photo_nav_off.jpg", "images/photo_port_1.jpg", "images/photo_port_2.jpg", "images/photo_port_3.jpg", "images/photo_port_4.jpg", "images/photo_port_5.jpg", "images/photo_port_6.jpg", "images/photo_port_7.jpg", "images/photo_port_8.jpg", "images/photo_port_9.jpg", "images/portfolio_1.jpg", "images/portfolio_2.jpg", "images/portfolio_3.jpg", "images/portfolio_4.jpg", "images/portfolio_5.jpg", "images/portfolio_6.jpg", "images/portfolio_7.jpg", "images/portfolio_8.jpg", "images/portfolio_9.jpg", "images/portfolio_10.jpg");
					
});




//This is the function that automatically "rollover-izes".  You don't have to ever change this code.
//This function does assume that your non-hover images have a "_off" at the end, like mybutton_off.jpg or mybotton_off.gif
//It also assumes your hover images are set up with "_on" at the end.
attachRollOverEvent = function(imageId){
	$(imageId).mouseover( function(){ $(this).attr("src", $(this).attr("src").split('_off').join('_on')) } );
	$(imageId).mouseout( function(){ $(this).attr("src", $(this).attr("src").split('_on').join('_off')) } );
}





//This function deals with the preloading.  You don't have to ever change this code.
$.preloadImages = function()
{
	for(var i = 0; i<arguments.length; i++)
	{
		$("<img>").attr("src", arguments[i]);
	}
}