var video=document.querySelectorAll('video')
// console.log(video)
var goTop=document.querySelector('.aside')
var leftArrow = document.querySelector('.leftArrow');
var rightArrow = document.querySelector('.rightArrow');

var videolist = document.querySelectorAll('.video');
var playControl=document.querySelectorAll('.play')
// var videoTitle =document.querySelectorAll('.video-title')
console.log(playControl[0],videolist[0])
//
var douyin = document.querySelector('.douyin')
var kuaishou = document.querySelector('.kuaishou')
var DYtip = document.querySelector('.DYtip')
var KStip = document.querySelector('.KStip')
var dom=document.querySelector('.team-bottm')
// console.log(videolist, leftArrow, rightArrow)
   
var videoindex = 0
var videoUrl = ["http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/Pum%E6%B2%90%E6%B5%B4%E9%9C%B2-1.m4v", "http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/%E7%94%B5%E5%8A%A8%E7%89%99%E5%88%B7-2.m4v", "http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/%E8%8A%B1%E8%A5%BF%E5%AD%90%E5%8D%B8%E5%A6%86%E5%B7%BE-3.m4v", "http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/%E9%BA%A6%E7%89%87-6.m4v", "http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/%E9%A9%AC%E4%B8%81%E6%B4%81%E9%9D%A2-5.m4v", "http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/%E8%8A%B1%E8%A5%BF%E5%AD%90%E6%95%A3%E7%B2%89-4.m4v"]

var FMArr=['./images/沐浴露封面.png','./images/yashua.png','./images/xiezhuangjin.png','./images/maipian.png','./images/ximiannai.png','./images/sanfen.png']
// for(var v=0;v<video.length;v++){
//     video[v].bind('contextmenu',function() { return false; })
// }
document.addEventListener("WeixinJSBridgeReady", function (){ 
    document.getElementById('myvideo').play();
    document.getElementById('myvideo').pause();
    video.play();
}, false)

    // 给play事件绑定暂停函数
    ;[].forEach.call(videolist, function(i){
        i.addEventListener('play', pauseAll.bind(i))
        // console.log(isIE())
        if(isIE()){
           
            for (var a=0;a<playControl.length;a++){                                
                // console.log(playControl[a]) 
                playControl[a].style.opacity=1
                
            }
            // playControl[i].style.opacity=0  
        }else{
            
            playControl.forEach(function(item,index){
                if(i==index){
                    item.style.opacity=0
                }
                else {          
                    item.style.opacity=1
                }
            })
        }  
    
    });
    
    if(isIE()){
        for (var n=0;n<playControl.length;n++){
           (function(n){
            playControl[n].onclick=function(){
                for (var x=0;x<playControl.length;x++){
                    playControl[x].style.opacity=1
                }
                
                if (videolist[n].paused) {
                    videolist[n].play();
                    playControl[n].style.opacity=0
                   
                } else {
                    videolist[n].pause();
                    
                    playControl[n].style.opacity=1
                }
            }})(n)
        }
        
    }else{
        playControl.forEach(function(item,index){
        
            item.onclick=function(){
               
                playControl.forEach(function(item,index){
                    item.style.opacity=1
                })
                if (videolist[index].paused) {
                    videolist[index].play();
                    item.style.opacity=0
                   
                } else {
                    videolist[index].pause();
                    
                    item.style.opacity=1
                }
            }
        })
        
    }
       
    
rightArrow.onclick = function () {
    videoindex++;
        if (videoindex >= 8) {
            videoindex = 0
        }
        
        changeVideo(videoindex)
    }
leftArrow.onclick = function () {
    videoindex--;
        if (videoindex < 0) {
            videoindex = 7
        }
        
        changeVideo(videoindex)
    }






function changeVideo(index) {
    var arr = [index, index + 1, index + 2];
    if(isIE()){
        
      
       
        for(var i=0;i<arr.length;i++){
            arr[i]= arr[i] >= 8 ? arr[i] - 8 : arr[i];
        }
        for(var ind in videolist){
            videolist[ind].src=videoUrl[arr[ind]]
            videolist[ind].poster=FMArr[arr[ind]]
        }
        
        // for(var inde in videoTitle){
        //     videoTitle[inde].innerHTML=pArr[arr[inde]]
        // }

    }else{
        
        arr = arr.map(function(item, index) {
            return item >= 8 ? item - 8 : item
        })
        
        videolist.forEach(function(item, ind){
            item.src = videoUrl[arr[ind]]
            item.poster=FMArr[arr[ind]]
        });
        // videoTitle.forEach(function(item, ind)  {
        //     item.innerHTML = pArr[arr[ind]]
        // });
    }
}

// rightArrow.addEventListener('click')
// videolist.forEach((item, ind) => {
//     item.οnclick = function () {
//         if (item.paused) {
//             item.play();
//         } else {
//             item.pause();
//         }
//     }
// });

// videolist[0].οnclick = function () {
//     if (videolist[0].paused) {
//         videolist[0].play();
//     } else {
//         videolist[0].pause();
//     }
// }
function pauseAll() {
    var self = this;
    ;[].forEach.call(videolist, function(i) {
        // 将 videos 中其他的 video 全部暂停
        i !== self && i.pause();

        // i !== self && i.load();
    });

    
};





// 滚动到位置后 左右图片淡入
function getPoint(obj) { //获取某元素以浏览器左上角为原点的坐标 
    var t = obj.offsetTop; //获取该元素对应父容器的上边距 
    var l = obj.offsetLeft; //对应父容器的上边距 
    //判断是否有父容器，如果存在则累加其边距 
    while (obj = obj.offsetParent) {
        t += obj.offsetTop; //叠加父容器的上边距 
        l += obj.offsetLeft; //叠加父容器的左边距 
    }
    return {
        x: l,
        y: t
    }
}


function isIE() {
    if(!!window.ActiveXObject || "ActiveXObject" in window){
      return true;
    }else{
      return false;
　　}
}



function windowLoad () {
      
    var top = getPoint(dom).y; //距离文档顶部的距离
    var windowHeight = document.documentElement.clientHeight; //可视区域的高度
    window.onscroll = function () {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (top+dom.offsetHeight >= scrollTop && top+dom.offsetHeight <= windowHeight + scrollTop) {
            console.log('在可视区域了',kuaishou);
            kuaishou.classList.add('show');
            this.setTimeout(function(){
                KStip.classList.add('show');
            },800)
            this.setTimeout(function(){
                douyin.classList.add('show');
            },1200)
            this.setTimeout(function(){
                DYtip.classList.add('show');
            },2000)

        }else{
                kuaishou.classList.remove('show');           
                KStip.classList.remove('show');           
                douyin.classList.remove('show');
                DYtip.classList.remove('show');
            
        }

        // 判断是否出现返回顶部
        if(scrollTop>50){
            goTop.classList.add('show')
        }else{
            goTop.classList.remove('show')
        }
    }

}


window.onload=windowLoad;


//给ie9添加classList属性
if (!("classList" in document.documentElement)) {
    Object.defineProperty(HTMLElement.prototype, 'classList', {
        get: function() {
            var self = this;
            function update(fn) {
                return function(value) {
                    var classes = self.className.split(/\s+/g),
                        index = classes.indexOf(value);

                    fn(classes, index, value);
                    self.className = classes.join(" ");
                }
            }

            return {
                add: update(function(classes, index, value) {
                    if (!~index) classes.push(value);
                }),

                remove: update(function(classes, index) {
                    if (~index) classes.splice(index, 1);
                }),

                toggle: update(function(classes, index, value) {
                    if (~index)
                        classes.splice(index, 1);
                    else
                        classes.push(value);
                }),

                contains: function(value) {
                    return !!~self.className.split(/\s+/g).indexOf(value);
                },

                item: function(i) {
                    return self.className.split(/\s+/g)[i] || null;
                }
            };
        }
    });
}