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

	Author: 	Justin Farmer 

*/



$(document).ready(function(){



	//get the width

	var oWidth = $('img.resize').width();

	//get the height

	var oHeight = $('img.resize').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

	$('a.ass')

		//mouseOver effect

		.hover(function(){

			//take the currently targeted img

			$('img.resize'+'#im'+$(this).attr('id'))

				//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: '220px',

					height: '165px',
					
					left: '-251px',
					
					top: '-30px'

				//space the animation out over 1 sec (deals in milliseconds)

				},200);

		},

		//this is just like a mouseOut effect to take the img back to the original size

		function(){

			$('img.resize'+'#im'+$(this).attr('id'))

				//stops the event from happening in case of an abrupt mouseOut

				.stop()

				.animate({

					width: oWidth +'px',

					height: oHeight +'px',
					
					left: '0px',
					
					top: '0px'

				},200);

		});

});