(function($) {
    var Carousel = function(poster) {
        var me = this;
        this.poster = poster;
        this.posterItemMain = poster.find(".poster-list"); 
        this.nextBtn = poster.find(".poster-next-btn");
        this.prevBtn = poster.find(".poster-prev-btn");
        this.posterItems = poster.find(".poster-item");
        // exit = $('#exit')
        //鍋舵暟寮
        if (this.posterItems.size() % 2 == 0) {
            this.posterItemMain.append(this.posterItems.eq(0).clone());
            this.posterItems = this.posterItemMain.children();
        };
        this.posterFirstItem = this.posterItems.first(); //绗竴涓够鐏墖
        this.posterLastItem = this.posterItems.last(); //鏈€鍚?涓婁竴涓够鐏墖
        this.rotateFlag = true;

        //榛樿閰嶇疆鍙傛暟
        this.setting = {
            "width": 1000,//骞荤伅鐗囨€诲
            "height": 497,//骞荤伅鐗囨€婚珮
            "posterWidth": 640, //绗竴甯у搴 --> 褰撳墠鏄剧ず
            "posterHeight": 497, //绗竴甯ч珮搴 --> 褰撳墠鏄剧ず
            "scale": 0.8, //璁板綍鏄剧ず姣斾緥鍏崇郴	
            "speed": 1000,
            "autoPlay": true,
            "delay": 2000,//鑷姩鎾斁闂撮殧鏃堕棿
            "verticalAlign": "bottom" //top bottom middle
        };
        $.extend(this.setting, this.getSetting());
        this.setSettingValue();
        this.setPosterPos();
        this.nextBtn.click(function() {
            if (me.rotateFlag) {
                me.rotateFlag = false;
                me.carouselRotate("left");
            };

        });
        this.prevBtn.click(function() {
            if (me.rotateFlag) {
                me.rotateFlag = false;
                me.carouselRotate("right");
            };
        });

        if (this.setting.autoPlay) {
            this.autoPlay();
            this.posterItems.click(function() {
                clearInterval(me.timer);
            })
            $('#exit').click(function(){
                me.autoPlay()
            })
        };

    };
    Carousel.prototype = {
        autoPlay: function() {
            var self = this;
            // console.log($(this).css('z-index'))
            this.timer = setInterval(function() {
                self.nextBtn.click();
            },
            this.setting.delay);
        },

        //
        /**
         * [carouselRotate 鏃嬭浆鍒囨崲鏁堟灉]
         * @param  {[type]} dir [鏂瑰悜]
         * @return {[type]}     [description]
         */
        carouselRotate: function(dir) {
            var _this_ = this;
            var zIndexArr = [];
            if (dir === "left") {
                this.posterItems.each(function() {
                    var self = $(this),
                    prev = self.prev().get(0) ? self.prev() : _this_.posterLastItem,
                    width = prev.width(),
                    height = prev.height(),
                    zIndex = prev.css("z-index"),
                    opacity = prev.css("opacity"),
                    left = prev.css("left"),
                    top = prev.css("top");
                    zIndexArr.push(zIndex);
                    self.animate({
                        width: width,
                        height: height,
                        //zIndex:zIndex,
                        opacity: opacity,
                        left: left,
                        top: top
                    },
                    _this_.setting.speed,
                    function() {
                        _this_.rotateFlag = true;
                    });
                });
                //zIndex闇€瑕佸崟鐙繚瀛樺啀璁剧疆锛岄槻姝㈠惊鐜椂鍊欒缃啀鍙栫殑鏃跺€欏€兼案杩滄槸鏈€鍚庝竴涓殑zindex
                this.posterItems.each(function(i) {
                    $(this).css("zIndex", zIndexArr[i]);
                    if(zIndexArr[i] == 2){
                        var courseTitle = $(this).find('.showVideo').attr('title')
                        $(".courseTitle").text(courseTitle)
                    }
                });
            } else if (dir === "right") {
                this.posterItems.each(function() {
                    var self = $(this),
                    next = self.next().get(0) ? self.next() : _this_.posterFirstItem,
                    width = next.width(),
                    height = next.height(),
                    zIndex = next.css("z-index"),
                    opacity = next.css("opacity"),
                    left = next.css("left"),
                    top = next.css("top");
                    zIndexArr.push(zIndex);
                    self.animate({
                        width: width,
                        height: height,
                        //zIndex:zIndex,
                        opacity: opacity,
                        left: left,
                        top: top
                    },
                    _this_.setting.speed,
                    function() {
                        _this_.rotateFlag = true;
                    });
                });
                //zIndex闇€瑕佸崟鐙繚瀛樺啀璁剧疆锛岄槻姝㈠惊鐜椂鍊欒缃啀鍙栫殑鏃跺€欏€兼案杩滄槸鏈€鍚庝竴涓殑zindex
                this.posterItems.each(function(i) {
                    $(this).css("zIndex", zIndexArr[i]);
                   if(zIndexArr[i] == 2){
                       var courseTitle = $(this).find('.showVideo').attr('title')
                       $(".courseTitle").text(courseTitle)
                   }
                });
            }
        },

        /**
         * [setPosterPos 璁剧疆鍓╀綑甯х殑浣嶇疆鍏崇郴]
         * 
         */
        setPosterPos: function() {
            var self = this;
            //杩斿洖鎵€鏈塴i  浠庡凡鏈夌殑鏁扮粍涓繑鍥為€夊畾鐨勫厓绱 
            var sliceItems = this.posterItems.slice(1),
            sliceSize = sliceItems.size() / 2,
            //杩斿洖绗 0 - 2涓猯i 鍙宠竟骞荤伅鐗
            rightSlice = sliceItems.slice(0, sliceSize),
            //z-index 
            level = Math.floor(this.posterItems.size() / 2),
            //宸﹁竟涓暟
            leftSlice = sliceItems.slice(sliceSize);
             //璁剧疆鍙宠竟甯х殑浣嶇疆鍏崇郴 瀹藉害 楂樺害 top
            var rw = this.setting.posterWidth, //瀹藉害
            rh = this.setting.posterHeight,//楂樺害
            //闂撮殭 = ((鎬诲 - 棣栧紶)/2)/鍙宠竟寮犳暟
            gap = ((this.setting.width - this.setting.posterWidth) / 2) / level;
            //闄ゅ幓绗竴寮犲悗宸﹀彸鐨勫搴
            var firstLeft = (this.setting.width - this.setting.posterWidth) / 2;
            var fixOffsetLeft = firstLeft + rw; //绗竴寮 + 宸﹁竟瀹藉害
            rightSlice.each(function(i) {
                level--; //z-index 閫愪釜閫掑噺
                rw = rw * self.setting.scale; //缂╂斁
                rh = rh * self.setting.scale; //缂╂斁
                var j = i + 0.2;
                $(this).css({
                    zIndex: level,
                    width: rw,
                    height: rh,
                    opacity: 1 / (++j),
                    // 1銆?/1 2銆?/2 
                    left: fixOffsetLeft + (++i) * gap - rw,
                    //绗竴寮 + 宸﹁竟瀹藉害 + 鎬籫ap - 褰撳墠瀹藉害
                    top: self.setVerticalAlign(rh)
                    //(self.setting.height - rh)/2 		//鎬婚珮 - 绗竴寮犻珮搴
                });
            });
            /**
             * [璁剧疆宸﹁竟甯х殑浣嶇疆鍏崇郴 瀹藉害 楂樺害 top]
             * @param  {[type]} i) {     寰幆娆℃暟   }
             * @return {[type]}    [description]
             */
            var lw = rightSlice.last().width(),
            lh = rightSlice.last().height(),
            oloop = Math.floor(this.posterItems.size() / 2) + 0.2;
            leftSlice.each(function(i) {

                $(this).css({
                    zIndex: i,
                    width: lw,
                    height: lh,
                    opacity: 1 / oloop,
                    // 1銆?/1 2銆?/2 
                    left: i * gap,
                    //涓暟 * gap
                    top: self.setVerticalAlign(lh)
                    //(self.setting.height - lh)/2 	//鎬婚珮 - 绗竴寮犻珮搴
                });
                lw = lw / self.setting.scale;
                lh = lh / self.setting.scale;
                oloop--;
            });
        },
        /**
         * [setVerticalAlign 璁剧疆鍨傜洿鎺掑垪瀵归綈]
         * @param {[type]} height [骞荤伅鐗囬珮搴
         * 
         */
        setVerticalAlign: function(height) {
            var verticalType = this.setting.verticalAlign,
            top = 0;
            if (verticalType === "middle") {
                top = (this.setting.height - height) / 2;
            } else if (verticalType === "top") {
                top = 0;
            } else if (verticalType === "bottom") {
                top = this.setting.height - height;
            } else {
                top = (this.setting.height - height) / 2;
            };

            return top;
        },

        /**
         * [setSettingValue 浣跨敤閰嶇疆鏁板€兼帶鍒跺熀鏈暟鍊 ]
         * 
         */
        setSettingValue: function() {
            //骞荤伅鐗囧楂
            this.poster.css({
                width: this.setting.width,
                height: this.setting.height,
                zIndex: this.posterItems.size() / 2,
            });
            //鍙娇鐢 ul{width:100%;height:100%;}浠ｆ浛
            this.posterItemMain.css({
                width: this.setting.width,
                height: this.setting.height,

            });
            //璁＄畻鎸夐挳瀹藉害
            var w = (this.setting.width - this.setting.posterWidth) / 2;
            //alert(this.posterItems.size()/2);
            this.prevBtn.css({
                width: w,
                height: this.setting.height,
                zIndex: Math.ceil(this.posterItems.size() / 2),
            });
            this.nextBtn.css({
                width: w,
                height: this.setting.height,
                zIndex: Math.ceil(this.posterItems.size() / 2),
            });
            //绗竴寮
            this.posterFirstItem.css({
                width: this.setting.posterWidth,
                height: this.setting.posterHeight,
                left: w,
                zIndex: Math.floor(this.posterItems.size() / 2),
            });
        },
        getSetting: function() {
            var setting = this.poster.attr("data-setting");
            if (setting && setting != "") {
                return $.parseJSON(setting);
            } else {
                return [];
            }
        }
    };
    Carousel.init = function(posters) {
        var _this_ = this;
        posters.each(function() {
            new _this_($(this));
        });
    };
    window.Carousel = Carousel;
})(jQuery);