//==============================================================
//``````````````````````````````````````````````````````````````
// Filename: 	icas_cdi.js
// Author: 		Fred Rubino
// Date: 		December 30, 2011
//
// Required by:
//		- icasmain.js
//		- icas.html
//
// Requires:
//		None
//
// Description:
//   This file contains all functions and variable declarations
//   for the Concept, Delivery, Implementation (CDI) HTML5 
//   canvas element animation on the ICAS website.
//
//   Designed for iPad / iPod compatibility.
//..............................................................
//==============================================================

//==============================================================
// Variables for the ICAS CDI Canvas Element
//==============================================================

var timeElapsed = 0;		// total amount of time elapsed
							// since beginning of animation
							// incremented each frame in
							// animateCDI(). Modulated by
							// LOOP_LENGTH. Used to determine
							// what part of the animation we're
							// in.
							
var LOOP_LENGTH = 25000;	// 25 seconds


//==============================================================
// Some function
//==============================================================
function someCDIFunction(){

	// Doing stuff in here
}


//==============================================================
// Draw the background of the canvas element CDICanvas
// 		- Black background
//      - Grey rectangle on top left with white outline
//==============================================================
function drawCDIBG(){
	var canvas = document.getElementById("CDICanvas");
    var context = canvas.getContext("2d");
	
	// draw background gradient rectangle
	context.beginPath();
	context.rect(0,0,canvas.width,canvas.height);
	context.fillStyle = "#000000";
	context.fill();


	// draw corner rectangle
	context.beginPath();
	context.rect(0,0,19,16);

	// color and border corner rectangle
	context.fillStyle = "#666666";
	context.fill();

	context.closePath();

	// Draw white outline
	context.beginPath();

	context.moveTo(0.5, 0);		// left
	context.lineTo(0.5, 16);

	context.moveTo(0, 15.5);	// bottom
	context.lineTo(19, 15.5);

	context.moveTo(18.5, 16);	// right
	context.lineTo(18.5, 0);	

	context.moveTo(19, 0.5);	// top
	context.lineTo(0, 0.5);

	context.lineWidth = 1;

	context.strokeStyle = "#ffffff";
	context.stroke();
	context.closePath();

	context.restore();
};


//==============================================================
// Setup events to listen for touch events (iPod / iPad) and
// mouse clicks:
//		- Touch: 	Navigate to "ICAS Single Source Solutions"
//==============================================================
function setupCDIEventListeners(){
	var canvas = document.getElementById("CDICanvas");
	
	/*		
		// setup mouseover and mouseout to stop and start motion
		canvas.addEventListener("mouseover", function(){
			// Do something on mouseover
		});

		canvas.addEventListener("mouseout", function(){
			// Do something on mouseout
		});
	*/
	
	/*
	// Detect clicks on links
	canvas.addEventListener("click", function(evt){
		window.location = 
			"http://icascorp.com/ICASsinglesourcesolutions.html";
	});	
	*/

	// Detect exactly one touch on links
	canvas.addEventListener("touchstart", function(evt){
		if(evt.targetTouches.length == 1){
			window.location = 
			"http://icascorp.com/ICASsinglesourcesolutions.html";
		}

	});
	
}

//==============================================================
// Animate the CDI canvas for one frame.
//
// Note: Animate is not called from this function, so the main
//       animate function is responsible for calling itself
//==============================================================
function animateCDI(timeDiff){
	
	// Retrieve the CDI canvas element
	var canvas = document.getElementById("CDICanvas");
	var context = canvas.getContext("2d");
	
	// The speed at which CDI image rotates
	var rotationSpeed = 20;
	
	// Rotation amount per frame
	// Should be some calculation
	var rotationEachFrame = 20; 	
	
	// Increment total time elapsed
	timeElapsed = (timeElapsed + timeDiff) % LOOP_LENGTH;

	// Clear entire CDI canvas and redraw from scratch, 
	// starting with the background
	context.clearRect(0, 0, canvas.width, canvas.height);

	// Draw CDI canvas background
	drawCDIBG();
	
	// Determine where we are in the animation
	if(timeElapsed < 12000){
		// First 12 seconds for "A Legacy", etc. text
		context.font = "13pt Optima";
		context.textAlign = "center";
		context.fillStyle = "#FFFFFF";
		
		// initially set the alpha low
		context.globalAlpha = 1;
		
		// a legacy
		if(timeElapsed < 2000){
			
			if(timeElapsed < 500){
				context.globalAlpha = (timeElapsed - 0) / 500;
			}
			else if (timeElapsed > 1500){
				context.globalAlpha = 
					(2000 - timeElapsed) / 500;
			}
			
			context.fillText("a legacy", 
							 canvas.width / 2, 
							 canvas.height / 2);
		}
		
		// professional leadership
		else if(timeElapsed < 4000){
			
			if(timeElapsed < 2500){
				context.globalAlpha = (timeElapsed - 2000) / 500;
			}
			else if (timeElapsed > 3500){
				context.globalAlpha = 
					(4000 - timeElapsed) / 500;
			}
			
			context.fillText("professional",
						  	 canvas.width / 2 - 15,
						     canvas.height / 2 - 10);

			context.fillText("leadership",
							 canvas.width / 2 + 15,
							 canvas.height / 2 + 10);
		}
		
		// building relationships
		else if(timeElapsed < 6000){

			if(timeElapsed < 4500){
				context.globalAlpha = (timeElapsed - 4000) / 500;
			}
			else if (timeElapsed > 5500){
				context.globalAlpha = 
					(6000 - timeElapsed) / 500;
			}

			context.fillText("building", 
			 				 canvas.width / 2 - 25,
			 				 canvas.height / 2 - 10);
			
			context.fillText("relationships", 
							  canvas.width / 2 + 10,
							  canvas.height / 2 + 10);
		}
		
		// project management
		else if(timeElapsed < 8000){

			if(timeElapsed < 6500){
				context.globalAlpha = (timeElapsed - 6000) / 500;
			}
			else if (timeElapsed > 7500){
				context.globalAlpha = 
					(8000 - timeElapsed) / 500;
			}

			context.fillText("project",
							 canvas.width / 2 + 15,
							 canvas.height / 2 - 10);
							
			context.fillText("management",
							 canvas.width / 2 - 20,
							 canvas.height / 2 + 10);
		}
		
		// networking the world since 1979
		else if(timeElapsed < 10000){

			if(timeElapsed < 8500){
				context.globalAlpha = (timeElapsed - 8000) / 500;
			}
			else if (timeElapsed > 9500){
				context.globalAlpha = 
					(10000 - timeElapsed) / 500;
			}

			context.fillText("networking the world", 
							 canvas.width / 2,
							 canvas.height / 2 - 10);
							
			context.fillText("since 1979", 
							 canvas.width / 2, 
							 canvas.height / 2 + 10);
		}
		
		// single source solutions (10s - 12s)
		else {
			
			if(timeElapsed < 10500){
				context.globalAlpha = (timeElapsed - 10000) / 500;
			}
			else if (timeElapsed > 11500){
				context.globalAlpha = 
					(12000 - timeElapsed) / 500;
			}
			
			context.font = "8.5pt Helvetica";
			context.fillText("SINGLE SOURCE SOLUTIONS",
			  	 			 canvas.width / 2,
							 canvas.height / 2);
		}
		
		// Reset the alpha to 1
		context.globalAlpha = 1;
	}
	
	// Between 12s and 25s (13 s interval)
	// rotate the arrow circle thing
	else if(timeElapsed < 25000){
		// Spinning wheel animation
		var cdiImgObj = new Image();
		cdiImgObj.src = "images/cycleart.png";
		
		// Small, fade in, Concept at top
		// Rotation is Pi / 4
		if(timeElapsed < 13000){
			
			// Move the context reference to the center of the wheel
			// and rotate pi / 4 (45 degrees)
			context.translate(canvas.width / 2, canvas.height / 2);
			context.rotate(Math.PI / 4);
			context.translate(-canvas.width / 2, -canvas.height / 2);

			// Adjust the alpha to go from 0 to 1 between
			// 12s and 13s
			context.globalAlpha = (timeElapsed - 12000) / 1000;
			
			// Draw the thing
			context.drawImage(cdiImgObj, 25, 5, 125, 125);

			// Restore the context alpha
			context.globalAlpha = 1;
			
			// put the context back where it was
			context.translate(canvas.width / 2, canvas.height / 2);
			context.rotate(-Math.PI / 4);
			context.translate(-canvas.width / 2, -canvas.height / 2);
			
			// not sure what this does, if anything
			context.restore();
		}
		
		// Zoom in to Concept
		// Rotation is (1/4)Pi
		else if(timeElapsed < 14000){
			
			// Grow from 125 x 125 to 250 x 250
			// during the period from 13s to 14s
			var size = 125 + 125 * ((timeElapsed - 13000) / 1000);


			// Move the context reference to the center of the wheel
			// and rotate pi / 4 (45 degrees)
			context.translate(canvas.width / 2, 5 + (size / 2));
			context.rotate(Math.PI / 4);
			context.translate(-canvas.width / 2, -(5 + (size / 2)));

			// Draw the thing
			context.drawImage(cdiImgObj, 
							  (175 - size) / 2,
							  5,
							  size,
							  size);
							
			// Restore the context rotation
			context.translate(canvas.width / 2, 5 + (size / 2));
			context.rotate(-Math.PI / 4);
			context.translate(-canvas.width / 2, -(5 + (size / 2)));
			
			// Not sure if this does anything
		 	context.restore();
		}
		
		// Stay Zoomed in to 250 px
		// Stay rotated at (Pi / 4)
		else if(timeElapsed < 15000){

			// Move the context reference to the center of the wheel
			// and rotate pi / 4 (45 degrees)
			context.translate(canvas.width / 2, 5 + (250 / 2));
			context.rotate(Math.PI / 4);
			context.translate(-canvas.width / 2, -(5 + (250 / 2)));

			// Draw the thing
			context.drawImage(cdiImgObj, 
							  (175 - 250) / 2,
							  5,
							  250,
							  250);
							
			// Restore the context rotation
			context.translate(canvas.width / 2, 5 + (250 / 2));
			context.rotate(-Math.PI / 4);
			context.translate(-canvas.width / 2, -(5 + (250 / 2)));

			// Not sure if this does anything
			context.restore();
		}
		
		// Zoom out from 250 x 250 to 125 x 125
		// Rotation stays at (Pi / 4)
		else if(timeElapsed < 16000){
			// Shrink from 250 x 250 to 125 x 125
			// during the period from 15s to 16s
			var size = 250 - 125 * ((timeElapsed - 15000) / 1000);


			// Move the context reference to the center of the wheel
			// and rotate pi / 4 (45 degrees)
			context.translate(canvas.width / 2, 5 + (size / 2));
			context.rotate(Math.PI / 4);
			context.translate(-canvas.width / 2, -(5 + (size / 2)));

			// Draw the thing
			context.drawImage(cdiImgObj, 
							  (175 - size) / 2,
							  5,
							  size,
							  size);
							
			// Restore the context rotation
			context.translate(canvas.width / 2, 5 + (size / 2));
			context.rotate(-Math.PI / 4);
			context.translate(-canvas.width / 2, -(5 + (size / 2)));
			
			context.restore();
		}
		
		// Rotate from (1/4)Pi to -(5/12)Pi
		// (a rotation of -(2/3)Pi)
		// Zoom stays at 125 x 125 px
		else if(timeElapsed < 17000){
			
			// Move the context reference to the center of the wheel
			// and rotate pi / 4 (45 degrees)
			context.translate(canvas.width / 2, canvas.height / 2);
			context.rotate(Math.PI * (3 - ((timeElapsed - 16000) / 1000) * 8) / 12);
			context.translate(-canvas.width / 2, -canvas.height / 2);

			// Draw the thing
			context.drawImage(cdiImgObj, 25, 5, 125, 125);
			
			// Restore context rotation
			context.translate(canvas.width / 2, canvas.height / 2);
			context.rotate(-Math.PI * (3 - ((timeElapsed - 16000) / 1000) * 8) / 12);
			context.translate(-canvas.width / 2, -canvas.height / 2);
			
			// not sure what this does, if anything
			context.restore();
			
		}
		
		// Stay rotated at -(5/12)Pi
		// Zoom from 125 x 125 to 250 x 250
		else if(timeElapsed < 18000){
			// Grow from 125 x 125 to 250 x 250
			// during the period from 17s to 18s
			var size = 125 + 125 * ((timeElapsed - 17000) / 1000);


			// Move the context reference to the center of the wheel
			// and rotate to -(5/12)Pi (to "Implementation")
			context.translate(canvas.width / 2, 5 + (size / 2));
			context.rotate(-Math.PI * (5/12));
			context.translate(-canvas.width / 2, -(5 + (size / 2)));

			// Draw the thing
			context.drawImage(cdiImgObj, 
							  (175 - size) / 2,
							  5,
							  size,
							  size);
							
			// Restore the context rotation
			context.translate(canvas.width / 2, 5 + (size / 2));
			context.rotate(Math.PI * (5/12));
			context.translate(-canvas.width / 2, -(5 + (size / 2)));
			
			// Not sure if this does anything
		 	context.restore();
			
		}
		
		// Stay rotated at (19/12)Pi
		// Same thing as -(5/12)Pi
		// Stay zoomed at 250 x 250
		// Hold 1s
		else if(timeElapsed < 19000){
			// Move the context reference to the center of the wheel
			// and rotate to (19/12)Pi (the same as -(5/12)Pi)
			context.translate(canvas.width / 2, 5 + (250 / 2));
			context.rotate(Math.PI * (19/12));
			context.translate(-canvas.width / 2, -(5 + (250 / 2)));

			// Draw the thing
			context.drawImage(cdiImgObj, 
							  (175 - 250) / 2,
							  5,
							  250,
							  250);
							
			// Restore the context rotation
			context.translate(canvas.width / 2, 5 + (250 / 2));
			context.rotate(-Math.PI * (19/12));
			context.translate(-canvas.width / 2, -(5 + (250 / 2)));

			// Not sure if this does anything
			context.restore();
			
		}
		
		// Zoom out from 250 x 250 to 125 x 125
		// Stay rotated at (19/12)Pi
		else if(timeElapsed < 20000){
			// Shrink from 250 x 250 to 125 x 125
			// during the period from 19s to 20s
			var size = 250 - 125 * ((timeElapsed - 19000) / 1000);


			// Move the context reference to the center of the wheel
			// and rotate pi / 4 (45 degrees)
			context.translate(canvas.width / 2, 5 + (size / 2));
			context.rotate(Math.PI * (19/12));
			context.translate(-canvas.width / 2, -(5 + (size / 2)));

			// Draw the thing
			context.drawImage(cdiImgObj, 
							  (175 - size) / 2,
							  5,
							  size,
							  size);
							
			// Restore the context rotation
			context.translate(canvas.width / 2, 5 + (size / 2));
			context.rotate(-Math.PI * (19/12));
			context.translate(-canvas.width / 2, -(5 + (size / 2)));
			
			context.restore();
			
		}
		
		// Stay zoomed at 125 x 125
		// Rotate from (19/12)Pi to (11/12)Pi
		// (i.e. from Implementation to Delivery)
		else if(timeElapsed < 21000){
			// Move the context reference to the center of the wheel
			// and rotate
			context.translate(canvas.width / 2, canvas.height / 2);
			context.rotate(Math.PI * (19 - ((timeElapsed - 20000) / 1000) * 8) / 12);
			context.translate(-canvas.width / 2, -canvas.height / 2);

			// Draw the thing
			context.drawImage(cdiImgObj, 25, 5, 125, 125);
			
			// Restore context rotation
			context.translate(canvas.width / 2, canvas.height / 2);
			context.rotate(-Math.PI * (19 - ((timeElapsed - 20000) / 1000) * 8) / 12);
			context.translate(-canvas.width / 2, -canvas.height / 2);
			
			// not sure what this does, if anything
			context.restore();
			
		}
		
		// Zoom in from 125 x 125 to 250 x 250
		// Stay rotated at (11/12)Pi (Delivery)
		else if(timeElapsed < 22000){
			// Grow from 125 x 125 to 250 x 250
			// during the period from 17s to 18s
			var size = 125 + 125 * ((timeElapsed - 21000) / 1000);


			// Move the context reference to the center of the wheel
			// and rotate to (11/12)Pi (to "Design")
			context.translate(canvas.width / 2, 5 + (size / 2));
			context.rotate(Math.PI * (11/12));
			context.translate(-canvas.width / 2, -(5 + (size / 2)));

			// Draw the thing
			context.drawImage(cdiImgObj, 
							  (175 - size) / 2,
							  5,
							  size,
							  size);
							
			// Restore the context rotation
			context.translate(canvas.width / 2, 5 + (size / 2));
			context.rotate(-Math.PI * (11/12));
			context.translate(-canvas.width / 2, -(5 + (size / 2)));
			
			// Not sure if this does anything
		 	context.restore();

		}
		
		// Persist 1s zoomed in to Delivery
		else if(timeElapsed < 23000){
			// Move the context reference to the center of the wheel
			// and rotate to (11/12)Pi ("Delivery")
			context.translate(canvas.width / 2, 5 + (250 / 2));
			context.rotate(Math.PI * (11/12));
			context.translate(-canvas.width / 2, -(5 + (250 / 2)));

			// Draw the thing
			context.drawImage(cdiImgObj, 
							  (175 - 250) / 2,
							  5,
							  250,
							  250);
							
			// Restore the context rotation
			context.translate(canvas.width / 2, 5 + (250 / 2));
			context.rotate(-Math.PI * (11/12));
			context.translate(-canvas.width / 2, -(5 + (250 / 2)));

			// Not sure if this does anything
			context.restore();
			
		}
		
		// Zoom out from delivery
		// Rotation at (11/12)Pi
		else if(timeElapsed < 24000){
			// Shrink from 250 x 250 to 125 x 125
			// during the period from 23s to 24s
			var size = 250 - 125 * ((timeElapsed - 23000) / 1000);


			// Move the context reference to the center of the wheel
			// and rotate
			context.translate(canvas.width / 2, 5 + (size / 2));
			context.rotate(Math.PI * (11/12));
			context.translate(-canvas.width / 2, -(5 + (size / 2)));

			// Draw the thing
			context.drawImage(cdiImgObj, 
							  (175 - size) / 2,
							  5,
							  size,
							  size);
							
			// Restore the context rotation
			context.translate(canvas.width / 2, 5 + (size / 2));
			context.rotate(-Math.PI * (11/12));
			context.translate(-canvas.width / 2, -(5 + (size / 2)));
			
			context.restore();
		}
		
		// Fade out, zoomed out, delivery at top
		// Rotation is (11/12)Pi
		else if(timeElapsed < 25000){
			// Move the context reference to the center of the wheel
			// and rotate
			context.translate(canvas.width / 2, canvas.height / 2);
			context.rotate(Math.PI *(11/12));
			context.translate(-canvas.width / 2, -canvas.height / 2);

			// Adjust the alpha to go from 0 to 1 between
			// 12s and 13s
			context.globalAlpha = (25000 - timeElapsed) / 1000;
			
			// Draw the thing
			context.drawImage(cdiImgObj, 25, 5, 125, 125);

			// Restore the context alpha
			context.globalAlpha = 1;
			
			// put the context back where it was
			context.translate(canvas.width / 2, canvas.height / 2);
			context.rotate(-Math.PI * (11/12));
			context.translate(-canvas.width / 2, -canvas.height / 2);
			
			// not sure what this does, if anything
			context.restore();
			
		}
		
	}
	
	else {
		// Should never be here
	}
		
}