// ==UserScript==
// @name        Youtube Mini Player
// @namespace   feifeihang.info
// @description Toggle mini player when scrolling down in Youtube
// @include     https://youtu.be/*
// @include     http://youtu.be/*
// @include     https://www.youtube.com/watch?*
// @include     http://www.youtube.com/watch?*
// @version     3
// @grant       none
// @downloadURL none
// ==/UserScript==
window.addEventListener('load', function () {
  (function (window, document, undefined) {
    // find and keep a reference of the video player.
    var player = document.querySelector('.video-stream');
    var style = '';
    // a flag to indicate is the mini player is toggled.
    var isToggled = false;
    var isTogglable = true;
    var originalHeight = undefined;
    window.addEventListener('scroll', function () {
      if (!isTogglable) {
        return false;
      }
      // when scrolling up to 1/3 original player height, turn off mini player.

      if (isToggled && window.pageYOffset < originalHeight / 3) {
        player.style = style;
        isToggled = false;
        return;
      }
      // when scrolling down to 1/3 player height, go to mini player mode.

      gotoMini();
    }, false);
    function gotoMini() {
      if (!isToggled &&
      window.pageYOffset >= parseInt(player.style.height, 10) / 3) {
        originalHeight = parseInt(player.style.height, 10);
        style = player.style.cssText;
        var top = 'top: ' + (window.innerHeight - 270) + 'px;';
        player.style = 'position: fixed; bottom: 20px; left: 20px; height: 250px;' +
        'width: 350px; z-index: 9999999;' + top;
        isToggled = true;
      }
    }
    // add a mini player toggle button.

    var btn = document.createElement('div');
    btn.className += ' yt-uix-button yt-uix-button-size-default yt-uix-button-primary';
    btn.innerHTML = 'Mini: on';
    btn.style = 'line-height: 26px; height: 26px; margin-left: 5px;';
    btn.onclick = function () {
      if (this.innerHTML === 'Mini: on') {
        this.innerHTML = 'Mini: off';
        isTogglable = false;
        if (isToggled) {
          player.style = style;
          isToggled = false;
        }
      } 
      else {
        this.innerHTML = 'Mini: on';
        gotoMini();
        isTogglable = true;
      }
    }
    var dom = document.querySelector('#yt-masthead-signin') ||
    document.querySelector('#yt-masthead-user');
    dom.appendChild(btn);
  }) (window, document);
}, false);