var Planeffect = window.Planeffect || {};

Planeffect.Intro = function(){
	var $intro, $overlay, $wrap, $inner, $imagine, $explore, $and, $create;
	
	var setup = function(){
		$overlay = $('<div id="intro-overlay" />').css({
			position: 'absolute',
			zIndex: 99992,
			backgroundColor: 'black',
			top: 0,
			left: 0,
			width: '100%',
			height: '100%'
		}).click(function(){
			$overlay.fadeOut(1000);
		});
		
		$wrap = $('<div id="intro-wrap" />');
		
		$inner = $('<div id="intro-inner" />').css({
			margin: '0 auto',
			width: '700px',
			paddingLeft: '200px',
			position: 'relative',
			border: '1px solid black'
		});
		$logo = $('<img src="/images/logo.png" />').css({
			position: 'absolute',
			top: '18px',
			left: '10px'
		});
		$imagine = $('<img src="/images/intro-imagine.png" />').css({
			display: 'none',
			marginTop: '100px',
			marginBottom: '5px'
		});
		$explore = $('<img src="/images/intro-explore.png" />').css({
			display: 'none', 
			marginBottom: '5px'
		});
		$and = $('<img src="/images/intro-and.png" />').css({
			display: 'none' ,
			marginBottom: '5px'
		});
		$create = $('<img src="/images/intro-create.png" />').css({
			display: 'none' 
		});
		
		$inner.append($logo, $imagine, $explore, $and, $create);
		$wrap.append($inner);
		$overlay.append($wrap);
		$('body').append($overlay);
	};
	
	var animate = function(){
		$imagine.delay(500).fadeIn(1000, function(){
			$explore.fadeIn(1000, function(){
				$and.fadeIn(1000, function(){
					$create.fadeIn(1000, function(){
						$overlay.delay(1000).fadeOut(1000)
					});
				});
			});
		});
	};
	
	return {
		init: function(){
			$intro = $('#intro');
			if ( ! $intro.length) {
				return;
			}
			setup();
			animate();
		}
	}
}();