// tfmenu.js  ver 1.4
// http://www.kakura.jp/pg/tfmenu/
//
// Daisuke Kakura <info@kakura.jp> "2007-07-23 Mon 16:59:12 Cuzco, Peru"
// Some Rights Reserved under Creative Commons License.
// http://creativecommons.org/licenses/by/2.1/jp/

// 設定可能な変数 -----------------------------------------------------------------------
var expand_speed = 50;  // メニュー項目を開閉する速さ (ミリ秒)
var updown_speed =  5;  // メニューが移動する速さ (ミリ秒)
var steps        =  5;  // メニューが updown_speed ミリ秒ごとに移動するピクセル幅
var jump         =   1;  // メニューが離れすぎたら高速移動する (1: yes 0: no)
var sticky       =   0;  // メニューを固定する (1: yes 0: no)

// IE 以外のブラウザでメニューが移動するピクセル幅
// Firefox は IE よりなぜか遅いので、このピクセル幅を増やして対応する
var steps2       =  15;  // メニューが updown_speed ミリ秒ごとに移動するピクセル幅

// メニュー HTML (下記の説明参照)
var menu_html =
"<div id='tfm-head'><a href='http://www.e-sumai21.net/'></a></div>" +
"<div id='tfm-body'>" +
"<div id='item0'     class='tf1'><a href='http://www.e-sumai21.net/'>トップページ</a></div>" +
"<div id='item1'     class='tf1'>会社案内" +
"   <div id='item11' class='tf2'><a href='http://www.e-sumai21.net/info/gaiyou.html'>会社概要</a></div>" +
"   <div id='item12' class='tf2'><a href='http://www.e-sumai21.net/info/staff.html'>スタッフ紹介</a></div>" +
"   <div id='item13' class='tf2'><a href='http://www.e-sumai21.net/info/sozaikan.html'>住まいのショールーム<br />素材館</a></div>" +
"   <div id='item14' class='tf2'><a href='http://www.e-sumai21.net/info/map.html'>ＭＡＰ</a></div>" +
"   <div id='item15' class='tf2'><a href='http://www.e-sumai21.net/info/ask.html'>お問い合わせ</a></div>" +
"</div>" +
"<div id='item2'     class='tf1'>新築" +
// "   <div id='item20' class='tf2'><a href='http://www.e-sumai21.net/shinchiku/ny_kikaku/index.html'>新春特別企画</a></div>" +
"   <div id='item21' class='tf2'><a href='http://www.e-sumai21.net/shinchiku/sawayaka/index.html'>こだわりの注文住宅<br />Newさわや家 TypeF</a></div>" +
"   <div id='item22' class='tf2'><a href='http://www.e-sumai21.net/shinchiku/watashi/index.html'>私が家を建てるまで…</a></div>" +
"   <div id='item23' class='tf2'><a href='http://www.e-sumai21.net/shinchiku/s_example/index.html'>施工事例集</a></div>" +
"   <div id='item24' class='tf2'><a href='http://www.e-sumai21.net/shinchiku/omitsumori/index.html'>お見積フォーム</a></div>" +
"   <div id='item25' class='tf2'><a href='http://www.e-sumai21.net/shinchiku/s_event/index.html'>イベント情報</a></div>" +
"   <div id='item26' class='tf2'><a href='http://www.e-sumai21.net/shinchiku/osusume/index.html'>建売・おすすめプラン</a></div>" +
"</div>" +
"<div id='item3'     class='tf1'>リフォーム" +
"   <div id='item31' class='tf2'><a href='http://www.e-sumai21.net/reform/shuzenya/index.html'>リフォーム部門<br />修繕屋本舗</a></div>" +
"   <div id='item32' class='tf2'><a href='http://www.e-sumai21.net/reform/osusume/index.html'>おすすめ工事<br />季節の修理･修繕</a></div>" +
"   <div id='item33' class='tf2'><a href='http://www.e-sumai21.net/reform/r_example/index.html'>施工事例集</a></div>" +
"   <div id='item34' class='tf2'><a href='http://www.e-sumai21.net/reform/r_event/index.html'>イベント情報</a></div>" +
"</div>" +
"<div id='item0'     class='tf1'><a href='http://www.e-sumai21.net/kr_map/index.html'>新築・リフォームMAP</a></div>" +
"<div id='item0'     class='tf1'><a href='http://www.e-sumai21.net/mission/index.html'>Mission</a></div>" +
"<div id='item4'     class='tf1'>不動産" +
"   <div id='item41' class='tf2'><a href='http://www.e-sumai21.net/fudousan/chintai/index.html'>賃貸物件</a></div>" +
"   <div id='item42' class='tf2'><a href='http://www.e-sumai21.net/fudousan/uri/index.html'>売物件</a></div>" +
"</div>" +
"<div id='item0'     class='tf1'><a href='http://www.e-sumai21.net/w_classroom/index.html'>木工教室</a></div>" +
"<div id='item5'     class='tf1'>ブログ 【ほぼ毎日更新中！】" +
"	<div id='item51' class='tf2'><a href='http://e-sumaikohboh.seesaa.net/' target='_blank'>住まいのブログ工房</a></div>" +
"	<div id='item52' class='tf2'><a href='http://e-sumai-genba.seesaa.net/' target='_blank'>住まいの現場見学</a></div>" +
"</div>" +
"<div id='item0'     class='tf1'><a href='http://www.e-sumai21.net/links.html'>リンク</a></div>" +
"<div id='item0'     class='tf1'><a href='http://www.e-sumai21.net/cap/index.html'>キャップでワクチン</a></div>" +
"<div id='item0'     class='tf1'><a href='http://www.e-sumai21.net/sitemap.html'>サイトマップ</a></div>" +
"</div>" +
"<div id='tfm-kosodate'><a href='http://www.e-sumai21.net/kosodate.html'></a></div>" +
"<div id='item0'     class='tf1'><a href='http://www.e-sumai21.net/kosodate.html'>やまがた子育て応援<br />パスポート事業</a></div>"
+"<div id='tfm-caution'     class='caution'><a href='http://www.e-sumai21.net/caution_1.html'>悪質な訪問販売業者に<br />ご注意下さい</a></div>" 
;

// コメントアウト行  -------------------------------------------------------------
/*
建築MAP
"   <div id='item23' class='tf2'><a href='http://www.e-sumai21.net/test1/shinchiku/k_map/index.html'>建築MAP</a></div>" +
"   <div id='item33' class='tf2'><a href='http://www.e-sumai21.net/test1/shinchiku/k_map/index.html'>リフォームMAP</a></div>" +
不動産サブメニュー
"   <div id='item41' class='tf2'><a href='http://www.e-sumai21.net/test1/fudousan/apart/index.html'>アパート</a></div>" +
"   <div id='item42' class='tf2'><a href='http://www.e-sumai21.net/test1/fudousan/kashiya/index.html'>貸家</a></div>" +
"   <div id='item43' class='tf2'><a href='http://www.e-sumai21.net/test1/fudousan/tochi/index.html'>土地</a></div>" +
"   <div id='item44' class='tf2'><a href='http://www.e-sumai21.net/test1/fudousan/chuuko/index.html'>中古住宅</a></div>" +
"   <div id='item45' class='tf2'><a href='http://www.e-sumai21.net/test1/fudousan/etc/index.html'>その他</a></div>" +

ブログ工房サブメニュー
"   <div id='item51' class='tf2'><a href='http://www.e-sumai21.net/test1/blog/blog01.html'>担当者１</a></div>" +
"   <div id='item52' class='tf2'><a href='http://www.e-sumai21.net/test1/blog/blog02.html'>担当者２</a></div>" +
リンク
"<div id='item0'     class='tf1'><a href='http://www.e-sumai21.net/links.html'>リンク</a></div>" +
サイトマップ
"<div id='item0'     class='tf1'><a href='http://www.e-sumai21.net/sitemap.html'>サイトマップ</a></div>" +

// 設定可能な変数 ここまで  -------------------------------------------------------------


// 説明  --------------------------------------------------------------------------------
/*
// ++++++++++  tfmenu.js で使用する id と class 名、および上下関係

#tfmenu                        メニュー全体
#tfmenu #tfm-head              メニュー上部
#tfmenu #tfm-body              メニュー本文 上記の menu_html はここに入る
#tfmenu #tfm-body .tf1         メニュー親項目
#tfmenu #tfm-body .tf1active   開いているメニュー親項目
#tfmenu #tfm-body .tf1 .tf2    メニュー子項目
#tfmenu #tfm-foot              メニュー下部

menu_html の内容は tfmenu.js (このファイル) を直接書き換えてください。
これにより、ひとつのファイルを書き換えるだけで、すべてのページに反映さ
れるようになります。

// ++++++++++  メニュー移動時に #tfmenu に付加される class 名

.tfm-up                        上昇中
.tfm-down                      下降中
.tfm-stop                      停止中

移動中の状態を class で指定することにより、状態に合わせてデザインを変
更できます。

// ++++++++++  メニュー HTML の書き方

#tfm-body 内のメニュー項目は、<div> で作ります。子項目の .tf2 は、親項
目である .tf1 の内側に配置してください。tfm-body の終了タグを忘れない
ように。

例:

"<div id='tfm-head'></div>" +
"<div id='tfm-body'>" +
"<div class='tf1'>親項目 1" +
"   <div class='tf2'>子項目 1.1</div>" +
"   <div class='tf2'>子項目 1.2</div>" +
"   <div class='tf2'>子項目 1.3</div>" +
"</div>" +
"<div class='tf1'>親項目 2" +
"   <div class='tf2'>子項目 2.1</div>" +
"   <div class='tf2'>子項目 2.2</div>" +
"   <div class='tf2'>子項目 2.3</div>" +
"</div>" +
"</div>" +  // end of #tfm-body
"<div id='tfm-foot'></div>";


// ++++++++++  HTML にメニューを配置する方法

<head> タグの中に下記の一行を追加。

<script type="text/javascript" src="tfmenu.js"></script>

<body> タグの中、メニューを配置したい場所に下記の一行を追加。

<div id="tfmenu"></div>

予め特定のメニュー項目を開いておきたい場合は、menu_html 内の親項目に
id を付けて、その id を上記の一行に name として指定する。

例:

menu_html の内容

"<div id='tfm-head'></div>" +
"<div id='tfm-body'>" +
"<div id='oya1' class='tf1'>親項目 1" +
"   <div class='tf2'>子項目 1.1</div>" +
"   <div class='tf2'>子項目 1.2</div>" +
"   <div class='tf2'>子項目 1.3</div>" +
"</div>" +
"</div>" +  // end of #tfm-body
"<div id='tfm-foot'></div>";

name="item3" を追加。

<div id="tfmenu" name="item3"></div>


// ++++++++++  History

2007-07-23 v1.4  Daisuke: IE 以外のブラウザ用に、別の移動ピクセル幅を指定できるように変数を追加。
2007-07-13 v1.3  Kohdai:  bug fix: pre-open 'name' attribute did not work on Firefox. Thanks!
2007-07-04 v1.2  Daisuke: changed value of 'var sticky'.
2007-05-24 v1.1  Daisuke: bug fix: if expand_speed was too fast, link did not work.
2006-10-31 v1.0  Daisuke: created.

*/

// ここから下は変更しないでください------------------------------------------------------
// 改良、バグ修正された方は新しいバージョンに取り入れさせてください → info@kakura.jp

var curr_y;
var istimerc_on = 0;
var istimere_on = 0;
var limit_y;
var menu_pos = new Object();
var status_p;
var tfm_body;
var tfmenu;
var isInternetExplorer;

if (navigator.appName.indexOf("Microsoft") < 0) {
   // it's not IE.
   steps = steps2;
}

function expandMenu(e) {
   var close_only = 0;
   var col_elem;
   var exp_elem;
   var ic;
   var ie;
   var isopen = 0;
   var target_elem;
   var target_node;
   var timerc;
   var timere;

   var collapseItem = function() {
      if(col_elem[ic]) {
         setVisibility(col_elem[ic], "hidden");
         ic++;
      } else {
         clearInterval(timerc);
         istimerc_on = 0;
      }
   }
   var expandItem = function() {
      if(!istimerc_on) {
         if(exp_elem[ie]) {
            setVisibility(exp_elem[ie], "visible");
            ie++;
         } else {
            clearInterval(timere);
            istimere_on = 0;
         }
      }
   }

   if(e.target) {
      target_node = e.target;
   } else if (e.srcElement) {
      target_node = e.srcElement;
   }
   // for Safari.
   if (target_node.nodeType == 3) {
      target_node = target_node.parentNode;
   }
   target_elem = target_node.getElementsByTagName("div");
   // if a gap between items (background tfm_body) was clicked, ignore.
   if(target_node.id == "tfm-body") {
      return;
   }
   // if the top item was clicked and it was already open, just close it.
   if(target_elem[0]) {
      if(target_elem[0].style.visibility == "visible") {
         close_only = 1;
      }
   }
   // collapse menu.
   if(!istimerc_on && !istimere_on) {
      for(var i = 0; i < tfm_body.length && !isopen; ++i) { // search the first visible chiled item.
         col_elem = tfm_body[i].getElementsByTagName("div");
         for(var ii = 0; ii < col_elem.length; ++ii) {
            if(col_elem[ii].style.visibility == "visible") {
               isopen = 1;
               break;
            }
         }
      }
      if(isopen) {
         ic          = 0;
         istimerc_on = 1;
         timerc      = setInterval(collapseItem, expand_speed);
      }
   }
   // expand active menu items.
   if(!istimere_on && !close_only) {
      exp_elem    = target_elem;
      ie          = 0;
      istimere_on = 1;
      timere      = setInterval(expandItem, expand_speed);
   }
}

function setVisibility(e, value) {
   e.style.visibility = value;
   if(value == "hidden") {
      e.style.lineHeight     = "0px";
      e.parentNode.className = "tf1";
   } else {
      e.style.lineHeight     = "100%";
      e.parentNode.className = "tf1active";
   }
}

function setTopPos() {
   var target_y    = document.body.scrollTop;
// var suffix_y;
   var dance_steps = steps;
   var distance;
   var status;

   distance = Math.abs(target_y - curr_y);

   // if menu box was too far from active area, then speed up.
   if(jump && tfmenu.offsetHeight * 2 < distance) {
      dance_steps = steps * 10;
   }
   // slow down if it's getting closer.
   if(distance < 25) {
      dance_steps = 1;
   }
   // do not exceed the bottom of the parent element.
   if(limit_y <= target_y) {
      target_y = limit_y;
      curr_y   = limit_y;
   }
   // going up or donw?
   if(curr_y > target_y) {
      curr_y -= dance_steps; // ascending
      status = "tfm-up";
   } else if(curr_y < target_y) {
      curr_y += dance_steps; // descending
      status = "tfm-down";
   } else {
      status = "tfm-stop";
   }
   if(distance != 0) {
      tfmenu.style.top = curr_y + "px";
   }
   // change status (class name)
   if(status_p != status) {
      status_p = status;
      tfmenu.className = status;
   }
}

function setListeners(e) {
   var i;
   var ii;
   tfmenu           = document.getElementById("tfmenu");
   tfmenu.innerHTML = menu_html;
   tfm_body         = document.getElementById("tfm-body")
   tfmenu.className = "tfm-stop";
   addListener(tfm_body, 'mouseup', expandMenu, false);
   tfm_body         = tfm_body.childNodes;

   for(i = 0; i < tfm_body.length; ++i) {
      // if name property was set, make that node (id) to visible.
      var items = tfm_body[i].getElementsByTagName("div");
      var visib = "hidden";
      if(tfmenu.getAttribute('name') == tfm_body[i].id) {
         visib = "visible";
      }
      for(ii = 0; ii < items.length; ++ii) {
         setVisibility(items[ii], visib);
      }
   }

   tfmenu.style.position = "absolute";
   tfmenu.style.left     = "0px";
   if(sticky) {
      tfmenu.style.top = "0px";
   } else {
      curr_y           = document.body.scrollTop;
      tfmenu.style.top = curr_y + "px";
      setInterval("setTopPos()", updown_speed);
   }
   // bug: if there is no parent element, limit_y will be screen height which is too short.
   limit_y = tfmenu.parentNode.offsetHeight - tfmenu.offsetHeight;
}

function addListener(elem, eventType, func, cap) {
   if(elem.addEventListener) {
      elem.addEventListener(eventType, func, cap);
   } else if(elem.attachEvent) {
      elem.attachEvent('on' + eventType, func);
   } else {
      window.alert("Sorry... Please use Internet Explorer or Firefox.");
      return false;
   }
}

addListener(window, 'load', setListeners, false);

// eof