/*------------------------------------------------------------------------------------
 *  waterfall JavaScript
 *  
 *  http://www.skyld.net (2008.8.21)
 *------------------------------------------------------------------------------------
[使用法]

<dl class="dropdown">    ⇒  重なるように移動
<dl class="accordion">   ⇒  下のコンテンツも連動して移動
<dl title="two">         ⇒  任意の名前　※<dl>,<dt>,<dd>でtitleとidの接頭語を揃える
<dt id="ddheader-two">   ⇒  任意の名前　※<dl>,<dt>,<dd>でtitleとidの接頭語を揃える
<dd id="ddcontent-two">  ⇒  任意の名前　※<dl>,<dt>,<dd>でtitleとidの接頭語を揃える

--------------------------------------------------------------------------------------
[使用例]

<dl class="accordion" title="seven">
	<dt id="ddheader-seven">Dropdown Three</dt>
	<dd id="ddcontent-seven">
		<ul>
			<li><a href="#" class="underline">Navigation Item 1</a></li>
			<li><a href="#" class="underline">Navigation Item 2</a></li>
			<li><a href="#" class="underline">Navigation Item 3</a></li>
		</ul>
	</dd>
</dl>
------------------------------------------------------------------------------------*/


/************************************************

addEventListenerをIEでも使えるようにする処理

************************************************/

//set object
var dom = new Object;
dom.event = new Object;


//add event for all browser
dom.event.addEventListener = function(elm,type,func){
	if(!elm){return false;}
	if(elm.addEventListener){
		elm.addEventListener(type,func,false);
	}else if(elm.attachEvent){
		elm.attachEvent("on"+type,func);
	}else{
		return false;
	}
	return true;
}

//remove event for all browser
dom.event.removeEventListener = function(elm,type,func){
	if(!elm){return false;}
	if(elm.removeEventListener){
		elm.removeEventListener(type,func,false);
	}else if(elm.detachEvent){
		elm.detachEvent("on"+type,func);
	}else{
		return false;
	}
	return true;
}


/************************************************

関数を実行 

************************************************/

//配列を宣言
var menuid = new Array;
var trigger = new Array;
var target = new Array;

//windowロード時に関数を実行
dom.event.addEventListener(window,'load',waterfall);


function waterfall() {
	//メニューの名前を定義
	var alldl = document.getElementsByTagName('dl');
	for(var i=0; i < alldl.length; i++){
		if(alldl[i].className.match("dropdown") || alldl[i].className.match("accordion")){
			menuid[i] = alldl[i].title;
		}
	}

	//for文からiを分離するために匿名関数を利用
	var closure = function(trigger,target,id){
		//triggerとtargetを制御
		dom.event.addEventListener(trigger,'mouseover',function(){
			ddMenu(id,1);
		})
		dom.event.addEventListener(trigger,'mouseout',function(){
			ddMenu(id,-1);
		})
		dom.event.addEventListener(target,'mouseover',function(){
			cancelHide(id);
		})
		dom.event.addEventListener(target,'mouseout',function(){
			ddMenu(id,-1);
		})
	}
	
	//メニューの数だけclosure関数を実行
	for (var i=0; i < menuid.length; i++) {
		trigger[i] = document.getElementById('ddheader-' + menuid[i]);
		target[i] = document.getElementById('ddcontent-' + menuid[i]);
		closure(trigger[i],target[i],menuid[i]);
	}
}

/***********************************
メニューの動きを制御

dir= 1 ⇒ (idで指定した)要素が現れる
dir=-1 ⇒ (idで指定した)要素が消える
***********************************/ 

// 流れるスピードを定義
var DDSPEED = 7; // デフォルト=10
var DDTIMER = 15; // デフォルト=15

// waterfallメイン関数
function ddMenu(id,dir) {
  var head = document.getElementById('ddheader-' + id);
  var cont = document.getElementById('ddcontent-' + id);
  clearInterval(cont.timer);
  clearTimeout(head.timer);
  if(dir == 1) { // dir=1のとき(idで指定した)要素が現れる
    if(cont.offsetHeight >= cont.maxh) {
      return; // contが全開(高さがmaxh）のときは処理しない
    } else {
				cont.style.display = 'block';
				cont.style.height = 'auto';
				cont.maxh = Math.round(cont.offsetHeight);
				cont.style.height = '0px';
		} 
    cont.timer = setInterval("ddSlide('ddcontent-" + id + "', 1)", DDTIMER);
  } else { // dir=-1のとき(idで指定した)要素が消える
    head.timer = setTimeout("ddCollapse('ddcontent-" + id + "')", 50);
  }
}

// メニューを消していく処理
function ddCollapse(id) { // ddSlideにdir=-1を渡すための関数
  var cont = document.getElementById(id);
  cont.timer = setInterval("ddSlide('" + id + "', -1)", DDTIMER);
}

// ドロップダウンメニューからロールアウトした際のキャンセル処理
function cancelHide(id) {
  var head = document.getElementById('ddheader-' + id);
  var cont = document.getElementById('ddcontent-' + id);
  clearTimeout(head.timer);
  clearInterval(cont.timer);
  if(cont.offsetHeight < cont.maxh) {
    cont.timer = setInterval("ddSlide('ddcontent-" + id + "', 1)", DDTIMER);
  }
}

// ドロップダウンの速度を制御
function ddSlide(id,dir) {
  var cont = document.getElementById(id);
  var currheight = cont.offsetHeight;
  if(dir == 1) { // 現れるときの加速度
    dist = (Math.round((cont.maxh - currheight) / DDSPEED)); // dist:縦方向の移動量
  } else { // 消えるときの加速度
    dist = (Math.round(currheight / DDSPEED));
  }
  cont.style.height = Math.round(currheight + (dist * dir)) + 'px';
  if(dist < 0.02){ //移動スピードが遅くなったら
		if(dir == 1){
			cont.style.height = cont.maxh + 'px';
      cont.style.height = 'auto';
			return;
		} else {
			cont.style.height = '0px';
			return;
		}
  }
}