// =============================================================================
// 画像ロールオーバー管理クラス
// =============================================================================
/*
   MultipleImage クラスy

   最終更新日:2004年3月17日(水)
   -----------------------------------------------------------------------------

   依存
	sniffer.js

   -----------------------------------------------------------------------------

   コンストラクタの引数
	無し			- 無しの場合はすなわち後から設定する場合。
				  例えば「ロールオーバー」ではない用途に使う場合や、
				  画像の切り替えのイベント呼び出しが画像を囲む
				  リンクからではなくて特殊な場合など

	or

	String url		- "on"と"off"だけの切り替えであれば、
				  コンストラクタに画像のパスを二つ渡すと、
				  勝手に"on"と"off"の状態を設定します。

				  "off"の画像ファイル名だけを一つ渡すと、
				  OVEREDIMAGESUFFIXで設定された接尾辞を"_"の後にくっつけて
				  "on"用の状態も作ります（addStateします）。

	or

	HTMLImageElement object - 切り替えたい画像のエレメントを直接渡した場合は、
				  SRC属性の内容を取ってきて勝手に"on"と"off"を設定します。
				  HTMLエレメントが出来てからの設定になるので、
				  画像の先読みができない欠点があります。
				  
   -----------------------------------------------------------------------------

   設定
	String OUTIMAGESUFFIX	- ロールアウト時の画像ファイル名の接尾辞
				  （コンストラクタ関数に引数を一つだけ渡した時の処理）
	String OVERIMAGESUFFIX	- ロールオーバー時の画像ファイル名の接尾辞
				  （コンストラクタ関数に引数を一つだけ渡した時の処理）

   -----------------------------------------------------------------------------

   メソッド
	- init( [url, url] )
		初期化

	- setImageObject( imageObject )
		Imageオブジェクトを設定する。

	- addState( state, url )
		画像の状態を追加する。

	- attachEventToParent( eventname, state )
		画像の親アンカーにイベントを追加し、対応した状態を設定する。

	- changeTo( state )
		状態を変更する。

*/
// =============================================================================
if(sniffer.DOMable()) {



// -----------------------------------------------------------------------------
/*
   コンストラクタ
*/
function MultipleImage() {
	this.imageObject = null;
	this.states = null;
	this.rollover = false;

	if(arguments.length == 0)
	{
		this.init();
	}
	else
	{
		this.init();

		//引数が来た場合はもう強制でロールオーバーです。
		this.rollover = true;

		//onとoff両方分のSRCが来た場合
		if(arguments.length == 2) {
			this.addState("on", arguments[0]);
			this.addState("off", arguments[1]);
		}

		//一個しかこなかった場合
		else if(arguments.length == 1) {
			var offSrc = "";

			if(typeof arguments[0] == "object") {
				offSrc = arguments[0].src;
				this.setImageObject(arguments[0]);
			}
			else {
				offSrc = arguments[0];
			}

			var extension = offSrc.substring(offSrc.lastIndexOf("."), offSrc.length);
			var outRegExp = new RegExp(extension, "i");
			var outRegExpWithSuf = new RegExp("_"+this.OUTIMAGESUFFIX+extension, "i");

			if(outRegExpWithSuf.test(offSrc))	{
				this.addState("on", offSrc.replace(outRegExpWithSuf, "_"+this.OVERIMAGESUFFIX+extension));
			}
			else {
				this.addState("on", offSrc.replace(outRegExp, "_"+this.OVERIMAGESUFFIX+extension));
			}

			this.addState("off", offSrc);
		}
	}
}
// -----------------------------------------------------------------------------



// -----------------------------------------------------------------------------
/*
   動作設定
*/
MultipleImage.prototype.OUTIMAGESUFFIX = "off";	//ロールアウト時画像の接尾辞
MultipleImage.prototype.OVERIMAGESUFFIX = "on";	//ロールオーバー時画像の接尾辞
// -----------------------------------------------------------------------------



// -----------------------------------------------------------------------------
/*
   initメソッド
   	Null multipleImage.init()
*/
MultipleImage.prototype.init = function() {
	this.imageObject = new Object();
	this.states = new Object();
}
// -----------------------------------------------------------------------------



// -----------------------------------------------------------------------------
/*
   addStateメソッド
	Null multipleImage.addState( state, url )

		String state		-	新たに加える状態
		String url		-	その状態用の画像ファイルのURL
*/
MultipleImage.prototype.addState = function( state, url ) {
	this.states[state] = new Image();
	this.states[state].src = url;
}
// -----------------------------------------------------------------------------



// -----------------------------------------------------------------------------
/*
   attachEventToParentメソッド
	Null multipleImage.attachEventToParent( eventname, state )

		String eventname	-	親エレメントに付加するイベント
		String state		-	そのイベントが発生した際に表示される状態
*/
MultipleImage.prototype.attachEventToParent = function( eventname, state ) {
	var parentAnchor = this.imageObject.parentNode;

	var self = this;
	if(typeof parentAnchor.addEventListener != "undefined")
	{
		parentAnchor.addEventListener(eventname, function(){self.changeTo(state)}, false);
	}
	else if(typeof parentAnchor.attachEvent != "undefined")
	{
		parentAnchor.attachEvent("on"+eventname, function(){self.changeTo(state)});
	}
	else
	{
		parentAnchor["on"+eventname] = function() {self.changeTo(state);};
	}
}
// -----------------------------------------------------------------------------



// -----------------------------------------------------------------------------
/*
   setImageObjectメソッド
	Null multipleImage.setImageObject( imageObject )

		Image imageObject	-	変更される画像オブジェクト
*/
MultipleImage.prototype.setImageObject = function( imageObject ) {
	this.imageObject = imageObject;
	
	//onとoffだけの簡易型の場合、ここでイベント付加
	if( this.rollover )
	{
		this.attachEventToParent( "mouseover", "on" );
		this.attachEventToParent( "mouseout", "off" );
	}
}
// -----------------------------------------------------------------------------



// -----------------------------------------------------------------------------
/*
   changeToメソッド
	Null multipleImage.changeTo( state )

		String state		-	変更したい状態
*/
MultipleImage.prototype.changeTo = function( state ) {
	if(this.imageObject)
	{
		this.imageObject.src = this.states[state].src;
	}
}
// -----------------------------------------------------------------------------



}