3exits

<script type='text/javascript'>
									
	var canvasStack = new Class({
	    
	    settings : {
	        version : 0.2,
	        author	: 'Gareth Ablett',
	        twitter	: '@3exits',
	        url		: '3exits.com'
	    },
	    
	    pCanvas 	: null,
	    pStack 		: [],
	    pLoop		: null,
	    pStackData	: [],
	    x		: null,
	    speed	: 3,
	    
	    initialize : function( options ) {
	    	
	    	this.pCanvas = $( options.canvasId ).getContext( '2d' );
			
			// Create 100 functions that control each ball and put then into the stack to be animated
			
			for ( x=0; x<100; x++ ) {
	    	this.pStack[x] = (function( x ){
	    		
	    		
	    		if ( !this.pStackData[x] ) {
	    			// if new then set some defaults
	    			this.pStackData[x] = {
	    						x : Math.floor(Math.random()*960),
	    						y : Math.floor(Math.random()*200),
	    						size : Math.floor(Math.random()*20) + 5,
	    						yChange : this.speed + Math.floor(Math.random()*3),
	    						xChange	: Math.floor(Math.random()*2)+1,
	    						opacity : Math.random()
	    						
	    			}
	    		} else {
	   				// if no new then move
	    			this.pStackData[x].y = this.pStackData[x].y + this.pStackData[x].yChange;
	    			this.pStackData[x].x = this.pStackData[x].x + this.pStackData[x].xChange;
	    			// if at the edge then move
	    			if ( this.pStackData[x].x > (960 + this.pStackData[x].size ) ) {
	    				this.pStackData[x].x = (1 - this.pStackData[x].size);
	    			}
	    			if ( this.pStackData[x].y > (200 + this.pStackData[x].size ) ) {
	    				this.pStackData[x].y = (1 - this.pStackData[x].size);
	    			}
	    		}

	    		this.pCanvas.beginPath();
	    		// Set the Colour to white using a random opacity;
	    		this.pCanvas.fillStyle = 'rgba(120,128,136,'+this.pStackData[x].opacity+')';
	    		// Draw the arc (circle) in x,y pos and size
	    		this.pCanvas.arc(
	    					this.pStackData[x].x,
	    					this.pStackData[x].y,
	    					this.pStackData[x].size,
	    					0,
	    					Math.PI*2,
	    					true
	    					);
	    		this.pCanvas.fill();
	    		
	    	}.bind( this )).bind( this );
	    	}
	    				 
	    	
	    	this.pLoop = this.runStack.periodical(33, this);
	    },
	    runStack : function() {
	    
	    	// clear the display
	    	this.pCanvas.clearRect(0,0,960,200);
	    	
	    	// loop thought the stack of functions (animations) an run each one parsing the index
	    	
	    	this.pStack.each( function( item, index ){
	    		item( index );
	    	}.bind( this ));
	    	
	    	
	    }
	});
	window.addEvent('domready', function() {

		var cStack = new canvasStack({
							canvasId 	:	'cv-header',
							height		:	200,
							width		:	960
		});

	});
	
</script>