// pull in the required source files:
dojo.require("dijit._base.place");
dojo.require("dijit._base.sniff");
dojo.require("dojo.fx");
dojo.require("dojox.fx.easing");
(function(){

	var _d = dojo;
	var $ = dojo.query;

	var demo = function(){
	
		var logoParts = ["logo1","logo2","logo3","logo4"];
		var sitePenParts = ["s","i","t","e","p","e2","n"];
		
		var vp;
		var center;
		
		var _getCenter = function(){
			vp = dijit.getViewport();
			center = {
				x: Math.floor(vp.w / 2),
				y: Math.floor(vp.h / 2)
			};
		};
			
		var _place = function(){
			console.log('place running');
			_getCenter();
			var size = _d.coords("loader");
			var _off = {
				x: Math.floor(size.w / 2),
				y: Math.floor(size.h / 2)
			};
			_d.style("loader",{
				top: (center.y - _off.y) + "px",
				left: (center.x - _off.x) + "px" 
			});
			_d.style("plane",{
				width: (vp.w + 800) + "px",
				height: (vp.h + 800) + "px"
			});
			_d.fadeIn({ node:"loader", onEnd: _startLoading }).play();
		};
	
		var _hideAnim = null;
	
		var _startLoading = function(){
	
			var n = $("#loader .progressStatus")[0];
	
			var _loadConnects = [];
			var _expecting = sitePenParts.length + logoParts.length;
			var _gotten = 0;
			var _gotOne = function(e){
				_gotten++;
				if(_gotten >= _expecting){
					_d.forEach(_loadConnects, _d.disconnect);
					setTimeout(_hideLoader,75);
				}else{
					_d.style(n,"width", Math.floor(_gotten * 20) + "px")
				}
			};
			
			var _janktastik = (_d.isIE && _d.isIE < 7);
			var _ext = (_janktastik ? ".gif" : ".png");
			var clone = $("#hidden img")[0];
			
			var addIt = function(ch){
				var n = _d.clone(clone);
				_d.byId("plane").appendChild(n);
				_loadConnects.push(_d.connect(n,"onload",_gotOne));
				_d.attr(n,"id", ch + "imgNode");
				n.src = "images/" + ch + _ext; 
			};
			
			_d.forEach(sitePenParts,addIt)
			_d.forEach(logoParts,addIt);
			
		};
					
		var _hideLoader = function(){
			if(_hideAnim){ return; }
			_hideAnim = _d.fadeOut({ node:"full", onEnd: _startDemo });
			_hideAnim.play();
		};
		
		var logoOff = null;
		var _startDemo = function(){
			// animations galore:
			
			_d.style("full","display","none");
			logoOff = { x: Math.floor(354/2), y: Math.floor(89/2) }
			
			var _anims = [];
			var delay = 550;
			_d.forEach(logoParts,function(part,idx){
				
				var logo = _d.byId(part + "imgNode");
				var s = !(idx % 2 === 0); // remove ! to change order
				_d.style(logo,"top",(center.y - logoOff.y + 400) + "px" );	
				_anims.push(
					_d.animateProperty({
						node: logo,
						properties: {
							left: (center.x - logoOff.x + 400) 
						},
						duration: (s ? 850 : 1350),
						delay: delay,
						easing: dojox.fx.easing[(s ? "backOut" : "elasticOut")]
					})
	
				);
				delay += 350;
			});
			
			var anim = _d.fx.combine(_anims);
	
			// in the interest of performance				
			var _x = _showSitePen();
			_d.connect(_anims[1], "onEnd", _x, "play");
	
			anim.play();
			
		};
	
		var endTop;
		var endLeft;
		
		var _showSitePen = function(){
			
			var _anims = [];
			var _delay = 250;
			var skew = 25;
			
			var t = endTop = (center.y - logoOff.y + 400);
			var l = endLeft = (center.x - logoOff.x + 400);
				
			_d.forEach(sitePenParts,function(ch,idx){
				var logo = _d.byId(ch + "imgNode");
				
				_d.style(logo,{
					opacity:"0",
					// top: (idx % 2 === 0 ? -200 : vp.h + 400 ) + "px", // (t  - skew) + "px",
					top: (t + 335) + "px",
					left: l + "px"
				});
			
				var _props = {
					top: t 
				};
				
				_anims.push(
					_d.animateProperty({
						node:logo,
						properties: { top: t },
						delay: parseInt(_delay),
						duration: 750,
						easing: dojox.fx.easing.backOut
					})
				);
				_anims.push(
					_d.fadeIn({ node: logo, delay: parseInt(_delay) })
				);
				_delay += 250;
				
			});
	
			var logoIn = _d.fx.combine(_anims);
			_d.connect(logoIn,"onEnd",_nextEffect);
			
			return logoIn;
			
		};
		
		var hoverConnect = null;
		var overConnect = null;
		var _nextEffect = function(){
		
			var surface = _d.byId("plane");
			_d.style(surface,"cursor","pointer");
			
			var shadow = _d.byId("logoShadow");
			surface.appendChild(shadow);
			_d.style(shadow, {
				opacity: "0",
				top: endTop + "px",
				left: endLeft + "px",
				zIndex: 0
			});
			
			var _overlay = _d.doc.createElement('div');
			surface.appendChild(_overlay);
			_d.attr(_overlay,"id","glossNode");
			_d.style(_overlay,{
				opacity:"0",
				top: endTop + "px",
				left: (endLeft - 120) + "px",
				width: "4000px"
			});
			
			overConnect = _d.connect(surface,"onclick",function(e){
				_doneIntro();
			});
			
			var _hoverIn = _d.fadeIn({ node: shadow });
			_hoverIn.play();
			
			//_d.connect(_loop,"onEnd",_loop,"play");
			if(!_d.isIE){
	
				var _shikafoo = false;
				var _loop = _d.animateProperty({
					node: _overlay,
					properties:{
						left: {
							end: function(){
								var end = endLeft - (_shikafoo ? 120 : 384);
								_shikafoo = !_shikafoo;
								return end;
							}
						}
					},
					easing: dojox.fx.easing.backOut,
					duration: 3700
				});
	
				hoverConnect = _d.connect(surface,"onmouseover",_loop,"play");
	
				_d.animateProperty({
					node: _overlay,
					properties:{
						opacity: 1,
						left: endLeft - 50
					},
					duration: 420
				}).play();
				
			}
			
			
		};
	
		var _doneIntro = function(){
			
			_d.disconnect(overConnect);
			_d.disconnect(hoverConnect);
			
			var _anims = [];
			
			var props = {
				height: 125,
				width: 485,
				top: endTop - 35,
				left: endLeft - 75,
				opacity:0
			};
			
			$("#plane img").forEach(function(node,idx){
				var explode = _d.animateProperty({
					node: node,
					properties:props,
					duration:275
				});
				_anims.push(explode);
			});
			
			var _byebye = _d.fx.combine(_anims);
			_d.connect(_byebye,"onEnd",redirPage);
			_byebye.play();
			
		};
	
		var redirPage = function(){
			window.location.href = "http://www.sitepen.com/blog/2008/04/08/im-not-flash/";	
		};
		
		var init = function(){
			
			_d.style("loader",{
				opacity:"0",
				visibility:"visible"
			});
			_place();
			
		};
		init();
		
	};

	dojo.addOnLoad(demo);

})();