var myslider = (function () {
  var defaultOption = {
    autoplay: true,
    delay: 6000,
    speed: 850,
    easing: "swing",
  };
  var sliderWrap = $("#slider-wrap");
  var sliderUl = $("#slider-box"); //要滑动的ul框
  var sliderLi = $("#slider-box").children("li"); //每个li
  var interval = null; //定时器
  var $nav = null;
  var total = 0; //总的li
  var current = -1; // 当前的li

  var isMobile = (function () {
    return /Android|iPhone|iPad|iPod|BlackBerry/i.test(
      navigator.userAgent || navigator.vendor || window.opera
    );
  })();

  //重启定时器
  var timeOutInterval = null;
  var moveAfterInterval = null;

  //初始化
  function init() {
    //计算尺寸 构建li
    calculateSlides();

    initNav();

    //如果第一屏是视频的画 就直接执行一次next 方法 并把current 赋值为-1
    next();

    //滑动事件监听
    initSwipe();

    //开启自动轮播
    defaultOption.autoplay && start();
  }

  //计算宽度
  function calculateSlides() {
    //这里定义
    var pcStr =""
   
      
    var mobStr =""
      

    if (isMobile) {
      sliderUl.append(mobStr);
    } else {
      sliderUl.append(pcStr);
    }
    //更新slider
    sliderLi = $("#slider-box").children("li");
    total = 3;
    sliderUl.css({ width: total * 100 + "%" });
    sliderLi.css({ width: 100 / total + "%" });
    //设置动画过渡事件
    sliderUl.css({
      transition: "transform " + defaultOption.speed / 1000 + "s",
    });
    //设置高度，按第一个的高度来控制
    //sliderWrap.css({"height":"870px"});
  }

  function initNav() {
    $nav = $('<nav class="myslider-nav"><ol /></nav>');
    for (var i = 0; i < total; i++) {
      if (i == 0) {
        $nav
          .children("ol")
          .append(
            '<li class="active" data-slide="' + i + '">' + i + 1 + "</li>"
          );
      } else {
        $nav
          .children("ol")
          .append('<li data-slide="' + i + '">' + i + 1 + "</li>");
      }
    }
    $nav = $nav.insertAfter(sliderWrap);
    //导航点击切换事件
    $nav.find("li").on("click", function () {
      clearTimeout(timeOutInterval);
      var to = parseInt($(this).attr("data-slide"));
      $(this).addClass("active").siblings().removeClass("active");
      //停止定时器
      stop();
      move(to);
      if (defaultOption.autoplay) {
        timeOutInterval = setTimeout(function () {
          start();
        }, 0);
      }
    });
  }

  //下一页
  function next() {
    //计算当前的translateX的值
    var target = current + 1;
    if (target >= total) {
      target = 0;
    }
    move(target);
  }

  //暂停所有的视频
  function pauseVideo() {
    var videoLi = $("#slider-box > li[data-video='true']");

    videoLi.each(function () {
      var id = $(this).find("video")[0].id;

      var vplay = document.getElementById(id);
      vplay.pause();
    });
  }

  //上一页
  function prev() {
    //计算当前的translateX的值
    var target = current - 1;
    if (target < 0) {
      target = total - 1;
    }
    move(target);
  }

  //停止
  function stop() {
    clearInterval(interval);
  }

  //开始
  function start() {
    //先清楚再调用，防止创建多个定时器任务
    clearInterval(interval);
    interval = setInterval(function () {
      next();
    }, defaultOption.delay);
  }

  //手机端的滑动事件
  function initSwipe() {
    var width = sliderLi.width();
    sliderWrap.on("swipeleft", function () {
      stop();
      next();
      start();
    });
    sliderWrap.on("swiperight", function () {
      stop();
      prev();
      start();
    });
  }

  //开始移动
  function move(to) {
    pauseVideo();
    clearTimeout(moveAfterInterval);
    updateIndex(to);
    sliderUl.css("transform", "translateX(-" + to * (100 / total) + "%" + ")");
    //移动到下一页后触发的事件
    moveAfterInterval = setTimeout(function () {
      //如果当前li是视频播放
      var isVideo = sliderLi.eq(current).attr("data-video");
      if (isVideo == "true") {
        videoId = sliderLi.eq(current).find("video")[0].id;
        //暂停轮播
        stop();
        //播放视频
        videoPlay(
          videoId,
          to,
          function () {
            isvideoPlay = true;
          },
          function () {
            var target = to;
            //如果当前的index == current 才进行
            if (target == current && defaultOption.autoplay) {
              next();
              start();
            }
          }
        );
      }
    }, defaultOption.speed);

    //改变导航
    updateNav();
  }

  //更新index
  function updateIndex(to) {
    current = to;
  }

  function updateNav() {
    $nav
      .find("li")
      .eq(current)
      .addClass("active")
      .siblings()
      .removeClass("active");
  }

  /**
   * 视频加载后开始播放
   * domId   	video标签id
   * callBack  视频播放后要处理的回调函数
   ***/
  function videoPlay(domId, sliderIndex, startPlay, endPaly) {
    var vplay = document.getElementById(domId);
    //关闭声音
    vplay.volume = 0.2;
    var playTime = setInterval(function () {
      if (vplay.readyState == 4) {
        clearInterval(playTime);
        if (typeof startPlay == "function") {
          startPlay();
        }
        //							if(sliderIndex == 0 && vplay.currentTime == 0){
        //								console.log("进来了");
        //								vplay.currentTime = 1;
        //							}
        vplay.play();
      }
    }, 200);

    //视频播放结束
    vplay.onended = function () {
      if (typeof endPaly == "function") {
        endPaly(sliderIndex);
      }

      //把视频的时间返回到第一秒
      setTimeout(function () {
        vplay.currentTime = 0;
        //							if(sliderIndex == 0){
        //								vplay.currentTime = 1;
        //							}else{
        //								vplay.currentTime = 0;
        //							}
      }, defaultOption.speed);
    };
  }

  return function (option) {
    init();
  };
})();

window.onload = function () {
  myslider();
  $("#slider-box").fadeIn();
  $(".myslider").css({ height: "auto" });
};