///
/// index.js ----- shirofotoのindex.html用のスクリプト[#v08060801]
///
/// Copyright (C) 2008, azan workshop
/// #v08052401  matt    New
/// #v08052501  matt    任意サイズ、アスペクト比の画像対応
/// #v08052502  matt    リンクボタンの対応
/// #v08053101  matt    構成のブラッシュアップ
/// #v08060101  matt    キャプション対応
/// #v08060102  matt    画像ロードの関数化と自動更新
/// #v08060801  matt    画像のフェードイン対応
///
/// ・依存するモジュール
/// 　　‐misc.js（本モジュールよりも先にロードすること）
///
/// ・画像ファイル名は、00.jpg、01.jpg、02.jpg...のように
/// 　数値だけを想定。
///
/// ・画像ファイルの数はPHOTO_COUNTで設定する。
/// 　画像ファイル名は「00」から始まるため、PHOTO_COUNTが
/// 　「10」のときの画像ファイル名の最大は「09.jpg」となる。
///
/// ・画像ファイル名の桁数はPHOTO_COUNTの桁数と合わせている。
/// 　PHOTO_COUNTの値と画像ファイルの範囲は以下の通り。
/// 　　  9     0.jpg 〜   8.jpg
/// 　　 10    00.jpg 〜  09.jpg
/// 　　 20    00.jpg 〜  19.jpg
/// 　　 99    00.jpg 〜  98.jpg
/// 　　100   000.jpg 〜 099.jpg
///
/// ・SHOW_DEBUG  = true; にすると、ファイルのURLを100生成して
/// 　ページに表示することができる。
///
/// ・画像ファイル名の拡張子を大文字にするときはPHOTO_EXTも
/// 　「.JPG」に変更すること。
///
/// ・リンクボタンの命名ルールは以下の通り
/// 　　‐通常状態    ：*_n.*   例）about_n.png
/// 　　‐ホバー状態  ：*_h.*   例）about_h.png
/// 　　‐ダウン状態  ：*_d.*   例）about_d.png
/// 　ファイル名にこのパターンが複数存在すると期待通りに
/// 　動作しないことに注意。
///
/// ・写真のフェードインエフェクトを無効にするには、
/// 　FADEIN_ENABLEDをfalseにする
///
/// ・動作確認環境（ * は主要なブラウザ）
/// 　　‐Windows版   IE 5.0、5.5、6.0(*)、7.0(*)
/// 　　‐Windows版   Firefox 2.0(*)
/// 　　‐Macintosh版 Safari 3.1(*)
/// 　　‐Macintosh版 Firefox 2.0
/// 　→#v08060101と#v08060102、#v08060801は * の付いている
/// 　　主要なブラウザでのみチェックしていることに注意
///
/// ・#v08060101にAddListenerとRemoveListenerをmisc.jsに
/// 　移動
///

var PHOTO_URL   = "top_images/20090820/";  // 画像ファイルのURL
var PHOTO_COUNT = 10;             // 画像ファイルの数

var PHOTO_EXT   = ".jpg";
var HTML_EXT    = ".html";        // #v08060101

var CENTER_TOP  = 128;            // 画像を表示する中心位置 190 128
var CENTER_LEFT = 326;
var FRAME_WIDTH = 0;             // フレームの幅
  // フレームの幅は、フレーム画像と写真画像のマージンとなる


// add #v08060801
var FADEIN_ENABLED        = true;
var FADEIN_INIT_OPACITY   = -50;
	// 負数にするとフレームの表示とのタイムラグを設定できる
var FADEIN_LAST_OPACITY   = 100;
var FADEIN_INTERVAL       = 50;
var FADEIN_ADD_VALUE      =  5;
// add #v08060801

var RELOAD_INTERVAL   = 5000;       // #v08060102
  // 写真を自動更新する時間[ミリ秒]

var SHOW_DEBUG    = false;

var fTimerId      = null;           // #v08060102
var fFadeInTimer  = null;           // #v08060801


//
// スクリプトロード時の処理
//
AddListener(window, 'load', oLoadDoc);

//---------------------------------------- イベントハンドラ
//
// oLoadDoc --- オンロードハンドラ
//
function oLoadDoc(anEvent) {
  var chk;    // #v08060102
  
  RemoveListener(window, 'load', oLoadDoc);
  
  // add #v08060101
  HideCaption();
    // IEとFirefoxの場合、同じ画面をリロードしていると前の
    // 画面で設定した文字列が一瞬表示されることがあるため、
    // 最初に消しておく。
    // これをunloadイベントハンドラで対処してみたが、Firefox
    // でオブジェクトが上下に大きく移動するため、ここで行って
    // おく
  // end #v08060101
  
  PrepareButton();
  LoadPhoto();    // chg #v08060102 処理を関数に移動
  
  // add #v08060102
  chk = document.getElementById("chkAutoLoad");
  if (chk) {    // add #v09011301
    AddListener(chk, 'click', oClickAutoLoad);
  }             // end #v09011301
  
  oClickAutoLoad();
    // 写真の自動更新にチェックが付いたままでページをリロード
    // すると、ブラウザによってはチェックが残っている。
    // 画面表示と動作を合わせるために、ここでoClickAutoLoad()
    // を実行しておく。
  // end #v08060102
}

//
// oLoadPhoto --- 画像のロード後のイベントハンドラ
//
// ・画像ファイルをロードし終わらないとそのサイズを取得でき
// 　ないため、位置やサイズの設定はこのイベントハンドラで行う。
//
function oLoadPhoto(anEvent) {
  var div, fra, pho;
  var imh, imw, frw, frh, dvt, dvl;
  var ifr, src, url, reg;   // #v08060101
  
  pho = document.getElementById("imgPhoto");
  RemoveListener(pho, 'load', oLoadPhoto);  // chg #v08060801
    // ここで'load'を'pho'と誤植していたため、複数回ロード
    // される不具合が生じていた。#v08060801で修正
  
  div = document.getElementById("divFrame");
  fra = document.getElementById("imgFrame");
  
  imh = pho.height;
  imw = pho.width;
  
  frh = imh + FRAME_WIDTH * 2;
  frw = imw + FRAME_WIDTH * 2;
  
  dvt = Math.floor(CENTER_TOP - frh / 2);
  dvl = Math.floor(CENTER_LEFT - frw / 2);
  
  pho.style.top     = FRAME_WIDTH + "px";
  pho.style.left    = FRAME_WIDTH + "px";
  
  fra.style.height  = frh + "px";
  fra.style.width   = frw + "px";
  
  div.style.top     = dvt + "px";
  div.style.left    = dvl + "px";
  
  fra.style.visibility  = "visible";
  
  FadeInPhoto(pho);     // chg #v08060801
  //pho.style.visibility  = "visible";
  
  // add #v08060101
  ifr = document.getElementById("ifrCaption");
  if (!ifr) return;
  
  div.style.width   = frw + "px";
    // 新たに追加したキャプション欄<div id="divCaption">の
    // 幅が広がらないように設定しておく
  
  src = pho.src;
  reg = new RegExp("\\" + PHOTO_EXT + "$");
  url = src.replace(reg, HTML_EXT);
  try {
    ifr.src = url;
      // IEではここでクリック音がしてしまう。回避は？
  
    // ここで例外を補足しておかないと、Firefoxのエラー
    // コンソールにメッセージが表示される。
  } catch (exc) {
    // none
  }
  // end #v08060101
  
  // add #v08060102
  oClickAutoLoad();
    // ロード後に次の自動更新を設定する
  // end #v08060102
}

// add #v08060102
//
// oClickAutoLoad --- 写真の自動更新チェックボックスのクリック
//
// ・本来であれば、setInterval()からのLoadPhoto()の実行と
// 　ユーザーのボタンクリックによるLoadPhoto()の実行が
// 　競合しないように対処する必要がある ★
//
function oClickAutoLoad(anEvent) {
  var chk;
  
  chk = document.getElementById("chkAutoLoad");
  if (!chk) return;
  
  if (fTimerId) {
    clearTimeout(fTimerId);
      // fTimerIdが無効でもエラーにはならない模様。
      // ただし、十分に検証したわけではないことに注意 ★
    fTimerId = null;
  }
  
  if (chk.checked) {
    fTimerId = setTimeout(LoadPhoto, RELOAD_INTERVAL);
      // 当初はsetInterval()にしていたが、画像のロードが
      // 遅いと処理が重なるため、画像のロードごとに
      // setTimeout()を設定するように変更
  }
}
  // end #v08060102

//---------------------------------------- パブリック
// add #v08060102
//
// LoadPhoto ---- 新しい画像をロードする
//
function LoadPhoto() {
  var pho, fra, cur, csc, nsc, idx;
  
  HideCaption();
  
  if (fTimerId) {
    clearTimeout(fTimerId);
      // fTimerIdが無効でもエラーにはならない模様。
      // ただし、十分に検証したわけではないことに注意 ★
    fTimerId = null;
  }
  
  // add #v08060801
  if (fFadeInTimer) {
    clearInterval(fFadeInTimer);
    fFadeInTimer = null;
  }
  // end #v08060801
  
  pho = document.getElementById("imgPhoto");
  fra = document.getElementById("imgFrame");
  
  fra.style.visibility  = "hidden";
  pho.style.visibility  = "hidden";
  
  cur = pho.src;
  csc = "";
  for (idx = 0; idx < 10; idx++) {  // 10回だけトライ
    // Safariでは同じURLの画像を設定してもロードされない。
    // 一度<img>のsrcを消去するよりは、同じ画像がロードされ
    // ないように対処しておく
    
    nsc = GenImgUrl();
    if (cur) {
      csc = cur.substr(cur.length - nsc.length).toLowerCase();
    }
    if (nsc.toLowerCase() != csc) break;
  }
  
  AddListener(pho, 'load', oLoadPhoto);
  pho.src = nsc;
  
  if (!SHOW_DEBUG)  return;
  
  var dbg, idx, lst = "";
  for (idx = 0; idx < 100; idx++) {
    lst += GenImgUrl() + "<br />\r\n";
  }
  dbg = document.createElement("div");
  document.body.appendChild(dbg);
  dbg.innerHTML = lst;
}
// end #v08060102

// add #v08060101
//
// ShowCaption ---- キャプションを表示する
//
function ShowCaption(aCaption) {
  var cap;
  
  cap = document.getElementById("divCaption");
  if (cap) {
    cap.innerHTML     = aCaption;
    cap.style.display = "block";
  }
}

//
// HideCaption ---- キャプションを隠す
//
function HideCaption() {
  var cap;
  
  cap = document.getElementById("divCaption");
  cap.style.display   = "none";
  cap.innerHTML       = "";
}
// end #v08060101

//---------------------------------------- プライベート
//
// GenImgUrl --- 画像ファイルのURLを疑似ランダムに生成する
//
function GenImgUrl() {
  var dgt, idx, zro = "", fno, fnm;
  
  dgt = ("" + PHOTO_COUNT).length;
  for (idx = 0; idx < dgt; idx++) {
    zro += "0";
  }
  
  fno = zro + Math.floor(Math.random() * PHOTO_COUNT);
  fnm = fno.substr(fno.length - dgt);
  return PHOTO_URL + fnm + PHOTO_EXT;
}

// add #v08060801
//
// FadeInPhoto --- 画像をフェードイン
//
function FadeInPhoto(aPhoto) {
  var uag, fio;
  
  // sFadeIn -- フェードイン
  var sFadeIn = function() {
    var opc, oie;
    
    fio += FADEIN_ADD_VALUE;
    if (fio <= 0) return;
    
    if(fio > FADEIN_LAST_OPACITY) {
      clearInterval(fFadeInTimer);
      fFadeInTimer  = null;
      fio = FADEIN_LAST_OPACITY;
    }
    
    opc = fio / 100;
    oie = "alpha(opacity=" + fio + ")"; // for IE
    
    aPhoto.style.mozOpacity = opc;
    aPhoto.style.opacity    = opc;
    aPhoto.style.filter     = oie;
  };
  
  // FadeInPhoto
  if (!FADEIN_ENABLED) {
    aPhoto.style.visibility = "visible";
    return;
  }
  
  uag = navigator.userAgent;
  if(uag.indexOf("Opera") >= 0) {
    aPhoto.style.visibility = "visible";
    return;
  }
  
  aPhoto.style.mozOpacity = 0;
  aPhoto.style.opacity    = 0;
  aPhoto.style.filter     = "alpha(opacity=0)"
  aPhoto.style.visibility = "visible";
  
  fio = FADEIN_INIT_OPACITY;
  if (fFadeInTimer) {
    clearInterval(fFadeInTimer);
    fFadeInTimer = null;
  }
  fFadeInTimer = setInterval(sFadeIn, FADEIN_INTERVAL);
}
// end #v08060801

//
// PrepareButton --- リンクボタンを準備する
//
function PrepareButton() {
  var hvs = new Array();
  var dws = new Array();
  var ims, img, idx, nrm, hvr, dwn;
  var ptn = /_n\./;
  
  ims = document.getElementsByTagName("img");
  
  for (idx = 0; idx < ims.length; idx++) {
    img = ims[idx];
    if (img.className != "Button") continue;
    
    nrm = img.getAttribute("src");
    hvr = nrm.replace(ptn, "_h.");
    dwn = nrm.replace(ptn, "_d.");
    
    hvs[idx] = new Image();
    hvs[idx].src = hvr;
    
    dws[idx] = new Image();
    dws[idx].src = dwn;   // chg #v08053101 old is hvr;
    
    img.onmouseover = function() {
      var ptn = /_[nhd]\./;
      var osr, nsr;
      
      osr = this.getAttribute("src");
      nsr = osr.replace(ptn, "_h.")
      this.setAttribute("src", nsr);
    }
    
    img.onmouseout = function() {
      var ptn = /_[nhd]\./;
      var osr, nsr;
      
      osr = this.getAttribute("src");
      nsr = osr.replace(ptn, "_n.")
      this.setAttribute("src", nsr);
    }
    
    img.onmousedown = function() {
      var ptn = /_[nhd]\./;
      var osr, nsr;
      
      osr = this.getAttribute("src");
      nsr = osr.replace(ptn, "_d.")
      this.setAttribute("src", nsr);
    }
    
    img.onmouseup = function() {
      var ptn = /_[nhd]\./;
      var osr, nsr;
      
      osr = this.getAttribute("src");
      nsr = osr.replace(ptn, "_n.")
      this.setAttribute("src", nsr);
      this.blur;
    }
  }
}