$(document).ready(function(){

	
	//run a function when the image is hovered over
	$('div#main_search')
		//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',
					width: '960px',
					height: '600px'
					//height: (oHeight * mpx) +'px'
				//space the animation out over 1 sec (deals in milliseconds)
				},1000);
				
				$('object#flash')
				//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',
					width: '0px',
					height: '0px'
					//height: (oHeight * mpx) +'px'
				//space the animation out over 1 sec (deals in milliseconds)
				},1000);
				//.hide();
				
				
		},
		//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: '350px',
					height: '288px'
				},1000),
				
			$('object#flash')
				//stops the event from happening in case of an abrupt mouseOut
				.stop()
				.animate({
					width: '630px',
					height: '288px'
				},1000);
				
		});
});

