長ったらしいまえおきの様なもの

前回の記事で、人から頼まれて作ってみたという lightbox もどき、ぼぼ２週間が経って、やっと、完成したと言えそうです。

初めから、最終的な仕様をきっちり決めて作り始めたわけでも無いんだけど、とりあえず、やりたいことは全部できたかな、という状況。

■前回の記事
→ http://letters.cocolog-nifty.com/movie/2008/11/lightbox-like.html

linux版のfirefox3.0.4と、Windows版のIE6、Opera9.62、firefox3.0.4、safari3.1.2 で動作確認済み。他のブラウザではどうか、やってみないと分かりません。まあ、画像をポチっとクリックしてみて下さい。

• サムネイル画像をクリックすると、まずブラウザの表示領域が徐々に暗くなります。
• 次にクリックしたサムネイルのリンク先画像が表示されますが、最初はサムネイル画像と同じサイズで表示され、徐々にズームして行きます。
• ブラウザの表示領域からはみ出す直前、または画像の本来のサイズに達したら一旦ズームが停止します。
• ズームが停止した時点で、画像サイズがまだ本来のサイズより小さい時は、expond ボタンと close ボタンが画像の下に表示されます。画像サイズが本来のサイズに達している時は close ボタンだけが、表示されます。
• expand ボタンをクリックすると、本来のサイズに拡大して表示。close ボタンをクリックすると消去します。消去の時は、暗くなっていたブラウザの表示領域がすぅっと元に戻ります。

というのが、仕様です。ちょっと、作り的なところを書くと…

• HTML（XHTML）の画像リンクは通常どおり書けば良く、onclick は不要。リンクに特定のクラス名を与えておくと、lightbox もどきの対象になります。
• ページの表示と同時に、裏で画像データの読込みを開始しています。
• クリックされた時に、画像データの読込みが終了していない場合は、終了するまで待ってからズームを開始する。
• ズーム表示は、ブラウザの表示領域の中心で行い、ウインドウサイズが変更された時も、変更後の中心に表示します。
• prototype.js など、既存のライブラリは使わず、全て自前のコードで出来ています。

という程度かな。作り始める前に、Ajax でやってみてよ、と言われていたわけですが、Ajax 的な技術は全然使っていません。１点だけ、画像の読込みを先にしておくところだけが、非同期通信しています、という意味では考え方が Ajax かも知れないけれど、まあ単なる javascript プログラムに過ぎないと思う。

作っていて思ったのは、いろいろ細かいことを知っておかないとできないんだなぁ、ということ。どのブラウザの実装が、どうなっている、とか、小さなことの割に正確な情報を得るのがめんどうで、効率が上がらない。こういう、javascript でクロスブラウザで…、といった開発をやっている人って大変そうだよなぁ、と実感。

というワケで、以下、今回これを作ってみてのメモ。何かに書いておかないと、すぐに忘れそうなので。

全然整理されていないメモ

javascript はいつ動き始めるか

今回、ページをブラウザに表示してから、lightbox もどきの対象となる画像がクリックされる前に、３つの処理処理をすることにしました。一つは、リンク先の画像データを読み込むこと、もう一つは、対象のリンクがクリックされた時に、表示処理を呼び出すイベントハンドラを追加することと、後で画像がクリックされた時の表示用のオブジェクトを作っておくこと。

最初、いきなりこの初期処理を始める様にしてみたら、エラーで終わってしまう。javascript は、DOM というのを介してブラウザの表示データにアクセスするんだけど、スクリプトが動き始めるのは、この DOM が構築されるより前なんですね。

というわけで、DOM が構築されるのを待たないといけない、でもあんまりタイミングが遅れると、画像がクリックされた時にまだ準備ができてなくて、ただ普通に画面遷移するだけになってしまいます。firefox などでは、DOMContentLoaded というイベントが使えるということで、

document.addEventListener("DOMContentLoaded", xxxxx, null);

xxxxx は初期処理の関数名です。だけど、IEでは使えません。IEでは、script タグに、defer というのを付けて、そのスクリプトが動き始めた時に、DOM の構築が終わっている、というテクニックがあり、prototype.js も、そうやっているみたいだけど、script タグで指定したスクリプトが動作可能になった、という判断の仕方が分からず、非採用。とりあえず、window.onload にした。これだとタイミング的には、少し遅いらしいけれども、まあ操作してみた実感としてはこれで大丈夫そうです。

そもそもイベント待ちの書き方が…

IEと他のブラウザで違うんですね。IEでは、attachEvent で、firefoxなどは、addEventListener 。インターフェースも違います。めんどうだなぁ。同じく xxxxx は初期処理の関数名です。

if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", xxxxx, null);
} else {
    window.attachEvent( 'onload', xxxxx );
}

初期処理は何を契機に実行する？

この初期処理、先ほど書いた、DOM が構築された直後に実行しておけば良いんだろうけれど、フェイルセーフとして、lightbox もどきの対象画像がクリックされた時にも、実行する様にしました。必要は無い筈ですが、まあ、保険ですね。

その都合で、初期処理は、もう済んでいることはやらない様にしました。例えば、前回実行した時より、対象の画像が増えていたら、それに対してだけ処理しておくが、他のことはしない、という感じです。

デフォルトアクションの抑止

さて、初期処理で、lightbox もどきの各対象画像にイベントハンドラを追加して、クリックした時に表示処理が呼ばれる様にしました。だけど、このままでは、通常と同じように、リンク先の画像にブラウザの表示が遷移してしまいます。これを抑止しないといけないワケですね。

そして、これがまたまた、firefox などでは、preventDefault() というのが用意されているけれど、IEでは、イベントオブジェクトの returnValue を false にしなくてはなりません。ついでに、イベントオブジェクトから、イベント発生もとのノードを取得する方法も違います。ここでは、イベント発生元（サムネイル画像）の親ノードを取得しています。

if ( event.srcElement ) {
    event.returnValue = false;
    obClick = event.srcElement.parentNode;
} else {
    event.preventDefault();
    obClick = event.target.parentNode; 
}

ブラウザの表示が徐々に暗くなる…

さて、画像がクリックされたら、まずはブラウザの表示領域が徐々に暗くなる、と書きましたが、実際は真っ黒なボックスを透明度を高くしておいて表示して、徐々にその透明度を落としていってるだけです。

この透明度の指定がまた、IEとfirefoxなど、他のブラウザで異なっています。firefoxなどは、CSS3の、opacity ですね。下のコードの obIbxbg は透明度を指定した、真っ黒ボックス。wkOpcty は透明度です。（0〜1.0：0が完全に透明）

if ( typeof obIbxbg.style.opacity == 'string' ) {
    obIbxbg.style.opacity = wkOpcty;
} else {
    obIbxbg.style.filter = "alpha(opacity=" + wkOpcty * 100 + ")";
}

なんだかタイマ処理ばかりだが

今回の、lightbox もどきのソースの中には、タイマ処理が妙にたくさんあります。中にはイベントハンドラなんかで、うまく行くものも含まれているかも知れないけれど、取り合えずはこれで良いと思っています。

1. さっき出てきた、真っ黒ボックスの透明度を変えていく処理。
2. 真っ黒ボックスの表示が終わった時点で、画像の読込みが完了していない場合に、画像の読込み完了を待つ処理。
3. 画像をズームしていく処理。
4. lightbox もどきを消去する時の、真っ黒ボックスの透明度をあげていく処理。

    :
gwTmrid = setTimeout( function() { ibtmApper( obClick, wkOpcty ) }, gwAitvl );
    :
gwTmrid = setTimeout( function() { ibtmLwait( obClick ) }, gwWitvl );
    :
gwTmrid = setTimeout( function() { ibtmDrawb( arOrsiz, arTgsiz, 1 ) }, gwZitvl );
    :
gwTmrid = setTimeout( function() { ibtmDisapr( wkOpcty ) }, gwAitvl);
    :

表示領域サイズとページサイズ

画像をブラウザの表示領域の中心に表示したいとすると、ブラウザの表示領域のサイズを取得する必要があります。また、何回か出てきた真っ黒ボックスは、スクロールで隠れているところも含めた、HTMLドキュメント自身のページサイズで表示しておかないと、スクロールした時に、後ろが見えてしまいます。

これらはケースバイケースで、どちらが大きい場合もあり得るので、それらのケースを考慮してプログラミングする必要があります。今回の仕様では、ズーム表示に関しては、表示領域をはみ出さずに一旦止めるので、あまり考慮しなくても良いですが、expan ボタンで拡大表示した場合は、画像のサイズが、それまでの表示領域やページサイズを超える場合もあるので、それについても考慮する必要があります。

そして、表示領域のサイズは、またまたブラウザによって取得方法を変える必要があります。さらに、互換モード、標準モードの違いでも変わって来ます。とりあえず、現状のソースはこんな感じ。

function ibnmWnsiz() {
    // get browser inner size
    if ( document.documentElement.clientWidth ) {
        var wkWnwdt = document.documentElement.clientWidth;
        var wkWnhgt = document.documentElement.clientHeight;
    } else if ( window.innerWidth ) {
        var wkWnwdt = window.innerWidth;
        var wkWnhgt = window.innerHeight;
    }
    return [ wkWnwdt, wkWnhgt ];
};

ページサイズの方は、ページサイズが、表示領域サイズより小さい場合は、そちらに値を置き換えることにしました。

function ibnmPgsiz() {
    // get page size
    var wkPgszx = document.body.offsetWidth;
    var wkPgszy = document.body.offsetHeight;
    var arWnsiz = ibnmWnsiz();
    if ( arWnsiz[ 0 ] > wkPgszx ) wkPgszx = arWnsiz[ 0 ];
    if ( arWnsiz[ 1 ] > wkPgszy ) wkPgszy = arWnsiz[ 1 ];
    return [ wkPgszx, wkPgszy ];
};

スクロールオフセットの取得

スクロールバーが表示されている時の、表示領域の左上がページ上のどの位置にあるか、をここではスクロールオフセットと言っています。これは、いろいろ直接この値を取得する方法を書いてあるサイトがあったりしたけど、うまく行かず、body タグの、scrollLeft、scrollTop という値を使うことに。

ところが、この値が０になっているブラウザが、僕がテストしている中にもありました。試しに、bodyタグの親ノードの値を取ってみたら、欲しい値が取れました。そこで、body タグから、順に親ノードへさかのぼって行き、取れた値を集計することにしました。

すると、今までダメだったブラウザはOKになりましたが、この、scrollLeft、scrollTop に数値以外が設定されている場合があり、値が数値の時だけ集計して行きことにしました。

function ibnmScost() {
    // get scroll offset
    var obCrelm = document.body;
    var wkSostx = 0;
    var wkSosty = 0;
    while ( obCrelm ) {
        if ( ! isNaN( obCrelm.scrollLeft ) ) wkSostx += obCrelm.scrollLeft;
        if ( ! isNaN( obCrelm.scrollTop ) ) wkSosty += obCrelm.scrollTop;
        obCrelm = obCrelm.parentNode;
    };
    return [ wkSostx, wkSosty ];
};

なんだか良くわからないまとめ

メモって置きたいことは、たいだいこんな感じでしょうか。javascript の仕様やDOMの仕様を調べなくてはいけないのは仕方ないにしても、ブラウザによる実装の違いを吸収しなくてはいけないのが、かなり面倒です。

今回作成したスクリプト、たった350ステップくらいで、このくらいの規模ならすぐ作れそうなんですが、5Kステップぐらいは作った様な気分。

素直に、prototype.js など、既存のライブラリを使えば、ある程度はブラウザによる違いなど吸収してくれそうなので、そうした方が効率が良いのかも知れません。

でも、本家のlightbox の場合、スクリプトファイルのサイズだけで、180Kぐらいあります。これに対して、今回作成したスクリプトは、11K強です。そう考えると、苦労しても自作しても良いのかも知れませんね。

というわけで、現状のソースは以下です。

// imagebox 2008.12.02 by.yas0233
// global valuable
var gwTmrid; // timer id
var gaPload = new Array(); // preloaded images
var gwPlcnt = 0; // preloaded images counter
// global const
var gwEburl = 'http://letters.cocolog-nifty.com/movie/imagebox/expand.png';
var gwCburl = 'http://letters.cocolog-nifty.com/movie/imagebox/close.png';
var gwZitvl = 50; // zoom interval
var gwWitvl = 500; // wait interval
var gwAitvl = 25; // background opacity change intreval
var gwLitvl = 5; // load wait interval
var gwFrate = 0.02; // frame width rate
var gwFmaxw = 7; // max width of frame
var gwZsped = 0.05; // zoom resize speed
var gwMhigt = 20; // expand,close button height
var gwBopty = 0.7; // background opacity
var gwOpchg = 0.07; // background opacity change
// ----------
function ibnmInitl() {
 // check anchors
 var arAnchr = document.getElementsByTagName( 'a' );
 for( var wkLoopc = 0; wkLoopc < arAnchr.length; wkLoopc ++ ) {
  if ( arAnchr[ wkLoopc ].className == 'imagebox' ) {
   // set event handler
   if ( arAnchr[ wkLoopc ].addEventListener ) {
    arAnchr[ wkLoopc ].addEventListener( 'click', ibnmClick, false );
   } else {
    arAnchr[ wkLoopc ].attachEvent( 'onclick', ibnmClick );
   }
   // get image
   for( var wkLoop2 = 0; wkLoop2 < gwPlcnt; wkLoop2 ++ ) {
    if ( gaPload[ wkLoop2 ].src.match( arAnchr[ wkLoopc ].href ) ) {
     break;
    }
   }
   if ( wkLoop2 == gwPlcnt ) {
    gaPload[ gwPlcnt ] = new Image();
    gaPload[ gwPlcnt ].src = arAnchr[ wkLoopc ].href;
    gwPlcnt ++;
   }
  }
 }
 // creaate & add imagebox tags
 if ( ! document.getElementById( 'imagebox-frame' ) ) {
  // background box
  var obIback = document.createElement('div');
  obIback.id = 'imagebox-back';
  document.body.appendChild( obIback );
  // frame & image
  var obImbox = document.createElement('div');
  obImbox.id = 'imagebox-frame';
  var obImage = new Image();
  obImage.id = 'imagebox-image';
  obImbox.appendChild( obImage );
  // menu anchors & images
  var obMebox = document.createElement( 'div' );
  obMebox.id = 'imagebox-menu';
  var obAnchr = document.createElement( 'a' );
  obAnchr.id = 'imagebox-expand';
  obAnchr.href = "javascript:ibnmExpnd()";
  var obImage = new Image();
  obImage.src = gwEburl;
  obImage.alt = "expand";
  obAnchr.appendChild( obImage );
  obMebox.appendChild( obAnchr );
  var obAnchr = document.createElement( 'a' );
  obAnchr.id = 'imagebox-close';
  obAnchr.href = "javascript:ibnmClose()";
  var obImage = new Image();
  obImage.src = gwCburl;
  obImage.alt = "close";
  obAnchr.appendChild( obImage );
  obMebox.appendChild( obAnchr );
  obImbox.appendChild( obMebox );
  document.body.appendChild( obImbox );
  // event handler
  if ( window.addEventListener ) {
   window.addEventListener( 'resize', ibnmWresz, false );
  } else {
   window.attachEvent( 'onresize', ibnmWresz );
  }
 }
};
// ----------
function ibnmClick( event ) {
 // stop default action
 if ( event.srcElement ) {
  event.returnValue = false;
  obClick = event.srcElement.parentNode;
 } else {
  event.preventDefault();
  obClick = event.target.parentNode; 
 }
 // call Initialize
 if ( ! document.getElementById( 'imagebox-frame' ) ) {
  ibnmInitl();
 } else {
  var arAnchr = document.getElementsByTagName( 'a' );
  var wkIbcnt = 0;
  for ( var wkLoopc = 0; wkLoopc < arAnchr.length; wkLoopc ++ ) {
   if ( arAnchr[ wkLoopc ].className.match( 'imagebox' ) ) {
    wkIbcnt ++;
   }
  }
  if ( gwPlcnt < wkIbcnt ) {
   ibnmInitl();
  }
 }
 // clear Zoom Settings
 clearTimeout( gwTmrid );
 document.getElementById( 'imagebox-expand' ).style.display = 'none';
 document.getElementById( 'imagebox-close' ).style.display = 'none';
 document.getElementById( 'imagebox-frame' ).style.display = 'none';
 document.getElementById( 'imagebox-image' ).style.width = '0px';
 document.getElementById( 'imagebox-image' ).style.height = '0px';
 // appear imagebox
 ibtmApper( obClick, 0 );
};
// ----------
function ibtmApper( obClick, wkOpcty ) {
 // background setting
 var obIbxbg = document.getElementById( 'imagebox-back' );
 if ( typeof obIbxbg.style.opacity == 'string' ) {
  obIbxbg.style.opacity = wkOpcty;
 } else {
  obIbxbg.style.filter = "alpha(opacity=" + wkOpcty * 100 + ")";
 }
 var arBgsiz = ibnmPgsiz();
 obIbxbg.style.width = arBgsiz[ 0 ] + 'px';
 obIbxbg.style.height = arBgsiz[ 1 ] + 'px';
 obIbxbg.style.top = '0px';
 obIbxbg.style.left = '0px';
 obIbxbg.style.display = 'block';
 // opacity setting
 wkOpcty += gwOpchg;
 if ( wkOpcty < gwBopty ) {
   gwTmrid = setTimeout( function() { ibtmApper( obClick, wkOpcty ) }, gwAitvl );
 } else {
  // wait image loaded
  ibtmLwait( obClick );
 }
};
// ----------
function ibtmLwait( obClick ) {
 // wait or draw
 for ( var wkLoopc = 0; wkLoopc < gwPlcnt; wkLoopc ++ ) {
  if ( gaPload[ wkLoopc ].src.match( obClick.href ) ) {
   if ( gaPload[ wkLoopc ].complete ) {
    // already loaded
    document.getElementById( 'imagebox-image' ).src = obClick.href;
    var arTgsiz = Array();
    arTgsiz[ 0 ] = gaPload[ wkLoopc ].width;
    arTgsiz[ 1 ] = gaPload[ wkLoopc ].height;
    var arOrsiz = Array();
    var arOrimg = obClick.getElementsByTagName( 'img' );
    arOrsiz[ 0 ] = arOrimg[ 0 ].width;
    arOrsiz[ 1 ] = arOrimg[ 0 ].height;
    ibtmDrawb( arOrsiz, arTgsiz, 0 );
   } else {
    gwTmrid = setTimeout( function() { ibtmLwait( obClick ) }, gwWitvl );
   }
   break;
  }
 }
};
// ----------
function ibtmDrawb( arOrsiz, arTgsiz, wkResiz ) {
 // get valuables
 var obIboxf = document.getElementById( 'imagebox-frame' );
 var obIboxi = document.getElementById( 'imagebox-image' );
 var arWdsiz = ibnmWnsiz();
 var arScost = ibnmScost();
 var wkCrwdt = obIboxi.width;
 var wkCrhgt = parseInt( wkCrwdt * arTgsiz[ 1 ] / arTgsiz[ 0 ] );
 if ( wkResiz == 0 ) {
  // original size
  wkCrwdt = arOrsiz[ 0 ];
 }
 if ( wkResiz == 1 ) {
  // resize
  if ( obIboxi.width >= arTgsiz[ 0 ] || obIboxi.height >= arTgsiz[ 1 ] ) {
   document.getElementById( 'imagebox-close' ).style.display = 'inline';
   return;
  }
  var wkFrsiz = parseInt( wkCrwdt * gwFrate );
  if ( wkFrsiz > gwFmaxw ) wkFrsiz = gwFmaxw;
  var wkIbwdt = wkCrwdt + wkFrsiz * 3;
  var wkIbhgt = wkCrhgt + wkFrsiz * 3 + gwMhigt;
  if ( wkIbwdt >= arWdsiz[ 0 ] || wkIbhgt >= arWdsiz[ 1 ] ) {
   document.getElementById( 'imagebox-expand' ).style.display = 'inline';
   document.getElementById( 'imagebox-close' ).style.display = 'inline';
   return;
  }
  // resize width
  var wkRswdt = parseInt( wkCrwdt * gwZsped );
  if ( wkRswdt < 1 ) wkRswdt = 1;
  wkCrwdt += wkRswdt;
 }
 if ( wkResiz == 2 ) {
  // target width
  wkCrwdt = arTgsiz[ 0 ];
 }
 wkCrhgt = parseInt( wkCrwdt * arTgsiz[ 1 ] / arTgsiz[ 0 ] );
 var wkFrsiz = parseInt( wkCrwdt * gwFrate );
 if ( wkFrsiz > gwFmaxw ) wkFrsiz = gwFmaxw;
 var wkIbwdt = wkCrwdt + wkFrsiz * 3;
 var wkIbhgt = wkCrhgt + wkFrsiz * 3 + gwMhigt;
 if ( wkResiz == 1 ) {
  if ( wkCrwdt >= arTgsiz[ 0 ] || wkCrhgt >= arTgsiz[ 1 ] ) {
   document.getElementById( 'imagebox-close' ).style.display = 'inline';
   return;
  }
  if ( wkIbwdt >= arWdsiz[ 0 ] || wkIbhgt >= arWdsiz[ 1 ] ) {
   document.getElementById( 'imagebox-expand' ).style.display = 'inline';
   document.getElementById( 'imagebox-close' ).style.display = 'inline';
   return;
  }
 }
 // positions
 var wkPoslt = parseInt( arWdsiz[ 0 ] / 2 - wkIbwdt / 2 );
 if ( wkPoslt < 0 ) wkPoslt = 0;
 var wkPostp = parseInt( arWdsiz[ 1 ] / 2 - wkIbhgt / 2 );
 if ( wkPostp < 0 ) wkPostp = 0;
 obIboxi.style.width = wkCrwdt + 'px';
 obIboxi.style.height = wkCrhgt + 'px';
 obIboxf.style.padding = wkFrsiz + 'px';
 obIboxf.style.left = arScost[ 0 ] + wkPoslt + 'px';
 obIboxf.style.top = arScost[ 1 ] + wkPostp + 'px';
 if ( obIboxf.style.display.match( 'none' ) ) obIboxf.style.display = 'block';
 // adjust background
 var obIboxb = document.getElementById( 'imagebox-back' );
 var arBgsiz = ibnmPgsiz();
 obIboxb.style.width = arBgsiz[ 0 ] + 'px';
 if ( arScost[ 0 ] + wkPoslt + wkIbwdt > arBgsiz[ 0 ] ) obIboxb.style.width = arScost[ 0 ] + wkPoslt + wkIbwdt + 'px';
 obIboxb.style.height = arBgsiz[ 1 ] + 'px';
 if ( arScost[ 1 ] + wkPostp + wkIbhgt > arBgsiz[ 1 ] ) obIboxb.style.height = arScost[ 1 ] + wkPostp + wkIbhgt + 'px';
 // set timer
 if ( wkResiz == 0 || wkResiz == 1 ) {
  gwTmrid = setTimeout( function() { ibtmDrawb( arOrsiz, arTgsiz, 1 ) }, gwZitvl );
 }
};
// ----------
function ibnmExpnd() {
 // expand image
 var obIbimg = document.getElementById( 'imagebox-image' );
 var arOrsiz = Array();
 arOrsiz[ 0 ] = obIbimg.width;
 arOrsiz[ 1 ] = obIbimg.height;
 for ( var wkLoopc = 0; wkLoopc < gwPlcnt; wkLoopc ++ ) {
  if ( obIbimg.src.match( gaPload[ wkLoopc ].src ) ) {
   var arTgsiz = Array();
   arTgsiz[ 0 ] = gaPload[ wkLoopc ].width;
   arTgsiz[ 1 ] = gaPload[ wkLoopc ].height;
   document.getElementById( 'imagebox-expand' ).style.display = 'none';
   ibtmDrawb( arOrsiz, arTgsiz, 2 );
   break;
  }
 }
};
// ----------
function ibnmClose() {
 // closing imagebox
 var obIboxf = document.getElementById( 'imagebox-frame' );
 obIboxf.style.display = 'none';
 ibtmDisapr( gwBopty );
};
// ----------
function ibtmDisapr( wkOpcty ) {
 // reduce opacity
 var obIbxbg = document.getElementById( 'imagebox-back' );
 if ( wkOpcty > gwOpchg ) {
  wkOpcty = wkOpcty - gwOpchg;
  if ( typeof obIbxbg.style.opacity == 'string' ) {
   obIbxbg.style.opacity = wkOpcty;
  } else {
   obIbxbg.style.filter = "alpha(opacity=" + wkOpcty * 100 + ")";
  }
  gwTmrid = setTimeout( function() { ibtmDisapr( wkOpcty ) }, gwAitvl);
 } else {
  obIbxbg.style.display = 'none';
 }
};
// ----------
function ibnmWnsiz() {
 // get browser inner size
 if ( document.documentElement.clientWidth ) {
  var wkWnwdt = document.documentElement.clientWidth;
  var wkWnhgt = document.documentElement.clientHeight;
 } else if ( window.innerWidth ) {
  var wkWnwdt = window.innerWidth;
  var wkWnhgt = window.innerHeight;
 }
 return [ wkWnwdt, wkWnhgt ];
};
// ----------
function ibnmScost() {
 // get scroll offset
 var obCrelm = document.body;
 var wkSostx = 0;
 var wkSosty = 0;
 while ( obCrelm ) {
  if ( ! isNaN( obCrelm.scrollLeft ) ) wkSostx += obCrelm.scrollLeft;
  if ( ! isNaN( obCrelm.scrollTop ) ) wkSosty += obCrelm.scrollTop;
  obCrelm = obCrelm.parentNode;
 };
 return [ wkSostx, wkSosty ];
};
// ----------
function ibnmPgsiz() {
 // get page size
 var wkPgszx = document.body.offsetWidth;
 var wkPgszy = document.body.offsetHeight;
 var arWnsiz = ibnmWnsiz();
 if ( arWnsiz[ 0 ] > wkPgszx ) wkPgszx = arWnsiz[ 0 ];
 if ( arWnsiz[ 1 ] > wkPgszy ) wkPgszy = arWnsiz[ 1 ];
 return [ wkPgszx, wkPgszy ];
};
// ----------
function ibnmWresz() {
 // status check
 if ( document.getElementById( 'imagebox-frame' ).style.display.match( 'block' ) ) {
  // resize
  var obIbxbg = document.getElementById( 'imagebox-back' );
  var obIbxig = document.getElementById( 'imagebox-image' );
  var arAnchr = document.getElementsByTagName( 'a' );
  for ( var wkLoopc = 0; wkLoopc < arAnchr.length; wkLoopc ++ ) {
   if ( arAnchr[ wkLoopc ].href.match( obIbxig.src ) ) {
    var arOrimg = arAnchr[ wkLoopc ].getElementsByTagName( 'img' );
    var arOrsiz = Array();
    arOrsiz[ 0 ] = arOrimg[ 0 ].width;
    arOrsiz[ 1 ] = arOrimg[ 0 ].height;
    break;
   }
  }
  for ( var wkLoopc = 0; wkLoopc < gwPlcnt; wkLoopc ++ ) {
   if ( gaPload[ wkLoopc ].src.match( obIbxig.src ) ) {
    var arTgsiz = Array();
    arTgsiz[ 0 ] = gaPload[ wkLoopc ].width;
    arTgsiz[ 1 ] = gaPload[ wkLoopc ].height;
    break;
   }
  }
  ibtmDrawb( arOrsiz, arTgsiz, 3 );
 }
};
// ----------
if (document.addEventListener) {
 document.addEventListener("DOMContentLoaded", ibnmInitl, null);
} else {
 window.attachEvent( 'onload', ibnmInitl );
};