ade.ready(function() {
	
	var t = setInterval(function() {
			
		var x = (Math.random() * 800) - 200;
		var y = Math.random() * 600;
		
		var d = document.createElement("div");
		
		ade(d).css({ left: x+'px', top: y+'px' }).addClass("flower");			
		ade("#frame").append(d);
		

		// we need to map THIS or some pointer to the node list that's being acted on...
		ade("#frame .flower:last-child").animate({left: 900, width: 300, height: Math.random()*300, opacity: 0}, 2000, ade.easing.easeIn, function() {
			ade("#frame .flower:first-child").remove();
		});			
			
		}, 50);
		
		
		ade('#sensor')
			.bind('mousemove', function(e) {

				var x = e.layerX;
				var y = e.layerY;

				if (e.target == this) {

					var d = document.createElement("div");

					ade(d).css({ left: x+'px', top: y+'px' }).addClass("spawn");			
					ade("#frame").append(d);


					// we need to map THIS or some pointer to the node list that's being acted on...
					ade("#frame .spawn:last-child").animate({width: 300, height: Math.random()*300, opacity: 0}, 4000, ade.easing.easeIn, function() {
						ade("#frame .spawn:first-child").remove();
					});

					// but how come THIS isn't working?
					//ade(d).animate({ width: 1, height: 1 }, 300, ade.easing.easeOutSine, function() {		
					//	console.debug("remove")
					//});
				}

			})	
	
});