(function($) {
	$(document).ready(function() {

		$('header[role="banner"], footer[role="contentinfo"]').addClass('animated');
		$('header.animated').prepend('<div class="header-crystals"><div class="crystals" id="crystals1"></div><div class="crystals" id="crystals2"></div><div class="crystals" id="crystals3"></div></div>	');
		$('footer.animated').prepend('<div class="footer-crystals"><div class="crystals" id="crystals4"></div><div class="crystals" id="crystals5"></div><div class="crystals" id="crystals6"></div></div>	');

		$('#crystals1').pan({fps: 30, speed: .5, dir: 'right', depth: 10});
		$('#crystals2').pan({fps: 30, speed: .5, dir: 'left', depth: 30});
		$('#crystals3').pan({fps: 30, speed: .5, dir: 'right', depth: 50});

		$('#crystals1, #crystals2, #crystals3').spRelSpeed(3);
		
		$('#crystals4').pan({fps: 30, speed: .5, dir: 'left', depth: 10});
		$('#crystals5').pan({fps: 30, speed: .5, dir: 'right', depth: 30});
		$('#crystals6').pan({fps: 30, speed: .5, dir: 'left', depth: 50});

		$('#crystals4, #crystals5, #crystals6').spRelSpeed(3);
		
	});
})(jQuery);