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

////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////
// 定数・変数

////////////////////////////////////////
// 各種設定値
var c_m4_ChangeTime	= 500 ;	// 500 で 0.5 秒
var c_m4_MainImage	= 'topMainImg' ;

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

////////////////////////////////////////
// グローバル変数

////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////
// 各種関数

////////////////////////////////////////
// 初期化処理
if( window.addEventListener ){
	// W3C DOM
	window.addEventListener( "load", m4_init, false );
} else if( window.attachEvent ){
	// IE
	window.attachEvent( "onload", m4_init );
} else {
	window.onload = m4_init ;
}

function m4_init(){
	if( !document.getElementsByTagName ){
		// タグが何もない
		return ;
	}

	m4_init_MainImage();
	m4_init_SubImage();
}

function m4_init_MainImage(){
	// c_m4_MainImage の入れ替え
	var m_Target = document.getElementById( c_m4_MainImage );
	m_SrcFile = m_Target.src ;

	var m_NewDiv = makeDiv( c_m4_MainImage );

	// 上記 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 ;
	m_NewImg2.style.position= "absolute" ;
	m_NewImg2.style.opacity	= 0 ;
	m_NewImg2.style.filter	= "alpha(opacity=0)" ;
	m_NewDiv.appendChild( m_NewImg2 );
}

function m4_init_SubImage(){
	// id が m4_ で始まる img の入れ替え

	var m_Target = document.getElementById( c_m4_MainImage );
	m_SrcFile = m_Target.src ;

	var m_Images = document.getElementsByTagName( "img" );
	for( var i = 0 ; i < m_Images.length ; i++ ){
		if( m_Images[i].id.match("m4_") ){
			var m_Target = document.getElementById( m_Images[i].id );
			m_SrcFile = m_Target.src ;
			var m_NewDiv = makeDiv( m_Images[i].id );
			m_NewDiv.style.cursor = 'pointer' ;

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

			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 );
			m_NewDiv.appendChild( m_NewImg1 );

			// Attach Events
			m_NewDiv.onmouseover = function(){
				m4_onMouseOver( this );
			}
			m_NewDiv.onmouseout = function(){
				m4_onMouseOut( this );
			}
			m_NewDiv.onclick = function(){
				m4_onClick( this );
			}
		}
	}
}

////////////////////////////////////////
// サムネイルの画像に Mouse Over したときの処理
function m4_onMouseOver( p_Div ){
	var m_SrcFile = p_Div.src ;
	var m_Sub_on  = p_Div.childNodes[0];
	var m_Sub_off = p_Div.childNodes[1];

	var m_Target = document.getElementById( c_m4_MainImage );
	var m_Target_front = m_Target.childNodes[0];
	var m_Target_back  = m_Target.childNodes[1];

	// front を非表示に
	m_Target_front.style.opacity = 0 ;
	m_Target_front.style.filter = "alpha(opacity=" +(0*100) +")" ;
	// front の画像を back の画像に差し替え
	m_Target_front.src = m_Target_back.src ;
	var m_Str  = m_Sub_off.src.replace( "_off.", "." ) ;
	m_Str = m_Str.replace( "_on.", "." ) ;
	m_Target_back.src  = m_Str ;

	// back を非表示に
	m_Target_back.style.opacity = 0 ;
	m_Target_back.style.filter = "alpha(opacity=" +(0*100) +")" ;
	// front を表示
	m_Target_front.style.opacity = 1 ;
	m_Target_front.style.filter = "alpha(opacity=" +(1*100) +")" ;

	//
	$( m_Target_back  ).fadeTo ( c_m4_ChangeTime, 1 );
	$( m_Target_front ).fadeTo ( c_m4_ChangeTime, 0 );

	// サムネイルを 50% fadeOut
	$( m_Sub_off ).fadeTo( c_m4_ChangeTime, 0.5 );
}

////////////////////////////////////////
// サムネイルの画像から Mouse Out したときの処理
function m4_onMouseOut( p_Div ){
	var m_Sub_on  = p_Div.childNodes[0];
	var m_Sub_off = p_Div.childNodes[1];

	$( m_Sub_off ).fadeTo( c_m4_ChangeTime, 1 );
}

////////////////////////////////////////
// 親要素をたどって、A があれば、そこに遷移する
function m4_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 ;
	}
}

////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////
// 共通関数

////////////////////////////////////////
// img と同サイズの div を作成して置換する
// img の ID 渡し、div のオブジェクト返し
function makeDiv( p_ImageID ){
	var m_Target = document.getElementById( p_ImageID );
	if( m_Target == null ){
		return null ;
	}

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

	// 旧 img と同サイズの div を作成
	var m_NewDiv = document.createElement( 'div' );
	m_NewDiv.id = p_ImageID ;
	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" ;

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

	return m_NewDiv ;
}

////////////////////////////////////////
// <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 getOriginalSize( p_Image ){
	var c_Key = "actual" ;
	var m_RTStyle, m_RTStyleOld, m_Width, m_Height ;

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

	if( "src" in p_Image ){
		if( p_Image[c_Key] && p_Image[c_Key].src === p_Image.src ){
			return( p_Image[c_Key] );
		}
		if( document.uniqueID ){
			// for IE
			m_RTStyle = p_Image.runtimeStyle ;
			m_RTStyleOld = { w:m_RTStyle.width, h:m_RTStyle.height };
			m_RTStyle.width  = "auto" ;
			m_RTStyle.height = "auto" ;
			m_Width  = p_Image.width ;
			m_Height = p_Image.height;
			m_RTStyle.width  = m_RTStyleOld.w ;
			m_RTStyle.height = m_RTStyleOld.h ;
		} else {
			// for Opera and Other
			m_RTStyleOld = { w:p_Image.width, h:p_Image.height };
			p_Image.removeAttribute( "width"  );
			p_Image.removeAttribute( "height" );
			m_Width  = p_Image.width  ;
			m_Height = p_Image.height ;
			p_Image.width  = m_RTStyleOld.w ;
			p_Image.height = m_RTStyleOld.h ;
		}
		return p_Image[c_Key] = { width:m_Width, height:m_Height, src:p_Image.src };
	}
	return{ width:p_Image.width, height:p_Image.height };
}

////////////////////////////////////////////////////////////
// EOF