﻿function thumbnailshow(options) {
    if (!arguments.length) {
        throw Error("thumbnailshow::オプションを指定してください。");
    }
    if (!options.id) {
        throw Error("thumbnailshow::options.id は必ず指定してください。");
    }
    var dl = $('#' + options.id).addClass('th-list');
    if (!dl.length || dl[0].nodeName.toUpperCase() != "DL") {
        throw Error("thumbnailshow::options.idにはDLタグを指定してください。");
    }

    options.panel = options.panel || {};
    options.panelClass = options.panel.panelClass || "";
    options.width = options.panel.width || '420px';
    options.height = options.panel.height || '320px';

    options.speed = options.speed || 'fast';
    options.images = options.images || [];

    var panel = 
        $('<div class="th-panel" id="pb_show" />')
            .addClass(options.panelClass)
            .width(options.width)
            .height(options.height)
            .insertAfter(dl);

    var images = [];
    var desc = [];
    for (var i = 0; i < options.images.length; i++) {
        images[options.images[i].url] =
            $('<img class="th-img" border="0" />')
                .hide()
                .attr('src', options.images[i].image)
                .appendTo(panel);
    }

    $('dd', dl).addClass('th-dd');
    $('dt', dl)
        .addClass('th-dt')
        .hover(function () {
            var nm = $('a', this).attr('href');
            desc[nm] && desc[nm].show();
            images[nm] && images[nm].fadeIn(options.speed);
        }, function () {
            var nm = $('a', this).attr('href');
            desc[nm] && desc[nm].hide();
            images[nm] && images[nm].fadeOut(options.speed);
        })
        .each(function () {
            var dd = $(this).next();
            var nm = $('a', this).attr('href');
            $('<div class="th-ds-dd" />').append(dd[0].childNodes).appendTo(dd);
            desc[nm] = dd.appendTo(panel).hide();

        });
}

