/* Copyright 2009 Palm, Inc.  All rights reserved. */

var AnimationAssistant = Class.create({	
	initialize: function() {
		this.step = 0;
		this.nextScene = ""; 
		this.currentScene = false; 
		this.movieFrames = [];
		this.movieSpeed = 1;
	},
	
	setup: function(){},	
	
	activate: function() {
		$('tutorialframe').className = "";
		if(this.movieFrames.length > 0){
			$('tutorialframe').addClassName(this.movieFrames[this.step].className);
			this.advanceMovieWrapped();
		}
  },
	
	done: function() {
		Mojo.Log.info("Pop scene " + this.currentScene + ". Push scene " + this.nextScene);
		if (this.nextScene) {
			Mojo.Controller.stageController.popScene();
			Mojo.Controller.stageController.pushScene(this.nextScene);
		}	
	},
	
	handleCommand : function(event) {
		if (event.type == Mojo.Event.back) {
			event.stop();
      		event.preventDefault();
      		event.stopPropagation();
		}
	},
	
	nextFrame: function(){
		$('tutorialframe').className = "";

		this.step = Math.min(this.step+1, this.movieFrames.length-1);
		$('tutorialframe').addClassName(this.movieFrames[this.step].className);

		// $("framename").innerText = $("tutorialframe").className;
	},
	
	skipToFrame: function(newFrame) {
		$('tutorialframe').className = "";

		this.step = (newFrame) % this.movieFrames.length;
		$('tutorialframe').addClassName(this.movieFrames[this.step].className);
		this.advanceMovieWrapped();
	},
	
	advanceMovie: function(){
		this.nextFrame();
		this.advanceMovieWrapped();
	},
	
	advanceMovieWrapped: function() {
		// animate if an animate func is defined
		if(this.movieFrames[this.step].animate){
			this.movieFrames[this.step].animate.delay(this.movieFrames[this.step].animationDelay ? this.movieFrames[this.step].animationDelay : 0);
		}

		if(this.step >= this.movieFrames.length -1){ 
			this.done();
		} else if(this.movieFrames[this.step].frameLength){
			this.advanceMovie.bind(this).delay(this.movieFrames[this.step].frameLength/this.movieSpeed);
		} else {
			
		}
	}
});

var FrameAnimationWidget = Class.create({
	initialize: function(imageElementId, frames, repeatTimes, controller, useDiv) {
		this.currentFrame = 0;
		this.frames = frames;
		this.animationStopped = false;
		this.imageElement = $(imageElementId);
		this.repeatTimes = repeatTimes;		// -1 if this animation should loop
		this.queue = Mojo.Animation.queueForElement(controller.sceneElement);
		this.currentLoop = 0;
		this.useDiv = (useDiv ? true : false);
	},
	
	reset: function() {
		this.animationStopped = false;
		this.currentFrame = 0;
		this.currentLoop = 0;
	},
	
	animate: function(){
		//Mojo.Log.info("AnimationWidget: animate " + this.currentFrame);
  	if (!this.animationStopped) {
			if (this.repeatTimes == -1 || this.currentFrame < this.frames.length) {
				var imageFileName = this.frames[this.currentFrame];
				if(this.useDiv) {
					this.imageElement.className = imageFileName;
				} else {
					this.imageElement.src = imageFileName;
				}
				if (this.repeatTimes == -1) 
					this.currentFrame = (this.currentFrame+1) % this.frames.length;
				else if (this.repeatTimes > 1 && this.currentFrame < this.frames.length) {
					var nextFrame = this.currentFrame+1;
					if (nextFrame >= this.frames.length) {
						this.currentLoop++;
						if (this.currentLoop >= this.repeatTimes) {
							// Stop the animation
							this.stop();
						}
					}
					this.currentFrame = nextFrame % this.frames.length;
				} else
					this.currentFrame++;
			}
			else {
				// If the animation doesn't loop stop the animation now
				this.stop();
			}
		}
	},
	
	play: function() {
		this.queue.add(this);
	},
	
	stop: function() {
		this.animationStopped = true;
		this.queue.remove(this);
		this.ended();
	},
	
	ended: function() {
	}
});

var BackTutorialMainAssistant = Class.create(AnimationAssistant, {
	setup : function(){
		//$("next_button").observe(Mojo.Event.tap, this.doneHandler);
		
		
		// Only enable the emergency phone icon if demo mode is not running				
		if (isDemoMode) {		
			FirstUseUtil.addDashboardOdd($('notificationBar'));
		} else {
			FirstUseUtil.addDashboardSmall($('notificationBar'));
		} 
		var dashboard = this.controller.get('targetBanner') ? this.controller.get('targetBanner'):this.controller.get('target');
		if(!dashboard) {
			dashboard = this.controller.get('notificationBar');
		}
		dashboard.addEventListener(Mojo.Event.tap, FirstUseUtil.tapHandler.bindAsEventListener(this, isDemoMode));
		
		
		// Listen to ## key presses
		this.controller.listen(this.controller.sceneElement, Mojo.Event.keydown, FirstUseUtil.handleKeyPressEvent.bind(this));
		
		saveCurrentState("back-tutorial-main");
		
		var that = this;
		
		that.betweenTransitions = function(){}
		that.nextButtonTapped = function() {
			var transition;
			that.stopAnimations();
			transition = that.controller.prepareTransition(Mojo.Transition.crossFade, false);
			that.advanceMovie();
			that.betweenTransitions();
			transition.run(that.endNextButtonTapped);
		};
		that.endNextButtonTapped = function(){};
		$("next_button").observe(Mojo.Event.tap, that.nextButtonTapped);
		
		that.photoTappable = false;
		that.tapPhoto = function(){
			if(that.photoTappable){
				var transition = that.controller.prepareTransition(Mojo.Transition.zoomFade, false);
				that.advanceMovie();
				that.betweenTransitions();
				transition.run();
			}
		};
		
		that.stopAnimations = function(){};
		
		// Gesture Area Animation (small)
		var gestureAreaSmallFrames = ["images/tutorial/gesture_glow_glow_small/gesture_glow_small_00215.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00216.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00217.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00218.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00219.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00220.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00221.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00222.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00223.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00224.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00225.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00226.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00227.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00228.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00229.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00230.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00231.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00232.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00233.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00234.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00235.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00236.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00237.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00238.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00239.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00240.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00241.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00242.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00243.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00244.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00245.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00246.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00247.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00248.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00249.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00250.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00251.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00252.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00253.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00254.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00255.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00256.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00257.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00258.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00259.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00260.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00261.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00262.png",
																	"images/tutorial/gesture_area_glow_small/gesture_glow_small_00263.png"];
		
		that.gestureAreaSmallAnimation = new FrameAnimationWidget('gesture_area_small_image', gestureAreaSmallFrames, 2 /*repeatTimes*/, that.controller);
		
		that.playGestureAreaSmallAnimation = function() {
			Mojo.Log.info("playGestureAreaSmallAnimation");
			$('gesture_area_small_div').setStyle("display:block");
			that.gestureAreaSmallAnimation.reset();
			that.gestureAreaSmallAnimation.play();
		};
		
		
		that.gestureArrowsAnimationFrames = [
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			         
			"arrows-2",
			"arrows-2",
			"arrows-2",
			"arrows-2",
			"arrows-2",
			"arrows-2",
			"arrows-2",
			"arrows-2",
			         
			"arrows-3",
			"arrows-3",
			"arrows-3",
			"arrows-3",
			"arrows-3",
			"arrows-3",
			"arrows-3",
			"arrows-3",
			         
			"arrows-4",
			"arrows-4",
			"arrows-4",
			"arrows-4",
			"arrows-4",
			"arrows-4",
			"arrows-4",
			"arrows-4",
			         
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1",
			"arrows-1"			
		];
		that.gestureArrowsAnimation = new FrameAnimationWidget('gesture_arrows_animation', that.gestureArrowsAnimationFrames, 2 /*repeatTimes*/, that.controller, true);
		
		that.playGestureArrowsAnimation = function() {
			Mojo.Log.info("playGestureArrowsAnimation");
			$('gesture_arrows_animation').setStyle("display:block");
			that.gestureArrowsAnimation.reset();
			that.gestureArrowsAnimation.play();
		};
		
		
		// Zoom Animation (shows the Gesture Area)
		that.playZoomAnimation = function() {
			Mojo.Log.info("playZoomAnimation");
			var pic = that.controller.get('device_image');

			Mojo.Animation.animateStyle(pic, 'height', 'linear', {
				from:487,
				to: 226,
				curve: 'easeOut',
				duration: 1.5,
				reverse:true}
			);
	
			Mojo.Animation.animateStyle(pic, 'top', 'linear', {
					from: -215,
 					to: 12,
					curve: 'easeOut',
					duration: 1.5,
					reverse:true,
					onComplete: function(){
						// Play the gesture area animation (big) after a delay
						(function(){that.playGestureAreaBigAnimation();}).bind(this).delay(.5);
					}
			});
	
			Mojo.Animation.animateStyle(pic, 'left', 'linear', {
					from: 12,
					to: 92,
					curve: 'easeOut',
					duration: 1.5,
					reverse:true});
		};
		
		// Gesture Area Animation (big)
		var gestureAreaBigFrames = ["images/tutorial/gesture_area_glow_big/gesture_glow_big_00215.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00216.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00217.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00218.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00219.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00220.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00221.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00222.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00223.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00224.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00225.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00226.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00227.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00228.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00229.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00230.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00231.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00232.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00233.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00234.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00235.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00236.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00237.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00238.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00239.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00240.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00241.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00242.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00243.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00244.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00245.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00246.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00247.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00248.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00249.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00250.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00251.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00252.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00253.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00254.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00255.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00256.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00257.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00258.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00259.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00260.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00261.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00262.png",
																"images/tutorial/gesture_area_glow_big/gesture_glow_big_00263.png"];
																
		that.gestureAreaBigAnimation = new FrameAnimationWidget('gesture_area_big_image', gestureAreaBigFrames, 2 /*repeatTimes*/, that.controller);
		
		that.playGestureAreaBigAnimation = function() {
			Mojo.Log.info("playGestureAreaBigAnimation");
			$('gesture_area_big_div').setStyle("display:block");
			that.gestureAreaBigAnimation.reset();
			that.gestureAreaBigAnimation.play();
		};
		
		// Finger Animation
		that.playFingerAnimation = function(){
			Mojo.Log.info("playFingerAnimation");
			var pic = that.controller.get('finger_div');
			
			// Free the animation widgets we no longer use
			delete that.gestureAreaBigAnimation;
			
			
			if(that.fingerAnimationDone == true) return;
			
			// Show the finger_div
			pic.setStyle("display:block");
			
			Mojo.Animation.animateStyle(pic, 'top', 'linear', {
				from: 480,
				to: 174,
				curve: 'easeOut',
				duration: 1,
				reverse: false,
				onComplete:function(pic){
					// Don't hide the finger here.  Hide it when the ripple finishes
					// Animate the finger touch - ripple
					(function(){
						that.stopAnimations = function(){
							if(that.rippleAnimation) that.rippleAnimation.stop();
						};
						that.stopAnimations = function(){};
						// Hide the finger without the glow
						$('finger_div').setStyle("display:none");
						// Hide the ripple
						$('ripple_div').setStyle("display:none");
						// Animate the swipe
						that.playSwipeAnimation();
					}).bind(this).delay(.5);
				}
			});
		}
		
		// Ripple Animation
		var rippleFrames = ["images/tutorial/ripple/ripple_00343.png",
												"images/tutorial/ripple/ripple_00344.png",
												"images/tutorial/ripple/ripple_00345.png",
												"images/tutorial/ripple/ripple_00346.png",
												"images/tutorial/ripple/ripple_00347.png",
												"images/tutorial/ripple/ripple_00348.png",
												"images/tutorial/ripple/ripple_00349.png",
												"images/tutorial/ripple/ripple_00350.png",
												"images/tutorial/ripple/ripple_00351.png",
												"images/tutorial/ripple/ripple_00352.png",
												"images/tutorial/ripple/ripple_00353.png",
												"images/tutorial/ripple/ripple_00354.png",
												"images/tutorial/ripple/ripple_00355.png",
												"images/tutorial/ripple/ripple_00356.png",
												"images/tutorial/ripple/ripple_00357.png",
												"images/tutorial/ripple/ripple_00358.png",
												"images/tutorial/ripple/ripple_00359.png",
												"images/tutorial/ripple/ripple_00360.png",
												"images/tutorial/ripple/ripple_00361.png"];
		
		that.rippleAnimation = new FrameAnimationWidget('ripple_image', rippleFrames, 1 /*repeatTimes*/, that.controller);
		
		that.playRippleAnimation = function() {
			Mojo.Log.info("playRippleAnimation");
			if (!that.loopRippleAndOrbSwipeStopped) {
		  	$('ripple_div').setStyle("display:block");
		  	that.rippleAnimation.reset();
		  	that.rippleAnimation.play();
		  }
		};
		
		// Finger Swipe
		that.playSwipeAnimation = function(){
			Mojo.Log.info("playSwipeAnimation");
			var pic = that.controller.get('swipe_div');
			
			if(that.fingerAnimationDone == true) return; 

			// Show the swipe_div
			pic.setStyle("display:block");
			
			Mojo.Animation.animateStyle(pic, 'left', 'linear', {
				from: 92,
				to: 23,
				curve: 'bezier',
				duration: 0.5,
				reverse: false,
				onComplete:function(pic){
					// Hide the swipe div
					$('swipe_div').setStyle("display:none");
					
					(function(){
						if(that.fingerAnimationDone != true) {
							// Automatically advance to the next scene
							var transition = that.controller.prepareTransition(Mojo.Transition.crossFade, false);
							that.advanceMovie();
							transition.run();
						}
					}).bind(this).delay(.5);
				}
			});
		}
		
		// Looping orb swipe animation	
		that.playOrbSwipeAnimation = function() {
			Mojo.Log.info("playOrbSwipeAnimation");
			if (!that.loopRippleAndOrbSwipeStopped) {
				var pic = that.controller.get('orb_div');
			
				// Show the swipe_div
				pic.setStyle("display:block");
				// Hide the ripple
				$('ripple_div').setStyle("display:none");
					
				that.loopingOrbAnimation = Mojo.Animation.animateStyle(pic, 'left', 'linear', {
					from: 0,
					to: 35,
					curve: 'bezier',
					duration: 0.4,
					reverse: false,
					onComplete:function(pic){
						// Hide the swipe div
						$('orb_div').setStyle("display:none");
						// Move the orb back to its original place
						$('orb_div').setStyle("left:111px");
							// Animate looping orb gesture + LEDs
							if (!that.loopRippleAndOrbSwipeStopped) {
								(function(){that.loopRippleAndOrbSwipeAnimation();}).bind(this).delay(1.6);
							}
					}
				});
			}
		};
		
		that.loopRippleAndOrbSwipeAnimation = function(){
			Mojo.Log.info("loopRippleAndOrbSwipeAnimation");
			if (!that.loopRippleAndOrbSwipeStopped) {
		  		//that.rippleAnimation.ended = function(){
					// Animate the swipe
					that.playOrbSwipeAnimation();
				//	};
				//	that.playRippleAnimation();
			}
		};
					
		// Glow Animation
		that.glowAnimation = {};
		that.glowAnimation.ended = function(){};
		
		that.playGlowAnimation = function() {
			Mojo.Log.info("playGlowAnimation");
			// Cross fade to glowy white
			var transition = that.controller.prepareTransition(Mojo.Transition.crossFade, false);
			$('glow_div').setStyle("display:block");
			transition.run(this.hideGlow.bind(this));
		};
		that.hideGlow = function() {
			// Cross fade back
			var transition = that.controller.prepareTransition(Mojo.Transition.crossFade, false);
			$('glow_div').setStyle("display:none");
			transition.run(this.glowAnimation.ended.bind(this));
			//that.glowAnimation.ended();
		}
		
		that.screenTapHandler = function(){
			$(that.textElementId).update($L("That’s not the gesture area. Try swiping your finger below the screen on your phone."));
			that.playGestureArrowsAnimation();
			// show arrows and begin arrow animation
		};
		
		that.gestureTapHandler = function(event) {
			// Check to see if the user tapped in the gesture area
			if (event.metaKey)
				$(that.textElementId).update($L("Not quite. The back gesture requires you to keep moving your finger while on the gesture area."));
		};
		if (isDemoMode) {
			this.controller.get("lastscene").update($L("You'll discover more gestures as you explore your device"));
		}
		//alert(1);
		this.movieFrames = [
		{className: 'back intro frame-0', 
						animate: function(){
							Mojo.Log.info("frame-0 animate");
							// Cross fade to the next frame
							(function(){
								var transition = that.controller.prepareTransition(Mojo.Transition.crossFade, false);
								that.advanceMovie();
								transition.run();
							}).bind(this).delay(0.75);
						}
					},
					
					{className: 'back intro frame-1', 
						// "Now that your Pre is set up, we’d like to introduce you to one 
						// of the phone’s most important features."
						animate: function(){
							Mojo.Log.info("frame-1 animate");
						}
					},
					{className: 'back intro frame-2', 
						// "The back gesture will help you navigate through the screens 
						// on your phone."
						animate: function(){
							Mojo.Log.info("frame-2 animate");
						}
					},
					{className: 'back intro frame-3', 
						// "The gesture area is below the screen on your phone."
						animate: function(){
							Mojo.Log.info("frame-3 animate");
							that.fingerAnimationDone = false;
							// Play the gesture area animation twice
							that.stopAnimations = function(){
								if(that.gestureAreaSmallAnimation) that.gestureAreaSmallAnimation.stop();
							};
							that.gestureAreaSmallAnimation.ended = function(){
								// Hide the glow_div
								$('gesture_area_small_div').setStyle("display:none");
								// Schedule to transition to the next frame in 500ms
								(function(){
									if(that.fingerAnimationDone != true){
										var transition = that.controller.prepareTransition(Mojo.Transition.crossFade, false);
										that.backGestureOverride = function(){};
										that.advanceMovie();
										transition.run();
									}
								}).bind(this).delay(1.2);
							}
							that.playGestureAreaSmallAnimation();
							
							that.backGestureOverride = function(){
								that.glowAnimation.ended = function(){
									// Hide the glow_div
									$('glow_div').setStyle("display:none");
									
									// make sure arrow animation is stopped and arrows are hidden
									that.gestureAreaSmallAnimation.ended = function(){};
									if(that.gestureArrowsAnimation) that.gestureArrowsAnimation.stop();
									$('gesture_arrows_animation').setStyle("display:none");
									
									that.fingerAnimationDone = true;			
									$('finger_div').hide();		
									$('swipe_div').hide();
									
									if(that.gestureAreaBigAnimation) that.gestureAreaBigAnimation.stop();
									
									// Go to next frame
									that.advanceMovie();
								}
								that.playGlowAnimation();
								that.backGestureOverride = function(){};
							}
							
						}
					},
					{className: 'back intro frame-4', 
						animate: function(){
							Mojo.Log.info("frame-4 animate");
							// Done with small gesture area glow, so let's make sure it's hidden
							// and free it
							$('gesture_area_small_div').setStyle("display:none");
							delete that.gestureAreaSmallAnimation;
							// Setup the animation callbacks for the gestureAreaBigAnimation, since
							// that animation gets called when Zoom animation completes

							that.backGestureOverride = function(){
								that.glowAnimation.ended = function(){
									// Hide the glow_div
									$('glow_div').setStyle("display:none");
									
									// make sure arrow animation is stopped and arrows are hidden
									if(that.gestureArrowsAnimation) that.gestureArrowsAnimation.stop();
									$('gesture_arrows_animation').setStyle("display:none");
									
									that.fingerAnimationDone = true;			
									$('finger_div').hide();		
									$('swipe_div').hide();
									
									if(that.gestureAreaBigAnimation) that.gestureAreaBigAnimation.stop();
									
									// Go to next frame
									that.advanceMovie();
								}
								that.playGlowAnimation();
								that.backGestureOverride = function(){};
							}
							
							that.stopAnimations = function(){
								if(that.gestureAreaBigAnimation) that.gestureAreaBigAnimation.stop();
							};
							that.gestureAreaBigAnimation.ended = function(){
								// Hide the gesture area
								$('gesture_area_big_div').setStyle("display:none");
								// Animate the finger after a delay
								that.stopAnimations = function(){};
								(function(){
									that.playFingerAnimation();
								}).bind(this).delay(.5);
							};
								
							if(that.fingerAnimationDone == true){
								var transition = that.controller.prepareTransition(Mojo.Transition.crossFade, false);
								var device_image = that.controller.get('device_image');
								device_image.setStyle("height:487px; top:-215px; left:12px;");
								that.advanceMovie();
								transition.run();
							} else {
								// Animate the zoom
								that.playZoomAnimation();
							}
						}
					},
					{className: 'back intro frame-5', 
						// "Go ahead and try the back gesture."
						animate: function(){
							Mojo.Log.info("frame-5 animate");							

							that.stopAnimations = function() {
								// Hide the divs
								$('orb_div').setStyle("display:none");
								that.loopRippleAndOrbSwipeStopped = true;
								if (that.loopingOrbAnimation) {
									that.loopingOrbAnimation.complete();
									that.loopingOrbAnimation = null;
								}
								if(that.rippleAnimation) that.rippleAnimation.stop();
								that.stopAnimations = function(){};
							}
							
							that.backGestureOverride = function(){
								that.glowAnimation.ended = function(){
									// Hide the glow_div
									$('glow_div').setStyle("display:none");

									var transition = that.controller.prepareTransition(Mojo.Transition.crossFade, false);
									that.advanceMovie();
									$("instructions").hide();
									$("instructions").className = "instructions down";
									transition.run();
								}
								that.playGlowAnimation();
								that.backGestureOverride = function(){};
							}
							
							
							if(that.fingerAnimationDone == true){
								that.playOrbSwipeAnimation();
								$("instructions").className = "instructions up";
								that.advanceMovie();
							} else {
								// Animate looping ripple and orb gesture
								that.loopRippleAndOrbSwipeAnimation.delay(3);
								
								// Show instructions
								that.textElementId = "first-try-text";		// Do NOT Localize
								// Setup listeners for tap & flicks on the screen 
								that.controller.listen($("tutorialframe"), Mojo.Event.tap, that.screenTapHandler);
								that.controller.listen($("tutorialframe"), Mojo.Event.flick, that.screenTapHandler);
								// Setup a timed delay to detect if the user has done nothing
								
								// Show instructions
								(function(){
									$("instructions").className = "instructions up";
								}).bind(this).delay(.75);
							}
							
							
							
						}
					},
					{className: 'back intro frame-6', 
						// "Great. Now try it one more time."
						animate: function(){
							Mojo.Log.info("frame-6 animate");
							that.textElementId = "second-try-text";		// Do NOT Localize
							// Keep the listeners active as the user still may make mistakes
							that.backGestureOverride = function(){
								that.glowAnimation.ended = function(){
									that.stopAnimations();
									// Hide the glow_div
									$('glow_div').setStyle("display:none");

									// make sure arrow animation is stopped and arrows are hidden
									if(that.gestureArrowsAnimation) that.gestureArrowsAnimation.stop();
									$('gesture_arrows_animation').setStyle("display:none");
									
									var transition = that.controller.prepareTransition(Mojo.Transition.crossFade, false);
									that.advanceMovie();
									$("instructions").hide();
									$("instructions").className = "instructions down";
									transition.run(function(){
										(function(){
											that.advanceMovie();
										}).bind(this).delay(.1);
										
									});
								}
								that.playGlowAnimation();
								that.backGestureOverride = function(){};
							}

							$("instructions").show();
							(function(){
								$("instructions").className = "instructions up";
							}).bind(this).delay(.25);
						}
					},
					{className: 'back intro frame-7', 
						animate: function(){
							Mojo.Log.info("frame-7 animate");
							// Cleanup glowAnimation
							that.glowAnimation.ended = function(){
								// Hide the glow_div
								$('glow_div').setStyle("display:none");
							};

							that.loopRippleAndOrbSwipeStopped = true;
							$('orb_div').setStyle("display:none");

							// Stop listening for tap & flicks on the screen 
							that.controller.stopListening($("tutorialframe"), Mojo.Event.tap, that.screenTapHandler);
							that.controller.stopListening($("tutorialframe"), Mojo.Event.flick, that.screenTapHandler);
							// Stop listening for metaKey (tap in gesture area)
							//that.controller.document.removeEventListener('keydown', that.gestureTapHandler);
						
							var glowOnce = function(){
								that.backGestureOverride = function(){};
								that.playGlowAnimation();
								(function(){
									that.backGestureOverride = function(){
										glowOnce();
									};
								}).delay(0);
							}
							that.backGestureOverride = glowOnce;
						}
					},
					{className: 'back intro frame-8', 
						// "You got it. Let’s move on."
						animate: function(){
							Mojo.Log.info("frame-8 animate");
							$("instructions").show();
						}
					},
					
					{className: 'back intro frame-9', 
						animate: function(){
							Mojo.Log.info("frame-9 animate");
							that.glowAnimation.ended = function(){};
		
							// Crossfade to the state in which an album is highlighted
							(function(){
								var transition = that.controller.prepareTransition(Mojo.Transition.crossFade, false);
								that.advanceMovie();
								that.photoTappable = true;
								// Make Vacations row tappable
								$("photo-albums-3-row").observe(Mojo.Event.tap, that.tapPhoto);
								transition.run();
							}).bind(this).delay(.5);
							that.backGestureOverride = function(){};
						}
					},
					{className: 'back intro frame-10', 
						// Photo Albums (Vacations selected)
						animate: function(){
							Mojo.Log.info("frame-10 animate");
							// Show instructions after a delay
							$("instructions").className = "instructions up";
							
							that.betweenTransitions = function() {
								$("instructions").hide();
								$("instructions").className = "instructions down";
								that.betweenTransitions = function(){};
							};
						}
					},
					{className: 'back intro frame-11', 
						// Vacations album - default
						animate: function(){
							Mojo.Log.info("frame-11 animate");
							$("instructions").show();
							// Remove listeners from last frame
							$("photo-albums-3-row").stopObserving(Mojo.Event.tap, that.tapPhoto);
							that.photoTappable = false;
							// Crossfade to the state in which a photo is highlighted
							(function(){
								var transition = that.controller.prepareTransition(Mojo.Transition.crossFade, false);
								that.advanceMovie();
								that.photoTappable = true;
								$("photo-album-1-row-1-col-2").observe(Mojo.Event.tap, that.tapPhoto);
								transition.run();
							}).bind(this).delay(.5);
						}
					},
					
					{className: 'back intro frame-12', 
						// Vacations album - picture highlighted
						animate: function(){
							Mojo.Log.info("frame-12 animate");
							// Show instructions after a delay
							$("instructions").className = "instructions up";
							that.betweenTransitions = function() {
								$("instructions").hide();
								$("instructions").className = "instructions down";
								that.betweenTransitions = function(){};
							};
						}
					},
					
					{className: 'back intro frame-13', 
						// Vacations Photo - Photo 1st row, 2nd column
						animate: function(){
							Mojo.Log.info("frame-13 animate");
							$("instructions").show();
							// Remove listeners from last frame
							$("photo-album-1-row-1-col-2").stopObserving(Mojo.Event.tap, that.tapPhoto);
							that.photoTappable = false;
							// Show instructions after a delay
							(function(){
								$("instructions").className = "instructions up";
								that.photoTappable = true;
								$("photo-album-1-row-1-col-2").observe(Mojo.Event.tap, that.tapPhoto);
							}).bind(this).delay(.5);
							that.backGestureOverride = function(){
								var transition = that.controller.prepareTransition(Mojo.Transition.zoomFade, true);
								that.advanceMovie();
								$("instructions").hide();
								$("instructions").className = "instructions down";
								transition.run();
								that.backGestureOverride = function(){};
							};
						}
					},
					{className: 'back intro frame-14', 
						// Vacations Photo - default
						animate: function(){
							Mojo.Log.info("frame-14 animate");
							$("instructions").show();
							// Remove listeners from last frame
							$("photo-album-1-row-1-col-2").stopObserving(Mojo.Event.tap, that.tapPhoto);
							// Display instructions after delay
							(function(){
								$("instructions").className = "instructions up";
							}).bind(this).delay(.5);
							that.betweenTransitions = function() {
								$("instructions").hide();
								$("instructions").className = "instructions down";
								that.betweenTransitions = function(){};
							};
							that.backGestureOverride = function(){
								var transition = that.controller.prepareTransition(Mojo.Transition.zoomFade, true);
								that.advanceMovie();
								$("instructions").hide();
								$("instructions").className = "instructions down";
								transition.run();
								that.backGestureOverride = function(){};
							};
						}
					},
					{className: 'back intro frame-15', 
						// Photo Albums - default
						animate: function(){	
							Mojo.Log.info("frame-15 animate");	
							$("instructions").show();			
							// Crossfade to the state in which a photo is highlighted
							(function(){
								var transition = that.controller.prepareTransition(Mojo.Transition.crossFade, false);
								that.advanceMovie();
								that.photoTappable = true;
								$("photo-albums-4-row").observe(Mojo.Event.tap, that.tapPhoto);
								$("instructions").hide();
								$("instructions").className = "instructions down";
								transition.run();
							}).bind(this).delay(.5);
							that.backGestureOverride = function(){};
						}
					},
					{className: 'back intro frame-16', 
						// Photo Albums - Wallpapers highlighted
						animate: function(){
							Mojo.Log.info("frame-16 animate");
							$("instructions").show();
							// Show instructions after a delay
							(function(){
								$("instructions").className = "instructions up";
							}).bind(this).delay(.5);
							that.betweenTransitions = function() {
								$("instructions").hide();
								$("instructions").className = "instructions down";
								that.betweenTransitions = function(){};
							};
						}
					},
					{className: 'back intro frame-17', 
						// Wallpapers album - default
						animate: function(){
							Mojo.Log.info("frame-17 animate");
							// Remove listeners from last frame
							$("photo-albums-4-row").stopObserving(Mojo.Event.tap, that.tapPhoto);
							that.photoTappable = false;
							// Crossfade to the state in which a photo is highlighted
							(function(){
								var transition = that.controller.prepareTransition(Mojo.Transition.crossFade, false);
								that.advanceMovie();
								that.photoTappable = true;
								$("photo-album-1-row-2-col-1").observe(Mojo.Event.tap, that.tapPhoto);
								$("instructions").hide();
								$("instructions").className = "instructions down";
								transition.run();
							}).bind(this).delay(.5);
						}
					},
					{className: 'back intro frame-18', 
						// Wallpapers album - picture highlighted
						animate: function(){
							Mojo.Log.info("frame-18 animate");
							$("instructions").show();
							(function(){
								$("instructions").className = "instructions up";
							}).bind(this).delay(.5);
							that.betweenTransitions = function() {
								$("instructions").hide();
								$("instructions").className = "instructions down";
								that.betweenTransitions = function(){};
							};
						}
					},
					{className: 'back intro frame-19', 
						// Wallpapers album - Photo 2nd row, 1st column
						animate: function(){
							Mojo.Log.info("frame-19 animate");
							// Remove listeners from last frame
							$("photo-album-1-row-2-col-1").stopObserving(Mojo.Event.tap, that.tapPhoto);
							// Display instructions after delay
							$("instructions").show();
							(function(){
								$("instructions").className = "instructions up";
							}).bind(this).delay(.5);
							that.photoTappable = false;
							that.backGestureOverride = function(){
								var transition = that.controller.prepareTransition(Mojo.Transition.zoomFade, true);
								that.advanceMovie();
								$("instructions").hide();
								$("instructions").className = "instructions down";
								transition.run();
								that.backGestureOverride = function(){};
							};
							that.betweenTransitions = function() {
								$("instructions").hide();
								$("instructions").className = "instructions down";
								that.betweenTransitions = function(){};
							};
						}
					},
		
					{className: 'back intro frame-20', 
						// Wallpapers album - default
						animate: function(){
							Mojo.Log.info("frame-20 animate");
							$("instructions").show();
							// Display instructions after delay
							(function(){
								$("instructions").className = "instructions up";
							}).bind(this).delay(.5);
							
							that.backGestureOverride = function(){
								var transition = that.controller.prepareTransition(Mojo.Transition.zoomFade, true);
								that.advanceMovie();
								$("instructions").hide();
								$("instructions").className = "instructions down";
								transition.run();
								that.backGestureOverride = function(){};
							};
						}
					},
					
					{className: 'back intro frame-21', 
						// Photo albums - default "That’s it. You’ve now learned the back gesture."
						animate: function(){
							Mojo.Log.info("frame-21 animate");
							$("instructions").show();
							$("instructions_next_button").observe(Mojo.Event.tap, that.nextButtonTapped);
							(function(){
								$("instructions").className = "instructions up";
							}).bind(this).delay(.5);
							that.backGestureOverride = function(){};
							that.betweenTransitions = function() {
								$("instructions").hide();
								$("instructions").className = "instructions down";
								$("device_image").setStyle("position:absolute; top:12px; left:107px; width:auto; height:226px;");
								that.betweenTransitions = function(){};
							};
							that.endNextButtonTapped = function(){
								$("instructions_next_button").stopObserving(Mojo.Event.tap, that.nextButtonTapped);
								$("instructions_next_button").observe(Mojo.Event.tap, (function(){that.startVideo();}).bind(this) );
							};
						}
					},
			
			{className: 'back intro frame-22', 
				// Final scene
				// You’ll discover more gestures as you explore your Pre. We’ll show you a few more 
				// while your phone prepares to restart.
				animate: function(){
					$("instructions").show();
					(function(){
						$("instructions").className = "instructions up";
					}).bind(this).delay(.5);
					
					//$("instructions_next_button").observe(Mojo.Event.tap, (function(){that.startVideo();}).bind(this) );
				
					that.backGestureOverride = function(){};
				}
			},
		];
	},
	
	cleanup: function() {
		$("next_button").stopObserving(Mojo.Event.tap, that.nextButtonTapped);
		$("instructions_next_button").stopObserving(Mojo.Event.tap, that.nextButtonTapped);
	},
	
	showUserDidNothingError: function(textElementId) {
		$(that.textElementId).update($L("Go on, give the back gesture a try, and then we can move on."));
	},
	
	backGestureOverride : function(){},
	
	handleCommand: function(event) {
    if (event.type == Mojo.Event.back) {
			this.backGestureOverride();
			event.stop();
	    event.preventDefault();
	    event.stopPropagation();
		}
	},
	
	startVideo: function() {
		if (isDemoMode) {
			new Mojo.Service.Request('palm://com.palm.oddService', {
				method: 'closetutorial',
				parameters: {}
			});
		}
		else {
			Mojo.Controller.stageController.pushScene({
				name: "tutorial",
				transition: Mojo.Transition.crossFade
			});
		}
	}
		
});



