// 切り替え用スクリプト
// update 10/11/17

// 現在表示させるKeyVisualのID
var visible_id = 1;
// タイマー用変数
var wait_time = 5000;
var loop_timer;
var mouse_timer;
 
//_____________________/
// 初期化の関数
$(document).ready(
	function()
	{
		//$(document).pngFix();
		for( i = 2; i <= 3; i++ )
		{
			$( "#key_0" + i + "0" ).fadeTo( 0, 0 );
		}
		// タイマー開始
		loop_start();
	}
);
 
//_____________________/
// タイマー開始
function loop_start()
{
	this.loop_stop();
	// タイマー開始
	// 4秒後にonTimerCompleteをcall
	this.loop_timer = setInterval( this.onTimerComplete, this.wait_time );
}
 
//_____________________/
// タイマー停止
function loop_stop()
{
	clearInterval( this.loop_timer );
}

//_____________________/
// タイマーコンプリート
function onTimerComplete()
{
	this.loop_stop();
	
	this.wait_time = 5000;
	
	// 変数prevにvisible_idを代入
	var prev = this.visible_id;
	// visible_idをカウントアップ
	this.visible_id++;
	if( this.visible_id > 3 )
	{
		this.visible_id = 1;
	}
	
	document.getElementById( "keyWrapper" + prev ).style.zIndex = 1;
	document.getElementById( "keyWrapper" + this.visible_id ).style.zIndex = 3;
	
	$( "#key_0" + prev + "0" ).fadeTo( 400, 0 );
	$( "#key_0" + this.visible_id + "0" ).fadeTo( 800, 1, this.onFadeInComplete );
	
	document.images[ "btn" + prev ].src = "/images/btn" + prev + "_def.png";
	document.images[ "btn" + this.visible_id ].src = "/images/btn" + this.visible_id + "_over.png";
}

//_____________________/
// onFadeInComplete.
function onFadeInComplete()
{
	loop_start();
}
 
//___________________________________/
// change_key
// @param : id
function change_key( id )
{
	this.loop_stop();
	this.mouse_stop();
	
	this.wait_time = 30000;
	
	if( this.visible_id != id )
	{
		// 変数prevにvisible_idを代入
		var prev = this.visible_id;
		// visible_idをカウントアップ
		this.visible_id = id;
		
		document.getElementById( "keyWrapper" + prev ).style.zIndex = 1;
		document.getElementById( "keyWrapper" + this.visible_id ).style.zIndex = 3;
		
		$( "#key_0" + prev + "0" ).fadeTo( 400, 0 );
		$( "#key_0" + this.visible_id + "0" ).fadeTo( 800, 1, this.onFadeInComplete );
		
		document.images[ "btn" + prev ].src = "/images/btn" + prev + "_def.png";
		document.images[ "btn" + this.visible_id ].src = "/images/btn" + this.visible_id + "_over.png";
	}
}
 
//___________________________________/
// onOver.
// @param : id
// @param : path
function onOver( id, path )
{
	this.loop_stop();
	this.mouse_stop();
	
	document.images[ id ].src = path;
}
 
//___________________________________/
// onOut.
// @param : id
// @param : path
function onOut( id, path )
{
	this.mouse_start();
	
	if( this.visible_id != id.substring( 3, 4 ) )
	{
		document.images[ id ].src = path;
	}
}
 
//___________________________________/
// onMouseTimerComplete.
function onMouseTimerComplete()
{
	this.mouse_stop();
	this.loop_start();
}

//___________________________________/
// mouse_start.
function mouse_start()
{
	this.mouse_stop();
	this.mouse_timer = setInterval( onMouseTimerComplete, 600 );
}

//___________________________________/
// mouse_stop.
function mouse_stop()
{
	clearInterval( this.mouse_timer );
}