/*
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);
    var mpx = (oWidth / oHeight) * 4;

    //run a function when the image is hovered over
    $('img.resize')
    //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: (oWidth * mpx) + 'px',
				    height: (oHeight * mpx) + 'px'
				    //space the animation out over 1 sec (deals in milliseconds)
				}, 1000);
		},
    //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'
				}, 1000);
		});
});