$(document).ready(function() {

  var config = {
    authDomain: "wr218314.wilddogio.com",
    syncURL: "https://wr218314.wilddogio.com"
  };

  wilddog.initializeApp(config);

  var ref = wilddog.sync().ref();
  var arr = []; // 此数组用来存放所有的消息元素

  //发射弹幕的事件
  $(".dm-launch").click(function() {
    // 获取输入框的数据
    var text = $(".dm-content").val();
    // 将数据写到云端 message 节点下，child 用来定位子节点
    ref.child('message').push(text);
    
    $(".dm-content").val('');
  });

   //响应按键点击事件
	  $(".dm-content").keypress(function(event) {
	    if (event.keyCode == "13") {
	      $(".dm-launch").trigger('click');
	    }
	  });
  
  //清屏的事件
  $(".dm-remove").click(function() {
    ref.remove();
    arr = [];
    $('.show-danmu').empty();
  });

  // 绑定 'child_added' 事件，当 message 节点下有子节点新增时，就会触发回调，回调的 `snapshot` 对象包含了新增的数据
  ref.child('message').on('child_added', function(snapshot) {
    var text = snapshot.val();
    arr.push(text);
    var textObj = $("<div class=" / dm - message / "></div>");
    textObj.text(text);
    $(".shou-danmu").append(textObj);
    moveObj(textObj);
  })

  //滚动以及逐行显示
  var topMin = $('.show-danmu').offset().top; // 显示框距顶部距离
  var topMax = topMin + $('.show-danmu').height(); // 显示框底部距顶部距离
  var _top = topMin; // 每个滚动消息距顶部距离


  var moveObj = function(obj) {
    var _left = $('.show-danmu').width() - obj.width();
    _top = _top + 50;
    if (_top > (topMax - 50)) {
      _top = topMin;
    }
    obj.css({
      left: _left,
      top: _top,
      color: getRandomColor() // 获取随机颜色，之后讲
    });
    var time = 20000 + 10000 * Math.random();
    // animate() 方法执行 CSS 属性集的自定义动画。逐渐改变的，这样就可以创建动画效果。
    obj.animate({
      left: "-" + _left + "px" // 让消息距左距离逐渐减小，产生右向左滚动动画。
    }, time, function() {
        obj.remove();
    });
  }

  //3秒显示一次
  var getAndRun = function() {
    if (arr.length > 0) {
      var n = Math.floor(Math.random() * arr.length + 1) - 1;
      var textObj = $("<div>" + arr[n] + "</div>");
      textObj.css("position", "absolute");
      $(".show-danmu").append(textObj);
      moveObj(textObj);
    }
    setTimeout(getAndRun, 3000);
  }

  //随机颜色
  var getRandomColor = function() {
    return '#' + (function(h) {
      return new Array(7 - h.length).join("0") + h
    })((Math.random() * 0x1000000 << 0).toString(16))
  }
  getAndRun();
});