// 矢印の画像のURL(パス)。これはひとまとめにする。
// 各メニューごとに違う矢印の画像を使うと、プリロードする側の設定が
// 分かりにくくなるので、使う矢印の画像はこのサンプルでは三種類に限定している。
/* Menu.arrow_image=[[デフォルトの右向きの矢印画像のURI, マウスをセルに乗せたときに変化する右向きの矢印の画像のURI],
　　　　　　　　　[デフォルトの左向きの矢印画像のURI, マウスをセルに乗せたときに変化する左向きの矢印の画像のURI],
　　　　　　　　　[デフォルトの下向きの矢印画像のURI, マウスをセルに乗せたときに変化する下向きの矢印の画像のURI]]; */
Menu.arrow_image=[["../gazoo2/arrow_right0.gif","../gazoo2/arrow_right1.gif"],
　　　　　　　　　["../gazoo2/arrow_left0.gif","../gazoo2/arrow_left1.gif"],
　　　　　　　　　["../gazoo2/arrow_down0.gif","../gazoo2/arrow_down1.gif"]];

// 背景画像のURL(パス)。背景については、重たい画像を使う場合は念のためプリロードしておく。
Menu.back_image=[];

// メニューのボーダー(枠線)に関する設定。
// これは、レイヤの正確な位置、サイズ設定のため、スタイルシートの側では設定しない。
// スタイルシートで設定しようとしても変更できません。
// 変更はここで行います。
// { 外枠線のスタイル, 外枠線の幅(pixel), 外枠線の色, 内仕切り線(内枠線)の色、内仕切り線の幅(pixel)　}

Menu.border={ borderStyle:"solid", borderWidth:1, borderColor:"#00417B black black #00417B", 
　　　　　　　innerBorderColor:"black", innerBorderWidth:1 };

divNum = 0;
function createDiv(){
  divName='dynDiv'+(divNum++);
  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 arrow_img=new Array();
var back_img =new Array();
function preArrowLoad(){ 
  for(var i=0; i<Menu.arrow_image.length*2; i++){
    arrow_img[i]=new Image();
    arrow_img[i].src=Menu.arrow_image[Math.floor(i/2)][i%2];
  }    
}
function preBackLoad(){ 
  for(var i=0; i<Menu.back_image.length; i++){
    back_img[i]=new Image();
    back_img[i].src=Menu.back_image[i];
  }    
}
preArrowLoad();
preBackLoad();

Menu.eles=new Array();
Menu.menu_divs=new Array();
Menu.menu_nav=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.id){
     if(!this.parent_obj) break;
     var p_obj=this.parent_obj;
     ele.itemMouseOver=p_obj.menu_over;
     ele.itemMouseOut =p_obj.menu_out;
     ele.itemMouseOverURI=p_obj.over_imageURI?'url('+p_obj.over_imageURI+')':'';
     ele.itemMouseOutURI =p_obj.out_imageURI?'url('+p_obj.out_imageURI+')':'';
     if(this.preEle){
      var pre_ele=this.preEle;
      pre_ele.className=pre_ele.itemMouseOut;
      pre_ele.style.backgroundImage=pre_ele.itemMouseOutURI;
      arrowChange(pre_ele.firstChild,true);
    }
     ele.className=ele.itemMouseOver; 
     ele.style.backgroundImage=ele.itemMouseOverURI;  
     arrowChange(ele.firstChild,false);
     if(this.subMenu){
      var sub_menu=this.subMenu;
      setDivVisibility(sub_menu,false);
      if(sub_menu.preEle) {
       sub_menu.preEle.className=sub_menu.preEle.itemMouseOut;
       sub_menu.preEle.style.backgroundImage=sub_menu.preEle.itemMouseOutURI;
       arrowChange(sub_menu.preEle.firstChild,true);
      }      
      while(sub_menu.subMenu){
       sub_menu=sub_menu.subMenu;
       setDivVisibility(sub_menu,false);
       if(sub_menu.preEle) {
        sub_menu.preEle.className=sub_menu.preEle.itemMouseOut;
        sub_menu.preEle.style.backgroundImage=sub_menu.preEle.itemMouseOutURI;
        arrowChange(sub_menu.preEle.firstChild,true);
       } 
      }       
     }         
     this.preEle=ele;
     Menu.eles[Menu.eles.length]=ele;
     if(!this.parent.items[ele.id].link){
      this.style.cursor="default";
     }
     else{
      if(document.all) this.style.cursor="hand";
      else this.style.cursor="pointer";
     }
     if(this.parent.items[ele.id].child){
      var child_div=this.parent.items[ele.id].child.div;
      this.subMenu=child_div;
      setDivVisibility(child_div,true);
      Menu.menu_divs[Menu.menu_divs.length]=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_obj) break;
  }
  if(relEle==null){
   for(i=0; i<Menu.menu_divs.length; i++)
    setDivVisibility(Menu.menu_divs[i],false);
   Menu.menu_divs=[];
   for(i=0; i<Menu.eles.length; i++){
    Menu.eles[i].className=Menu.eles[i].itemMouseOut;
    Menu.eles[i].style.backgroundImage=Menu.eles[i].itemMouseOutURI;
   }
   Menu.eles=[];
   var nav_nodes=Menu.menu_nav;
   for(i=0; i<nav_nodes.length; i++){
    var nd=nav_nodes[i];
    if(!nd.img_on) continue;
    arrowChange(nd,true);
   } 
   Menu.menu_nav=[]; 
   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"&& ele.id){
   if(this.parent.items[ele.id].link){
    parent.right.location.href=this.parent.items[ele.id].link;
   } 
   break;
  }
  ele=window.external?ele.parentElement:ele.parentNode;
 }
}
function arrowChange(node,def){  
  if(node.className && (node.className=="right_arrow"||node.className=="left_arrow"
     ||node.className=="down_arrow")){
     switch(node.className){
     case 'right_arrow': 
       node.src=def?arrow_img[0].src:arrow_img[1].src; break;
     case 'left_arrow':  
       node.src=def?arrow_img[2].src:arrow_img[3].src; break;
     case 'down_arrow': 
       node.src=def?arrow_img[4].src:arrow_img[5].src; break;
     }
     node.img_on=def?false:true;
     if(node.img_on) Menu.menu_nav[Menu.menu_nav.length]=node;
   }
 }

Menu.menuCount = 0;
                            
function Menu(){
  this.id='menu'+(Menu.menuCount++);
  this.menuCount=Menu.menuCount;
  this.marginY = 0; 
  this.marginX = 0;  
  this.div=createDiv();
  this.div.id='menuDiv'+this.menuCount;
  this.div.parent=this.div.parent_obj=this;
  this.w=arguments[0];
  this.total_width=0;
  this.itemH=arguments[1];
  this.dir=arguments[4]?arguments[4]:'vertical';
  this.textPos=arguments[5]?arguments[5]:'center';
  this.arrowPos=arguments[6]?arguments[6]:'right';
  this.text_margin =(typeof(arguments[7])!="number")?0:arguments[7];
  this.arrow_margin=(typeof(arguments[8])!="number")?0:arguments[8];
  this.anchor=arguments[9];
  this.menu_out =arguments[10]?arguments[10]:'subMenu';
  this.menu_over=arguments[11]?arguments[11]:'subMenuOver';
  this.border_Style=arguments[12];
  this.text_arrow=arguments[13];
  this.out_imageURI=arguments[14]; 
  this.over_imageURI=arguments[15]; 
  if(this.border_Style){
   var brs=this.border_Style;
   this.borderStyle=brs&&brs.borderStyle?brs.borderStyle:'solid';
   this.borderWidth=(brs&&typeof(brs.borderWidth)=="number")?brs.borderWidth:1; 
   this.innerBorderWidth=(brs&&typeof(brs.innerBorderWidth)=="number")?
                         brs.innerBorderWidth:1; 
   this.borderColor=brs&&brs.borderColor?brs.borderColor:'#c0c0c0';
　 this.innerBorderColor=brs&&brs.innerBorderColor?brs.innerBorderColor:'#c0c0c0';
  }
  if(this.menuCount==1) {
    if(typeof(arguments[2])!="number") {
     this.temp_left=arguments[2];
     this.left=0;
    }
    else this.left=arguments[2];
    this.top =arguments[3];
    moveDivTo(this.div,this.left,this.top);
  }
  else{
    this.left=0;
    this.top =0;
    this.marginX=arguments[2];
    this.marginY=arguments[3];     
  }
  this.separate_count=0;
  this.items=new Array();
  this.html='';
  this.cont_html='';
  this.next_width=0;
  return this;
}
Menu.prototype.add = function(obj){ // MenuItem を加える
 obj.parent=this;
 if(this.dir=='vertical') this.total_width=obj.w=this.w;
 else if(this.dir=='horizon') {
  if(obj.w>0) this.total_width+=obj.w;
  else {
   obj.w=this.w;
   this.total_width+=this.w;
  }
 }
 obj.h=this.itemH;
 obj.dir=this.dir;
 obj.arrow_pos=this.arrowPos;
 this.items[obj.id]=this.items[this.items.length]=obj;
 this.items[obj.id].link=obj.link;
 var pre_obj=null;
 if(this.items.length>1) pre_obj=this.items[this.items.length-2];
 if(this.items.length>1 && (pre_obj.separate &&this.innerBorderWidth>0)) this.separate_count++;
 obj.text_html=(this.anchor&&obj.link)?'<span style="text-decoration:underline">'
              +obj.text+'<\/span>':obj.text;
 if(this.textPos=="left") 
 　obj.text_html='<span style="padding-left:'+this.text_margin+'px">'+obj.text_html+'<\/span>';
 else if(this.textPos=="right") 
 　obj.text_html='<span style="padding-right:'+this.text_margin+'px">'+obj.text_html+'<\/span>';
 var img_class=(this.dir=='horizon')?'down_arrow':
               (this.arrowPos=='right')?'right_arrow':'left_arrow';
 var img_src=(this.dir=='horizon')?Menu.arrow_image[2][0]:
             (this.arrowPos=='right')?Menu.arrow_image[0][0]:Menu.arrow_image[1][0];
 if(obj.navImg && this.arrowPos=="left")
   obj.arrow_html=!this.text_arrow?'<img class="'+img_class+'" style="margin-left:'
                 +this.arrow_margin+'px; float:left;" src="'+img_src+'" alt="">':
                 '<div style="float:left; padding-left:'
                 +this.arrow_margin+'px;">'+this.text_arrow+'<\/div>';                 
 else if(obj.navImg && this.arrowPos=="right")
   obj.arrow_html=!this.text_arrow?'<img class="'+img_class+'" style="margin-right:'
                 +this.arrow_margin+'px; float:right" src="'+img_src+'" alt="">':
                 '<div style="float:right; padding-right:'
                 +this.arrow_margin+'px;">'+this.text_arrow+'<\/div>';　
 if(this.dir=='horizon'){
   obj.sub_defleft=this.items.length>1?pre_obj.sub_defleft+pre_obj.w
            +(this.items.length>2?this.next_width:this.borderWidth):this.left;
   obj.sub_deftop=this.top+this.itemH+this.borderWidth*2; 
   if(this.items.length>1){
   　obj.item_html+='<td width="'+((pre_obj.separate && this.innerBorderWidth>0)?
                  this.innerBorderWidth:0)+'" height="'+obj.h
   　　　　　　　 +'" style="background-color:'+this.innerBorderColor+';"><br><\/td>';
   }
   obj.item_html+='<td id="'+obj.id+'" width="'+obj.w+'" height="'+obj.h
               +'" style="text-align:'+this.textPos+'; padding:0px; border-width:0px; '
               +(this.out_imageURI?'background-image:url('+this.out_imageURI+');"':'')
               +'" class="'+this.menu_out+'" >'
               +obj.arrow_html+obj.text_html+'<\/td>\n';
 }else if(this.dir=='vertical'){
   if(this.arrowPos=='right') obj.sub_defleft=this.left+this.w+2*this.borderWidth;
   else if(this.arrowPos=='left') obj.sub_defleft=this.left;  
   obj.sub_deftop=this.items.length>1?pre_obj.sub_deftop+pre_obj.h
           +(this.items.length>2?this.next_width:this.borderWidth):this.top; 
   if(this.items.length>1){
  　 obj.item_html+=(pre_obj.separate && this.innerBorderWidth>0)?'<tr><td width="'
                  +obj.w+'" height="'+this.innerBorderWidth
  　　　　　　　  +'" style="background-color:'+this.innerBorderColor
  　　　　　　　  +';"><img src="" width="1" height="1"><\/td><\/tr>':'';
  }
  obj.item_html+='<tr><td id="'+obj.id+'" width="'+obj.w+'" height="'+obj.h
               +'" style="text-align:'+this.textPos+'; padding:0px; border-width:0px; '
               +(this.out_imageURI?'background-image:url('+this.out_imageURI+');"':'')
               +'" class="'+this.menu_out+'" >'
               +obj.arrow_html+obj.text_html+'<\/td><\/tr>\n';
 }
 if(this.items.length>1) this.next_width=pre_obj.separate?this.innerBorderWidth:0; 
 this.cont_html+=obj.item_html;
}

Menu.prototype.build = function(){
 this.html='<table width="'+(this.total_width+this.borderWidth*2
          +(this.dir=='horizon'?this.innerBorderWidth*this.separate_count:0))
          +'" style="border-width:'+this.borderWidth+'px; border-color:'+this.borderColor
          +'; border-style:'+this.borderStyle+';" cellspacing="0" cellpadding="0">'
          +((this.dir=='horizon')?'<tr>':'');
 this.html+=this.cont_html;
 if(this.dir=='horizon')
  this.html+='<\/tr><\/table>';
 else
  this.html+='<\/table>';
 writeDivHTML(this.div,this.html);
 var all_width=this.total_width+this.borderWidth*2
              +(this.dir=='horizon'?this.innerBorderWidth*this.separate_count:0);
 if(this.temp_left=='center')
  this.left=Math.floor((getWindowWidth()-all_width)/2);
 var mx=this.marginX, my=this.marginY; 
 if(this.parent){
  var pitem=this.parent;
  if(pitem.dir=='vertical'){
   if(pitem.arrow_pos=='left'){
    this.left-=all_width;
    if(mx>all_width) mx =all_width; 
    else if(mx<0) mx=0;
   }
   else if(pitem.arrow_pos=='right'){
    if(mx <-all_width) mx=-all_width; 
    else if(mx>0) mx=0; 
   }
   if(my<-this.itemH) my=-this.itemH; 
    else if(my>pitem.h) my=pitem.h;
  }
  else if(pitem.dir=='horizon'){
    if(mx >pitem.w) mx=pitem.w;
    else if(mx<-this.items[0].w) mx=-this.items[0].w;
    if(my>0) my=0;
    else if(my<-pitem.h) my=-pitem.h; 
  }
 }
 for(i=0; i<this.items.length; i++){
  this.items[i].sub_defleft+=mx;
  this.items[i].sub_deftop+=my;
  if(this.temp_left) this.items[i].sub_defleft+=this.left;
 }                 
 moveDivTo(this.div,this.left+mx,this.top+my);
 this.div.onmouseover=mouseOver;
 this.div.onmouseout =mouseOut;
 this.div.onmousedown=mouseDown;
 if(this.menuCount==1) setDivVisibility(this.div,true);
}

function MenuItem(){  // itemオブジェクト
 this.id=arguments[0];
 var re=new RegExp('  ',"g");
 this.text=arguments[0].replace(re,'&nbsp;&nbsp;');
 this.link=arguments[1];
 this.navImg=arguments[2];
 this.separate=arguments[3];
 this.w=(arguments.length>4)?arguments[4]:0;
 this.h = 0;
 this.sub_deftop=0;
 this.sub_defleft=0;
 this.item_html='';
 this.text_html='';
 this.arrow_html='';
 this.parent=null;
 return this;
}

// itemオブジェクトにメニューを加える
MenuItem.prototype.setMenu = function(obj){
 obj.parent=this;
 this.child=obj;
 obj.left=this.sub_defleft; 
 obj.top =this.sub_deftop;  　
}

function init(){
 
 /* 
   単位は、すべて pixel
 　new Menu(各項目の幅, 各項目の高さ, メニューのX座標(親(menu_barのみ絶対座標。))とY座標, メニューは水平か縦型か
      ('horizon'、'vertical'　の二つのうちから選択), 項目内のテキストの位置('right'、'center'、'left'の3つの
      うちから選択。), 矢印の画像(もしくはテキスト)は右寄せか左寄せか('right','left'の2つのうちから選択), 
      メニューをぶら下げる時の親となる項目との相対座標(言い換えると項目とのマージン(X座標、Y座標))。ただし親メニューは
      両方とも 0 。, 項目内のテキストを右寄せか左寄せかにした時の各セルの右端もしくは左端からのマージン。、
      矢印の画像(もしくはテキスト矢印)の各セルの右端もしくは左端からのマージン。,リンクの下線を表示させるか否か。、
      メニューの各セルに適用するデフォルトのスタイルシートの名前(クラス名)。,マウスを乗せたときに各セルに適用する
      メニューのボーダー(枠線)のデザインに関する設定(この部分と矢印の画像のURIはここでは設定しない。よってここでの
      変更不可。), 矢印の画像の変わりにテキストの矢印を表示される場合は ">>"　などどする。画像の矢印を使うときは "" 
      のまま。,メニューに背景画像を表示させるときはそのURI。,マウスを乗せたときに背景画像を変えるときはそのURI。)
*/
 menu_bar=new Menu(130,30,'center',310,'vertical','left','left',0,2,false,'mainMenu','mainMenuOver',Menu.border,
                   "▼","","");
 // 今生成したメニューオブジェクトに、各項目のオブジェクトを追加し、メニューオブジェクトを完成させる。
 // new MenuItem(項目に表示させるテキスト, リンク先がある時はそのURI,
 //               矢印の画像(もしくはテキストの矢印)をその項目に表示させるか否か。,
 //               次の項目との間に仕切り線(内枠線)を入れるか否か。)                  
 menu_bar.add(new MenuItem('２００３年夏休み',"2003/2003.htm",false,true));
 menu_bar.add(new MenuItem('２００５年夏休み',"2005/2005.html",false,true));
 menu_bar.add(new MenuItem('２００６年夏休み',"2006/2006.html",false,true));
 menu_bar.add(new MenuItem('翔のブログ',"http://gageru.spaces.msn.com/",false,true));
 menu_bar.add(new MenuItem('パソコン教室',"http://www.pcplant.com/",false,true));
 menu_bar.build();
 
}