////////////////////////////////////////////////////////////
// <img id="m3_*_off" src="画像" />

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

////////////////////////////////////////
// 各種設定値
if( isIE() ){
	var c_m3_Interval	= 30 ;	// 10/1000 秒毎に再描画
	var c_m3_ChangeTime	= 10 ;	// c_m3_Interval が 10 なら、100 で １秒、50 で 0.5 秒
} else {
	var c_m3_Interval	= 20 ;	// 10/1000 秒毎に再描画
	var c_m3_ChangeTime	= 50 ;	// c_m3_Interval が 10 なら、100 で １秒、50 で 0.5 秒
}

////////////////////////////////////////
// 各種固定値

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

////////////////////////////////////////
// 初期化処理
if( ! isIE6() && ! isIE7() ){
	if( window.addEventListener ){
		window.addEventListener( "load", m3_init, false );
	} else if( window.attachEvent ){
		window.attachEvent( "onload", m3_init );
	}
}

////////////////////////////////////////
// 該当アイテムの初期化
function m3_init(){
	if( !document.getElementsByTagName ){
		return ;
	}

	// img m3_ の入れ替え
	var m_Images = document.getElementsByTagName( "img" );
	for( var i = 0 ; i < m_Images.length ; i++ ){
		if( m_Images[i].id.match("m3_") ){
			m3_swapImage( m_Images[i].id );
		}
	}

	// 定期描画開始
	setInterval( "m3_drawMenus()", c_m3_Interval );
}

////////////////////////////////////////
// タイトル画像を div + img に変換
function m3_swapImage( p_ImageID ){
	// 現在設定されているイメージの情報を取得
	var m_Target = document.getElementById( p_ImageID );

	var m_Actual = getActualDimension( m_Target );
	m_Width		= m_Actual.width ;
	m_Height	= m_Actual.height ;
	m_SrcFile	= m_Target.src ;
	m_SrcPath	= m_SrcFile.split( "/" ).slice( 0, -1 ).join( "/" );

	// 旧 img と同サイズの div を作成
	var m_NewDiv = document.createElement( 'div' );
	m_NewDiv.id = p_ImageID +"_0" ;
	m_NewDiv.style.width	= m_Width  +"px" ;
	m_NewDiv.style.height	= m_Height +"px" ;
	m_NewDiv.style.margin	= "0px" ;
	m_NewDiv.style.padding	= "0px" ;
	m_NewDiv.style.border	= "none 0px" ;
	m_NewDiv.style.position	= "relative" ;
	m_NewDiv.style.overflow	= "hidden" ;
	m_NewDiv.style.textAlign= "left" ;
	m_NewDiv.setAttribute( "mode", 1 );
	m_NewDiv.setAttribute( "step", 0 );

	// 上記 div の子供に img を設定
	var m_NewImg1 = document.createElement( 'img' );
	m_NewImg1.src = m_SrcFile ;
	m_NewImg1.style.position= "absolute" ;
	m_NewDiv.appendChild( m_NewImg1 );

	var m_NewImg2 = document.createElement( 'img' );
	m_NewImg2.src = m_SrcFile.replace( "_off.", "_on." ) ;
	m_NewImg2.style.position= "absolute" ;
	m_NewImg2.style.opacity	= 0 ;
	m_NewImg2.style.filter	= "alpha(opacity=0)" ;
	m_NewDiv.appendChild( m_NewImg2 );

	// イメージを div に入れ替え
	var m_Parent = m_Target.parentNode ;
	m_Parent.replaceChild( m_NewDiv, m_Target );

	// Attach Events
	m_NewDiv.onmouseover = function(){
		m3_onMouseOver( this );
	}
	m_NewDiv.onmouseout = function(){
		m3_onMouseOut( this );
	}

	m_NewDiv.onclick = function(){
		m3_onClick( this );
	}
}

////////////////////////////////////////
// インターバルでの描画処理
function m3_drawMenus(){
	var m_Divs = document.getElementsByTagName( "div" );
	for( var i = 0 ; i < m_Divs.length ; i++ ){
		if( m_Divs[i].id.match("m3_") ){
			m3_Draw( m_Divs[i] );
		}
	}
}

////////////////////////////////////////
// タイトル画像の描画
function m3_Draw( p_Div ){
	// step に応じた描画
	m_Step = p_Div.getAttribute( "step" );

	var m_Target_off = p_Div.childNodes[0];
	var m_Target_on  = p_Div.childNodes[1];

	m_Opacity = ( m_Step /c_m3_ChangeTime );
	m_Target_off.style.opacity = m_Opacity ;
	m_Target_on.style.opacity  = 1 -m_Opacity ;

	m_Target_off.style.filter	= "alpha(opacity=" +(m_Opacity*100) +")" ;
	m_Target_on.style.filter	= "alpha(opacity=" +((1-m_Opacity)*100) +")" ;

	m_Mode = p_Div.getAttribute( "mode" );
	if( m_Mode == 1 ){
		// ステップを次に進める。終わったら mode2 へ
		m_Step ++ ;
		if( c_m3_ChangeTime < m_Step ){
			m_Step = c_m3_ChangeTime ;
		}
	} else {
		// ステップを減少
		m_Step -- ;
		if( m_Step < 0 ){
			m_Step = 0 ;
		}
	}
	p_Div.setAttribute( "step", m_Step );
}

////////////////////////////////////////
// ボディの画像に Mouse Over したときの処理
function m3_onMouseOver( p_Div ){
	p_Div.setAttribute( "mode", 2 );
}

////////////////////////////////////////
// ボディの画像から Mouse Out したときの処理
function m3_onMouseOut( p_Div ){
	p_Div.setAttribute( "mode", 1 );
}

////////////////////////////////////////
// 親要素をたどって、A があれば、そこに遷移する
function m3_onClick( p_Div ){
	var m_Target = p_Div ;
	while( 1 ){
		var m_Parent = m_Target.parentNode ;
		if( m_Parent == null ){
			return ;
		}
		var m_TagName = m_Parent.tagName.toUpperCase();
		if( m_TagName == "A" ){
			document.location = m_Parent.href ;
			return ;
		}
		m_Target = m_Parent ;
	}
}

////////////////////////////////////////
// IE かどうかを判定
function isIE(){
	m_Ret = false ;

	var m_UserAgent = window.navigator.userAgent.toLowerCase();
	if( 0 <= m_UserAgent.indexOf("msie") ){
		m_Ret = true ;
	}
	return m_Ret ;
}

function isIE6(){
	m_Ret = false ;

	var m_UserAgent = window.navigator.userAgent.toLowerCase();
	if( 0 <= m_UserAgent.indexOf("msie") ){
		var m_AppVersion = window.navigator.appVersion.toLowerCase();
		if( 0 <= m_AppVersion.indexOf("msie 6.0") ){
			m_Ret = true ;
		}
	}

	return m_Ret ;
}

function isIE7(){
	m_Ret = false ;

	var m_UserAgent = window.navigator.userAgent.toLowerCase();
	if( 0 <= m_UserAgent.indexOf("msie") ){
		var m_AppVersion = window.navigator.appVersion.toLowerCase();
		if( 0 <= m_AppVersion.indexOf("msie 7.0") ){
			m_Ret = true ;
		}
	}

	return m_Ret ;
}

////////////////////////////////////////
// <div id="Debug"></div> にテキストを吐き出す
function Debug( p_Message ){
	var m_Target = document.getElementById( 'Debug' );
	if( m_Target != null ){
		m_Target.innerHTML = p_Message +"<br />" +m_Target.innerHTML ;
	}
}

////////////////////////////////////////////////////////////
// 以下、uupaa.js 氏の関数を借用
// usage :   var actual1 = getActualDimension(rhino1);

/* LICENSE: MIT
 * AUTHOR: uupaa.js@gmail.com
 */

function getActualDimension(image) {
	var run, mem, w, h, key = "actual";

	// for Firefox, Safari, Google Chrome
	if ("naturalWidth" in image) {
		return { width:  image.naturalWidth, height: image.naturalHeight };
	}

	if ("src" in image) { // HTMLImageElement
		if (image[key] && image[key].src === image.src) {
			return image[key];
		}
		if (document.uniqueID) { // for IE
			run = image.runtimeStyle;
			mem = { w: run.width, h: run.height }; // keep runtimeStyle
			run.width  = "auto"; // override
			run.height = "auto";
			w = image.width;
			h = image.height;
			run.width  = mem.w; // restore
			run.height = mem.h;
		} else { // for Opera and Other
			mem = { w: image.width, h: image.height }; // keep current style
			image.removeAttribute("width");
			image.removeAttribute("height");
			w = image.width;
			h = image.height;
			image.width  = mem.w; // restore
			image.height = mem.h;
		}
		return image[key] = { width: w, height: h, src: image.src }; // bond
	}
	// HTMLCanvasElement
	return { width: image.width, height: image.height };
}