====== sampleskin.jsの詳細解説 ======
グローバル変数で、シームレススクロールを使うかの設定と、使わない場合は何枚まで表示するかを\\ 
設定できるようにします。

<code javascript>
//*****************************************************************************
//      SampleSkin JavaScript 処理
//*****************************************************************************
    //-------------------------------------------------------------------------
    //      グローバル変数
    //-------------------------------------------------------------------------
    // シームレススクロール(0:OFF  1:下方向  2:双方向)
    var g_seamless_scroll   = 2 ;

    // 表示するリミット(-1:全て表示  n:指定枚数)
    // ※シームレススクロール OFF 時のみ有効
    var g_thumbs_limit      = 200 ;
</code>

スキンがロードされた直後に、シームレススクロールの設定を行います(wb.scrollSetting)。\\ 
シームレススクロールを使わない場合は、wb.updateを呼び出します。
使う場合はwindow.onresizeで、<div id="frame">の高さをウィンドウの高さにします。

<code javascript>
//*****************************************************************************
//      セットアップ
//*****************************************************************************
    //-------------------------------------------------------------------------
    //      スキンが完全ロードされた後にコールされる
    //-------------------------------------------------------------------------
    wb.onSkinEnter = function() {
        wb.scrollSetting(g_seamless_scroll,"") ;

        if(!g_seamless_scroll) {                // シームレススクロール OFF 時
            wb.update(0,g_thumbs_limit) ;
        }
        else {                                  // シームレススクロール ON 時
        }
    }
    //-------------------------------------------------------------------------
    //      ウィンドウサイズが変わった
    //-------------------------------------------------------------------------
    window.onresize = WindowResize;
    function WindowResize() {
        if(g_seamless_scroll) {
            Element.setStyle("frame",{"height":document.documentElement.clientHeight+"px"});
        }
    }
</code>

シームレススクロールを使用しない場合は、wb.onUpdate関数を上書きします。\\ 
各ムービーのサムネイル作成は、共通の関数(wb.onCreateThum)を呼び出します。\\ 
wb.focusThum(mvs[0].id)で最初のムービーにフォーカスを与えます。

<code javascript>
//*****************************************************************************
//  サムネイル処理
//*****************************************************************************
    //-------------------------------------------------------------------------
    //      検索結果が更新されたときにコールされる(シームレススクロール OFF 時)
    //-------------------------------------------------------------------------
    wb.onUpdate = function(mvs) {
        for(var i = 0 ; i < mvs.length ; ++ i) {
            var mv = mvs[i] ;
            wb.onCreateThum(mv,1) ;
        }
        wb.focusThum(mvs[0].id) ;
    }
</code>

existはムービーが無い場合(mv.exist == false)、「style='filter:Gray'」となりグレー表示、\\ 
存在する場合(mv.exist == true)は空文字になり通常表示となります。\\ 
\\ 
selecctはムービーが選択(mv.select == 1)されていれば「thum_s」、選択されていなければ\\ 「thum_u」となります。\\ 
\\ 
insertは、サムネイルを足す方向(dir)を見て、先頭なら「Insertion.Top」、末尾なら\\ 「Insertion.Bottom」となります。\\
\\ 
new insertでviewに、htmlを挿入します。

<code javascript>
    //-------------------------------------------------------------------------
    //      サムネイルの作成と表示(シームレススクロール ON 時)
    //
    //      @param  mv      ファイルの全情報
    //      @param  dir     追加する方向(-1:先頭に  1:末尾に)
    //-------------------------------------------------------------------------
    wb.onCreateThum = function(mv,dir) {
        var exist  = (mv.exist == false) ? " style='filter:Gray'" : "" ;
        var select = (mv.select == 1) ? "thum_s" : "thum_u" ;
        var insert = (dir < 0) ? Insertion.Top : Insertion.Bottom ;

        new insert(
            $("view"),
            "<div class='thum_base " + select + "' id='thum" + mv.id + "'>" +
            "<img class='img_base img_u' id='img" + mv.id + "' src='" + mv.thum + "'" + exist + ">" +
            "<h1 id='title" + mv.id + "'>" + mv.title + mv.ext + "</h1>" +
            "</div>"
        ) ;
    }
</code>

上記JavaScriptは、以下のようなhtmlを出力します。

<code html>
<div class='thum_base thum_s' id='thum1'>
  <img class='img_base img_u' id='img1' src='C:/WhiteBrowser/thum/PV/160x120x1x1/akb48 - river.#1e637804.jpg'>
  <h1 id='title1'>AKB48 - RIVER.flv</h1>
</div>
</code>

フォーカスが変わった場合、WhiteBrowser側でクラス名をimg_focusやimg_thumに書き換えます。\\ 
これだと、img_baseスタイルが適用されなくなってしまうので、wb.onSetFocus関数を上書きし、\\ 
自分でクラス名の書き換えを行うようにします。\\ 
\\ 
また、シームレススクロールの無効時に、自動スクロールされなくいのでwindow.scrollToで\\ 
スクロールするように設定します。
(15 は div#view padding 5px + div.thum_base margin 10px)

<code javascript>
    //-------------------------------------------------------------------------
    //      サムネイルのフォーカス状態が変わったときにコールされる
    //
    //      @param  id      ファイルのID
    //      @param  isFocus フォーカス状態(1:フォーカスを得た  0:フォーカスが外れた)
    //-------------------------------------------------------------------------
    wb.onSetFocus = function(id,isFocus) {
        var img = $("img" + id) ;
        if(!img) return ;

        img.className = "img_base " + (isFocus ? "img_f" : "img_u") ;

        if(isFocus) {
            var pos = Position.cumulativeOffset($("thum" + id)) ;
            var top = document.documentElement.scrollTop ;
            var btm = top + document.documentElement.clientHeight ;
            var th  = $("thum" + id).clientHeight ;

            if(pos[1] < top) {
                window.scrollTo(pos[0],pos[1] - 12) ;
            }
            else if(btm < pos[1] + th) {
                window.scrollTo(pos[0],pos[1] + th + 12 - document.documentElement.clientHeight) ;
            }
        }
    }
</code>

同様に選択状態が変わった場合、WhiteBrowser側でクラス名をthum_selectやthumに書き換えます。\\ 
thum_baseスタイルが適用されるように、wb.onSetSelect関数を上書きしクラス名の書き換えを行います。

<code javascript>
    //-------------------------------------------------------------------------
    //      サムネイルの選択状態が変わったときにコールされる
    //
    //      @param  id      ファイルのID
    //      @param  isSel   選択状態(1:選択  0:非選択)
    //-------------------------------------------------------------------------
    wb.onSetSelect = function(id,isSel) {
        var thum = $("thum" + id) ;
        if(!thum) return ;

        thum.className = "thum_base " + (isSel ? "thum_s" : "thum_u") ;
    }
</code>