$(function () {
    var imgbox = $("#sl_imgbox"),
        imglist = $("#sl_imglist"),
        imglistdiv = $("#sl_imglist div"),
        firstsrc = imglistdiv.find("img").first().attr("src"),
        firstjqzsrc = imglistdiv.find("img").first().attr("jqimg");
    imgbox.html('<div class="sl_zoom"><img src="' + firstsrc + '" jqimg="' + firstjqzsrc + '" /></div>');
    var zoom_div = $(".sl_zoom"), imgbox_img = $(".sl_zoom img");
    imglist.caroufredsel({
        auto: false,
        circular: false,
        infinite: false,
        prev: "#imglist_prev",
        next: "#imglist_next",
        items: {visible: 4},
        scroll: {items: 1}
    });


    zoom_div.jqueryzoom({
        xzoom: 306,//璁剧疆鏀惧ぇ绐楀彛鐨勫搴�
        yzoom: 270,//璁剧疆鏀惧ぇ绐楀彛鐨勯珮搴�
        offset: 10,
        position: "right",//鏀惧ぇ绐楀彛鏄剧ず鐨勪綅缃�
        preload: 1,
        lens: 1
    });
    imgbox_img.vcenter(250, 250);//浜у搧灞曠ず鍥剧墖绛夋瘮渚嬬缉鏀惧眳涓�
    vhcenter();

    imglist.find("div:eq(0)").addclass("active");
    imglistdiv.find("img").each(function () {
        $(this).vcenter('100%', '100%');//浜у搧灏忓浘鐗囩瓑姣斾緥缂╂斁灞呬腑
    });


    imglistdiv.click(function () {
        if ($(this).hasclass("active")) return;
        $(this).addclass("active").siblings().removeclass("active");
        imgbox_img.attr("jqimg", $(this).find("img").attr("jqimg")).attr("src", $(this).find("img").attr("src")).vcenter(250, 250);
        vhcenter();
    });


    function vhcenter() {
        zoom_div.css({
            "margin-top": imgbox_img.css(""),
            "margin-left": imgbox_img.css(""),
            width: imgbox_img.width('100%'),
            height: imgbox_img.height('100%')
        });
        imgbox_img.css({"padding-top": 0, "padding-left": 0, "padding-right": 0, "padding-bottom": 0});

        if (imgbox_img.attr("jqimg") == "") {
            $(".jqmagnifier").remove();
        } else {
            $(".jqmagnifier").remove();
            $("#sl_picshow").append('<div class="jqmagnifier"></div>');
        }
    };
});