// Declare variables
var ytThumbImgMenu, ytEnhancerMenu;                     // Menu systems
var ytThumbnailBttn, ytMaxDefaultImg, ytHqDefaultImg,   // Buttons & Images
    ytLoopBttn, ytFloatBttn, ytAMaxDefaultImg, ytAHqDefaultImg;

var	mastHead, video, mainPlayerWindow, poppedVdoContr;  // Video accessor
var mainContentArea;                                    // Youtube Player container
var vdoPlyrAtts;                                        // Player attributes
var part;                                               // Image part

function setupContentandInsert() {
    poppedVdoContr = document.createElement("DIV");
    ytThumbImgMenu = document.createElement("DIV");
    ytEnhancerMenu = document.createElement("DIV");
    ytThumbnailBttn = document.createElement("IMG");
    ytMaxDefaultImg = document.createElement("IMG");
    ytHqDefaultImg = document.createElement("IMG");
    ytLoopBttn = document.createElement("IMG");
    ytFloatBttn = document.createElement("IMG");
    ytAMaxDefaultImg = document.createElement("A");
    ytAHqDefaultImg = document.createElement("A");
    video = document.getElementsByTagName("video")[0];
    mastHead = document.getElementById("masthead");

    part = "//i.ytimg.com/vi/";


    // Append to nodes as required
    mainContentArea = $("ytd-watch");
    mainPlayerWindow = $("#player-container").parent();
    vdoPlyrAtts = mainContentArea[0].attributes;
    ytEnhancerMenu.appendChild(ytThumbnailBttn);
    ytEnhancerMenu.appendChild(ytLoopBttn);
    ytEnhancerMenu.appendChild(ytFloatBttn);

    ytThumbnailBttn.src = browser.extension.getURL("icons/thumbnailOff.png");
    ytLoopBttn.src = browser.extension.getURL("icons/loopFalse.png");
    ytFloatBttn.src = browser.extension.getURL("icons/floatPlayer.png");

    // Insert
    document.body.appendChild(poppedVdoContr);
    mainContentArea[0].appendChild(ytThumbImgMenu);
    mainContentArea[0].appendChild(ytEnhancerMenu);
    ytAMaxDefaultImg.appendChild(ytMaxDefaultImg);
    ytAHqDefaultImg.appendChild(ytHqDefaultImg);
    ytThumbImgMenu.appendChild(ytAMaxDefaultImg);
    ytThumbImgMenu.appendChild(ytAHqDefaultImg);

    // Set onclick actions
    ytThumbnailBttn.addEventListener("click", showThumbImageVew);
    ytLoopBttn.addEventListener("click", setLoop);
    ytFloatBttn.addEventListener("click", toggleFloat);
    video.addEventListener("wheel", manageVolume);

    // Dragable window for floating video
    dragVideo(poppedVdoContr);

    // Set trget of Thumbnails of video
    ytAMaxDefaultImg.target = "_blank";
    ytAHqDefaultImg.target = "_blank";


    // Theming & Apply Styles
    ytThumbImgMenu.className = "ytThumbMenuStyle";
    ytMaxDefaultImg.className = "thumbImageStyle";
    ytHqDefaultImg.className = "thumbImageStyle";
    ytEnhancerMenu.className = "ytMenuStyle";
    ytThumbnailBttn.className = "imageStyle";
    ytLoopBttn.className = "imageStyle";
    ytFloatBttn.className = "imageStyle";
    poppedVdoContr.id = "draggable";
    poppedVdoContr.style.display = "none";
    mainContentArea[0].style = "background: #C0C0C0;";
    mastHead.style = "background: #C0C0C0;";
}

// Functions
function showThumbImageVew(e) {
    if (ytThumbImgMenu.style.display == "block") {
        ytThumbImgMenu.style.display = "none";
        ytThumbnailBttn.src = browser.extension.getURL("icons/thumbnailOff.png");
    } else {
        ytAMaxDefaultImg.href = part + vdoPlyrAtts[0].value + "/maxresdefault.jpg";
        ytAHqDefaultImg.href = part + vdoPlyrAtts[0].value + "/hqdefault.jpg";
        ytMaxDefaultImg.src = part + vdoPlyrAtts[0].value + "/maxresdefault.jpg";
        ytHqDefaultImg.src = part + vdoPlyrAtts[0].value + "/hqdefault.jpg";
        ytThumbnailBttn.src = browser.extension.getURL("icons/thumbnailOn.png");
        ytThumbImgMenu.style.display = "block";
    }

    return;
}

function setLoop(e) {
    if (video.loop == false) {
        video.loop = true;
        ytLoopBttn.src = browser.extension.getURL("icons/loopTrue.png");
    } else {
        video.loop = false;
        ytLoopBttn.src = browser.extension.getURL("icons/loopFalse.png");
    }
    return;
}

function toggleFloat() {
    playerWindow = document.getElementById("player-container");

    if(poppedVdoContr.style.display == "none"){
        poppedVdoContr.appendChild(playerWindow);
        poppedVdoContr.style.display = "block";
    } else {
        mainPlayerWindow[0].insertBefore(playerWindow, mainPlayerWindow[0].firstChild);
        poppedVdoContr.style.display = "none";
    }
}

function manageVolume(e) {
    var delta;
    e.preventDefault(); // Keep page from scrolling while in video area

    // Detect scroll direction
    if (e.wheelDelta) delta = e.wheelDelta; else delta = -1 * e.deltaY;
    // Vol UP || Vol DOWN
    if (delta > 0) video.volume += 0.05; else if (delta < 0) video.volume -= 0.05;
}

function dragVideo(elmnt) {
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    elmnt.onmousedown = dragMouseDown;

    function dragMouseDown(e) {
        e = e || window.event;
        pauseEvent(e);
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
    }

    function elementDrag(e) {
        e = e || window.event;
        pauseEvent(e);
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    }

    function closeDragElement(e) {
        // stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
    }

    function pauseEvent(e) {
        if(e.stopPropagation) e.stopPropagation();
        if(e.preventDefault) e.preventDefault();
        e.cancelBubble=true;
        e.returnValue=false;
    return false;
    }
}

// load after important dom elements are present
$(document).arrive("#player-container", function() {
    setupContentandInsert();
});