var szImgRootPath = "/products/mp3";


//home page box for ZenM300/ZenM100
(function($) {
    $.fn.ZenMBox = function(options) {
        var defaults = {
            pdtImageID: "pdtZenM300",
            colors: ["WH", "BK", "RD", "YL"],           
            defaultColorIndex: 0,
            defaultPdtIndex: 1,
            imgPrefix: "/products/mp3/images/zenstyleM300/M300"
        };
        var opts = $.extend(defaults, options);
        var _this = $(this);

        var arrColors = opts.colors;
        var arrPdts = opts.products;
        var selectColor = arrColors[opts.defaultColorIndex];
        selectPdt = opts.defaultPdtIndex;
        showImage(selectColor, selectPdt);
        

        $(_this).find(".colorBox li a").each(function() {
            $(this).click(function() {
                var itemIndex = $(this).parent().index();
                selectColor = arrColors[itemIndex];
                showImage(selectColor, selectPdt);
            });
        });

        $(_this).find(".zenMSeriesNavItem a").each(function() {
            $(this).click(function() {
                var szImg = $(this).find("img:eq(0)").attr("src");
                var arrPdtIndexs = szImg.match(/_\d+/g);
                if (arrPdtIndexs.length > 0) {
                    selectPdt = arrPdtIndexs[0];
                    selectPdt = selectPdt.replace("_", "");
                };
                showImage(selectColor, selectPdt);
            })

        });

        function showImage(color, index) {
            var image = new Image();
            var _$imgPdt = $("#" + opts.pdtImageID);
            _$imgPdt.hide();
            var szImage = opts.imgPrefix + "_" + color + "_" + index + ".png"; //
            image.onload = function() {
                _$imgPdt.attr("src", szImage);
                _$imgPdt.show();
            }
            image.src = szImage;
        }


    }
})(jQuery)