Event.observe(
	window,
	'load',
	function(){
		new initRolloversNew();
		new colorRows();
//		new FlashReload(); //body閉じタグ後に実行させないとバグ？
		new ImageChanger();
		new DisplayChanger();
		new Menu();
	},
	false
);


/*** rolloverNew ***/
/*
■例
<div class="imgover">
	<a><img src="foo.gif"></a>　←反応する
	<a><img src="bar.gif"></a>　←反応する
	<a><img src="foobar.gif" class="imgactive"></a>　←反応しない
	<img src="foo2.gif">　←反応しない
</div>

■解説
<div class="imgover">〜</div>内にあるリンク画像(<a>タグに囲まれている<img>)の
マウスオーバー時に画像が「画像名_o.拡張子」に切り替わる。（foo.gif→foo_o.gif）
もちろんマウスアウトで元の画像に戻る。
リンクでは無い画像や、class="imgactive"を付与された画像ではマウスオーバー時の切替しない。
*/
function initRolloversNew() {
	if (!document.getElementById) return
	
	var aPreLoad = new Array();
	var sTempSrc;
	elm = document.getElementsByTagName("div");

	for (var j = 0; j < elm.length; j++) {
		if (elm[j].className == 'imgover') {
			a=elm[j].getElementsByTagName("a");
			for(k=0;k<a.length;k++){
				if((aImages=a[k].getElementsByTagName("img"))!=null){
					for(i=0;i<aImages.length;i++){
						if(aImages[i].className != 'imgactive'){
							var src = aImages[i].getAttribute('src');
							var ftype = src.substring(src.lastIndexOf('.'), src.length);
							var hsrc = src.replace(ftype, '_o'+ftype);

							aImages[i].setAttribute('hsrc', hsrc);
							
							aPreLoad[i] = new Image();
							aPreLoad[i].src = hsrc;
							
							aImages[i].onmouseover = function() {
								sTempSrc = this.getAttribute('src');
								this.setAttribute('src', this.getAttribute('hsrc'));
							}	
							
							aImages[i].onmouseout = function() {
								if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype);
								this.setAttribute('src', sTempSrc);
							}
						}
					}
				}
			}
		}
	}
}



/*** tableColor ***/
/*
■例
<table class="coloredRow">
	<tr>　←ここがclass="rowTint"に。
		<th></th><td></td>
	</tr>
	<tr>
		<th></th><td></td>
	</tr>
	<tr>　←ここがclass="rowTint"に。
		<th></th><td></td>
	</tr>
</table>

■解説
<table class="coloredRow">〜</table>内のtrタグに交互に
class="rowTint"を付与する。
cssで.rowTintに色をつければ交互色に。

■TODO
ul,ol,dlあたりでもできるように。
*/
function colorRows() {
	table=document.getElementsByTagName("table");
	for(i=0;i<table.length;i++){
		if(table[i].className=='coloredRow'){
			tr=table[i].getElementsByTagName('tr');
			for (j=0;j<tr.length;j++) {
				if(j%2){
					tr[j].className='rowTint';
				}
			}
		}
	}
}



/*** Flash ***/
/*
■例
<script>flash("foo.swf",500,200)</script>

■解説
フラッシュが表示される。
IEセキュリティ対策。
<noscript>も併記しておくと親切。
*/
function flash(swf, width, height){
	document.open();
	document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="');
	document.write(width);
	document.write('" height="');
	document.write(height);
	document.writeln('" align="middle">');
	document.writeln('<param name="allowScriptAccess" value="sameDomain" />');
	document.write('<param name="movie" value="');
	document.write(swf);
	document.writeln('" />');
	document.writeln('<param name="quality" value="high" />');
	document.writeln('<param name="wmode" value="transparent" />');
	document.write('<embed src="');
	document.write(swf);
	document.write('" quality="high" width="');
	document.write(width);
	document.write('" height="');
	document.write(height);
	document.writeln('" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');
	document.writeln('</object>');
}


/*** IE ActiveX対策 ***/
/*
■例
<div class="flaFix">
	<object>〜〜</object>
</div>
■解説
フラッシュが表示される。
IEセキュリティ対策。
*/
function FlashReload(){
	fla = document.getElementsByClassName('flaFix');
	for(i=0;i<fla.length;i++){
		fla[i].innerHTML=fla[i].innerHTML;
	}
}



/*** 画像切替 ***/
/*
■例
ターゲットが別オブジェクトの場合
<a class="chimg" chimg="hogehoge">text</a>
<img src="foo.gif" id="hogehoge">

ターゲットがオブジェクト自身の場合
<img src="hogehoge.gif" class="chimg" />
<input type="image" src="hogehoge.gif" class="chimg" />

<a href="" chimg="hogehoge"><img src="hogehoge.gif" id="hogehoge" /></a>

■解説
class="chimg"のリンクにマウスオーバーでchimg=""に指定したIDの画像が
chimg=""が指定されてなかったら自分自身の画像が
「画像名_o.拡張子」に切り替わる。（foo.gif→foo_o.gif）
もちろんマウスアウトで元の画像に戻るよ。
*/
var ImageChanger=Class.create();

ImageChanger.prototype={
	initialize: function(){
		this.changer=document.getElementsByClassName("chimg");
		
		for(i=0;i<this.changer.length;i++){
			Event.observe(this.changer[i],'mouseover',this.changeImage.bindAsEventListener(this),false);
			Event.observe(this.changer[i],'mouseout',this.returnImage.bindAsEventListener(this),false);
		}
	},
	
	changeImage: function(e){
		var src=Event.element(e);
		var chimg=src.getAttribute("chimg");
		if(chimg==null){
			var target=src;
		}else{
			var target=$(chimg);
		}
		var img=target.getAttribute("src");
		var ftype = img.substring(img.lastIndexOf('.'), img.length);
		var hsrc = img.replace(ftype, '_o'+ftype);
		target.setAttribute("src", hsrc);
		return;
	},
	
	returnImage: function(e){
		var src=Event.element(e);
		
		var chimg=src.getAttribute("chimg");
		if(chimg==null){
			var target=src;
		}else{
			var target=$(chimg);
		}
		var img=target.getAttribute("src");
		var ftype = img.substring(img.lastIndexOf('.'), img.length);
		var hsrc = img.replace('_o'+ftype, ftype);
		target.setAttribute("src", hsrc);
		return;
	}
};



/*** 表示/非表示の切替 ***/
/*
■例
<a class="chdisp" chdisp="hogehoge1">text</a>
<a class="chdisp" chdisp="hogehoge2">text</a>
<div id="hogehoge1" class="cheddisp">sample text 1</div>
<div id="hogehoge2" class="cheddisp">sample text 2</div>
<div id="chdispdefault" class="cheddisp">default sample text</div>


■解説
class="chdisp"のリンクにマウスオーバーでchdisp=""に指定したIDがdisplay:blockで表示される。
class="cheddisp"が指定された他のタグはすべてdisplay:noneで見えなくなる。
マウスアウトでそれぞれのタグのchdispdefaultで指定したIDのタグが表示されて他のタグは非表示になる。

TODO:
	複数グループ対応
*/
var DisplayChanger=Class.create();

DisplayChanger.prototype={
	initialize: function(){
		this.changer=document.getElementsByClassName("chdisp");
		
		for(i=0;i<this.changer.length;i++){
			Event.observe(this.changer[i],'mouseover',this.changeDisp.bindAsEventListener(this),false);
			Event.observe(this.changer[i],'mouseout',this.returnDisp.bindAsEventListener(this),false);
		}
		
		this.changee=document.getElementsByClassName("cheddisp");
		this.dispdefault=$("chdispdefault");
		for(i=0;i<this.changee.length;i++){
			this.changee[i].style.display="none";
		}
		if(this.dispdefault!=null){
			this.dispdefault.style.display="block";
		}
	},
	
	changeDisp: function(e){
		var src=Event.element(e);
		while(!src.hasAttribute("chdisp")){
			src=src.parentNode;
		}
		
		var target=src.getAttribute("chdisp").split(" ");
		
		for(i=0;i<this.changee.length;i++){
			this.changee[i].style.display="none";
		}
		for(i=0;i<target.length;i++){
			$(target[i]).style.display="block";
		}
		return true;
	},
	
	returnDisp: function(e){
		for(i=0;i<this.changee.length;i++){
			this.changee[i].style.display="none";
		}
		if(this.dispdefault!=null){
			this.dispdefault.style.display="block";
		}
		return true;
	}
};


/*** ドロップダウンメニュー ***/
/*
■例
=== HTML ===
<ul id="ddMenu">
	<li></li>
	<li>
		<ul>
			<li></li>
			<li>
				<ul>
					<li></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

=== CSS ===
#ddMenu{}
	#ddMenu li{ ←親階層
		position:relative;
	}
		#ddMenu li ul{ ←子階層
			display:none;
			position:absolute;
		}
		#ddMenu li:hover ul,
		#ddMenu li.hover ul{ ←mouseover
				display:block;
		}
			#ddMenu li li{}
				#ddMenu li li ul,
				#ddMenu li:hover li ul,
				#ddMenu li.hover li ul{ ←孫階層
					display:none;
				}
				#ddMenu li:hover li:hover ul,
				#ddMenu li.hover li.hover ul{ ←mouseover
						display:block;
				}

■解説
liのマウスオーバー時に「hover」クラスを追加。
あとはご随意に。

*/

var Menu=Class.create();

Menu.prototype={
	initialize: function(){
		this.top=$("ddMenu");
		if(this.top != null){
			var li=this.top.getElementsByTagName("li");
			for(i=0;i<li.length;i++){
				li[i].onmouseover=function(){
					this.className+=" hover";
				}		//this.dispChild;
				li[i].onmouseout=function(){
					this.className=this.className.replace(new RegExp("hover\\b"),"");
				}		//this.hiddenChild;
			}
		}
	},
	
	dispChild: function(e){
		var src=Event.findElement(e,"li");
		var c=src.className.split(" ");
		c.push("hover");
		
		src.className=c.join(" ");
	},
	
	hiddenChild: function(e){
		var src=Event.findElement(e,"li");
		src.className=src.className.replace(new RegExp("hover"),"");
	}
};