(function ($) {
    function Slide(ele, options) {
        this.$ele = $(ele)
        this.options = $.extend({
            speed: 1000,
            delay: 3000
        }, options)
        this.states = [
                       { '&zIndex': 2, width: 298, height: 300, top: 61, left: 0, $opacity: 1, "font-size":16},
                       { '&zIndex': 3, width: 372, height: 360, top: 37, left: 110, $opacity: 1, "font-size":20},
                       { '&zIndex': 4, width: 465, height: 438, top: 0, left: 262, $opacity: 1, "font-size":26},
                       { '&zIndex': 3, width: 372, height: 360, top: 37, left: 500, $opacity: 1, "font-size":20},
                       { '&zIndex': 2, width: 298, height: 300, top: 61, left: 680, $opacity: 1, "font-size":16},
        ]
        this.lis = this.$ele.find('li')
        this.interval
       

        this.$ele.find('section:nth-child(2)').on('click', function () {
            this.stop()
            this.next()
            this.play()
        }.bind(this))
        this.$ele.find('section:nth-child(1)').on('click', function () {
            this.stop()
            this.prev()
            this.play()
        }.bind(this))
        this.move()
        this.play()
    }


    Slide.prototype = {



        move: function () {

            this.lis.each(function (i, el) {
                $(el)
                    .css('z-index', this.states[i]['&zIndex'])
                    .finish().animate(this.states[i], this.options.speed)
                    // .stop(true,true).animate(states[i], 1000)
                    .find('img').css('opacity', this.states[i].$opacity)
            }.bind(this))
        },
        next: function () {

            this.states.unshift(this.states.pop())
            this.move()
        },
        prev: function () {

            this.states.push(this.states.shift())
            this.move()
        },
        play: function () {

            this.interval = setInterval(function () {
                this.next()
            }.bind(this), this.options.delay)
        },
        stop: function () {
            // var _this = this
            clearInterval(this.interval)
        }

    }
    $.fn.zySlide = function (options) {
        this.each(function (i, ele) {
            new Slide(ele, options)
        })
        return this
    }
})(jQuery)