var cusBtns = {
    element: undefined,
    width: undefined,
    screenWidth: undefined,
    currentPosition: {
        x: 0
    },

    init: function() {
        cusBtns.element = document.getElementById('list');
        if (device.isMobile()) {
            cusBtns.bindEvents();
        }

        cusBtns.screenWidth = this.element.offsetWidth;
    },
    bindEvents: function() {
        this.element.addEventListener('touchstart', cusBtns.onTouchStart);
    },
    addBtn: function(config) {
        var newItem = '';
        //移动端全屏和音乐按钮布局到右上角
        if ((config.id === "playMusic" || config.id === "stopMusic" || config.id === "fullscreen" || config.id === "exitFullScreen") && device.isMobile()) {
            var listElement = window.$("#commonlyUsedBtn");
            var newItem = "<li><div id='" + config.id + "_btn'><span><img src='" + config.image + "'></span></div></li>"
        } else {
            var listElement = window.$("#list");
            if (config.id !== 'userinfo') {
                var newItem = "<li><div id='" + config.id + "_btn'><span><img src='" + config.image + "'></span><span>" + config.text + "</span></div></li>"
            } else {
                var newItem = "<li><div id='" + config.id + "_btn'><span><img src='" + config.image + "' style='border-radius:50%;' onerror='this.src=\"http://hgchargeres.techtimesun.com/user_customize/head_img/qqhead.png?t=20181229 \"'></span><span>" + config.text + "</span></div></li>"
            }
        }

        listElement.append(newItem);
        listElement.on('click', '#' + config.id + '_btn', config.event);

    },
    removeBtn: function(config) {
        var item = window.$("#" + config.id)
        item.off(); //删除该节点的所有事件
        item.parent().remove();
    },
    hideBtn: function(config) {
        window.$("#" + config.id + "_btn").parent().hide();
        // 如果出现滚动条：设置bottom-17
        //  if(document.getElementById('list').scrollWidth>window.innerWidth){
        //     $("#list").css("bottom","-17px");
        // }else{
        //     $("#list").css("bottom","0");
        // }
    },
    hideAllBtn: function() {
        window.$("#list li").hide();
        window.$("#commonlyUsedBtn li").hide();
        window.$("#list").css("bottom", "0");
    },
    showBtn: function(config) {

        //分享按钮只有PC端才显示
        if (config.id === "share") {
            if (!device.isMobile()) {
                window.$("#" + config.id + "_btn").parent().show();
            }
        } else {
            window.$("#" + config.id + "_btn").parent().show();
        }
        // 显示logo和用户信息

        // $('#user').show()

        $('#logo').show()
            // if(document.getElementById('list').scrollWidth>window.innerWidth){
            //     $("#list").css("bottom","-17px");
            // }else{
            //     $("#list").css("bottom","0");
            // }
    },
    showAllBtn: function() {
        window.$("#list li").show();
        window.$("#commonlyUsedBtn li").show();
        // if(document.getElementById('list').scrollWidth>window.innerWidth){
        //     $("#list").css("bottom","-17px");
        // }else{
        //     $("#list").css("bottom","0");
        // }
    },

    //events
    onTouchStart: function(event) {
        return
        // event.preventDefault();
        cusBtns.currentPosition.x = event.touches[0].screenX;
        cusBtns.element.addEventListener('touchmove', cusBtns.onTouchMove);
        cusBtns.element.addEventListener('touchend', cusBtns.onTouchEnd);
        // cusBtns.width = cusBtns.element.scrollWidth; //由于不使用overflow了，所以长度不会隐藏，使用scrollWith的原因是获取总长度
    },
    onTouchMove: function(event) {
        event.preventDefault();
        //识别手指是向左滑还是向右滑
        var touch = event.touches[0];
        var moveOffset = Util.getElementFixed(cusBtns.element).currentX + touch.screenX - cusBtns.currentPosition.x;
        if (touch.screenX - cusBtns.currentPosition.x > 0) {
            // 手指向右滑动，即列表向右移动
            // 移动translate方法
            // if (Util.getElementFixed(cusBtns.element).currentX < 0) {
            //     if (moveOffset > 0) {
            //         moveOffset = 0;
            //     }
            //     $("#list").css("transform", "translate(" + moveOffset + "px,0px)")

            // }

            // 移动滚动条方法
            if (cusBtns.element.scrollLeft < 0) {
                moveOffset = 0;
            }
            cusBtns.element.scrollLeft -= moveOffset;
        } else {
            // if (Util.getElementFixed(cusBtns.element).currentX > cusBtns.screenWidth - cusBtns.width) {
            //     if (moveOffset < -75) moveOffset = -75;
            //     $("#list").css("transform", "translate(" + moveOffset + "px,0px)")

            // }
            if (cusBtns.element.scrollLeft > cusBtns.element.scrollWidth - window.innerWidth) {
                moveOffset = 0;
            }
            cusBtns.element.scrollLeft -= moveOffset;

        }

        cusBtns.currentPosition.x = event.touches[0].screenX;
    },
    onTouchEnd: function(event) {
        //event.preventDefault();
        cusBtns.element.removeEventListener('touchmove', cusBtns.onTouchMove);
        cusBtns.element.removeEventListener('touchend', cusBtns.onTouchEnd);
    },

    visibleCount: function() {
        return window.$("#list").children(":visible").length;
    },
    visibleBtns: function() {
        // 常用按钮（右上方）
        var arr1 = window.$("#commonlyUsedBtn").children(":visible").children().toArray().map(function(item) {
                return item.id.replace('_btn', '');
            })
            //下方按钮
        var arr2 = window.$("#list").children(":visible").children().toArray().map(function(item) {
            return item.id.replace('_btn', '');
        })

        return arr1.concat(arr2)
    }
}