var timer;
	
	var rectWidth = 100;
	var rectHeightRange = 150;
	
	var buffaSW;
	var buffaSH;
	
	var rectTotalLength = 0;
	
	var angleRange = 40;
	
	var HENKAN_ANGLE = Math.PI / 180;
	
	
	var nextX = 0;
	var nextY = 0;
	
	
	var lineType = 3;
	
	
	// ---------------------------------
	// ロード完了
	// ---------------------------------
	onload = function( )
	{
		Init( );
	};
	
	
	// ---------------------------------
	// 初期設定
	// ---------------------------------
	function Init( ) 
	{
		var canvas = document.getElementById( 'canvasmain' );
		if ( ! canvas || ! canvas.getContext ) return false;
		
		buffaSW = window.innerWidth;
		buffaSH = window.innerHeight;
	
		// 表示領域をステージに合わせる
		canvas.width  = buffaSW;
		canvas.height = buffaSH;
		
		// タイマー
		timer = setInterval( draw, 100 );
	}
	
	
	// ---------------------------------
	// 描画
	// ---------------------------------
	function draw( ) 
	{
		var canvas = document.getElementById( 'canvasmain' );
		if ( ! canvas || ! canvas.getContext ) return false;
		
		var sw = window.innerWidth;
		var sh = window.innerHeight;
		
		// ステージの大きさが変わってたらリセット
		if( sw != buffaSW || sh != buffaSH )
		{
			ReSet( );
			
			canvas.width  = sw;
			canvas.height = sh;
		}
		buffaSW = sw;
		buffaSH = sh;
		
		var hikaku;
		if( lineType == 0 || lineType == 1 )
			hikaku = sh;
		else
			hikaku = sw;
		
		if( rectTotalLength > hikaku + 100 ) ReSet( );
		
		if( lineType == 0 )
		{
			drawTopFromBottom( );
		}
		else if( lineType == 1 )
		{
			drawBottomFromTop( );
		}
		else if( lineType == 2 )
		{
			drawLeftFromRight( );
		}
		else if( lineType == 3 )
		{
			drawRightFromLeft( );
		}
	}
	
	
	// ---------------------------------
	// 描画 下から上 ↑
	// ---------------------------------
	function drawTopFromBottom( ) 
	{
		var sw = window.innerWidth;
		var sh = window.innerHeight;
		
		var canvas = document.getElementById( 'canvasmain' );
		var ctx = canvas.getContext('2d');

		// 状態を保存
		ctx.save();
		
		var angle = GetRandomAngle( );
		
		var rectW = rectWidth;
		var rectH = GetRandomRectHeight( );
		var rectY = sh - rectTotalLength;
		
		var rectX;
		if( rectTotalLength > 0 )
			rectX = nextX;
		else
			rectX = sw * 0.5;
		
		var kakudo = 180 - ( 90 + angle );
		var radian = kakudo * HENKAN_ANGLE;
		
		nextX = rectX + rectH * Math.cos( radian );
		
		rectTotalLength += rectH;

		// 四角を描く
		ctx.beginPath();
		
		ctx.fillStyle = GetRandomColor( );
		ctx.translate( rectX, rectY );
		ctx.rotate( angle * HENKAN_ANGLE );
		ctx.fillRect( -rectW * 0.5, -rectH, rectW, rectH );
		ctx.fill();

		// 状態を復元
		ctx.restore();
	}
	
	
	// ---------------------------------
	// 描画 上から下　↓
	// ---------------------------------
	function drawBottomFromTop( ) 
	{
		var sw = window.innerWidth;
		var sh = window.innerHeight;
		
		var canvas = document.getElementById( 'canvasmain' );
		var ctx = canvas.getContext('2d');

		// 状態を保存
		ctx.save();
		
		var angle = GetRandomAngle( );
		
		var rectW = rectWidth;
		var rectH = GetRandomRectHeight( );
		var rectY = rectTotalLength;
		
		var rectX;
		if( rectTotalLength > 0 )
			rectX = nextX;
		else
			rectX = sw * 0.5;
		
		var kakudo = 180 - ( 90 + angle );
		var radian = kakudo * HENKAN_ANGLE;
		
		nextX = rectX - rectH * Math.cos( radian );
		
		rectTotalLength += rectH;

		// 四角を描く
		ctx.beginPath();
		
		ctx.fillStyle = GetRandomColor( );
		ctx.translate( rectX, rectY );
		ctx.rotate( angle * HENKAN_ANGLE );
		ctx.fillRect( -rectW * 0.5, 0, rectW, rectH );
		ctx.fill();

		// 状態を復元
		ctx.restore();
	}
	
	
	// ---------------------------------
	// 描画 右から左 ←
	// ---------------------------------
	function drawLeftFromRight( ) 
	{
		var sw = window.innerWidth;
		var sh = window.innerHeight;
		
		var canvas = document.getElementById( 'canvasmain' );
		var ctx = canvas.getContext('2d');

		// 状態を保存
		ctx.save();
		
		var angle = GetRandomAngle( );
		
		var rectW = rectWidth;
		var rectH = GetRandomRectHeight( );
		var rectX = sw - rectTotalLength;
		
		var rectY;
		if( rectTotalLength > 0 )
			rectY = nextY;
		else
			rectY = sh * 0.5;
		
		var kakudo = 180 - ( 90 + angle );
		var radian = kakudo * HENKAN_ANGLE;
		
		nextY = rectY - rectH * Math.cos( radian );
		
		rectTotalLength += rectH;

		// 四角を描く
		ctx.beginPath();
		
		ctx.fillStyle = GetRandomColor( );
		ctx.translate( rectX, rectY );
		ctx.rotate( angle * HENKAN_ANGLE );
		ctx.fillRect( -rectH, -rectW * 0.5, rectH, rectW );
		ctx.fill();

		// 状態を復元
		ctx.restore();
	}
	
	
	// ---------------------------------
	// 描画 左から右 →
	// ---------------------------------
	function drawRightFromLeft( ) 
	{
		var sw = window.innerWidth;
		var sh = window.innerHeight;
		
		var canvas = document.getElementById( 'canvasmain' );
		var ctx = canvas.getContext('2d');

		// 状態を保存
		ctx.save();
		
		var angle = GetRandomAngle( );
		
		var rectW = rectWidth;
		var rectH = GetRandomRectHeight( );
		var rectX = rectTotalLength;
		
		var rectY;
		if( rectTotalLength > 0 )
			rectY = nextY;
		else
			rectY = sh * 0.5;
		
		var kakudo = 180 - ( 90 + angle );
		var radian = kakudo * HENKAN_ANGLE;
		
		nextY = rectY + rectH * Math.cos( radian );
		
		rectTotalLength += rectH;

		// 四角を描く
		ctx.beginPath();
		
		ctx.fillStyle = GetRandomColor( );
		ctx.translate( rectX, rectY );
		ctx.rotate( angle * HENKAN_ANGLE );
		ctx.fillRect( 0, -rectW * 0.5, rectH, rectW );
		ctx.fill();

		// 状態を復元
		ctx.restore();
	}
	
	
	// ---------------------------------
	// ランダムな色を返す
	// ---------------------------------
	function GetRandomColor( ) 
	{
		var min = 20;
		
		var r = min + Math.floor( Math.random( ) * ( 256 - min ) );
		var g = min + Math.floor( Math.random( ) * ( 256 - min ) );
		var b = min + Math.floor( Math.random( ) * ( 256 - min ) );
		
		return 'rgb(' + r + ',' + g + ',' + b + ')';
	}
	
	
	// ---------------------------------
	// 四角形の高さ
	// ---------------------------------
	function GetRandomRectHeight( ) 
	{
		var h = 10 + Math.floor( Math.random( ) * rectHeightRange );
		return h;
	}
	
	
	// ---------------------------------
	// 角度を返す
	// ---------------------------------
	function GetRandomAngle( ) 
	{
		var angle = Math.floor( Math.random( ) * angleRange ) - angleRange * 0.5;
		return angle;
	}
	
	
	// ---------------------------------
	// リセット
	// ---------------------------------
	function ReSet( ) 
	{
		ClearCanvas( );
		
		if( rectWidth >= 100 )
			rectWidth = 1 + Math.floor( Math.random( ) * 5 );
		else
			rectWidth = 100 + Math.floor( Math.random( ) * 200 );
			
		rectTotalLength= 0;
		nextX = 0;
		nextY = 0;
		
		lineType = Math.floor( Math.random( ) * 4 );
	}
	
	
	// ---------------------------------
	// 描画されてる図形を全て削除
	// ---------------------------------
	function ClearCanvas( ) 
	{
		// ステージの大きさ
		var sw = window.innerWidth;
		var sh = window.innerHeight;
	
		// canvas
		var canvas = document.getElementById( 'canvasmain' );

		// 表示領域をステージに合わせる
		canvas.width  = sw;
		canvas.height = sh;

		// canvas要素の存在チェックとCanvas未対応ブラウザの対処
		if ( ! canvas || ! canvas.getContext ) return false;

		// 2Dコンテキスト
		var ctx = canvas.getContext('2d');

		// 全て消去
		ctx.clearRect( 0, 0, sw, sh );
	}