// This script controls the animation on the homepage. There are two versions - one for Internet Explorer, and one for all other
// browsers. The Non-IE version actually fades the text in and out. The IE version does not touch the text, but rather fades out
// a veil in front of the text. This is because IE's "ClearType" font renderer has anti-aliasing issues when the transparency of
// text is changed.


// Add elements to this array that you want to appear as part of the animation
var whatWeDo = 	['Enterprise Architecture',
				'Service Oriented Architecture',
				'Systems Development Life Cycle',
				'Systems Integration',
				'Business Intelligence',
				'Requirements'];

$(function() {
	animation();
});

function animation() {
	setTimeout(function () {
		$('#people')
			.fadeIn(2000);

		// This array controls the header text that appears once and then remains. Each letter must have its own slot.
		// If you change this at all, be sure to change the conditions on the following for loop as well.
		var whatAboutArray = ['W','h','a','t',' ','a','r','e',' ','y','o','u',' ','d','o','i','n','g',' ','a','b','o','u','t','.','.','.'];
		setTimeout(function () {
			for(var i=0;i<27;i++) {
				$('<span>')
					.html(whatAboutArray[i])
					.css("display","none")
					.appendTo('#whatAbout')
					.fadeIn(i*200)
			}
		}, 2750);
		setTimeout(function () {
			if(jQuery.browser.msie && jQuery.browser.version < 9) {
				setTimeout(function() {
					$('#IECoverUp')
						.css({
							width:'440px',
							height:'24px',
							background:'url("../images/jquery/ie_cover.gif")',
							position:'absolute',
							top:'47px'
						})
						.html('&nbsp;');
					$('#textBlock').show();
					showTextIE(0);
				}, 1000);
			} else {
				setTimeout("showText(0);", 1000);
			}
		}, 4500);
	}, 2000);
}

function showText(j) {
	setTimeout(function () {
		$('#textBlock')
			.css("top", "46px")
			.css("left", "15px")
			.html(whatWeDo[j])
			.fadeIn(500);
		$('#textBlock2')
			.html(whatWeDo[j])
			.fadeIn(1500);		// Use ~2000 fadeIn and ~1500 fadeOut for a 'flash' effect, or ~2500 and ~2000 for an 'afterglow'
		$('#textBlock2')
			.fadeOut(1500);
	}, 1500);

	setTimeout(function () {
		$('#textBlock')
			.fadeOut(750);
	}, 5000);
	
	setTimeout(function() {
		j = (j == 5) ? 0 : j+1;
		showText(j);
	}, 5500);
}

function showTextIE(j) {
	setTimeout(function () {
		$('#textBlock')
			.css("top", "46px")
			.css("left", "15px")
			.html(whatWeDo[j])
		$('#IECoverUp')
			.fadeOut(500);

	}, 1500);
	setTimeout(function () {
		setTimeout(function () {
			$('#IECoverUp')
				.fadeIn(500);
		}, 1500);
	}, 5000);
	setTimeout(function() {
		j = (j == 5) ? 0 : j+1;
		showTextIE(j);
	}, 5500);
}