/**
 * created by zhangyx on 2015/10/15.
 */
;(function($){
    var caroursel = function (caroursel){
        var self = this;
        this.caroursel = caroursel;
        this.posterlist = caroursel.find(".poster-list");
        this.posteritems = caroursel.find(".poster-item");
        this.firstposteritem = this.posteritems.first();
        this.lastposteritem = this.posteritems.last();
        this.prevbtn = this.caroursel.find(".poster-prev-btn");
        this.nextbtn = this.caroursel.find(".poster-next-btn");
        //ĭ�ϲ���
        this.setting = {
            "width":"1000",
            "height":"270",
            "posterwidth":"640",
            "posterheight":"270",
            "scale":"0.8",
            "speed":"1000",
            "isautoplay":"true",
            "dealy":"1000"
        }
        //�զ��������ĭ�ϲ����ϲ�
        $.extend(this.setting,this.getsetting())
        //���õ�һ֡λ��
        this.setfirstposition();
        //����ʣ��֡��λ��
        this.setsliceposition();
        //��ת
        this.rotateflag = true;
        this.prevbtn.bind("click",function(){
            if(self.rotateflag){
                self.rotateflag = false;
                self.rotateanimate("left")
            }
        });
        this.nextbtn.bind("click",function(){
            if(self.rotateflag){
                self.rotateflag = false;
                self.rotateanimate("right")
            }
        });
        if(this.setting.isautoplay){
            this.autoplay();
            this.caroursel.hover(function(){clearinterval(self.timer)},function(){self.autoplay()})
        }
    };
    caroursel.prototype = {
        autoplay:function(){
          var that = this;
          this.timer =  window.setinterval(function(){
              that.prevbtn.click();
          },that.setting.dealy)
        },
        rotateanimate:function(type){
            var that = this;
            var zindexarr = [];
            if(type == "left"){//�����ƶ�
                this.posteritems.each(function(){
                   var self = $(this),
                    prev = $(this).next().get(0)?$(this).next():that.firstposteritem,
                    width = prev.css("width"),
                    height = prev.css("height"),
                    zindex = prev.css("zindex"),
                    opacity = prev.css("opacity"),
                    left = prev.css("left"),
                    top = prev.css("top");
                    zindexarr.push(zindex);
                    self.animate({
                        "width":width,
                        "height":height,
                        "left":left,
                        "opacity":opacity,
                        "top":top,
                    },that.setting.speed,function(){
                        that.rotateflag = true;
                    });
                });
                this.posteritems.each(function(i){
                    $(this).css("zindex",zindexarr[i]);
                });
            }
            if(type == "right"){//�����ƶ�
                this.posteritems.each(function(){
                    var self = $(this),
                    next = $(this).prev().get(0)?$(this).prev():that.lastposteritem,
                        width = next.css("width"),
                        height = next.css("height"),
                        zindex = next.css("zindex"),
                        opacity = next.css("opacity"),
                        left = next.css("left"),
                        top = next.css("top");
                        zindexarr.push(zindex);
                    self.animate({
                        "width":width,
                        "height":height,
                        "left":left,
                        "opacity":opacity,
                        "top":top,
                    },that.setting.speed,function(){
                        that.rotateflag = true;
                    });
                });
                this.posteritems.each(function(i){
                    $(this).css("zindex",zindexarr[i]);
                });
            }
        },
        setfirstposition:function(){
            this.caroursel.css({"width":this.setting.width,"height":this.setting.height});
            this.posterlist.css({"width":this.setting.width,"height":this.setting.height});
            var width = (this.setting.width - this.setting.posterwidth) / 2;
            //����������ť����ʽ
            this.prevbtn.css({"width":width , "height":this.setting.height,"zindex":math.ceil(this.posteritems.size()/2)});
            this.nextbtn.css({"width":width , "height":this.setting.height,"zindex":math.ceil(this.posteritems.size()/2)});
            this.firstposteritem.css({
                "width":this.setting.posterwidth,
                "height":this.setting.posterheight,
                "left":width,
                "zindex":math.ceil(this.posteritems.size()/2),
                "top":this.setvertialtype(this.setting.posterheight)
            });
        },
        setsliceposition:function(){
            var _self = this;
            var sliceitems = this.posteritems.slice(1),
                level = math.floor(this.posteritems.length/2),
                leftitems = sliceitems.slice(0,level),
                rightitems = sliceitems.slice(level),
                posterwidth = this.setting.posterwidth,
                posterheight = this.setting.posterheight,
                btnwidth = (this.setting.width - this.setting.posterwidth) / 2,
                gap = btnwidth/level,
                containerwidth = this.setting.width;
            //�������֡��λ��
            var i = 1;
            var leftwidth = posterwidth;
            var leftheight = posterheight;
            var zloop1 = level;
            leftitems.each(function(index,item){
                leftwidth = posterwidth * _self.setting.scale;
                leftheight = posterheight*_self.setting.scale;
                $(this).css({
                    "width":leftwidth,
                    "height":leftheight,
                    "left": btnwidth - i*gap,
                    "zindex":zloop1--,
                    "opacity":1/(i+1),
                    "top":_self.setvertialtype(leftheight)
                });
                i++;
            });
            //��������֡��λ��
            var j = level;
            var zloop2 = 1;
            var rightwidth = posterwidth;
            var rightheight = posterheight;
            rightitems.each(function(index,item){
                var rightwidth = posterwidth * _self.setting.scale;
                var rightheight = posterheight*_self.setting.scale;
                $(this).css({
                    "width":rightwidth,
                    "height":rightheight,
                    "left": containerwidth -( btnwidth - j*gap + rightwidth),
                    "zindex":zloop2++,
                    "opacity":1/(j+1),
                    "top":_self.setvertialtype(rightheight)
                });
                j--;
            });
        },
        getsetting:function(){
            var settting = this.caroursel.attr("data-setting");
            if(settting.length > 0){
                return $.parsejson(settting);
            }else{
                return {};
            }
        },
        setvertialtype:function(height){
            var algin = this.setting.algin;
            if(algin == "top") {
                return 0
            }else if(algin == "middle"){
                return (this.setting.posterheight - height) / 2
            }else if(algin == "bottom"){
                return this.setting.posterheight - height
            }else {
                return (this.setting.posterheight - height) / 2
            }
        }
    }
    caroursel.init = function (caroursels){
        caroursels.each(function(index,item){
            new caroursel($(this));
        })  ;
    };
    window["caroursel"] = caroursel;
})(jquery)