(function(bom, dom){

    // 插件的使用配置
    let configDefaults = {
        time: 3000,
        pageaction: {
            prev: 'action-left', // 上一页按钮class
            next: 'action-right' // 下一页按钮class
        }
    }

    // 插件程序的配置
    let config = {
        timer: null,
        lengths: document.getElementsByClassName('broadcast-wrapper')[0].getElementsByTagName("li").length,
        fatherWrapper: 'broadcast-wrapper',
        circular: 'circular-list',
        width() {
           return document.getElementsByClassName(this.fatherWrapper)[0].getElementsByTagName("li")[0].getElementsByTagName("img")[0].width
        },
        returnFatherWrapper() {
            return  document.getElementsByClassName(this.fatherWrapper)[0]
        },
        totalWidth() {
           return parseInt(`-${(this.lengths - 1) * this.width()}`)
        },
        returnCircular() {
            return  document.getElementsByClassName(this.circular)[0]
        },
        createdCircular() {
            var html = ""
            for (let i = 0; i < this.lengths; i++) {
                html+= `<li class="${i == 0 ? 'active' : ''}"></li>`
            }
            this.returnCircular().innerHTML = html
        }
    }

    var index = 1;



    function Broadcast(options) {
        if(arguments.length == 0) {
            console.error('请传入默认配置')
        }else {
            configDefaults.time = options.time || configDefaults.time
            configDefaults.pageaction.prev = options.pageaction.prev || configDefaults.pageaction.prev
            configDefaults.pageaction.next = options.pageaction.next || configDefaults.pageaction.next
            this.init()
        }
    }


    Broadcast.prototype = {
        // 函数的入口
        init(){
            config.createdCircular()
            this.prevClick()
            this.nextClick()
            this.autoPlay()
            this.autoChangeCircular()

            document.getElementsByClassName('main')[0].onmouseover = () => this.stopPlay()
            document.getElementsByClassName('main')[0].onmouseout = () => this.autoPlay()
        },

        // 上一页按钮点击事件
        prevClick() {
            this.$(configDefaults.pageaction.prev)[0].onclick =  () => {
                index--
                if(index <= 0) {
                  index = config.lengths
                }
                this.clickChange()
                this.transition(config.width())
            }
        },

        // 下一页按钮点击事件
        nextClick() {
            

            this.$(configDefaults.pageaction.next)[0].onclick =  () => {
               index++
               if(index > config.lengths) {
                 index = 1
               }
               this.clickChange()
               this.transition(parseInt(`-${config.width()}`))
            }
        },

        // 过渡动画的设置
        transition(px) {
            var offsetLeft = parseInt(config.returnFatherWrapper().style.left), 
                ow =  offsetLeft + px;
            if(ow >= config.totalWidth()) {
                config.returnFatherWrapper().style.left = `${ow}px`
            }else {
                config.returnFatherWrapper().style.left = `0px`
            }

            if(ow > 0) {
                config.returnFatherWrapper().style.left = `${config.totalWidth()}px`
            }
        },

        clickChange() {
            var Circularli = this.$(config.circular)[0].getElementsByTagName("li")
            var Wrapperli = this.$(config.fatherWrapper)[0].getElementsByTagName("li")
            for(let i = 0;i<Circularli.length;i++){
                if(Circularli[i].className == "active"){
                    Circularli[i].className = ""
                }
            }
            Circularli[index-1].className="active"
        },

        autoChangeCircular() {
            // 小圆点
            var Circularli = this.$(config.circular)[0].getElementsByTagName("li")
            var Wrapperli = this.$(config.fatherWrapper)[0].getElementsByTagName("li")
            var self = this
            for(let i = 0;i<Circularli.length;i++){
                Circularli[i].onmouseover = function () {
                    for(var j = 0;j<Circularli.length;j++){
                        if(Circularli[j].className == "active"){
                          Circularli[j].className = ""
                        }
                    }
                    Circularli[i].className="active"
                    config.returnFatherWrapper().style.left = `${parseInt(`-${i*config.width()}`)}px`
                    
                }
            }
        },

        // 自动轮播
        autoPlay() {
            config.timer = setInterval(() => {
              this.$(configDefaults.pageaction.next)[0].onclick()
            }, configDefaults.time)
        },

        // 停止播放
        stopPlay() {
            clearInterval(config.timer)
        },

        // 获取元素
        $(className){
            return document.getElementsByClassName(className)
        }

    }

    bom.Broadcast = Broadcast


})(window, document)