//メニュー用
//http://www2.ocn.ne.jp/~yoochan/decoration/JavaScript/sample/DHTML_samp29.htmより引用

/* 以下、"_ie5=(navigator.appName.indexOf('Microsoft Internet Explorer')>=0 
          && document.getElementById)?true:false;"までの記述を必ず入れて下さい。*/
// _bro: 1=NN6+, 2=NN4, 3=IE, 4=Opera, 0=others
_bro=(window.opera?4:(window.external?3:(window.controllers?1:(document.layers?2:0))));
// _ie5: true=IE5+
_ie5=(navigator.appName.indexOf('Microsoft Internet Explorer')>=0&& document.getElementById)?true:false;

/* このSCRIPT要素内（SCRIPTタグで囲まれている部分）では、下記のスクリプト本体で呼び出される   基本関数の内容を定義します。   スクリプト本体で呼び出される基本関数の定義コードを、基本関数群についてのページからコピーして   この部分に貼り付けるか、Sampleのソースを直接ご覧になって、基本関数が定義されている   SCRIPT要素部分（SCRIPTタグで囲まれている部分）を、そのまま丸ごとコピーしてお使い下さい。*/

/* このサンプルで使用している基本関数 
getDivFromName(nm);
getDivLeft(div);
getDivTop(div);
moveDivTo(div,left,top);
setDivVisibility(div,visible);
writeDivHTML(div,html); 
*/

function getDivFromName(nm){
  if(document.getElementById) return document.getElementById(nm); 
  if(document.all) return document.all(nm); 
  if(document.layers){ 
    var s='';
    for(var i=1; i<arguments.length; i++)
      s+='document.layers.'+arguments[i]+'.';
    return eval(s+'document.layers.'+nm);
  }
  return null;
}
function getDivLeft(div){
  if(typeof window.crypto!="undefined" &&
     typeof window.getComputedStyle!="undefined"){ 
    return parseInt(div.style.left);
  }
  else 
   return document.layers?div.left:(div.offsetLeft||div.style.left||div.style.pixelLeft||0);
}
function getDivTop(div){
  if(typeof window.crypto!="undefined" &&
     typeof window.getComputedStyle!="undefined"){ 
    return parseInt(div.style.top);
  }
  else 
   return document.layers?div.top:(div.offsetTop||div.style.left||div.style.pixelTop||0);
}
function moveDivTo(div,left,top){
  if(document.layers){ div.moveTo(left,top); return; } 
  if(typeof div.style.left!="undefined"&& typeof div.style.left=="string"){ 
    div.style.left=left+'px';
    div.style.top =top +'px';
  }
  else if(typeof div.style.pixelLeft!="undefined"){ 
    div.style.pixelLeft=left;
    div.style.pixelTop =top;
  }
}
function setDivVisibility(div,visible){
  (div.style||div).visibility=(visible)?
   ((window.opera && !document.documentElement)?'visible':'inherit'):'hidden';
}
function writeDivHTML(div,html){ 
   if(document.layers){
    div.document.open();
    div.document.write(html);
    div.document.close();
   }
   else if(typeof div.innerHTML!="undefined"){ 
    div.innerHTML=html;
   }
}

//---

// スクリプト本体部分
itemMouseOver=null;
itemMouseOut=null;

mainMouseOver='itemMainOver';
mainMouseOut ='itemMainOut';
subMouseOver='itemSubOver';
subMouseOut ='itemSubOut';

divNo = 0;
function createDiv(){
  divName='dynDiv'+(divNo++);
  if(document.body&&document.body.insertAdjacentHTML){
    txt='<div id="'+divName
       +'" style="position:absolute;visibility:hidden"><\/div>';   
    document.body.insertAdjacentHTML('BeforeEnd',txt);
    return document.getElementById?
     document.getElementById(divName):document.all(divName);
  }
  else if(!document.layers){
    document.body.appendChild(div=document.createElement('DIV'));
    div.id=divName;
    with(div.style){
     position = 'absolute';     
     visibility='hidden';
    }
    return div; 
  }
  return null;    
}

var eles=new Array();
var divs=new Array();

function mouseOver(e){
  var ele=null;
  if(!e) e=window.event;
  if(e.target) ele=e.target;
  else if(e.srcElement) ele=e.srcElement; 
  while(ele.tagName!="DIV"){
   if(ele.tagName=="TD"){
     ele.itemMouseOver=(this.parent.menuCount==1)?mainMouseOver:subMouseOver;
     ele.itemMouseOut =(this.parent.menuCount==1)?mainMouseOut:subMouseOut;
     if(this.pre)this.pre.className=this.pre.itemMouseOut;
     ele.className=ele.itemMouseOver;    
     if(this.subMenu){
      setDivVisibility(this.subMenu,false);
      if(this.subMenu.pre) this.subMenu.pre.className=this.subMenu.pre.itemMouseOut;      
      while(this.subMenu.subMenu){
       this.subMenu=this.subMenu.subMenu;
       setDivVisibility(this.subMenu,false);
       if(this.subMenu.pre) this.subMenu.pre.className=this.subMenu.pre.itemMouseOut;
      }       
     }         
     this.pre=ele;
     eles[eles.length]=ele;
     if(!this.parent.items[ele.id].link){
      this.style.cursor="default";
     }
     else{
      if(document.all) this.style.cursor="hand"; // IE or Opera
      else this.style.cursor="pointer";
     }
     if(this.parent.items[ele.id].child){
      this.subMenu=this.parent.items[ele.id].child.div;
      setDivVisibility(this.parent.items[ele.id].child.div,true);
      divs[divs.length]=this.parent.items[ele.id].child.div;
     } 
    break;
   }
   ele=window.external?ele.parentElement:ele.parentNode;
  }
}

function mouseOut(e){
  var relEle=null;
  if(!e) var e=window.event;
  if(e.relatedTarget) relEle=e.relatedTarget;
  else if(e.toElement) relEle=e.toElement;
  for(; relEle!=null; relEle=window.external?relEle.parentElement:relEle.parentNode){
    if(relEle.parent) break;
  }
  if(relEle==null){
   for(i=0; i<divs.length; i++)
    setDivVisibility(divs[i],false);
   for(i=0; i<eles.length; i++)
    eles[i].className=eles[i].itemMouseOut;
   return; 
  }
}
function mouseDown(e){
  var ele=null;
  if(!e) e=window.event;
  if(e.target) ele=e.target;
  else if(e.srcElement) ele=e.srcElement; 
  while(ele.tagName!="DIV"){
  if(ele.tagName=="TD"){
   if(this.parent.items[ele.id].link){
    location.href=this.parent.items[ele.id].link;
   } 
   break;
  }
  ele=window.external?ele.parentElement:ele.parentNode;
 }
}


menuCount = 0;

// メニューコンストラクタ
/* 
 親メニュー（最初に表示されている横形のメニュー）の場合。
 Menu(親メニューの位置（LEFT）, 親メニューの位置（TOP）, 親メニューの横幅（テーブル全体の横幅）,
      親メニューに含まれる各項目（テーブルのセル）の高さ,
      [メニューに表示される文字列の各項目（テーブルのセル）内での位置。
      'left'は左寄り。'center'はセンタリング。'right'は右寄り。
      省略した時は、自動的にセンタリングされる。]) */
      
/* 
 子供メニュー（サブの縦形のメニュー）の場合。
 Menu(子供メニューの横幅（テーブル全体の横幅）,
      子供メニューに含まれる各項目（テーブルのセル）の高さ,      
      [メニューに表示される文字列の各項目（テーブルのセル）内での位置。
      'left'は左寄り。'center'はセンタリング。'right'は右寄り。
      省略した時は、自動的にセンタリングされる。]) */
function Menu(){
  this.id='menu'+(menuCount++);
  this.menuCount=menuCount;
  this.borderWidth = 1; // テーブルの枠線の幅。必ずこの数値を入れる！
  this.marginY = 3; // 多段で表示されるメニューの縦方向でのマージン
  this.div=createDiv();
  this.div.id='menuDiv'+this.menuCount;
  this.div.parent=this;
  if(arguments.length>=4){
   this.left=arguments[0];
   this.top =arguments[1];
   this.w=arguments[2]+this.borderWidth*2;
   this.itemH=arguments[3];
   this.textPos=arguments[4]?arguments[4]:'center';
   moveDivTo(this.div,this.left,this.top);
  }
  else{
   this.w=arguments[0];
   this.itemH=arguments[1];
   this.textPos=arguments[2]?arguments[2]:'center';
  }
  this.items=new Array();
  if(this.menuCount==1){ // 親のメニューバーのテーブル（TABLE）の html を生成。

   /* CAPSULEを見てカスタマイズする場合は、ここか、上記のスタイルシート部分を
      カスタマイズして下さい。
      ただ、注意して欲しいのは、cellpaddingやcelspacingの値を大きくすると
      その値が優先され、メニューを生成する時に設定したメニュー全体や各項目の
      サイズ（幅や高さ）が設定した通りに反映されず、表示が想定した通りに
      ならなくなります。
      ですから、特に、テキストを各項目の真ん中にセンタリングするような
      親のメニューバーのような場合は、下記のように、cellpaddingや、cellspacingの
      値はゼロにした方が、指定したメニューや項目のサイズは、確実に反映されるはずです。*/

   /*  なお、this.borderWidthはテーブルの枠線の幅ですが、これは、上記（上の方）で設定する
       部分がありますから、枠線の幅もカスタマイズする場合は、そこで設定して下さい。 */

   this.html='<table border="'+this.borderWidth+'" width="'+this.w
            +'" bordercolordark="white" bordercolor="black"'
            +' cellspacing="0" cellpadding="0" bgcolor="FFCC33"><tr>';            
  }
  else{ // サブメニュー（親のメニューバー以外）のテーブル（TABLE）の html を生成。

   /* サブメニューの場合は、各項目に表示されるテキストは、センタリングする場合ばかりでは
      ないので、多少のマージンは必要でしょう。したがって、cellpaddingの値なども設定して
      いますが、上記のように、あまり値を大きくすると、指定したメニューや項目のサイズは
      かなり大き目に取らないと反映されなくなります。せいぜい、このサンプル程度にして
      おいた方がいいでしょう。*/
   this.html='<table border="'+this.borderWidth+'" width="'+this.w
            +'" bordercolordark="white" bordercolor="black"'
            +' cellspacing="0" cellpadding="5" bgcolor="#FFCC66">';
  }
  return this;
}

//MenuItem関数で生成したオブジェクトを加える関数。
Menu.prototype.add = function(obj){ // objは、MenuItem関数で生成したオブジェクト。
                                    // すなわち、new MenuItem(....)
 obj.parent=this;
 if(this.menuCount>1) obj.w=this.w; 
 obj.h=this.itemH;
 this.items[obj.id]=this.items[this.items.length]=obj;
 this.items[obj.id].link=obj.link;
 if(this.items.length>1){
  var pre_obj=this.items[this.items.length-2];
 }
 if(this.menuCount==1){
  obj.left=this.items.length>1?pre_obj.left+pre_obj.w
          +((this.items.length==2)?this.borderWidth:0):this.left; // itemの位置
  obj.top=this.top+this.itemH+this.borderWidth*2;
  obj.item_html='<td id="'+obj.id+'" width="'+obj.w+'" height="'+obj.h
               +'" align="'+this.textPos+'" class="mainMenu">'+obj.text+'<\/td>\n';
 }else{
  obj.left=this.left+this.w; // itemの位置
  obj.top=this.top+this.itemH*(this.items.length-1)+this.borderWidth+this.marginY;
  obj.item_html='<tr><td id="'+obj.id+'" width="'+obj.w+'" height="'+obj.h
               +'" align="'+this.textPos+'" class="subMenu">'+obj.text+'<\/td><\/tr>\n';
 }
 this.html+=obj.item_html;
}

// メニューを生成する関数。
Menu.prototype.build = function(){ 
 if(this.menuCount==1)
  this.html+='<\/tr><\/table>';
 else
  this.html+='<\/table>';
 writeDivHTML(this.div,this.html); 
 if(this.menuCount==1){
  this.left=getDivLeft(this.div); 
  this.top =getDivTop (this.div);
 }
 if(!document.layers){
  this.div.onmouseover=mouseOver;
  this.div.onmouseout =mouseOut;
  this.div.onmousedown=mouseDown;
 }
 if(this.menuCount==1) setDivVisibility(this.div,true);
}

// メニュー item（項目）コンストラクタ
/* 
 MenuItem(メニューの項目に表示するテキスト（文字列）,
          リンクを貼る場合は、そのURL。貼らない場合は、nullを入れる。
           親メニュー以外は、nullを省略可。,
           [親（メインメニュー）のみ、各項目（テーブルのセル（TDタグ））
          の幅（単位: px）を入れる。
          なお、各項目で設定した幅（サイズ）の合計が、Menu関数で設定
          したテーブルの幅（サイズ）と必ず同じになるようにする。 
          ここ、極めて重要。！])

 ※ このサンプルでは、サブのメニューを持っている項目には
    たとえば、"sports >>"のように、">>"を加えています。

 ※ 親のメニュー以外では、各項目の幅はメニュー関数の方で
    決めてしまいますから、サブメニューの項目では、個別に
    項目の幅（サイズ）を設定する必要はありません。
    その場合、設定するのは、項目に表示される文字列と
    リンク先があるなら、そのURLです。
    サブメニューの場合は、リンク先がないなら、nullは
    省略可です。
 */      
function MenuItem(){  
 this.id=arguments[0];
 var re=new RegExp('  ');
 this.text=arguments[0].replace(re,'&nbsp;&nbsp;');
 this.link=(arguments.length>1&&arguments[1]!=null)?arguments[1]:null;
 this.w=arguments.length>2?arguments[2]:0;
 this.h = 0;
 this.item_html='';
 this.parent=null;
 return this;
}

// MenuItemオブジェクトに 生成したMenuオブジェクトを加える
MenuItem.prototype.setMenu = function(obj){
 obj.parent=this;
 this.child=obj;
 moveDivTo(obj.div,this.left,this.top); 
 obj.left=this.left; 
 obj.top =this.top;
}

function init(){
 // トップページのURL　リンクを絶対パスで指定するために追加
 // 本番ではhttp://tohokugin-soft.co.jp/となります。
 top_url = "http://www.tohokugin-soft.co.jp/";
 
 // まず、一番最初にメニューバー（親のメニュー）、menu_bar を作ります。
 // この場合ですと、200がメニューバーのX座標、50がY座標、400がメニューバーの幅、
 // 30が、メニューバーに含まれる各項目（item）の高さということになります。
 // なお、このメニューバーをウィンドウの真ん中にセンタリングする場合は、基本関数の
 // ページからgetWindowWidth()関数を持ってきて、次のように計算した値を200
 // の代わりに代入します。
 // 400はメニューバーの幅です。この mx をX座標200の代わりに入れて下さい。
 // getWindowWidth()関数をコピーするのを忘れないようにして、var mxの前の// を外して下さい。

 // var mx=(getWindowWidth()-400)/2;
 menu_bar=new Menu(10,74,770,20);
 
 // 次に、生成したメニューバーに、itemオブジェクト（メニューの項目）を加えます。
 // 下の場合ですと、'News'は、メニューの項目に実際に表示されるテキストです。
 // 好きなものを入れて下さい。次に、nullとありますが、これはリンク先が無い場合に
 // nullを入れます。リンク先があるなら、そのURLです。
 // 最後に、最初のメニューバーだけは、各項目の幅も設定します。
 // Newsの項目の幅は100にしたいので、100を入れます。
 // 最後に、これが極めて重要ですが、各項目の幅の合計は、必ず、最初にメニューバーを
 // 作る時に設定したメニューバーの幅（この場合だと、100×4で400ですね。）になるように
 // して下さい。
 menu_bar.add(new MenuItem('トップページ',    top_url + "index.html",110));
 menu_bar.add(new MenuItem('ソリューション',    top_url + "sol/index.html",110));
 menu_bar.add(new MenuItem('代金回収サービス',          top_url + "daikin/index.html",110));
 menu_bar.add(new MenuItem('会社情報',          top_url + "kaisya/index.html",110));
 menu_bar.add(new MenuItem('採用情報',          top_url + "recruit/index.html",110));
 menu_bar.add(new MenuItem('個人情報保護方針',  top_url + "privacy/index.html",110));
 menu_bar.add(new MenuItem('関連企業',            top_url + "kanren/index.html",110));
 menu_bar.build();
 
 // 次に、子供のメニュー（サブメニュー）を作ります。
 // サブメニューで、設定する必要があるのは、メニューの幅と
 // メニューに含まれる各項目（item）の高さだけです。
 // 以下、生成するサブメニューはすべてこの要領です。

 // それから、これは、メニューバーにも共通することですが、
 // 設定する各項目の幅や高さが小さすぎると、メニュー自体はテーブル（TABLEタグ）
 // で作られていますが、テーブル（TABLEタグ）のcellpaddingやcellspacingの値が
 // 大きい場合、そちらが優先され指定したサイズどおりになりません。
 // したがって、あまり小さな幅や高さの値は設定せず、余裕を持って設定して下さい。
 // あるいは、文字サイズを小さくするかです。
 // よく分からない人は、表示がおかしいと思ったら、余裕を持って、各項目の
 // 幅や高さを大き目に設定して下さい。
 // CAPSULEを見て改造するくらいの人は、ソース内のcellpaddingの値などを
 // 小さくしてもいいでしょう。
 menu1=new Menu(110,20,"left");

 // 次に、生成したメニューの各項目に、その項目の子供となるメニュー（サブメニュー）
 // を加えます。
 // ここでは、メニューバーの "News" の項目に、今生成したばかりの menu1 を加えますが、
 // メニューバーの "News" の項目は、以下のように、menu_bar.items['News']で表されます。
 // ここで重要なのは、menu_bar.items['News']の 'News' は、メニューバー（menu_bar）を
 // 作る時に、メニューの各項目に実際に表示されるテキストを 'News' というように指定しましたが、
 // それと必ず同じものである必要があるということです。
 // テキストを仮に 'モーグル >>' としていたなら、menu_bar.items['モーグル >>']というように
 // しなければなりません。
 // 手順どおりに作ってエラーが出たなら問題はすべてここですから、間違っていないか
 // 確かめて下さい。
 menu_bar.items['トップページ'].setMenu(menu1);

 // 次に、サブメニューにも、メニューバー同様、itemオブジェクト（メニューの項目）を加えますが、
 // サブメニューは縦形で、各項目の幅は、サブメニューを生成した時にメニュー全体の幅ということで
 // すでに設定されていますから設定する必要はありません。
 // また、サブメニューで、項目にリンク先が無い場合には、nullも入れず省略して構いません。  
 menu1.build();
 
 // 以下、同様です。
 menu2=new Menu(110,20,"left");
 menu_bar.items['ソリューション'].setMenu(menu2);
 menu2.add(new MenuItem('トータルシステムサービス', top_url + "sol/total.html")); 
 menu2.add(new MenuItem('エンジニア派遣',           top_url + "sol/haken.html"));
 menu2.add(new MenuItem('販売事業',                 top_url + "sol/hanbai.html"));
 menu2.add(new MenuItem('開発実績',                 top_url + "sol/jisseki.html"));
 menu2.build();

 menu3=new Menu(110,20,"left");
 menu_bar.items['代金回収サービス'].setMenu(menu3);
 menu3.add(new MenuItem('サービスのしくみ',  top_url + "daikin/service.html"));
 menu3.add(new MenuItem('サービス概要',      top_url + "daikin/gaiyo.html"));
 menu3.add(new MenuItem('ご利用のメリット',  top_url + "daikin/merit.html"));
 menu3.add(new MenuItem('ご利用例',          top_url + "daikin/sample.html"));
 menu3.add(new MenuItem('委託者様へのご案内',top_url + "daikin/itaku.html"));
 menu3.build();

 menu4=new Menu(110,20,"left");
 menu_bar.items['会社情報'].setMenu(menu4);
 menu4.add(new MenuItem('会社概要', top_url + "kaisya/gaiyo.html"));
 menu4.add(new MenuItem('業務内容', top_url + "kaisya/gyomu.html"));
 menu4.add(new MenuItem('沿革',     top_url + "kaisya/enkaku.html"));
 menu4.build();
  
 menu5=new Menu(110,20,"left");
 menu_bar.items['採用情報'].setMenu(menu5);
 menu5.add(new MenuItem('中途・採用情報', top_url + "recruit/index.html"));
 menu5.build();
  
 menu6=new Menu(110,20,"left");
 menu_bar.items['個人情報保護方針'].setMenu(menu6);
 menu6.build();

 menu7=new Menu(110,20,"left");
 menu_bar.items['関連企業'].setMenu(menu7);
 menu7.build();
}