window.requestAnimFrame = (function(callback){
		return window.requestAnimationFrame ||
		window.webkitRequestAnimationFrame ||
		window.mozRequestAnimationFrame ||
		window.oRequestAnimationFrame ||
		window.msRequestAnimationFrame ||
		function(callback){
			window.setTimeout(callback, 1000 / 60);
		};
})();


	function getRelativeYOffset(canvas, pageY){
	    // get canvas position
	    var obj = canvas;
	    var top = 0;
	    var left = 0;
	    while (obj.tagName != 'BODY') {
	        top += obj.offsetTop;
	        left += obj.offsetLeft;
	        obj = obj.offsetParent;
	    }

	    // return relative Y coordinate of the touch event
	    var touchY = pageY - top;
	    
		return touchY;
	}


	function animate(lastTime){

		var date = new Date();			// Get the time difference
		var time = date.getTime();		// in ms
		var timeDiff = time - lastTime; //

		// Animate one frame of the Technology Solutions canvas
		animateTS(timeDiff);

		// Animate one frame of the CDI canvas
		animateCDI(timeDiff);
		
		// Update the time
		lastTime = time;

		// Request new frame
		requestAnimFrame(function(){
			animate(lastTime);
		});

	}

    function initHTML5Animation() {
    	// Prepare the divs on the html page
    	prepareHTML5Divs();

		// Initialize the array of TS List Items				
		populateTSListItems();

        // Initialize stage for TS and CDI canvases
		drawTSBG();
		drawCDIBG();
		
		// Setup mouse and touch events on TSCanvas
		setupTSEventListeners();
		setupCDIEventListeners();
		
		// initialize date and time
		var date = new Date();
		var time = date.getTime();
		
		// start animation
		animate(time);
		
    }

function initFlashAnimation() {
	prepareFlashDivs();
}

function initAnimation() {

	var isiPad = navigator.userAgent.match(/iPad/i) != null;
	var isiPod = navigator.userAgent.match(/iPod/i) != null;
	var isiPhone = navigator.userAgent.match(/iPhone/i) != null;

	if(!isiPad && !isiPod && !isiPhone)
		initFlashAnimation();
	else
		initHTML5Animation();
}

function prepareHTML5Divs() {
	var globeInnerHTML = '<img src="images/icas_globe_imagemap.jpg" width="727" height="272" border="0" usemap="#globemap" />' +
		'<map name="globemap">' +
		'	<area shape="rect" coords="270,160,326,183" href="ICASmarkets.html" alt="Finance" />' + 
		'	<area shape="rect" coords="360,160,455,183" href="ICASmarkets_government.html" alt="Government" />' + 
		'	<area shape="rect" coords="490,160,577,183" href="ICASmarkets_healthcare.html" alt="Health Care" />' + 
		'	<area shape="rect" coords="615,160,695,183" href="ICASmarkets_education.html" alt="Education" />' + 
		'	<area shape="rect" coords="310,184,390,210" href="ICASmarkets_hospitality.html" alt="Hospitality" />' + 
		'	<area shape="rect" coords="436,184,500,210" href="ICASmarkets_energy.html" alt="Energy" />' + 
		'	<area shape="rect" coords="565,184,620,210" href="ICASmarkets_retail.html" alt="Retail" />' + 
		'</map>';
	var TSInnerHTML = '<canvas id="TSCanvas" width="175" height="135"> </canvas>';
	var CDIInnerHTML = '<canvas id="CDICanvas" width="175" height="135"></canvas>';

	document.getElementById('globeAnim').innerHTML = globeInnerHTML;
	document.getElementById('tsAnim').innerHTML = TSInnerHTML;
	document.getElementById('cdiAnim').innerHTML = CDIInnerHTML;
}

function prepareFlashDivs() {
	var globeInnerHTML = '<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="727" height="272">' +
         '<param name="movie" value="images/globe.swf" />' +
         '<param name="quality" value="high" />' +
         '<param name="wmode" value="opaque" />' +
         '<param name="swfversion" value="6.0.65.0" />' +
         '<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->' +
         '<param name="expressinstall" value="Scripts/expressInstall.swf" />' +
         '<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->' +
         '<!--[if !IE]>-->' +
         '<object type="application/x-shockwave-flash" data="images/globe.swf" width="727" height="272">' +
           '<!--<![endif]-->' +
           '<param name="quality" value="high" />' +
           '<param name="wmode" value="opaque" />' +
           '<param name="swfversion" value="6.0.65.0" />' +
           '<param name="expressinstall" value="Scripts/expressInstall.swf" />' +
           '<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->' +
           '<div>' +
             '<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>' +
             '<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>' +
           '</div>' +
           '<!--[if !IE]>-->' +
         '</object>' +
         '<!--<![endif]-->' +
       '</object>';
	var TSInnerHTML = '<object id="FlashID3" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="175" height="135">' +
       '<param name="movie" value="images/services03.swf" />' +
       '<param name="quality" value="high" />' +
       '<param name="wmode" value="opaque" />' +
       '<param name="swfversion" value="6.0.65.0" />' +
       '<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->' +
       '<param name="expressinstall" value="Scripts/expressInstall.swf" />' +
       '<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->' +
       '<!--[if !IE]>-->' +
       '<object type="application/x-shockwave-flash" data="images/services03.swf" width="175" height="135">' +
         '<!--<![endif]-->' +
         '<param name="quality" value="high" />' +
         '<param name="wmode" value="opaque" />' +
         '<param name="swfversion" value="6.0.65.0" />' +
         '<param name="expressinstall" value="Scripts/expressInstall.swf" />' +
         '<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->' +
         '<div>' +
           '<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>' +
           '<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>' +
         '</div>' +
         '<!--[if !IE]>-->' +
       '</object>' +
       '<!--<![endif]-->' +
     '</object>';
	var CDIInnerHTML = '<object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="175" height="135">' +
       '<param name="movie" value="images/alegacy02.swf" />' +
       '<param name="quality" value="high" />' +
       '<param name="wmode" value="opaque" />' +
       '<param name="swfversion" value="6.0.65.0" />' +
       '<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->' +
       '<param name="expressinstall" value="Scripts/expressInstall.swf" />' +
       '<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->' +
       '<!--[if !IE]>-->' +
       '<object type="application/x-shockwave-flash" data="images/alegacy02.swf" width="175" height="135">' +
         '<!--<![endif]-->' +
         '<param name="quality" value="high" />' +
         '<param name="wmode" value="opaque" />' +
         '<param name="swfversion" value="6.0.65.0" />' +
         '<param name="expressinstall" value="Scripts/expressInstall.swf" />' +
         '<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->' +
         '<div>' +
           '<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>' +
           '<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>' +
         '</div>' +
         '<!--[if !IE]>-->' +
       '</object>' +
       '<!--<![endif]-->' +
     '</object>';

	document.getElementById('globeAnim').innerHTML = globeInnerHTML;
	document.getElementById('tsAnim').innerHTML = TSInnerHTML;
	document.getElementById('cdiAnim').innerHTML = CDIInnerHTML;
}