var timeoutID = false;
var running = true;
var kTimeout = 4000;
var kDelay = 0.7;
var kDuration = 0.7;
var bye = new Array ("Sayonara", "Goodbye", "Adios", "Au revoir", "Arrivederci", "Aur wiedersehen", "Bye-bye", "Goodbye", "Goodbye", "Goodbye");
var kSBD = 0;
var kZDL = 1;
var kAOLED = 2;
var kCMA = 3;

var tourPages = new Array (	new Array ( "sbd", 4 )
							, new Array ( "zdl", 6 )
							, new Array ( "aoled", 2)
							, new Array ( "cma", 2)
						);
									
var index = 0;
var current = index;

function RandomNumber() {
	var count = bye.length;
	
	return Math.floor(Math.random() * count);
}

function GotoTour(tourID, auto) {

	if (auto) {
		if (running) {
			timeoutID = setTimeout('GotoTour(' + tourID + ', false);', kTimeout);
		}
	} else {

			// Hide the old tour and show the new one
			
		if(tourID != current) {
			var tourToShow = "tour_" + tourPages[tourID][0];
			var tourToHide = "tour_" + tourPages[current][0];
			
			ResetTour(tourID);
			
			new Effect.Fade($(tourToHide), { duration: 1.0, from: 1.0, to: 0.0, queue: { position: 'front', scope: 'tour' } });
			new Effect.Appear($(tourToShow), { duration: 0.5, from: 0.0, to: 1.0, queue: { position: 'end', scope: 'tour' }, afterFinish: function(effect) { StartTour(tourID, false); }} );

			current = tourID;
			
		} else {
			ResetTour(tourID);
			StartTour(current, false);
		}
	}
}

function ResetTour(tourID) {
	switch(tourID) {
		case kSBD:
			$('tour_sbd04').style.display = "none";
			$('tour_sbd03').style.display = "none";
			$('tour_sbd02').style.display = "none";
			$('tour_sbd01').style.display = "block";
			$('tour_sbd_h2').style.left = 0;
			$('tour_sbd_p').style.left = 0;
			break;
		
		case kZDL:
//			$('tour_zdl_p').innerHTML = bye[RandomNumber()] + ' dead pixels!';
//			$('tour_zdl_p').style.display = "none";
			$('tour_zdl06').style.display = "none";
			$('tour_zdl05').style.display = "none";
			$('tour_zdl04').style.display = "none";
			$('tour_zdl03').style.display = "none";
			$('tour_zdl02').style.display = "none";
			$('tour_zdl01').style.display = "block";
			break;
		
		case kAOLED:
			$('tour_aoled_p2').style.display = "none";
			$('tour_aoled02').style.display = "none";
			$('tour_aoled01').style.display = "block";
			break;
		
		case kCMA:
			$('tour_cma01').style.display = "block";
			$('tour_cma02').style.display = "none";
			break;
	
	}
}

function StartTour(tourID) {

		// Hilite the active link
		
	$('lnk_nav_sbd').className = "";
	$('lnk_nav_zdl').className = "";
	$('lnk_nav_aoled').className = "";
	$('lnk_nav_cma').className = "";	
	$('lnk_nav_' + tourPages[tourID][0]).className = "active";
	
	switch (tourID) {
	
	// Steered Beam Display
	
		case kSBD:
			ClearQueue('tour_sbd');
/*
			$('tour_sbd04').style.display = "none";
			$('tour_sbd03').style.display = "none";
			$('tour_sbd02').style.display = "none";
			$('tour_sbd01').style.display = "block";
			$('tour_sbd_h2').style.left = 0;
			$('tour_sbd_p').style.left = 0;
*/			
				// Make the images appear
						
			new Effect.Appear('tour_sbd02', {	duration: 0.7,
												from: 0.0,
												to: 1.0,
												delay: kDelay,
												queue: {position: 'end', scope: 'tour_sbd'}
											});
			
				// Brighten the left screen and move the h2 text
			
			new Effect.Parallel([ new Effect.MoveBy('tour_sbd_h2', 0, 100, { sync: true })
								 ,new Effect.Appear('tour_sbd03', 	{	from: 0.0,
								 										to: 1.0,
								 										sync: true
								 									})
								],
								{	delay: kDelay,
									queue: {position: 'end', scope: 'tour_sbd'},
									afterFinish: function (effect) {
									
				// Brighten the right screen and move the p text
											
										new Effect.Parallel([
																 new Effect.MoveBy('tour_sbd_p', 0, -100, { sync: true })
															 	,new Effect.Appear('tour_sbd04', {	from: 0.0,
																									to: 1.0 ,
																									sync: true
																								})
															],
															{
																delay: kDelay,
																afterFinish: function (effect) { 
																									GotoTour(kZDL, true);
																								}
															});
									
										}
									}
								);
						
			break;
		
	// Zero Defect Layout
			
		case kZDL:
			ClearQueue('tour_zdl');
/*
			$('tour_zdl_p').innerHTML = bye[RandomNumber()] + ' dead pixels!';
			$('tour_zdl06').style.display = "none";
			$('tour_zdl05').style.display = "none";
			$('tour_zdl04').style.display = "none";
			$('tour_zdl03').style.display = "none";
			$('tour_zdl02').style.display = "none";
			$('tour_zdl01').style.display = "block";
*/			
						
				// Baby Image with dead pixels
				
			new Effect.Appear('tour_zdl02', {	duration: 1.0,
												from: 0.0,
												to: 1.0, 
												delay: kDelay,
												queue: {position: 'end', scope: 'tour_zdl'}
											});
				
				// Magnifying Glass
				
			new Effect.Appear('tour_zdl03', {	duration: 1.0,
												from: 0.0,
												to: 1.0,
												delay: kDelay,
												queue: {position: 'end', scope: 'tour_zdl'}
											});
				
				// ZDL Text
	/*					
			new Effect.Appear('tour_zdl_p', {	duration: 1.0,
												from: 0.0,
												to: 1.0, 
												queue: {position: 'end', scope: 'tour_zdl'}
											});
	*/			
				// Gray pixels
				
			new Effect.Appear('tour_zdl04', {	duration: 0.5,
												from: 0.0,
												to: 1.0,
												delay: 0.5,
												queue: {position: 'end', scope: 'tour_zdl'}
											});
				
				// No dead pixels
				
			new Effect.Appear('tour_zdl05', {	duration: 1.0,
												from: 0.0,
												to: 1.0,
												delay: 0.5,
												queue: {position: 'end', scope: 'tour_zdl'}
											});
				
				// Baby image without dead pixels
				
			new Effect.Appear('tour_zdl06', {	duration: 1.0,
												from: 0.0,
												to: 1.0,
												delay: kDelay,
												queue: {position: 'end', scope: 'tour_zdl'},
												afterFinish: function (effect) { 
													GotoTour(kAOLED, true);
												}
											});
			
			break;
		
	// Ageless OLED
		
		case kAOLED:
			ClearQueue('tour_aoled');
/*
			$('tour_aoled_p2').style.display = "none";
			$('tour_aoled02').style.display = "none";
			$('tour_aoled01').style.display = "block";
*/	
			
				// Fade colors over 3 seconds
		
			new Effect.Parallel([	new Effect.Appear('tour_aoled02', {	sync: true,
																		from: 0.0,
																		to: 1.0
																	}
													),
									new Effect.Appear('tour_aoled_p2', {	sync: true,
																			from: 0.0,
																			to: 1.0
																		}
													)
								],
								{ duration: 3.0,
									delay: kDelay,
									queue: {position: 'end', scope: 'tour_aoled'}
								});
		
			new Effect.Parallel([	new Effect.Fade('tour_aoled02', {	sync: true,
																		from: 1.0,
																		to: 0.0
																	}
													),
									new Effect.Fade('tour_aoled_p2', {	sync: true,
																		from: 1.0,
																		to: 0.0
																		}
													)
								],
								{ duration: 2.0,
									delay: kDelay,
									queue: {position: 'end', scope: 'tour_aoled'},
									afterFinish: function (effect) { 
													GotoTour(kCMA, true);
												}
								});

			break;
		
	// Collimating Microlens Array
		
		case kCMA:
			ClearQueue('tour_cma');
/*	
			$('tour_cma01').style.display = "block";
			$('tour_cma02').style.display = "none";
*/

				// Make the collimated microlens array appear
				
			new Effect.Appear('tour_cma02', {	duration: 2.0,
												from: 0.0,
												to: 1.0,
												delay: 1.0,
												queue: {position: 'end', scope: 'tour_cma'},
												afterFinish: function (effect) { 
													GotoTour(kSBD, true);
												}
											});
		
			break;
			
		default: break;
	}
}

function ClearQueue(id) {
	var queue = Effect.Queues.get(id);
	
	queue.each(function(e) { e.cancel() });
	clearTimeout(timeoutID);
}

function TourPreloadImages() {
	tourPages.each(function(item) {
		var id = item[0];
		var count = item[1];
		
		for (i = 2; i <= count; i++) {
			var oImg = document.createElement('img');
			oImg.src = '/i/tour/tour_' + id + '0' + i + '.jpg';
			oImg.style.display = 'none';
			oImg.id = 'tour_' + id + '0' + i
			oImg.alt = id + ' step ' + i;
			
				// If this is the last one, add an onload event to start the tour
			
			if (id == "cma" && count == 2) {
				oImg.onload = function() { StartTour(0, false); };
			}
			
			
			$('lnk_' + id).appendChild(oImg);
		}
	});
}

function TourInit() {

	TourPreloadImages();

	$('lnk_nav_sbd').onclick = function() { running = false; GotoTour(kSBD, false); return false; };
	$('lnk_nav_zdl').onclick = function() { running = false; GotoTour(kZDL, false); return false; };
	$('lnk_nav_aoled').onclick = function() { running = false; GotoTour(kAOLED, false); return false; };
	$('lnk_nav_cma').onclick = function() { running = false; GotoTour(kCMA, false); return false; };
}
Event.observe(window, 'load', TourInit);