function imagelistzoom(box, setting) {
    var picbox = $(box), scrollbox = picbox.find('.scroll'), detail = picbox.find('.detail'),
        picthumbs = picbox.find('ul'), picthumbnails = picthumbs.find('a'),
        lbtn = scrollbox.find('.toleft'), rbtn = scrollbox.find('.toright'),
        index = 0, l = 0, power = setting.power || 3,
        mask = $('<div class="mask"></div>'),
        view = $('<div class="view"><img src="/css/blank.gif" /></div>'),
        img = $('<img src="/css/blank.gif" />'),
        viewimg=view.find('img');

    var oleft=0,otop=0,tleft = 0, ttop = 0, timer;

    function updatestate() {
        cancelaframe(timer);

        oleft += (tleft - oleft) * .2;
        otop += (ttop - otop) * .2;

        viewimg.css({ left: oleft, top: otop });

        timer = requestaframe(updatestate);
    }

    if (!picthumbnails.length) return;
    picthumbnails.each(function (i, a) {
        $(this).click(function () {
            active(i);
            index = i;
        });
        l += $(a).parents('li').outerwidth(true);
    });

    picthumbs.css({ left: '0', width: l });
    lbtn.addclass('disleft');
    detail.append(mask);
    picbox.append(view);
    detail.append(img);
    mask.css('opacity', 0);
    view.css({ 'opacity': 0, overflow: 'hidden', padding: 0 }).find('img').css({ position: 'absolute' });


    var doffset = detail.offset(), dtop = doffset['top'], dleft = doffset['left'];


    function active(i) {
        img.stop(true, false).animate({ opacity: 0 }, 'fast');
        picthumbnails.eq(index).parents('li').removeclass('active');
        picthumbnails.eq(i).parents('li').addclass('active');
        var tempimg = new image(), src = picthumbnails.eq(i).find('img').attr('rel');
        tempimg.src = src;
        if (tempimg.complete) {
            resize();
        } else {
            tempimg.onload = resize;
        }

        function resize() {
            img.stop(true, false).animate({ opacity: 1 }, 'fast');
            img[0].src = src;
            var h1 = detail.height(), w1 = detail.width(), h2 = tempimg.height, w2 = tempimg.width;
            if (h1 / w1 < h2 / w2 && h2 > h1) {
                img.css({ height: h1, width: h1 * w2 / h2, margintop: 0 });
            } else if (w2 > w1) {
                var height = w1 * h2 / w2;
                img.css({ height: height, width: w1, margintop: (h1 - height) / 2 });
            } else {
                img.css({ height: h2, width: w2, margintop: (h1 - h2) / 2 });
            }
        };
    }

    function close() {
        mask.stop(true, false).animate({ opacity: 0 }, function () { $(this).css('display', 'none') });
        view.stop(true, false).animate({ opacity: 0 }, function () { $(this).css('display', 'none') });
        document.onmousemove = null;
    }
    detail.mouseenter(function () {
        doffset = detail.offset();
        dtop = doffset['top'];
        dleft = doffset['left'];
        view.css({ display: 'block' }).stop(true, false).animate({ opacity: 1 }).find('img').css({ width: img.width() * power, height: img.height() * power }).attr('src', img.attr('src'));
        var w = img.width() * power, h = img.height() * power,
            vw = view.width(), vh = view.height(), s = img.width() / w;
        mask.css({ width: s * vw, height: s * vh, display: 'block' }).stop(true, false).animate({ opacity: 1 });
        if (s < 1) {
            document.onmousemove = function (e) {
                if (e) {
                    var x = e.pagex, y = e.pagey,
                        left = (x - dleft - mask.width() / 2),
                        top = (y - dtop - mask.height() / 2), p = '';
                } else {
                    var left = window.event.x - mask.width() / 2,
                        top = window.event.y - mask.height() / 2, p = '';
                }

                if (left >= detail.width() - mask.width() - 1) left = detail.width() - mask.width() - 2;
                if (top >= detail.height() - mask.height() - 2) top = detail.height() - mask.height() - 3;
                if (left < 0) left = 0;
                if (top < 0) top = 0;

                mask.css({ left: left, top: top });
                tleft=(-left + parseint(img.css('marginleft'))) * power;
                ttop= (-top + parseint(img.css('margintop'))) * power ;
            }
        }
    }).mouseleave(close);
    mask.mouseleave(close);
    view.mouseleave(close);
    if (picthumbs.width() > scrollbox.find('.scrollbox').width()) {
        lbtn.click(function () {
            var ol = parseint(picthumbs.css('left')), nl = (ol + 250) > 0 ? 0 : (ol + 250);

            picthumbs.stop(true, false).animate({ left: nl }, function () {
                if (nl >= 0) {
                    lbtn.addclass('disleft');
                } else {
                    lbtn.removeclass('disleft');
                }
                rbtn.removeclass('disright');
            })
            return false;
        });
        rbtn.click(function () {
            var ol = parseint(picthumbs.css('left')), w = picthumbs.width() - scrollbox.find('.scrollbox').width(), nl = (ol - 250) < -w ? -w : (ol - 250);
            picthumbs.stop(true, false).animate({ left: nl }, function () {
                if (nl <= -w) {
                    rbtn.addclass('disright');
                } else {
                    rbtn.removeclass('disright');
                }
                lbtn.removeclass('disleft');
            });
            return false;
        });
    } else {
        lbtn.addclass('disleft');
        rbtn.addclass('disright');
    }

    active(0);
    updatestate();
}

jquery(function () {
    imagelistzoom('#viewer', { power: 3 })
});