//==============================================================
//``````````````````````````````````````````````````````````````
// Filename: 	icas_ts.js
// Author: 		Fred Rubino
// Date: 		December 16, 2011
//
// Required by:
//		- icasmain.js
//		- icas.html
//
// Requires:
//		None
//
// Description:
//   This file contains all functions and variable declarations
//   for the Technology Solutions HTML5 canvas element
//   animation on the ICAS website.
//
//   Designed for iPad / iPod compatibility.
//..............................................................
//==============================================================

//==============================================================
// Variables for the ICAS Technology Solutions Canvas Element
//==============================================================

var motion = 1;						// 1 = on, 0 = off
var TSListItems = new Array();		// List of offered services with URL

var xOffset = 10;					// Space between text and left wall
var lineHeight = 15;				// Height of a line of text



//==============================================================
// Populate the array of Service List items
//==============================================================
function populateTSListItems(){

	// Get the canvas element TSCanvas
	// (needed to get canvas height for initial
	//  placement of the elements)
	
	var canvas = document.getElementById("TSCanvas");

	TSListItems[0] = {
		x: xOffset,
		y: canvas.height + 3 * lineHeight,
		numLines: 1,
		line1: "Consulting Resources",
		link: "http://icascorp.com/ICASconsultingresources.html"
	}
	
	TSListItems[1] = {
		x: xOffset,
		y: TSListItems[0].y + (TSListItems[0].numLines + 3) * lineHeight,
		numLines: 2,
		line1: "Desktop, Relocations, and",
		line2: "Deployment Services",
		link: "http://icascorp.com/ICASnetworkinfrastructures.html"
	}

	TSListItems[2] = {
		x: xOffset,
		y: TSListItems[1].y + (TSListItems[1].numLines + 3) * lineHeight,
		numLines: 1,
		line1: "Electrical - Commercial",
		link: "http://icascorp.com/ICASnetworkinfrastructures.html"
	}

	TSListItems[3] = {
		x: xOffset,
		y: TSListItems[2].y + (TSListItems[2].numLines + 3) * lineHeight,
		numLines: 2,
		line1: "Network Equipment",
		line2: "Installation",
		link: "http://icascorp.com/ICASnetworkinfrastructures.html"
	}				

	TSListItems[4] = {
		x: xOffset,
		y: TSListItems[3].y + (TSListItems[3].numLines + 3) * lineHeight,
		numLines: 1,
		line1: "Network Infrastructures",
		link: "http://icascorp.com/ICASnetworkinfrastructures.html"
	}

	TSListItems[5] = {
		x: xOffset,
		y: TSListItems[4].y + (TSListItems[4].numLines + 3) * lineHeight,
		numLines: 2,
		line1: "Network Wiring",
		line2: "Infrastructure",
		link: "http://icascorp.com/ICASnetworkinfrastructures.html"
	}

	TSListItems[6] = {
		x: xOffset,
		y: TSListItems[5].y + (TSListItems[5].numLines + 3) * lineHeight,
		numLines: 2,
		line1: "Program Management",
		line2: "Services",
		link: "http://icascorp.com/ICASconsultingresources.html"
	}

	TSListItems[7] = {
		x: xOffset,
		y: TSListItems[6].y + (TSListItems[6].numLines + 3) * lineHeight,
		numLines: 2,
		line1: "National Multi-Site",
		line2: "Rollout Solutions",
		link: "http://icascorp.com/ICASmultisiterollouts.html"
	}

	TSListItems[8] = {
		x: xOffset,
		y: TSListItems[7].y + (TSListItems[7].numLines + 3) * lineHeight,
		numLines: 2,
		line1: "Security, CCTV/DVR, and",
		line2: "Alarm System Integration",
		link: "http://icascorp.com/ICASnetworkinfrastructures.html"
	}

	TSListItems[9] = {
		x: xOffset,
		y: TSListItems[8].y + (TSListItems[8].numLines + 3) * lineHeight,
		numLines: 2,
		line1: "Structured Cabling Design",
		line2: "and Installation Services",
		link: "http://icascorp.com/ICASnetworkinfrastructures.html"
	}

	TSListItems[10] = {
		x: xOffset,
		y: TSListItems[9].y + (TSListItems[9].numLines + 3) * lineHeight,
		numLines: 2,
		line1: "Voice, Data, and Video",
		line2: "Infrastructure Installations",
		link: "http://icascorp.com/ICASnetworkinfrastructures.html"
	}
	
	TSListItems[11] = {
		x: xOffset,
		y: TSListItems[10].y + (TSListItems[10].numLines + 3) * lineHeight,
		numLines: 2,
		line1: "Video and Wireless",
		line2: "Technology Solutions",
		link: "http://icascorp.com/ICASnetworkinfrastructures.html"
	}
};


//==============================================================
// Draw the background of the canvas element TSCanvas
// 		- Blue shaded background (radial gradient)
//		- Black rectangle with white border in corner
//		- "Technology Solutions" banner at top of element
//==============================================================
function drawTSBG(){
	var canvas = document.getElementById("TSCanvas");
    var context = canvas.getContext("2d");
	
	// draw background gradient rectangle
	context.beginPath();
	context.rect(0,0,canvas.width,canvas.height);

	// create gradient
	// (startX, startY, startRadius, endX, endY, endRadius)
	var grd = context.createRadialGradient(
		canvas.width/2, 
		canvas.height/2, 
		18, 
		canvas.width/2, 
		canvas.height/2, 
		canvas.width/2);
	grd.addColorStop(0, "#003192"); // light blue
	grd.addColorStop(1, "#011c53"); // dark blue

	// fill background rectangle with gradient
	context.fillStyle = grd;
	context.fill();


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

	// color and border corner rectangle
	context.fillStyle = "#000000";
	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();


	// write "Technology Solutions" on top
	context.font = "bold 10pt Arial";
	context.textAlign = "center";
	context.fillStyle = "#ffffff";
	
	context.fillText("Technology Solutions", 
		19 + ((canvas.width-19)/2), 
		14
	);

	context.restore();
};


//==============================================================
// Setup events to listen for touch events (iPod / iPad) and
// mouse clicks:
//		- Touch: 	Test if a link was pressed
//==============================================================
function setupTSEventListeners(){
	var canvas = document.getElementById("TSCanvas");
	
	/*		
		// setup mouseover and mouseout to stop and start motion
		canvas.addEventListener("mouseover", function(){
			motion = 0;
		});

		canvas.addEventListener("mouseout", function(){
			motion = 1;
		});
	*/

	/*
		// Detect clicks on links
		canvas.addEventListener("click", function(evt){
			var mouseY = evt.clientY;

			// check to see if user clicked on any of the links
			// Only based on y coordinate
			for(var i = 0; i < TSListItems.length; i++){
				if((TSListItems[i].y <= mouseY) && 
				   ((TSListItems[i].y + TSListItems[i].numLines * lineHeight) >= mouseY))
				window.location = TSListItems[i].link;
			};
		});
	*/		

	// Detect exactly one touch on links
	canvas.addEventListener("touchstart", function(evt){
		if(evt.targetTouches.length == 1){
			
			var touchY = getRelativeYOffset(canvas, evt.targetTouches[0].pageY);

			// check to see if user touched any of the links
			// Only based on y coordinate
			for(var i = 0; i < TSListItems.length; i++){

				if((TSListItems[i].y - lineHeight < touchY) && 
				   ((TSListItems[i].y + TSListItems[i].numLines) > touchY))
				
					// A link was touched -- Navigate to the appropriate URL
					window.location = TSListItems[i].link;
			};
		}

	});
	
}

//==============================================================
// Animate the Technology Solutions canvas for one frame.
//
// Note: Animate is not called from this function, so the main
//       animate function is responsible for calling itself
//==============================================================
function animateTS(timeDiff){
	
	// Retrieve the TS canvas element
	var canvas = document.getElementById("TSCanvas");
	var context = canvas.getContext("2d");
	
	// The speed at which list elements travel upward
	var linearSpeed = 20;		// in pixels per second
	
	// distance = velocity * time
	// Divided by 1000 to convert milliseconds to seconds
	var linearDistEachFrame = linearSpeed * timeDiff / 1000; 	
	
	// For each TS List element, nudge it one frame until it reaches
	// past the top. In that case, relocate it to the end of the list,
	// 3 lines below the last element.
	for(var i = 0; (i < TSListItems.length) & (motion == 1); i++){
		var currentY = TSListItems[i].y;
		
		// if this item has not passed the top edge by 50 px yet
		if (currentY > -(TSListItems[i].numLines * lineHeight)) {
			
			//nudge it to the next y coordinate
			var newY = currentY - linearDistEachFrame;
			TSListItems[i].y = newY;
		} else {
			
			var nextI = (i + TSListItems.length - 1) % TSListItems.length;
			
			// loop the text back to the bottom
			TSListItems[i].y = TSListItems[nextI].y + (3 + TSListItems[nextI].numLines) * lineHeight;
		}
	}
	
	// Clear entire TS canvas and redraw from scratch, 
	// starting with the background
	context.clearRect(0, 0, canvas.width, canvas.height);

	// Draw TS canvas background
	drawTSBG();

	// Set up font in which to print TS list elements
	context.font = "10pt Helvetica";
	context.textAlign = "left";
	
	// Set up a linear gradient which is transparent at the top
	// and bottom edges and white in between. Causes text to
	// appear as if it is fading in and fading out at edges
	var grd = context.createLinearGradient(
			canvas.width / 2,						// start x
			0,										// start y
			canvas.width / 2,						// end x
			canvas.height							// end y
		);
	
	grd.addColorStop(0.12, "transparent"); 		// completely transparent above TS
	grd.addColorStop(0.17, "#ffffff"); 			// white below
	grd.addColorStop(0.95, "#ffffff");
	grd.addColorStop(1, "transparent");		// transparent again at the bottom

	context.fillStyle = grd;

	// Print each text box in its updated location
	for(var i = 0; i < TSListItems.length; i++){
		context.fillText(
			TSListItems[i].line1, 
			TSListItems[i].x, 
			TSListItems[i].y
		);

		// Print a second line if necessary
		if(TSListItems[i].numLines > 1){
			context.fillText(
				TSListItems[i].line2,
				TSListItems[i].x,
				TSListItems[i].y + lineHeight
			);
		};
		
	};
	
}