app = new App( "indexJS" );

app.srcs = [
	"title.png",
	"number.png",
	"triangle1.png",
	"triangle2.png",
	"triangle3.png",
];

app.init = function() {
	console.log( "init" );
	if( 1 ) {	//canvasの設置
		//cc = document.createElement( "canvas" ).getContext( "2d" );
		cc = document.getElementById( "indexJS" ).getContext( "2d" );
		//document.body.appendChild( cc.canvas );
		with( cc.canvas ) {
			id				= "indexJS"
			width			= 640;
			height			= 480;
			style.border	= "solid 1px black";
			style.display	= "block";
			style.margin	= "auto";
		}
		cc.clear = function() {
			this.clearRect( 0, 0, this.canvas.width, this.canvas.height );
		}
		cc.circle = function( x, y, r, strokeStyle, fillStyle ) {
				//check.
				if( ! strokeStyle && ! fillStyle ) {
					strokeStyle = cc.strokeStyle;
				}
			cc.beginPath();
			cc.arc( x, y, r, 0, 6.28, false );
			cc.closePath();
			if( fillStyle ) { cc.fillStyle = fillStyle; cc.fill(); }
			if( strokeStyle ) { cc.strokeStyle = strokeStyle; cc.stroke(); }
		}
		cc.line = function( x1, y1, x2, y2, strokeStyle ) {
			cc.beginPath();
			cc.moveTo( x1, y1 );
			cc.lineTo( x2, y2 );
			cc.closePath();
			if( strokeStyle ) cc.strokeStyle = strokeStyle;
			cc.stroke();
		}
		cc.rect = function( x, y, w, h, fillStyle, strokeStyle ) {
				//check.
				if( ! strokeStyle && ! fillStyle ) {
					strokeStyle = cc.strokeStyle;
				}
			if( fillStyle ) {
				cc.fillStyle = fillStyle;
				cc.fillRect( x, y, w, h );
			}
			if( strokeStyle ) {
				cc.strokeStyle = strokeStyle;
				cc.strokeRect( x, y, w, h );
			}
		}
		cc.canvas.style.backgroundColor = "black";
		
		if( 0 ) {
			this.toBackgroundOf( document.getElementById( "indexJSparent" ) );
		}
	}//canvasの設置

	this.draw( 1 );
	this.setFps( 60 );
					
	this.test = 0;
	this.test2 = 0;
	this.test2dir = 1;
	this.test3 = 0;
	this.test4time = 300;
	this.test4_1 = 0;
	this.test5 = 0;
	this.test5time = 100;
}

app.run = function() {
	this.test++;
	if( this.test < this.test4time ) {
		//メーカー表示
		this.test4_1++;
		this.draw( 0 );
	} else if( this.test < 250 + this.test4time ) {
		//タイトル滝表示
		this.titleData2 = cc.createImageData( this.titleData.width, this.titleData.height );
		for( var y = 0; y < this.titleData.height; y++ ) {
			var yIdx = 4 * this.titleData.width * y;
			var seek = this.test - this.test4time;
			if( y < seek ) {
				for( var x = 0; x < this.titleData.width * 4; x++ ) {
					this.titleData2.data[ yIdx + x ] = this.titleData.data[ yIdx + x ];
				}
			} else {
				var yIdx2 = 4 * this.titleData.width * ( seek - 1 );
				for( var x = 0; x < this.titleData.width * 4; x++ ) {
					this.titleData2.data[ yIdx + x ] = this.titleData.data[ yIdx2 + x ];
				}
			}
		}
		this.draw( 2 );
	} else if( this.test < 280 + this.test4time ) {
		//バック青文字明暗
		this.test2 += 0.1 * this.test2dir;
			//check.
			if( this.test2 > 1 ) {
				this.test2 = 1;
				this.test2dir = -1;
			} else if( this.test2 < 0 ) {
				this.test2 = 0;
				this.test2dir = 1;
			}
		this.draw( 3 );
	} else if( this.test < 300 + this.test4time ) {
		//▼テカリ
		this.test3 += 0.20;
		this.test3idx = Math.floor( this.test3 % 3 ) + 1;
		this.draw( 4 );
	} else if( this.test < 500 + this.test4time ) {
		//タイトル表示中
		this.draw( 4.5 );
	} else if( this.test < 500 + this.test5time + this.test4time ) {
		//タイトルフェードアウト
		this.test5 += 1;
		this.draw( 5 );
	} else {
		this.stop();
		this.cc.canvas.parentNode.style.display = "none";
		this.cc.canvas.parentNode.parentNode.style.paddingTop = "1em";
		document.getElementById( "indexJSparent2" ).style.display = "block";
	}
}

app.draw = function( mode ) {
	var cc = this.cc;
	cc.clear();
	switch( mode ) {
		case 0:
			var sz = 32;
			cc.font = sz + "px 'sans-serif'";
			var txt = "micro KAWAKAWA cabin";
			var mt = cc.measureText( txt );
			var fadein = 50;
			var waittm = 100;
			var fadeout = 90;
			if( this.test4_1 <= fadein ) {
				cc.globalAlpha = this.test4_1 / fadein;
			} else if( this.test4_1 <= fadein + waittm ) {
			} else if( this.test4_1 <= fadein + waittm + fadeout ) {
				cc.globalAlpha = 1 - ( this.test4_1 - ( fadein + waittm ) ) / fadeout;
			} else {
				return;
			}
			var x = ( cc.canvas.width - mt.width ) / 2;
			var y = ( cc.canvas.height + sz ) / 2;
			cc.fillStyle = "rgb(32,32,32)";
			cc.fillText( txt, x + 1, y + 1, mt.width );
			cc.fillStyle = "white";
			cc.fillText( txt, x - 1, y - 1, mt.width );
			cc.fillStyle = "rgb(128,128,128)";
			cc.fillText( txt, x, y, mt.width );
			break;
		case 1:
			cc.drawImage( images.title, 0, 0, cc.canvas.width, cc.canvas.height );
			if( 0 ) {
				cc.strokeStyle = "cyan";
				cc.strokeRect( 90, 80, 480, cc.canvas.height - 80 );
				alert( 1 );
			}
			this.titleData = cc.getImageData( 90, 80, 480, cc.canvas.height - 80 );
			break;
		case 2:
			cc.putImageData( this.titleData2, 90, 80 );
			break;
		case 3:
			cc.globalAlpha = this.test2;
			cc.drawImage( images.number, cc.canvas.width * 0.1, cc.canvas.height * 0.13, cc.canvas.width * 0.8, cc.canvas.height * 0.47 );
			cc.globalAlpha = 1;
			cc.drawImage( images.title, 0, 0, cc.canvas.width, cc.canvas.height );
			break;
		case 4:
			cc.drawImage( images.number, cc.canvas.width * 0.1, cc.canvas.height * 0.13, cc.canvas.width * 0.8, cc.canvas.height * 0.47 );
			cc.drawImage( images.title, 0, 0, cc.canvas.width, cc.canvas.height );
			cc.drawImage( images[ "triangle" + this.test3idx ], 165, 121, 34, 42 );
			cc.drawImage( images[ "triangle" + this.test3idx ], 390, 121, 34, 42 );
			break;
		case 4.5:
		case 5:
			if( mode == 5 ) {
				if( this.test5 <= 50 ) {
					cc.globalAlpha = 1 - ( this.test5 / ( this.test5time - 50 ) );
				} else {
					cc.globalAlpha = 0;
				}
			}
			cc.drawImage( images.number, cc.canvas.width * 0.1, cc.canvas.height * 0.13, cc.canvas.width * 0.8, cc.canvas.height * 0.47 );
			cc.drawImage( images.title, 0, 0, cc.canvas.width, cc.canvas.height );
			if( this.test5 > 50 ) {
				cc.globalAlpha = 1;
				cc.font = "16px ''";
				cc.fillStyle = "white";
				cc.fillText( "INT TRAP HALT", 0, 16 );
			}
			break;
		default:
			cc.clear();

	}
}