;
(function($, window, document, undefined) {
    var magnifier = function(elem) {
        var self = this;
        this.$elem = elem;
        this.$smallbox = this.$elem.find('.small-box');
        this.$smallbox_pic = this.$smallbox.find('img');
        this.$smallbox_mask = this.$smallbox.find('.hover');
        this.$thumbnailbox = this.$elem.find('.thumbnail-box');
        this.$thumbnailbox_prev = this.$thumbnailbox.find('.btn-prev');
        this.$thumbnailbox_next = this.$thumbnailbox.find('.btn-next');
        this.$thumbnailbox_wrapper = this.$thumbnailbox.find('.wrapper');
        this.$thumbnailbox_item = this.$thumbnailbox.find('.item');
        this.$thumbnailbox_pic = this.$thumbnailbox.find('img');
        this.$bigbox = this.$elem.find('.big-box');
        this.$bigbox_pic = this.$bigbox.find('img');
    };
    magnifier.prototype = {
        movebigpic: function() {
            var scalex = this.$smallbox_mask.position().left / (this.$smallbox.width() - this.$smallbox_mask.width());
            var scaley = this.$smallbox_mask.position().top / (this.$smallbox.height() - this.$smallbox_mask.height());
            var scroll_l = scalex * (this.$bigbox_pic.width() - this.$bigbox.width());
            var scroll_t = scaley * (this.$bigbox_pic.height() - this.$bigbox.height());
            this.$bigbox.scrollleft(scroll_l).scrolltop(scroll_t);
        },
        changesrouce: function(index, cur_src) {
            this.$smallbox_pic.attr('src', cur_src);
            this.$bigbox_pic.attr('src', cur_src);
        },
        setmask: function() {
            var mask_w = this.$smallbox.width() / (this.$bigbox_pic.width() / this.$bigbox.width());
            var mask_h = this.$smallbox.height() / (this.$bigbox_pic.height() / this.$bigbox.height());
            this.$smallbox_mask.css({ width: mask_w, height: mask_h });
        },
        inital: function() {
            var self = this;
            this.$thumbnailbox_next.click(function() { var ov_pic = self.$thumbnailbox_item.length - 5; var ov_dis = ov_pic * 78; if (ov_pic > 0) { self.$thumbnailbox_wrapper.animate({ marginleft: -ov_dis }); } });
            this.$thumbnailbox_prev.click(function() { self.$thumbnailbox_wrapper.animate({ marginleft: 0 }); });
            this.$thumbnailbox_item.mouseover(function() {
                var cur_src = $(this).attr('data-src');
                self.$thumbnailbox_item.removeclass('item-cur');
                $(this).addclass('item-cur');
                self.changesrouce($(this).index(), cur_src);
            });
            this.$smallbox.hover(function() {
                self.$bigbox.show();
                self.$smallbox_mask.show();
                self.setmask();
                $(this).mousemove(function(ev) {
                    var oevent = ev || window.event;
                    var offset_pos = { left: oevent.clientx - $(this).offset().left - self.$smallbox_mask.width() / 2, top: oevent.clienty - $(this).offset().top - self.$smallbox_mask.height() / 2 + $(window).scrolltop() };
                    if (offset_pos.left < 0) { offset_pos.left = 0; } else if (offset_pos.left > $(this).width() - self.$smallbox_mask.width()) { offset_pos.left = $(this).width() - self.$smallbox_mask.width(); }
                    if (offset_pos.top < 0) { offset_pos.top = 0; } else if (offset_pos.top > $(this).height() - self.$smallbox_mask.height()) { offset_pos.top = $(this).height() - self.$smallbox_mask.height(); }
                    self.$smallbox_mask.css(offset_pos);
                    self.movebigpic();
                });
            }, function() {
                self.$smallbox_mask.hide();
                self.$bigbox.hide();
            });
        },
        constructor: magnifier
    };
    $.fn.magnifier = function() { var magnifier = new magnifier(this); return magnifier.inital(); };
})(jquery, window, document);