/* 	Function: 	Enlarge an image when it is hovered over
	Author: 	Justin Farmer 
*/

$(document).ready(function(){

	//get the width
	var oWidth = $('img.homepageimagegrow').width();
	//get the height
	var oHeight = $('img.homepageimagegrow').height();
	//we want to preserve the proportions of the image, so we get the multipler (you could always multipy the multiplier to get a large image
	var mpx = (oWidth / oHeight);
	
	//run a function when the image is hovered over
	$('img.homepageimagegrow')
		//mouseOver effect
		.hover(function(){
			//take the currently targeted img
			$(this)
				//stops the event from happening in case of an abrupt mouseOut
				.stop()
				//custom animation effect to change the width and height of the img
				.animate({
					//take the original width/height X multipler and tag on the 'px'
					width: "230px",
					height: "230px",
					marginLeft: "-50px",
					marginTop: "-50px"
				//space the animation out over 1 sec (deals in milliseconds)
				},300).css('z-index','5').addClass("homepageimagegrowover");
				
		},
		//this is just like a mouseOut effect to take the img back to the original size
		function(){
			$(this)
				//stops the event from happening in case of an abrupt mouseOut
				.stop()
				.animate({
					width: oWidth +'px',
					height: oHeight +'px',
					marginLeft: "0px",
					marginTop: "0px"
				},1).css('z-index','1').removeClass("homepageimagegrowover");
		});
});