Loader.addImages([
	{ id:"intro_logo", src:"sprites/intro/intro_logo.png" },
	{ id:"intro_bg", src:"sprites/intro/intro_bg.png" },
	{ id:"intro_anim", src:"sprites/intro/intro_anim.png" }
]);

function BG_Intro(){

	var self = this;

	// Sprites!
	self.logoSprite = new Sprite({
		image: Library.images.intro_logo,
		grid:{ width:1, height:1 },
		frame:{ width:720, height:900 },
	});
	var spriteConfig = {
		image: Library.images.intro_bg,
		grid:{
			width: 2,
			height: 3
		},
		frame:{
			width: 1200,
			height: 900
		},
		anchor:{
			x: 0,
			y: 0
		},
		frameNames:[
			"sky",
			"clouds",
			"buildings",
			"grass",
			"stump",
			"blackout"
		],
		x: 0,
		y: 0
	};
	self.layers = [];
	["sky","clouds","buildings","grass","stump","blackout"].forEach(function(layerName){
		var sprite = new Sprite(spriteConfig);
		sprite.gotoFrameByName(layerName);
		self.layers.push(sprite);
	});
	self.layers[5].alpha = 0; // blackout alpha is ZERO at start.

	// HONG
	var hongSpriteConfig = {
		image: Library.images.intro_anim,
		grid:{
			width: 4,
			height: 7
		},
		frame:{
			width: 1200,
			height: 900
		},
		anchor:{
			x: 0,
			y: 0
		},
		x: 0,
		y: 0
	};
	var hongSprite = new Sprite(hongSpriteConfig);
	self.layers.push(hongSprite);

	// DRAW
	var BG_WIDTH = 360;
	var BG_HEIGHT = 450;
	var PARALLAXES = [
		0, // sky
		0.1, // clouds
		0.25, // buildings
		0.48, // grass
		1.0, // stump
		0, // blackout
		1.0, // HONG
	];
	var OFFSETS = [
		0,
		0, // clouds
		0,
		0,
		20,
		0,
		20
	]

	var ticker = 0; //16;//0;
	var frameTicker = ticker;
	var parallaxTicker = 0;
	var SHOWN_PLAY_BUTTON = false;
	var SHOWN_LOGO = false;
	self.draw = function(ctx){

		// TICKER
		ticker += 1/60;

		// CLOUD OFFSET
		OFFSETS[1] = -80 + ticker*3;

		// Animate Hong: Which frame?
		var parallax = 0;
		frameTicker += 1/60;
		if(GAME_TRANSITION==0 || GAME_TRANSITION==1){ 
			if(frameTicker>590/30){
				if(GAME_TRANSITION==0) frameTicker = 381/30; // LOOP to NOM.
				if(GAME_TRANSITION==1) frameTicker = 590/30; // STOP.
			}
		}
		if(GAME_TRANSITION==2){
			
			parallaxTicker += 1/60; // 0 to 1 in one second
			if(parallaxTicker>1) parallaxTicker = 1;
			self.layers[5].alpha = parallaxTicker; // blackout alpha

			// 0 to -180 in one second, smoothed
			var t = Math.cos(parallaxTicker*Math.TAU/2); // 1 to -1
			t = (1-t)/2; // 0 to 1
			parallax = -t*215;

		}

		// Hong frame
		var frame = findFrameOnTicker(frameTicker);
		hongSprite.gotoFrame(frame);
		
		// Draw all!
		for(var i=0; i<self.layers.length; i++){
			var layer = self.layers[i];
			layer.x = PARALLAXES[i] * parallax - OFFSETS[i];
			layer.draw(ctx);
		}
		if(!SHOWN_LOGO && ticker>=530/30){
			SHOWN_LOGO = true;
		}
		if(GAME_TRANSITION==0 && SHOWN_LOGO){
			self.logoSprite.draw(ctx);
		}

		// Show Play Button
		if(!SHOWN_PLAY_BUTTON && ticker>=590/30){
			SHOWN_PLAY_BUTTON = true;
			Game.goto("intro-play-button");
		}

		// NEXT SCENE?
		if(frame==26){
			Game.goto("act1");
		}

	};

	var GAME_TRANSITION = 0;
	var _subscriptions = [];
	_subscriptions.push(
		subscribe("intro-to-game-1", function(){
			GAME_TRANSITION = 1; // STOP LOOPING
		})
	);
	_subscriptions.push(
		subscribe("intro-to-game-2", function(){
			frameTicker = 600/30;
			GAME_TRANSITION = 2; // START PARALLAXING
		})
	);

	//////////////////////////////////////////////////////////////////////////////
	//////////////////////////////////////////////////////////////////////////////
	//////////////////////////////////////////////////////////////////////////////

	// ANIMATE HONG, THE FRAMES!

	var HONG_FRAMES = [
		"0-0",
		"1-59",
		"2-79",
		"3-99",
		"4-119",
		"5-139",
		"6-199",
		"7-234",
		"8-244",
		"9-254",
		"8-264",
		"9-274",
		"10-299",
		"11-336",
		"12-346",
		"13-381",
		"14-400",
		"15-410",
		"14-420",
		"15-430",
		"14-440",
		"15-450",
		"16-470",

		"17-600",
		"18-603",
		"19-606",
		"20-609",
		"21-612",
		"22-615",
		"23-618",
		"24-621",
		"25-624",
		"26-627"
	];
	HONG_FRAMES = HONG_FRAMES.map(function(frame){
		var f = frame.split("-");
		return [parseInt(f[0]), parseInt(f[1])/30];
	});
	var findFrameOnTicker = function(ticker){
		var lastFrame;
		for(var i=0; i<HONG_FRAMES.length; i++){
			var f = HONG_FRAMES[i];
			if(f[1]<=ticker){
				lastFrame = f[0];
			}
		}
		return lastFrame;
	};

	//////////////////////////////////////////////////////////////////////////////
	//////////////////////////////////////////////////////////////////////////////
	//////////////////////////////////////////////////////////////////////////////

	// Kill!
	self.kill = function(){
		_subscriptions.forEach(unsubscribe);
	};


}