//TESTING VARIABLES
var currentSlide = 0;
//END OF TESTING VARIABLES

var slides = [
				[
					'images/chemistry.jpg',
					'<span class="h2 highlighted">The Science.</span>',
					'AKALI<span class="reg">&reg;</span> is a cutting edge aquaceutical taking advantage of proprietary technologies and partnerships to be the most advanced functional water in the world.'
				],
				[
					'images/mountRainier.jpg',
					'',
					'<span class="h2" style="font-size: 28px">It starts with a truly special water source...</span>',
					'images/small_seal.png'
				],
				[
					'images/glacier.jpg',
					'',
					'<span class="h2" style="font-size: 28px">It starts with a truly special water source...</span>',
					'images/small_seal.png'
				],
				[
					'images/theSource.jpg',
					'<span class="h2">Increased endurance.</span>',
					'Pure Glacier Water from Mt. Rainier, rich in trace minerals and processed with proprietary technology provides a highly efficient suspension for Alka-Plex Liquid\'s natural alkalizing compounds, allowing them to be absorbed more readily by the body. The result is a super-combination of increased blood-oxygen level and decreased acid build-up as it happens! This can provide an athlete with dramatically improved endurance. ',
					'images/small_seal.png'
				],
				[
					'images/chemistry2.jpg',
					'',
					'<span class="h2" style="font-size: 28px;">with naturally occurring molecular properties.</span>',
					'images/small_seal.png'
				],
				[
					'images/chemistry.jpg',
					'',
					'<span class="h2" style="font-size: 28px;">We then add cutting-edge technology.</span>',
					'images/plexLiquid.png'
				],
				[
					'images/blueGlacier.jpg',
					'',
					"<span class=\"h2\" style=\"font-size: 28px;\">To make the world's most advanced functional water.</span>"
				]
			 ];

var textWindowTransitioning = false, loading = false, bannerTransitioning = false, bannerSliderTimeOut;
var akaliLogo = new Image();
akaliLogo.src = 'images/akaliLogo.png';
var akaliBottle = new Image();
akaliBottle.src = 'images/akali_bottle.png';
var plex = new Image;
plex.src = 'images/plexLiquid.png';
//Variable speeds for animations in 1/1000's of a sec.
var textWindowSlidingSpeed = 500;		//text window sliding in and out speed
var transitionBannersSpeed = 400;		//fade of the banners in and out
var bannerTransitionPause = 800;		//pause between banners (blank banner time)
var bannerDisplayTime = 7000;


for( var x = 0; x < slides.length; x++ ) {
	var img = new Image();
	img.src = slides[x][0];
}

//Onload function
$(document).ready(function() {

	$('#banners').append('<div id="textWindow"><span id="filler"></span><div id="textWindowContent"><div class="textWindowParagraph"><p class="phead" id="phead"></p><p id="pbody"></p></div><img id="txtImg" src="images/akaliLogo.png"></div></div>');
	nextSlide();
});




function transitionBanners() {
	if( bannerTransitioning !== true ) {
		bannerTransitioning = true;
		//making switching decisions based on which slide they are currently viewing. 
		if( currentSlide+1 != 3 && currentSlide+1 != 4 ) {
			hideTextWindow();
			$('#banners').animate({opacity: '0'}, transitionBannersSpeed, function() {
				$('#bannerImg').replaceWith('<img style="position: absolute; z-index: 2;" id="bannerImg" src="'+slides[currentSlide][0]+'">');
				setTimeout(function() {
					$('#banners').animate({opacity: '1'}, transitionBannersSpeed, function() {
						setTimeout(function() { 
							bannerTransitioning = false;
							//if currentSlide+1 == 7 add the bottle then redo slideshow
							if( currentSlide+1 == 7 ) {
								setTimeout(function() {
									$('#banners').append('<img id="bottle" style="position: absolute; display: none; left: 440px; top: 20px; z-index: 4;" src="images/akali_bottle.png">');
									$('#bottle').fadeIn('slow', function() { setTimeout(function() { showTextWindow(); currentSlide++;if( currentSlide > slides.length-1 ) currentSlide = 0;}, 1000)});
								}, 900);
							}
							else {
								showTextWindow();
								currentSlide++;
								if( currentSlide > slides.length-1 )
									currentSlide = 0;
							}
							setTimeout(function() {
								if( $('#bottle') )
									$('#bottle').fadeOut('fast', function() { $(this).remove(); });
								nextSlide();
							}, bannerDisplayTime); }, 100 );
					});
				}, bannerTransitionPause);
			});
		}
		else if( currentSlide+1 == 3 ) {
			$('#banners').append('<img id="bannerImg1" style="position: absolute; z-index: 1;" src="'+slides[currentSlide][0]+'">');
			setTimeout(function() {
			$('#bannerImg').fadeOut('slow', function() {
				$(this).remove();
				currentSlide++;
				bannerTransitioning = false;
				setTimeout(function() {nextSlide()}, bannerDisplayTime);
			});
			}, 800);
		}
		else if( currentSlide+1 == 4 ) {
			$('#banners').append('<img id="bannerImg" style="position: absolute; z-index: 0;" src="'+slides[currentSlide][0]+'">');
			setTimeout(function() {
			$('#bannerImg1').fadeOut('slow', function() {
				$(this).remove();
				currentSlide++;
				bannerTransitioning = false;
				setTimeout(function() {nextSlide()}, bannerDisplayTime);
			});
			}, 800);
		}
	}
	else {
		//troubleshooting only
		//alert('BannerTransition == true or data provided to transitionBanners function was not valid.');
	}
}

function nextSlide() {

	var img = new Image();
	img.src = slides[currentSlide][0];
	
	if( img.complete ) {
		transitionBanners();
	}
	else {
		img.onload = function() { transitionBanners() };
	}
	
}


function showTextWindow() {
	if( textWindowTransitioning !== true ) {
		textWindowtextWindowTransitioning = true;
		//Replace image, if needed
		if( slides[currentSlide][3] ) {
			$('#txtImg').attr('src',slides[currentSlide][3]);
		}
		else {
			$('#txtImg').attr('src','images/akaliLogo.png');
		}
		
		//Replace text
		var pHeader = '<p id="phead" class="phead">'+slides[currentSlide][1]+'</p>';
		var pbody = slides[currentSlide][2];
		if( pbody.length > 420 ) {
			pbody = '<span style="font-size: 11px;">'+pbody+'</span>';
		}
		else if( pbody.length > 181 ) {
			pbody = '<span style="font-size: 12px;">'+pbody+'</span>';
		}
		$('#phead').replaceWith(pHeader);
		$('#pbody').replaceWith('<p id="pbody">'+pbody+'</p>');
		$('#textWindow').animate({left: '0px'}, textWindowSlidingSpeed, function() { textWindowTransitioning = false; } );
	}
	return true;
}

function hideTextWindow() {
	if( textWindowTransitioning !== true ) {
		textWindowTransitioning = true;
		$('#textWindow').animate({left: '-551px'}, textWindowSlidingSpeed, function() { textWindowTransitioning = false; } );
	}
}