$(function(){
	
	// array of animal images - [filename, distance (larger = further away, used for speed and z-index), height]
	var animals = [
		['apple_small.png',3,53],
		['brocolli_med.png',2,247],
		['coffee_large.png',1,285],
		['lemon_large.png',1,144],
		['lemon_small.png',3,83],
		['onion_small.png',3,80],
		['onion_medium.png',2,141],
		['orange_small.png',3,49],
		['strawberry_large.png',1,297],
		['strawberry_small.png',3,50]
	], 
			index = 0,
			elements = {},  // created animals stored in this object
			count = 0;			// used for speed calculations
			
			
	function createAnimal(left) {
				// pick an animal at random
		var animal = animals[parseInt(Math.random() * animals.length, 10)],
		
				// create the animal DOM element
				element = $('<div/>'),
				
				// how fast it bobs up and down
				rate = 40 + Math.random() * 30,
				
				// how much it'll bob up and down, 20 - 40 px
				bob = 20 + Math.random() * (20/animal[1]),
				
				// where to start, vertically. keep the element within 75 and 525 (450+75) px from the top (adjusting to the height and bob)
				top = 75 + Math.random() * (450 - animal[2] - bob);
				
		element.addClass('animal');
		
		element.css({
			background: 'url(http://clients.youknowwhodesign.com/tossed/images/floating_animals/' + animal[0] + ') 0 0 no-repeat', 
			top: top,
			left: left || -200,				// start the animal where asked or 200px off screen to the left
			'z-index': 4 - animal[1]	// z-index based on the 'distance' of the animal
		});
		element.appendTo('#container');
		
		// add this crated element to the element object
		elements[index++] = [element, top + bob, rate, bob, animal[1]];
		
	}
	
	function moveAnimals() {
		
		// store the width of the document to calucate if the animals go off screen
		var docWidth = document.width;
		
		count++;
		
		// iterate through existing animals
		for (var i in elements) {
			
			// retrieve the DOM element and calculated attributes
			var el = elements[i][0],
					top = elements[i][1],
					rate = elements[i][2],
					bob = elements[i][3],
					speed = elements[i][4],
			 		left = parseInt(el.css('left'),10) + 1;
			
			// is it off screen
			if (left > docWidth) {
				
				// get rid of it from the DOM and the elements object
				el.remove();
				delete elements[i];
				
				// create a new one to replace it soon, in 1-7 seconds time
				setTimeout(createAnimal, 1000 + Math.random() * 6000);
				
			} else {
				
				// move the animals, fast ones every iteration, slower ones every 'speed'th iteration
				if (count % speed == 0) {
					el.css({left: left, top: top + Math.sin(left/rate)*bob });
				}
					
			}
			
		}
	}
	
	// create 5 initial animals at 200px intervals from the left
	for(var i = 0; i < 5; i++) {
		createAnimal(i*200);
	}
	
	// move the animals every 20ms or so (50 times per second or so)
	setInterval(moveAnimals, 20);
	
});

$(function() {
	var count = 0,
			top = 20;		// original 'top' value from css
	
	function bob() {
		count++;
		$('a img.download_menu').css({top: top + 0.5 + 10*Math.sin(count / 30)});
	}
	
	if ($('a img.download_menu').length == 1) {
		setInterval(bob, 20);
	}
});