
function PPTeaserSequence( canvas, json ) 
{
    this.canvas 	= canvas;
    this.context 	= this.canvas.getContext('2d');
    this.context.globalCompositeOperation = 'lighter';
    this.photos 	= new Array();
    this.numloaded 	= 0;
    this.active 	= false;
    this.data		= json;
    this.defaultImage;

    this.preload();
}

/********************************************************
 *	methods 
********************************************************/
PPTeaserSequence.prototype.reset = function() {
  	//console.log( "reset" );
  	if( this.loop ) clearInterval( this.loop );
    this.context.drawImage( this.defaultImage, 0, 0 );
};



/********************************************************
 *	getter / setter 
********************************************************/



/********************************************************
 *	private 
********************************************************/

PPTeaserSequence.prototype.preload = function() {
   
    this.defaultImage = this.getImage( this.data.image, this.reset );
   	
   	if(this.context == undefined || !this.context ) return;
   	
   	for( var i=0; i<this.data.sequence.length; i++ ){
		this.photos.push( 
			this.getImage( this.data.sequence[i], this.imageLoaded ) 
		);
	}
};

PPTeaserSequence.prototype.getImage = function( src, handler ) {
	
	var im = new Image();
	im.src = src;
	im.onload = Delegate.create( this, handler );
	return im;
	
}

PPTeaserSequence.prototype.animate = function() {
	if(!this.active) return;
  	//console.log( "animate" );
  	if( this.loop ) clearInterval( this.loop );
  	this.loop = setInterval( Delegate.create( this, this.renderRandom ), 25 );
};

PPTeaserSequence.prototype.render = function() {
	var frame = this.photos.shift();
	this.photos.push( frame );
	this.context.drawImage( frame, 0, 0 );

}

PPTeaserSequence.prototype.renderRandom = function() {
	this.context.drawImage( this.photos[ Math.floor( this.photos.length * Math.random() ) ], 0, 0 );
}


PPTeaserSequence.prototype.activate = function() {
  	console.log( "activate" );
  	this.active = true;
};


PPTeaserSequence.prototype.imageLoaded = function() {
	
	if( ++this.numloaded == this.photos.length )
	{ 
		//console.log( "loaded ", this.numloaded , this.photos.length );
		this.activate();
	}
	
	
	
};







