// **** 呼び出すHTMLの文字コードに合わせて適当に文字コードを変えてください。 ****

// version 1.2 2009/05/07
// isSelectedHoverがtrueのとき、selectedHoverが指定されていればそちらを表示する。（指定が無ければhoverを表示）
// version 1.11 2009/02/13
// クリックしたときに、onMouseOutと同じ動作をするように修正。（戻ったときの不具合対応）
// version 1.1 2009/02/03
// oSettingにhoverが指定されていたら、ロールオーバーの画像をhoverにする。
// version 1.0 2008/06/06
// oSettingで指定されたpathなら、指定されたimgに変更する。
/*
  oSetting は
  obj = {
    id: imgタグのid,
    path: 画像を変更するpath,
    img: 変更する画像のパス
  }
  の配列。
  以下はオプション
  hover: ロールオーバーする画像のパス
  isSelectedHover:選択時でもロールオーバーする(default:false)
  selectedHover:選択時のロールオーバーする画像のパス
*/
/*
  使い方の例
  body onLoad で指定しても良いですが、その場合、他のjavascriptとの兼ね合いを見て適宜指定してください。
  以下の方法が無難です。（script内は別ファイルにするのも可）
  
  <div id="navi">
    <ul>
      <li><a href="../content1/index.html"><img src="../images/menu_c1.png" id="menu_c1"></a></li>
      <li><a href="../content2/index.html"><img src="../images/menu_c2.png" id="menu_c2"></a></li>
      <li><a href="../content3/index.html"><img src="../images/menu_c3.png" id="menu_c3"></a></li>
    </ul>
  </div>
  <script type="text/javascript">
  <!--
    changeImageByPath([
    {
      id:'menu_c1',
      path:'/content1/',
      img:'../images/menu_c1_v.png',
      hover:'../images/menu_c1_o.png',
      isSelectedHover:true
    },
    {
      id:'menu_c2',
      path:'/content2/',
      img:'../images/menu_c2_v.png',
      hover:'../images/menu_c2_o.png',
      isSelectedHover:true
    },
    {
      id:'menu_c3',
      path:'/content3/',
      img:'../images/menu_c3_v.png',
      hover:'../images/menu_c3_o.png',
      isSelectedHover:true
    }]);
  // -->
  </script>
  
  
*/

function changeImageByPath(oSetting) {
  var pathName = location.pathname.replace(/\\/ig, "/");
  var cacheImages = new Array();
  
  if (oSetting && oSetting.length) {
    for (var i=0; i<oSetting.length; i++) {
      var setting = oSetting[i];
      var selected = false;
      
      if (setting && setting.path && setting.id && setting.img) {
        
        if (pathName.indexOf(setting.path) != -1) {
          var obj = document.getElementById(setting.id);
          selected = true;
          if (obj && obj.src) {
            obj.src = setting.img;
          }
        }
        
        if (setting.hover) {
          var obj = document.getElementById(setting.id);
          
          var hoverImagePath = setting.hover;
          if (selected && setting.isSelectedHover && setting.selectedHover) {
            hoverImagePath = setting.selectedHover;
          }
          
          // pre load
          cacheImages[i] = new Image();
          cacheImages[i].src = hoverImagePath;
          
          if (obj && obj.src) {
            if (!selected || setting.isSelectedHover) {
              obj.setAttribute('srcOrg', obj.src);
              obj.setAttribute('srcHover', hoverImagePath);
              
              obj.onmouseover = function() {
                this.setAttribute('src', this.getAttribute('srcHover'));
              };
              obj.onmouseout = function() {
                this.setAttribute('src', this.getAttribute('srcOrg'));
              };
              obj.onclick = function() {
                this.setAttribute('src', this.getAttribute('srcOrg'));
              };
            }
          }
        }
        
      }
      
    }
  }
}