/*
 show  //正常状态的�?
 bigshow   // 放大的框的盒�?
 smallshow  //缩小版的�?
 mask   //放大的区域（黑色遮罩�?
 bigitem  //放大的框

 */
//        var obj = new mag('.show', '.bigshow','.smallshow','.mask','.bigitem');
//        obj.init()
function mag(show, bigshow,smallshow,mask,bigitem) {
    this.show = show;
    this.bigshow = bigshow;
    this.smallshow = smallshow;
    this.mask = mask;
    this.bigitem = bigitem;
    this.obj = {
        prev: '.prev',
        next: '.next',
        middle: '.middle',
        middlebox: '.middle_box'
    }
}
mag.prototype = {
    init: function () {
        var that = this;
        that.start();
        this.showhover();
        this.smallimghover();
        this.showmove();
        this.prevclick();
        this.nextclick();
    },
    start: function () {
        var that = this;
        var buil=$(that.show).width()/$(that.mask).width()*$(that.bigshow).width();
        $(that.bigitem).css("width",buil);

        $(that.smallshow + ' img').eq(0).css("border","1px solid #2e55a8");

        var midhei=$(that.obj.middle + ' li').innerwidth()*$(that.obj.middle + ' li').length;
        $(that.obj.middle).width(midhei);

    },
    showhover: function () {
        var that = this;
        $(that.show).hover(function(){
            $(that.bigshow).show();
            $(that.mask).show();
        },function(){
            $(that.bigshow).hide();
            $(that.mask).hide();
        });
    },
    smallimghover: function () {
        var that = this;
        $(that.smallshow + ' img').click(function(){
            var src=$(this).attr("src");
            $(that.smallshow + ' img').css("border","1px solid #e8e8e8");
            $(this).css("border","1px solid #2e55a8");
            $(that.show + '>img').attr("src",src);
            $(that.bigitem+ '>img').attr("src",src);
        });
    },
    showmove:function(){
        var that = this;
        $(that.show).mousemove(function(e){
            var bigx=$(this).offset().left;
            var bigy=$(this).offset().top;
            var x= e.clientx;
            var y= e.clienty;
            var scrollx=$(window).scrollleft();
            var scrolly=$(window).scrolltop();
            var ox=x+scrollx-bigx-$(that.mask).width()/2;
            var oy=y+scrolly-bigy-$(that.mask).height()/2;
            if(ox<=0){
                ox=0
            }
            if(ox>$(that.show).width()-$(that.mask).width()){
                ox=$(that.show).width()-$(that.mask).width();
            }
            if(oy<=0){
                oy=0
            }
            if(oy>$(that.show).height()-$(that.mask).height()){
                oy=$(that.show).height()-$(that.mask).height();
            }
            $(that.mask).css({left:ox});
            $(that.mask).css({top:oy});
            var bei=$(that.show).width()/$(that.mask).width();
            $(that.bigitem+ '>img').css(
                {
                    marginleft: -(bei * ox)+50,
                    margintop:-(bei*oy)
                }
            )
        });
    },
    prevclick: function () {
        var that = this;
        $(that.obj.prev).click(function(){
            if($(that.obj.middle).width()-$(that.obj.middlebox).width()>0){
                if(math.abs(parseint($(that.obj.middle).css("marginleft")))>$(that.obj.middlebox).width()){
                    $(that.obj.middle).css("marginleft",parseint($(that.obj.middle).css("marginleft"))+$(that.obj.middlebox).width())
                }
                if(math.abs(parseint($(that.obj.middle).css("marginleft")))<$(that.obj.middlebox).width()){
                    $(that.obj.middle).css("marginleft","0px");
                    $(that.obj.next).removeclass("nextnone");
                    $(that.obj.prev).addclass("prevnone");
                }
            }else{
                return;
            }
        });
    },
    nextclick: function () {
        var that = this;
        $(that.obj.next).click(function(){
            if($(that.obj.middle).width()-$(that.obj.middlebox).width()>0){
                var shuzi=$(that.obj.middle).width()-math.abs(parseint($(that.obj.middle).css("marginleft")))-$(that.obj.middlebox).width();
                if(shuzi>$(that.obj.middlebox).width()){
                    $(that.obj.middle).css("marginleft",-$(that.obj.middlebox).width()+parseint($(that.obj.middle).css("marginleft")))
                }
                if(shuzi<$(that.obj.middlebox).width()){
                    $(that.obj.middle).css("marginleft",-($(that.obj.middle).width()-$(that.obj.middlebox).width()))
                    $(that.obj.next).addclass("nextnone");
                    $(that.obj.prev).removeclass("prevnone");
                }
            }else{
                return;
            }

        });
    }

}