/*
 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();
        this.move();
    },
    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","2px solid #f40");

        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","2px solid #f40");
            $(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,
                    marginTop:-bei*oy
                })
        });
    },
    prevClick: function () {
        var that = this;
        $(that.obj.prev).click(function () {
            var scrollLeft = $(that.obj.middleBox).scrollLeft(),//离左边距离
                middleWidth = $(that.obj.middle).width(),//内部宽
                middleBoxWidth = $(that.obj.middleBox).width(),//外部宽 ，移动单位距离
                isBottom = middleWidth - middleBoxWidth;//到最后的范围值
            if (middleWidth - middleBoxWidth > 0 && scrollLeft > 0) {
                scrollLeft = scrollLeft - middleBoxWidth > 0 ? scrollLeft - middleBoxWidth : 0;
                console.log('prevClick' + scrollLeft);
                $(that.obj.middleBox).animate({ scrollLeft: scrollLeft }, 800);
                if (scrollLeft <isBottom) {
                    $(that.obj.next).removeClass("nextnone");
                }
                if (scrollLeft <= 0) {
                    $(that.obj.next).removeClass("nextnone");
                    $(that.obj.prev).addClass("prevnone");
                }
                /*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 () {
            var scrollLeft = $(that.obj.middleBox).scrollLeft(),//离左边距离
                middleWidth = $(that.obj.middle).width(),//内部宽
                middleBoxWidth = $(that.obj.middleBox).width(),//外部宽 ，移动单位距离
                isBottom = middleWidth - middleBoxWidth;//到最后的范围值
            if (middleWidth - middleBoxWidth > 0 && scrollLeft - isBottom) {
                scrollLeft = (scrollLeft + middleBoxWidth) > $(that.obj.middle).width() ? $(that.obj.middle).width() : scrollLeft + middleBoxWidth;
                console.log('nextClick'+scrollLeft);
                $(that.obj.middleBox).animate({ scrollLeft: scrollLeft }, 800);
                var isBottom = scrollLeft - (parseInt(middleWidth) - middleBoxWidth);
                if (scrollLeft >= middleBoxWidth) {
                    $(that.obj.prev).removeClass("prevnone");
                }
                if (isBottom > 0) {
                    $(that.obj.next).addClass("nextnone");
                    $(that.obj.prev).removeClass("prevnone");
                }
                
                /*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;
            }

        });
    },
    move: function () {
        var that = this;
        var middleBoxWidth = $(that.obj.middleBox).width(),//外部宽 ，移动单位距离
            isBottom = $(that.obj.middle).width() - middleBoxWidth;//到最后的范围值
        if ($(that.obj.middle).width() > middleBoxWidth) {
            $(that.obj.middleBox).scroll(function (e) {
                var scrollLeft = $(this).scrollLeft();
                if (scrollLeft <= 10) {//到左边了
                    $(that.obj.prev).addClass("prevnone");
                    $(that.obj.next).removeClass("nextnone");
                } else if (scrollLeft -isBottom>=0) {//到右边了
                    $(that.obj.prev).removeClass("prevnone");
                    $(that.obj.next).addClass("nextnone");
                } else {
                    $(that.obj.prev).removeClass("prevnone");
                    $(that.obj.next).removeClass("nextnone");
                }
                
            });

            
        }
    }
}