// ==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/*
// @include     http://www.youtube.com/*
// @version     5.1.2
// @grant       none
// @downloadURL none
// ==/UserScript==
window.addEventListener('load', function () {
  (function (window, document, undefined) {
    var isRight = true;
    // find and keep a reference of the video player.
    var player;
    var stylePlayer = '';
    var video;
    var videoSize = {
    };
    var controls;
    var controlsWidth;
    // a flag to indicate is the mini player is toggled.
    var isToggled = false;
    var isTogglable = true;
    var originalHeight;
    var s2sBtn;
    var hasAddedMini = false;
    var intervalId = window.setInterval(function () {
      if (!hasAddedMini &&
      /^http[sS]*\:\/\/www\.youtube\.com\/watch[?]*/.test(window.location.href)) {
        player = document.querySelector('#movie_player');
        video = document.querySelector('#movie_player video.video-stream');
        controls = document.querySelector('#movie_player .ytp-chrome-bottom');
        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 = stylePlayer;
            video.style.width = videoSize.width;
            video.style.height = videoSize.height;
            video.style.left = videoSize.left;
            video.style.top = videoSize.top;
            controls.style.width = controlsWidth;
            if (document.querySelector('.ytp-size-button')) {
              document.querySelector('.ytp-size-button').style.display = 'inline-block';
            }
            if (s2sBtn) {
              s2sBtn.remove();
            }
            isRight = true;
            isToggled = false;
            return;
          }
          // when scrolling down to 1/3 player height, go to mini player mode.

          gotoMini();
        }, false);
        // 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 = stylePlayer;
              video.style.width = videoSize.width;
              video.style.height = videoSize.height;
              video.style.left = videoSize.left;
              video.style.top = videoSize.top;
              controls.style.width = controlsWidth;
              if (document.querySelector('.ytp-size-button')) {
                document.querySelector('.ytp-size-button').style.display = 'inline-block';
              }
              if (s2sBtn) {
                s2sBtn.remove();
              }
              isRight = true;
              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);
        hasAddedMini = true;
        window.clearInterval(intervalId);
      }
    }, 500);
    function gotoMini() {
      if (!isToggled &&
      window.pageYOffset >= parseInt(player.offsetHeight, 10) / 3) {
        originalHeight = parseInt(player.offsetHeight, 10);
        stylePlayer = player.style.cssText;
        videoSize = {
          height: video.style.height,
          width: video.style.width,
          left: video.style.left,
          top: video.style.top
        };
        controlsWidth = controls.style.width;
        var top = 'top: ' + (window.innerHeight - 270) + 'px;';
        var left = 'left: ' + (window.innerWidth - 430) + 'px;';
        player.style = 'position: fixed; bottom: 20px; left: 20px; height: 250px;' +
        'width: 400px; z-index: 9999999;' + top + left;
        video.style.height = '250px';
        video.style.width = '400px';
        video.style.top = '-10px';
        video.style.left = '0';
        controls.style.width = '350px';
        // now, hide the switch size button.
        if (document.querySelector('.ytp-size-button')) {
          document.querySelector('.ytp-size-button').style.display = 'none';
        }
        // add the 'Side-to-side' button.

        s2sBtn = document.createElement('button');
        s2sBtn.className += ' ytp-button';
        s2sBtn.innerHTML = '[S2S]';
        s2sBtn.setAttribute('title', 'Mini player side to side');
        s2sBtn.onclick = function () {
          if (isRight) {
            player.style = 'position: fixed; bottom: 20px; left: 20px; height: 250px;' +
            'width: 400px; z-index: 9999999;' + top;
            isRight = false;
          } 
          else {
            player.style = 'position: fixed; bottom: 20px; left: 20px; height: 250px;' +
            'width: 400px; z-index: 9999999;' + top + left;
            isRight = true;
          }
        };
        var fullscreen = document.querySelector('.ytp-fullscreen-button');
        fullscreen.parentElement.insertBefore(s2sBtn, fullscreen);
        isToggled = true;
      }
    }
  }) (window, document);
}, false);