<html lang="en">
<head>
	<title>Hover Cat</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style>
		/* BASELINE RESETS */
		html, body, section, article, h1, h2, p, a, img { margin: 0; padding: 0; border: 0; font-size: 100%; } 
		section, article { display: block; } 
		body { line-height: 1; background: white; overflow:hidden; } 
		#name_plate {
			position: absolute;
			z-index: 0;
			width: 98%;
			top: 0; 
			left: 0; 
			margin: 1rem auto; 
			text-align: center;
			text-shadow: -1px -1px 1px #ddd, 1px 1px 1px #666;
			color: #fcfcfc;
			opacity: 0.25;
			font: 2.5rem sans-serif;
			text-transform: uppercase;
			
		}
		#container { position: absolute; z-index: 1; }
		#target { position: absolute; z-index: 10; }
		#preload_hover_cat_r2l, #preload_hover_cat_l2r { position: absolute; top: -525; left: -525; }
	</style>
	<script src="jquery-2.1.3.min.js"></script>
	<script type="text/javascript">
		// Returns a random integer between min (included) and max (excluded)
		function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min; };
		function animateZTarget(target, boundaries) { 
			// ...
			var randomSize = getRandomInt(61, 512);
			$(target + ' img').attr('width', randomSize);
			$(target + ' img').attr('height', randomSize);
			// ...
			$(target).css('top', getRandomInt(boundaries.top, (boundaries.bottom - ($(target).height() / 2))));
			// ...
			var animation_object = {}
			// Move the target left-to-right or right-to-left
			if ($(target).position().left <= 0) {
				$(target + ' img').attr('src', $(target + ' img').attr('src').replace('R2L', 'L2R'));
				animation_object.left = ('+=' + (boundaries.right + 525));
			} else {
				$(target + ' img').attr('src', $(target + ' img').attr('src').replace('L2R', 'R2L'));
				animation_object.left = ('-=' + (boundaries.right + 525));
			};
			// ...
			var animation_control_object = { duration: getRandomInt(2000, 5000), easing: 'swing' };
			animation_control_object.done = function ( ) { animateZTarget(target, boundaries); return false; };
			// ...
			$(target).delay(getRandomInt(1000, 2000)).animate(animation_object, animation_control_object);
		};
		$(document).ready(function(){
			// Set the current boundaries for the visable window space.
			var boundaries = {top: 0, left: 0, bottom: $(window).height(), right: ($(window).width() + 525)};
			if (boundaries.bottom == 0) { boundaries.bottom = $(document).height(); };
			$('#name_plate').css('top', ((boundaries.bottom * 0.5) - $('#name_plate').height()) * 0.95);
			$(target).css('top', ((boundaries.bottom * 0.5) - 256) * 0.98);
			$(target).css('left', ((boundaries.right * 0.5) - 512) * 0.98);
			$(target)
			.delay(getRandomInt(1000, 3000))
			.animate({
				left: ('+=' + (boundaries.right / 2))
			}, {
				duration: getRandomInt(2000, 4000),
				done: function ( ) {
					animateZTarget('#target', boundaries);
				}
			});
		});
	</script>
</head>
<body>
	<section id="name_plate">
		<h1>because, hover cat.</h1>
	</section>
	
	<section id="container">
		<article id="target">
			<img id="hover_cat" src="Ekko_Bravo_Hover_Cat_L2R.gif" />
		</article>
	</section>
	
	<img id="preload_hover_cat_r2l" src="Ekko_Bravo_Hover_Cat_R2L.gif" />
	<img id="preload_hover_cat_l2r" src="Ekko_Bravo_Hover_Cat_R2L.gif" />
	
</body>
</html>
