dojo.provide("src");
	
dojo.require("src.Image");
	
dojo.require("dojo.NodeList-fx");
dojo.require("dojo.fx.easing");
dojo.require("dojox.widget.Dialog");
dojo.require("dojox.layout.RadioGroup");
dojo.require("dojox.analytics.Urchin");
dojo.require("dojox.timing");

(function($){
	
	var _stuffMoving = null,
		_started = null,
		_stalltime = 450, // ms
		_doneAnim = null,
		_needed = null,
		_loaded = [],
		_connects = [],
		profileWidget = null,
		stack = null,
		timer = null,
		_profiletimer = null
	;
	
	var _doneAnim = function(){
		
		$.fadeOut({ 
			// fade out the overlay
			node: "overlay", 
			duration: 200,
			onEnd: function(){
				// then make our image surface 240px, and fade it in
				$.animateProperty({
					node:"imageContainer", 
					properties: {
						height: 140,
						opacity:1
					},
					// with teh sexy
					easing: $.fx.easing.backOut,
					duration:220,
					// wait for the fadeout above to finish
					delay:400,
					onEnd: function(){
						// hide the actual overlay so you can click underneath it
						$.style("overlay","display","none");
						_started = true;	
						// take all the elements with "startsHidden" class, and 
						// set them up, fade them in, and remove hidden class
						$.query(".startsHidden")
							.style("opacity", "0")
							.removeClass("startsHidden")
							.fadeIn().play(500);
					}
				}).play(); 
			}
		}).play();
		
		//var timer = new dojox.timing.Timer(5000);
		
			var imgCont = dijit.byId("imageContainer");
			imgCont.timer.onTick = function(){
				var imgCont = dijit.byId("imageContainer");
				//this.inherited(arguments);
				//console.info("five seconds elapsed");

				imgCont._handleKey({	charOrCode: dojo.keys["RIGHT_ARROW"]}  );
			}
		
			imgCont.timer.start();
			//dijit.focus(imgCont);
			
		
	};
	
	// onShow result, it no timer was running (see later)
	var updateProfile = function(datawidget){
		//if(!_started){ return; }
		_stuffMoving = true;
		// conveniently, later, we stored a reference to our avatar (RadioGroupSlide child)
		// in the Image widget. 
		stack.selectChild(datawidget._avatar);
		profileWidget.setData(datawidget._userInfo);
	}

	var _oneBroke = function(n,e){
		_gotOne(n,e);
	}

	// the handler for our image onloader.
	// FIXME: if we get a 404, we'll never finish ...
	var _gotOne = function(n,e){
		_loaded.push(n);
		if(_loaded.length >= $._neededImages){
			$.forEach(_connects, $.disconnect);
			_doneAnim();
		}
	}

	// the onLoad function
	var init = function(){
	
		// tracking demo:
		var u = new dojox.analytics.Urchin({ 
			acct: "UA-3572741-1", 
			GAonLoad: function(){
				this.trackPageView("");
			}
		});	
	
		$.style("whoNode","opacity", 0);
	
		// see, the page "degrades" ;) . This contributor listing page is only a link to
		// http://dojo.jot.com/ContrbutorListing
		$.query("a[href^=http://dojo.jot]").forEach(function(n){ 
			n.parentNode.innerHTML = n.innerHTML; 
		});
	
		// create a "help" dialog out of the node in the page.
		var dialog = new dojox.widget.Dialog({
			dimensions:[640,420]
		},"dialog");
		dialog.startup();
		
		// setup a way to show it
		$.connect($.byId("helper"), "onclick", dialog, "show");
		
		// set it all off: grab some data from a remote file, and create
		// the interface
		
		$.xhrGet({
			url:userFileName,
			handleAs:"json",
			load:function(data){
				
				var labelNode = $.byId("whoNode");
				var _lastNode = null;
				
				
				profileWidget = new profile.Data({},"profileData");
				
				// create the region where the avatars will live.
				// k: Lewis changed from RadioGroupSlide
				stack = new dojox.layout.RadioGroupFade({
					style:"left: 0px; width:1000px; height:500px",
					// FIXME: when did StackContainer start setting relative explicitly?
					_setupChild: function(/*Widget*/ page){
						$.style(page.domNode,{
							display:"none",
							position:"absolute",
							overflow:"hidden"
						})
						return page; // dijit._Widget
					}
				},"stack");
				
				//alert("start iterate");
		
				// iterate over each of the returned committers, setting up the canvas
				$.forEach(data.committers,function(user, i){
				
					// create an Image in the container, and store the user profile data 
					// in it's instance.
					var im = new image.Skewed({ 
						// use a default square.png if no imgUrl found.
						imgUrl: user.imgUrl || "images/square.png",
						value: user.name
					});
					$.mixin(im,{ _userInfo: user });

					// create a reflection-less scale thumbnail (color) in a div
					var node = $.doc.createElement('div');
					stack.containerNode.appendChild(node);
					// d.lewis - following sets the size of the main image
					 var newWidth = parseInt(document.documentElement.clientWidth /3.0);
					//var newWidth = parseInt(400);
					// node.innerHTML = "<img src='imageReflect.php?spread=0.01&thumbsize="+ newWidth +"&src=" + im.imgUrl + "' />";
					node.innerHTML = "<img src='imageReflect.php?spread=0.01&thumbsize="+ newWidth +"&src=" + im.imgUrl + "' />";
					
					// and make it a child of our RadioGroupSlide
					var avatar = new dijit.layout.ContentPane({
						id: im.id + "avatar",
						slideFrom:"top"
					}, node);
					
					// mix a reference to the child of the stackContianer in the image widget
					$.mixin(im, { _avatar: avatar });

					// store a ref to our "center" image
					if(i === 0){ _lastNode = im; }
					
					// either add this image to the beginning or append to the end. alternate.
					if(i % 2 == 0){
						$.byId("imageContainer").appendChild(im.domNode);
					}else{
						$.place(im.domNode, "imageContainer", "first");
					}
				
				});
				// this will setup all the children we _just_ added
				stack.startup();
									
				// turn the container holding all the image widgets into the interface
				//alert("New image.container");
				var ic = new image.Container({
					// for performance (it's a big list/lot of images)
					offOpacity:0.7, 
					onShow: function(widget){
						// onShow fires _every_ time an image is "centered" visually (no skew)
						// so for UX, we'll defer the "updateProfile()" call until some delay,
						if(timer){ clearTimeout(timer); }
						timer = setTimeout($.partial(updateProfile, widget), _stalltime);
						// but still update one label from our widget data
						labelNode.innerHTML = widget.value + "";
						$.anim("profileArea",{ opacity:0 }, 175); 
					},
					// should be lower, but i want to stage opacity on the edges rather
					// than display:none, so for now this looks better.
					visibleItems: 42,
					// tweak as needed
					spacing:25,
					angle:10
				},"imageContainer");
			
				// find every image in this container, and connect an onload connect to it
				// when each image fires it's onload, the _gotOne function above is alerted
				var _needed = $.query("img", "imageContainer");
				$._neededImages = Number(_needed.length);
				_needed.forEach(function(n,i){
					_connects.push($.connect(n, "onload", $.partial(_gotOne, n)));
					_connects.push($.connect(n, "onerror", $.partial(_oneBroke, n)));
					// if you don't touch the .src attribute _after_ connecting to onload, it 
					// won't fire in weird conditions.
					if($.isIE){ n.src = n.src; }
				});
				
				ic.startup();
				_lastNode.center(); // center the first node (from above creating image widgets)
			
				// resize the image container when the window does, it's fluid 
				$.connect(window, "onresize", ic, "resize");
			
				// make it small, so we can wipe it in
				$.style("imageContainer",{ height:"1px", opacity:0 });
				//alert("Style: imgContainer");
					
			}
		})
	};


	$.declare("profile.Stalker", dijit._Widget, {
		
	});

	$.declare("profile.Data", dijit._Widget, {
		// summary: A simple widget we probably don't even need.
		constructor: function(){
			var $$ = $.byId;
			this.nodeReferences = {
				"location" : $$("proLocation"),
				"website"  : $$("proWebsite"),
				"employer" : $$("proEmployer"),
				"title"    : $$("proRole")
			}
		}, 
		
		setData: function(data){
			var node = this.nodeReferences;
			
			for(var i in node){
				if(i in data){
					$.style(node[i],"display","");
					var txt = (
						i == "website" ? 
							"<a href='" + data[i] + "'>" + data[i] + "</a><br>"   : 
							data[i]
					);
					node[i].innerHTML = txt;
				}else{
					$.style(node[i],"display","none");
				}
			}
			
			// this is really a list of potential aliases, so start clean:
			var nick = "";
			if("handle" in data){
				// add the "handle" attribute
				nick += '"' + data["handle"] + '"';
			}
			if("irc" in data && data["irc"] !== data["handle"]){
				// add the "irc" attribute, if it is different from the "handle" attribute
				nick += ' "' + data["irc"] + '"';
			}
			$.byId("proAliases").innerHTML = nick;
			
			// fade and swipe in the content. 
			// FIXME: weirdness w/ IE7 and no respecting -42 marginLegf
			
			$.anim("profileArea",{ 
				opacity:{ start:0, end: 0.99 }, 
				paddingLeft:{ start:72, end:0 } 
			}, 520, $.fx.easing.bounceOut); 
			
			
		}
	});

	var newp = function(){
		// IE6 branch of this demo
		window.location.href = "http://" + (confirm("Hi IE6 user! Please upgrade to IE8") ? "mozilla.org" : "http://www.microsoft.com/windows/internet-explorer/default.aspx") + "/";
	}

	// setup our branch launch: ;) 
	$.addOnLoad(($.isIE < 7 ? newp : init));

})(dojo);