ImageLoader = {
	
	loaded:[],
	
	preload:function( images, callback ) {
		
		jQuery.each( images, function( index, value ) {
			var img = new Image();
			img.onload = function() {
				ImageLoader.loaded[index] = this;
				ImageLoader.loaded[value] = this;
				$('body').trigger( 'ImageLoader:imageLoaded', [index, value, this] );
				if( index == images.length - 1 ) {
					$('body').trigger( 'ImageLoader:finished', [images] );
					if( jQuery.isFunction( callback ) ) {
						callback( ImageLoader.loaded );
					}
				}
			}
			img.src = value;
		} );
		
	}
	
}


$(document).ready( function() {

	$('body').click( function( ev ) {
		Animator.stop();
		$('#canvas').hide();
	} );

	if( !!document.createElement('canvas').getContext ) {	
		var imgs = $.merge( [ '/images/headergraphic.jpg', '/images/overlay.png', '/images/omegalogo.png', '/images/omegalogo_white.png' ], Animator.drawings );
	
		ImageLoader.preload( imgs, function( images ) {
			var ctx = $('#canvas')[0].getContext('2d');
			if( ctx ) {
				Animator.go( ctx );
			}
		} ); 
	}
	
} );

function Entity( options ) {
	this.x = 0;
	this.y = ( Math.random() * 20 ) + 200;
	this.age = 0;
	this.setAngle( (Math.random() * 30) + ((180 - 30)/2) ); 
	this.width = (Math.random() * 6 ) + 1;
	this.velocity = (Math.random() * 10) + 5;
	this.color = 'white';
	jQuery.extend( this, options );
	this.origin = {x:this.x,y:this.y};
}

Entity.prototype.draw = function( ctx ) {
	Animator.drawArrow( ctx, this.origin.x, this.origin.y, this.x, this.y, this.width, this.color );
}

Entity.prototype.step = function() {
	if( this.dead ) {
		return;
	}
	this.age++;
	this.velocity *= .99;
	this.x += this.sin * this.velocity;
	this.y += this.cos * this.velocity;
	if( this.velocity < .2 ) {
		this.dead = true;
	}
}

Entity.prototype.setAngle = function( degrees ) {
	this.angle = degrees;
	
	this.radians = this.angle *  0.0174532925;
	
	// compute this once when the angle changes.
	this.sin = Math.sin( this.radians );
	this.cos = Math.cos( this.radians );

}

var Animator = {

	drawings:["..\/images\/tech_drawings\/ED0212-A_STD_RECLINER_FRAME_HORIZ_TOP_VIEW.gif","..\/images\/tech_drawings\/HEADREST_POPUP_INSTALL_300_ZW.gif","..\/images\/tech_drawings\/HEADREST_ART_INSTALL_300_ZW.gif","..\/images\/tech_drawings\/ED0247-B_CLUB_GLIDER_ASSY_INSTAL.gif","..\/images\/tech_drawings\/HEADREST_POPUP_INSTALL_3630_HL.gif","..\/images\/tech_drawings\/ED0213-C_STD_RECLINER_FRAME_VERT_SIDE_VIEW.gif","..\/images\/tech_drawings\/ED0215-C_STD_RECLINER_FRAME_VERT_TOP_VIEW.gif","..\/images\/tech_drawings\/HEADREST_ART_INSTALL_4360EZ_ZW.gif","..\/images\/tech_drawings\/ED0211-C_STD_RECLINER_FRAME_HORIZ_FRONT_VIEW.gif","..\/images\/tech_drawings\/G30_F_I_INST.gif","..\/images\/tech_drawings\/HEADREST_POPUP_INSTALL_4360EZ_ZW.gif","..\/images\/tech_drawings\/ED0248-A_CLUB_GLIDER_ASSY_SWIV_INSTAL.gif","..\/images\/tech_drawings\/HEADREST_ART_INSTALL_3630_HL.gif","..\/images\/tech_drawings\/ED0210-B_STD_RECLINER_FRAME_HORIZ_SIDE_VIEW.gif","..\/images\/tech_drawings\/ED0214-C_STD_RECLINER_FRAME_VERT_FRONT_VIEW.gif","..\/images\/tech_drawings\/3630_ZWaHL_F_I.gif"],
	images:[],
	intervalId: -1,
	ctx: null,
	width:800,
	height:425,
	curImage:0,
	x:0,

	nextImage:function() {
		Animator.curImage = ( Animator.curImage + 1 ) % Animator.images.length;
	},
	
	init:function( ctx ) {
		Animator.ctx = ctx;
		var gradient = ctx.createLinearGradient(0,0,Animator.width,0); // x1, y1, x2, y2
		gradient.addColorStop( 0, 'black' );
		gradient.addColorStop( .25, '#00447D' );
		gradient.addColorStop( .5, '#1F6FB2' );
		gradient.addColorStop( .75, '#00447D' );
		gradient.addColorStop( 1, 'black' );
		Animator.bgGradient = gradient;
		Animator.bgOverlay = ImageLoader.loaded['/images/overlay.png'];
		
		Animator.entities = [];
		for( var i = 0; i < 10; i++ ) {
			Animator.entities.push( new Entity({color:'#00447D'}) ); 
		}
		for( var i = 0; i < 15; i++ ) {
			Animator.entities.push( new Entity({x:0, y:Math.random() * 30 + 200, color:'white'}) ); 
		}

		
	},

	go:function( ctx ) {
		Animator.init( ctx );
		Animator.width = $('#canvas')[0].width;
		Animator.height = $('#canvas')[0].height;
		for( var i = 0; i < Animator.drawings.length; i++ ) {
			Animator.images[ i ] = $( '<img src="' + Animator.drawings[i] + '"/>' )[0];
		}
		ctx.fillStyle = "#666";				
		Animator.intervalId = setInterval( Animator.stepFrame, 20 );
		Animator.background();
		ctx.drawImage( Animator.bgOverlay, 0, 0 );								
	},
	
	stop:function() {
		if( Animator.intervalId > -1 ) {
			clearInterval( Animator.intervalId );
			Animator.intervalId = -1;
		}
		$('#canvas').fadeOut();
	},
	
	background:function() {
		var ctx = Animator.ctx;
		ctx.save();
		ctx.fillStyle = Animator.bgGradient;
		ctx.fillRect( 0, 0, Animator.width, Animator.height );
		ctx.restore();
	},
	
	drawArrow:function( ctx, x1, y1, x2, y2, width, color ) {
		
		// draw the line
		ctx = (ctx == null) ? Animator.ctx : ctx;
		ctx.save();
		ctx.strokeStyle = color;
		ctx.lineWidth = width;
		ctx.beginPath();
		ctx.moveTo( x1, y1 );
		ctx.lineTo( x2, y2 );
		ctx.stroke();
		ctx.restore();

		// compute the angle of the line
		var a = x2 - x1;
		var b = y2 - y1;
		var radians = Math.atan( b/a );
		
		// draw arrowhead
		Animator.arrowhead( {
			ctx:ctx,
			radians:radians,
			x:x2|0, // ORing it with 0 drops the fractional portion.
			y:y2|0,
			size:width,
			color:color
		} );
		
		
	},
	
	// options: x, y, radians, size, color
	arrowhead:function( options ) {
		var ctx = options.ctx ? options.ctx : Animator.ctx;
		
		ctx.save();
		ctx.translate( options.x|0, options.y|0 );
		ctx.rotate( options.radians );
		ctx.beginPath();
		ctx.moveTo( 0, 0 );
		ctx.lineTo( 0, -(options.size) );
		ctx.lineTo( options.size * 2, 0 );
		ctx.lineTo( 0, options.size );
		ctx.closePath();
		ctx.fillStyle = options.color;
		ctx.strokeStyle = options.color;
		ctx.lineWidth = 1;
		ctx.fill();
//				ctx.stroke();
		ctx.restore();
	},
	
	
	stepFrame:function() {
		var ctx = Animator.ctx;
		Animator.x -= 4;
		Animator.background();
		/*
		ctx.save();
		ctx.rotate( 12/57.296 ); 
		ctx.globalAlpha = .4;
		ctx.drawImage( ImageLoader.loaded[1], 0, 0 );				
		ctx.restore();
		*/
		var tempCanvas = $('#tempCanvas')[0];
		var tempCtx = tempCanvas.getContext('2d');
		tempCtx.save();
		tempCtx.clearRect( 0, 0, 800, 425 );				
		tempCtx.translate( Animator.x, 0 );
		jQuery.each( Animator.entities, function( index, value ) {
			value.step();
			value.draw( tempCtx );
		} );
		tempCtx.restore();
		

		ctx.save();
		ctx.shadowOffsetY = 25;
		ctx.shadowOffsetX = -13;
		ctx.shadowBlur = 4;
		ctx.shadowColor = 'rgba( 0, 0, 0, .5 )';
		ctx.drawImage( tempCanvas, 0, 0 );
		ctx.restore();
		ctx.save();
//				ctx.translate( Animator.x, 0 );
		ctx.globalAlpha = -Animator.x/1550;
		if( -Animator.x/1550 > 1 ) {
			Animator.stop();
		}
		
		ctx.drawImage( ImageLoader.loaded['/images/omegalogo_white.png'], (Animator.width/2) - (ImageLoader.loaded['/images/omegalogo_white.png'].width/2) , 50 );				
		Animator.drawText( Animator.ctx );


//		ctx.drawImage( ImageLoader.loaded[ Animator.curImage ], 0, 0 );
		ctx.drawImage( ImageLoader.loaded['/images/headergraphic.jpg'], 0, 0 );

		ctx.restore();
						
		ctx.drawImage( Animator.bgOverlay, 0, 0 );								
		if( Math.abs( Animator.x ) > 1950 ) {
			Animator.stop();
		}
	},
	
	drawText:function( ctx ) {
		if( ! jQuery.isFunction( ctx.fillText ) ) {
			return;
		}
		if( ! Animator.tagLine  ) {
			Animator.tagLine = $('#tagLine').text();
		}
//		var metrics = ctx.measureText( Animator.tagLine );
		ctx.font = "bold 40px Helvetica";
		ctx.fillStyle = "white";
		ctx.textAlign = 'center';
		ctx.fillText( Animator.tagLine, Animator.width/2, 260 );
	}
	
}