// ==UserScript==
// @name         TwistedTV
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  try to take over the world!
// @author       Gfarro
// @match        http://www.subportal.io/*
// @grant        none
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
// @run-at       document-end
// ==/UserScript==

var $ = window.jQuery;
var fullscreen = false;

(function() {
    'use strict';

})();

window.addEventListener('load', function() {
    $("#fullscreenHLS").click(function() {
        if(fullscreen == false) {
            //hide elements
            console.log("full screen");
            $(".modal-header").css("display", "none");
            $(".modal-body").css("padding", "0");
            $(".modal-dialog").addClass("modal-dialog-cinema");
            $(".modal-dialog").css("margin", "0");
            $("#myHLSPlayerVideo").css("width", $( document ).width());
            $("#myHLSPlayerVideo").css("height", $( document ).height());

            $("#fullscreenHLS").css("position", "absolute");
            $("#fullscreenHLS").css("bottom", "70px");
            $("#fullscreenHLS").css("right", "5px");

            $("#myHLSPlayer").css("left", "0");
            $("#myHLSPlayer").css("top", "0");

            fullscreen = true;
        } else {
            console.log("remove full screen");
            $(".modal-dialog").removeClass("modal-dialog-cinema");
            $(".modal-header").css("display", "block");
            $(".modal-body").css("padding", "0");

            $("#fullscreenHLS").css("position", "");

            $("#myHLSPlayerVideo").css("width", "500px");
            $("#myHLSPlayerVideo").css("height", "500px");
            fullscreen = false;
        }
    });
}, false);

window.addEventListener('keydown', function(e) {
    console.log("escape fullscreen");
    $(".modal-dialog").removeClass("modal-dialog-cinema");
    $(".modal-header").css("display", "block");
    $(".modal-body").css("padding", "0");

    $("#fullscreenHLS").css("position", "");

    $("#myHLSPlayerVideo").css("width", "500px");
            $("#myHLSPlayerVideo").css("height", "500px");

    fullscreen = false;
});