$(window).load(function() {
	var animateLanding = function() {
		var step = 0;
		$(".hoverable").each(function(i) {
			$(this).css({
				opacity: 0
			}).show();
			
			$(this).animate({
				left: step,
				opacity: 1
			}, 600 + 200 * (i + 1), function() {
				$(this).hover(function() {
					$(this).stop();
					$(this).animate({
						marginTop: -10
					}, 100);
				}, function() {
					$(this).stop();
					$(this).animate({
						marginTop: 0
					}, 100);
				});
			});
			step += $(this).hasClass("hoversmall") ? 130 : 170;
		});
		
		var step2 = 50;
		$(".hoverable2").each(function(i) {
			$(this).css({
				opacity: 0
			}).show();
			
			$(this).animate({
				left: step2,
				opacity: 1
			}, 600 + 200 * (i + 1), function() {
				$(this).hover(function() {
					$(this).stop();
					$(this).animate({
						marginTop: -10
					}, 100);
				}, function() {
					$(this).stop();
					$(this).animate({
						marginTop: 0
					}, 100);
				});
			});
			step2 += $(this).hasClass("hoversmall") ? 130 : 170;
		});
	};
	animateLanding();
});