// <a id="m1_*"><img src="初期画像" /></a>
// <a の中に、複数の要素を入れないで下さい。

// 各種設定値
var c_m1_Speed = 1 ;

if( isIE() ){
	var c_m1_Interval	= 20 ;	// 10/1000 秒毎に再描画
	var c_m1_ChangeTime	= 50 ;	// c_m1_Interval が 10 なら、100 で １秒、50 で 0.5 秒
} else {
	var c_m1_Interval	= 20 ;	// 10/1000 秒毎に再描画
	var c_m1_ChangeTime	= 50 ;	// c_m1_Interval が 10 なら、100 で １秒、50 で 0.5 秒
}

// 各種固定値
var c_m1_Rayer2 = 2 ;
var c_m1_Rayer3 = 3 ;

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

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

	var m_Anchors = document.getElementsByTagName( "a" );
	for( var i = 0 ; i < m_Anchors.length ; i++ ){
		if( m_Anchors[i].id.match("m1_") ){
			m1_swapImage( m_Anchors[i].id );
		}
	}
}

function m1_swapImage( p_AnchorID ){
	// 対象の a を探す
	var m_Target = document.getElementById( p_AnchorID );
	m_Target.style.border = "none 0px" ;
	m_Target.setAttribute( "mode", -1 );
	m_Target.setAttribute( "step", 0 );

	// 現在設定されているイメージのサイズを取得してから削除
	var m_Actual = getActualDimension( m_Target.childNodes[0] );
	m_Width  = m_Actual.width ;
	m_Height = m_Actual.height ;
	m_Left = m_Target.childNodes[0].left ;
	m_Top = m_Target.childNodes[0].top ;
	m_SrcFile = m_Target.childNodes[0].src ;
	m_SrcPath = m_SrcFile.split( "/" ).slice( 0, -1 ).join( "/" );

	m_Target.removeChild( m_Target.childNodes[0] );

	// 旧 img と同サイズの div を追加
	var m_NewParent = document.createElement( 'div' );
	m_NewParent.id = p_AnchorID +"_0" ;
	m_NewParent.style.width		= m_Width  +"px" ;
	m_NewParent.style.height	= m_Height +"px" ;
	m_NewParent.style.margin	= "0px" ;
	m_NewParent.style.padding	= "0px" ;
	m_NewParent.style.border	= "none 0px" ;

	m_NewParent.style.overflow	= "hidden" ;
	m_Target.appendChild( m_NewParent ); 

	// 新規に div を３つ追加
	var m_NewElement ;
	for( i = 1 ; i <= 3 ; i ++ ){
		m_NewDiv = document.createElement( 'div' );
		m_NewDiv.id = p_AnchorID +"_" +i ;
		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.overflow	= "hidden" ;
		m_NewDiv.style.position	= "absolute" ;
		m_NewDiv.style.display	= "block" ;

		m_NewImg = document.createElement( 'img' );
		m_NewImg.id  = p_AnchorID +"_" +i +"img" ;
		m_NewImg.src = m_SrcPath + "/" +p_AnchorID +"_" +i +".gif" ;
		m_NewImg.style.border	= "none 0px" ;
		m_NewImg.style.display	= "block" ;
		if( i == 3 ){
			m_NewImg.style.top = "-" +m_Height +"px" ;
			m_NewImg.style.position	= "absolute" ;
		}
		m_NewDiv.appendChild( m_NewImg );

		m_NewParent.appendChild( m_NewDiv ); 

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

	// Attach Events
	m_Target.onmouseover = function(){
		m1_onMouseOver( this );
	}
	m_Target.onmouseout = function(){
		m1_onMouseOut( this );
	}

	// 定期描画開始
	setInterval( "m1_drawMenus()", c_m1_Interval );
}

function m1_onMouseOver( p_Anchor ){
	// 下に降りる時は mode = 1
	p_Anchor.setAttribute( "mode", 1 )
}

function m1_onMouseOut( p_Anchor ){
	// 上に戻る時は mode = -1
	p_Anchor.setAttribute( "mode", -1 )
}

function m1_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 ;
	}
}

function m1_drawMenus(){
	var m_Anchors = document.getElementsByTagName( "a" );
	for( var i = 0 ; i < m_Anchors.length ; i++ ){
		if( m_Anchors[i].id.match("m1_") ){
			m1_drawMenu2( m_Anchors[i] );
			m1_drawMenu3( m_Anchors[i] );
			m1_setStep( m_Anchors[i] );
		}
	}
}

function m1_setStep( p_Anchor ){
	var m_Step = p_Anchor.getAttribute( "step" );
	var m_Mode = p_Anchor.getAttribute( "mode" );
	if( m_Mode == 1 ){
		// ステップを次に進める
		m_Step ++ ;
		if( c_m1_ChangeTime < m_Step ){
			m_Step = c_m1_ChangeTime ;
		}
	} else {
		// ステップを減少
		m_Step -- ;
		if( m_Step < 0 ){
			m_Step = 0 ;
		}
	}
	p_Anchor.setAttribute( "step", m_Step );
}

function m1_drawMenu3( p_Anchor ){
	// step に応じた描画
	var m_Step = p_Anchor.getAttribute( "step" );

	var m_TargetImageName = p_Anchor.id +"_" +c_m1_Rayer3 +"img" ;
	var m_TargetImage = document.getElementById( m_TargetImageName );
	var m_Top = Number( m_TargetImage.style.top.replace( "px", "" ) );

	var m_BaseDivName = p_Anchor.id +"_" +"1" ;
	var m_BaseDiv = document.getElementById( m_BaseDivName );
	var m_OrgHeight = Number( m_BaseDiv.style.height.replace( "px", "" ) );

	var m_Top = -m_OrgHeight +m_OrgHeight *( m_Step /c_m1_ChangeTime );
	m_TargetImage.style.top = m_Top +'px' ;
}

function m1_drawMenu2( p_Anchor ){
	// _2 の div の height を操作する
	var m_TargetDivName = p_Anchor.id +"_" +c_m1_Rayer2 ;
	var m_TargetDiv = document.getElementById( m_TargetDivName );
	var m_NowHeight = Number( m_TargetDiv.style.height.replace( "px", "" ) );

	var m_BaseDivName = p_Anchor.id +"_" +"1" ;
	var m_BaseDiv = document.getElementById( m_BaseDivName );
	var m_OrgHeight = Number( m_BaseDiv.style.height.replace( "px", "" ) );

	var m_Step = p_Anchor.getAttribute( "step" );

	if( p_Anchor.getAttribute( "mode" ) == -1 ){
		// 上昇
/*
		m_NowHeight -= 10 ;
		if( m_NowHeight < 0 ){
			m_NowHeight = 0 ;
		}
		m_TargetDiv.style.height = ( m_NowHeight ) +'px' ;
		p_Anchor.setAttribute( "step", 0 );
*/

		m_Height = m_OrgHeight *( m_Step /c_m1_ChangeTime );
		m_TargetDiv.style.height = ( m_Height ) +'px' ;

	} else {
		// 下降
		m_Height = m_OrgHeight *( m_Step /c_m1_ChangeTime );
		m_TargetDiv.style.height = ( m_Height ) +'px' ;
	}
}


////////////////////////////////////////
// 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 ;
}

function Debug( p_Message ){
	var m_Target = document.getElementById( 'Debug' );
//	m_Target.innerHTML = p_Message +"<br />" +m_Target.innerHTML ;
	m_Target.innerHTML = p_Message ;
}



////////////////////////////////////////////////////////////
// 以下、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 };
}



