☰

Primewire Host Highlighter v2

Automatically highlights the provider or host of your choice wherever it appears on a page listing, allowing you to quickly locate and click your favorite host to start watching.

目前为 2016-10-23 提交的版本。查看 最新版本。

// ==UserScript==
// @name Primewire Host Highlighter v2
// @namespace PHH
// @description Automatically highlights the provider or host of your choice wherever it appears on a page listing, allowing you to quickly locate and click your favorite host to start watching.
// @version 2
// @run-at  document-ready
// @include https://www.primewire.ag/*
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_deleteValue
// @grant        GM_registerMenuCommand
// @grant        GM_notification
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @author drhouse, A.W.M
// @icon https://www.primewire.ag/favicon.ico
// ==/UserScript==

var rightDivLeft = 0;
var rightDivLeftHide = 0;
var showoptions = false;

$(document).ready(function () {


    GM_registerMenuCommand("Primewire Host Highlighter", function(){
        var host = GM_getValue("highlight");
        if (!host){
            host = "[vodlocker.com][thevideo.me][promptfile.com][filenuke.com]";
        }
        host = prompt ('Enter hostname (case insensitive), you can add each domain between []\neg. [vodlocker.com][thevideo.me]:', host);
        GM_setValue ("highlight", host);
        location.reload();
    });

    $.expr[":"].icontains = $.expr.createPseudo(function(arg) {
        return function( elem ) {
            return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
        };
    });

    // *************** Prepare variables *******************
    var host = GM_getValue("highlight");
    if (!host){
        host = "[vodlocker.com][thevideo.me][promptfile.com][filenuke.com]";
    }

    var primeHost = GM_getValue("primeHost");
    if (!primeHost){
        primeHost = 0;
    }

    var hosts = host.match(/\[[^\]]+\]/g);
    var colors = ["#00b2ff","#009921", "#aaaa00", "#ff7b00", "#e100ff", "#ff0072"]; // Default Colors
    var colorsRGB = ["0,178,255","0, 153, 33", "170, 170, 0", "255,123,0", "225,0,255", "255,0,114"]; // Default colors in RGB
    var colorslength = colors.length;
    var hostsArrLength = hosts.length;
    var showMenu = false;

    var primeLinksArr = [];
    var primelink = "";
    if(primeHost >= hostsArrLength){
        primeHost = 0;
    }

    // ****************** Prepare DIVs ******************
    var leftDiv = document.createElement("div"); //Create left div
    leftDiv.id = "leftDiv"; //Assign div id

    var centerDiv = document.createElement("div"); //Create center div
    centerDiv.id = "centerDiv"; //Assign div id
    centerDiv.setAttribute("style", " position: fixed; top: 0px; left: 0px; background-color: rgba(0,0,0,.8); width: 100%; height: 100%; z-index: 150; "); //Set div attributes
    document.body.appendChild(centerDiv);
    $('#centerDiv').hide(); // Start hidden

    var optionsclass = "optionsMenu";
    var rightDiv = document.createElement("div"); //Create right div
    rightDiv.id = "rightDiv"; //Assign div id
    rightDiv.className = optionsclass;
    rightDiv.setAttribute("style", " position: fixed; float: left; z-index: 152; text-align: left; font-size: 16px; height: " + ((hostsArrLength * 45) + 131) + "px; border-top: 1px solid #f2f2f2; border-right: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; border-radius: 4px; "); //Set div attributes
    document.body.appendChild(rightDiv); // And append the div to the document body
    $("#rightDiv").hide(); // Start hidden

    var leftDivTop = 10; // Track Top position in the Left DIV
    var minDivWidth = 170; // Max Left Div Width
    var rightDivTop = 10;  // Track Top position in the Right DIV

    // Show/Movie Title
    var titleclass = document.getElementsByTagName("h1");
    var titlesSpan = titleclass[1].childNodes;
    var titles = titlesSpan[0].childNodes;
    var title1 = document.createElement('h5');
    title1.id = "title1";
    title1.innerHTML = titles[1].innerText;
    var title1_styling = "<style> #title1{ position: absolute; background-color: rgba(124, 174, 255,.5); color: black; top: " + leftDivTop + "px; left: 10px; overflow: hidden; white-space: nowrap; height: 20px; font-size: 12px; font-weight: bold; text-align: center; display: inline-block; border-top: 1px solid  #000000; border-right: 1px solid #000000; border-left: 1px solid  #000000; } </style>";
    $('head').append( title1_styling );
    leftDiv.appendChild(title1);

    leftDivTop += 21; // increase top position. amount to title1 height.

    // *********** Season, Ep titles || Next, Previous Buttons || Autostart CheckBox ******************
    var prev_next_show = false;
    var prev_next_elem = $("div.episode_prev_next").children();
    if(prev_next_elem.length > 0){
        prev_next_show = true;
        var previous = 'https://www.primewire.ag' + $(prev_next_elem[0]).attr('href');
        var next = 'https://www.primewire.ag' + $(prev_next_elem[1]).attr('href');

        // **** Season Title *****
        var title2 = document.createElement('h5');
        title2.id = "title2";
        title2.innerHTML = titles[3].childNodes[1].innerText; // <a>INNER_TEXT</a>
        var title2_styling = "<style> #title2{ position: absolute; background-color: rgba(124, 174, 255,.5); color: black; top: " + leftDivTop + "px; left: 10px; overflow: hidden; white-space: nowrap; height: 20px; font-size: 10px; text-align: center; display: inline-block; border-right: 1px solid #000000; border-left: 1px solid  #000000; } </style>";
        $('head').append( title2_styling );
        leftDiv.appendChild(title2); // Append the link to the div

        leftDivTop += 20; // increase top position. amount to title2 height.

        // **** Ep Title *****
        var title3 = document.createElement('h5');
        title3.id = "title3";
        title3.innerHTML = titles[5].innerText; // <a>INNER_TEXT</a>
        var title3_styling = "<style> #title3{ position: absolute; background-color: rgba(124, 174, 255,.5); color: black; top: " + leftDivTop + "px; left: 10px; overflow: hidden; white-space: nowrap; height: 20px; font-size: 10px; text-align: center; display: inline-block; border-right: 1px solid #000000; border-left: 1px solid  #000000; border-bottom: 1px solid #000000; } </style>";
        $('head').append( title3_styling );
        leftDiv.appendChild(title3); // Append the link to the div

        leftDivTop += 30; // increase top position. amount to title3 height + bottom margin

        // ****** Next & Previous Buttons ******
        var prev_a = document.createElement('a');
        prev_a.className = "aprevlink";
        prev_a.id = "aprevlinkid";
        prev_a.href =  previous; // Insted of calling setAttribute
        prev_a.setAttribute("target", "_self");
        prev_a.innerHTML = " Previous "; // <a>INNER_TEXT</a>
        var prev_link_styling = "<style> a.aprevlink:link{ position: absolute; background-color: white; color: #dd3333; font-weight: bold; top: " + leftDivTop + "px; left: 10px; padding: 3px 3px; text-align: center; text-decoration: none; display: inline-block; border: 1px solid #dd3333; border-radius: 2px; } </style>";
        var prev_link_hover_styling = "<style> a.aprevlink:link:hover{ position: absolute; background-color: #dd3333; color: white; font-weight: bold; top: " + leftDivTop + "px; left: 10px; padding: 3px 3px; text-align: center; text-decoration: none; display: inline-block; border: 1px solid #dd3333; border-radius: 2px; } </style>";
        var prev_visited_styling = "<style> a.aprevlink:visited{ position: absolute; background-color: #c6c6c6; color: #666666; font-weight: bold; top: " + leftDivTop + "px; left: 10px; padding: 3px 3px; text-align: center; text-decoration: none; display: inline-block; border: 1px solid #666666; border-radius: 2px; } </style>";
        var prev_visited_hover_styling = "<style> a.aprevlink:visited:hover{ position: absolute; background-color: #666666; color: white; font-weight: bold; top: " + leftDivTop + "px; left: 10px; padding: 3px 3px; text-align: center; text-decoration: none; display: inline-block; border: 1px solid #666666; border-radius: 2px; } </style>";
        $('head').append( prev_link_styling );
        $('head').append( prev_link_hover_styling );
        $('head').append( prev_visited_styling );
        $('head').append( prev_visited_hover_styling );
        leftDiv.appendChild(prev_a); // Append the link to the div

        var next_a = document.createElement('a');
        next_a.className = "anext";
        next_a.id = "anextid";
        next_a.href =  next; // Insted of calling setAttribute
        next_a.setAttribute("target", "_self");
        next_a.innerHTML = " Next "; // <a>INNER_TEXT</a>
        var next_link_styling = "<style> a.anext:link{ position: absolute; background-color: white; color: #3369dd; font-weight: bold; top: " + leftDivTop + "px; padding: 3px 3px; text-align: center; text-decoration: none; display: inline-block; border: 1px solid #3369dd; border-radius: 2px; } </style>";
        var next_link_hover_styling = "<style> a.anext:link:hover{ position: absolute; background-color: #3369dd; color: white; font-weight: bold; top: " + leftDivTop + "px; padding: 3px 3px; text-align: center; text-decoration: none; display: inline-block; border: 1px solid #3369dd; border-radius: 2px; } </style>";
        var next_visited_styling = "<style> a.anext:visited{ position: absolute; background-color: #c6c6c6; color: #666666; font-weight: bold; top: " + leftDivTop + "px; padding: 3px 3px; text-align: center; text-decoration: none; display: inline-block; border: 1px solid #666666; border-radius: 2px; } </style>";
        var next_visited_hover_styling = "<style> a.anext:visited:hover{ position: absolute; background-color: #666666; color: white; font-weight: bold; top: " + leftDivTop + "px; padding: 3px 3px; text-align: center; text-decoration: none; display: inline-block; border: 1px solid #666666; border-radius: 2px; } </style>";
        $('head').append( next_link_styling );
        $('head').append( next_link_hover_styling );
        $('head').append( next_visited_styling );
        $('head').append( next_visited_hover_styling );
        leftDiv.appendChild(next_a); // Append the link to the div

        leftDivTop += 40;  // increase top position. amount to Next, Previous Buttons heights + bottom margin

        var checkbox = document.createElement('input');
        checkbox.type = "checkbox";
        checkbox.name = "name";
        checkbox.value = "value";
        checkbox.id = "id";
        checkbox.className = "acheck";
        checkbox.checked = sessionStorage.getItem("mcheck") === "1";

        var label = document.createElement('label');
        label.htmlFor = "id";
        label.className = "acheck";
        label.appendChild(document.createTextNode('Autostart primary'));

        var check_styling = "<style> input.acheck{ cursor: pointer; position: absolute; top: " + leftDivTop + "px; left: 10px; text-align: center; text-decoration: none; display: inline-block; } </style>";
        var check_label_styling = "<style> label.acheck{ position: absolute; top: " + (leftDivTop - 4) + "px; left: 27px; color: black; text-align: center; font-size: 14px; font-weight: bold; text-decoration: none; display: inline-block; } </style>";
        $('head').append( check_styling );
        $('head').append( check_label_styling );
        leftDiv.appendChild(checkbox); // Append the link to the div
        leftDiv.appendChild(label); // Append the link to the div

        checkbox.onclick = function(event) {
            var chbox = event.target;
            if (chbox.checked) {
                sessionStorage.setItem("mcheck", "1");
                if(!primelink){
                    primelink = "";
                }
                if(primelink !== ""){
                    window.open(primelink, '_blank');
                }
            } else {
                sessionStorage.setItem("mcheck", "0");
            }
        };

        leftDivTop += 30;  // increase top position. amount to Autostart CheckBox's height + bottom margin

    } else {
        leftDivTop += 10;  // increase top position. amount to bottom margin in case no Next, Previous button and Ep, Season Titles are drawn.
    }

    // ********** Settings Button **********
    var optionsKey = document.createElement('a');
    optionsKey.id = "optionsKey";
    optionsKey.innerHTML = "⚙";
    var optionsKey_styling = "<style> #optionsKey { position: fixed; opacity: .6; background-color: #00b2ff; color: white; height: 15px; width: 15px; font-size: 15px; font-weight: bold; cursor: pointer; text-align: center; padding-top: 0px; padding-right: 4px; padding-bottom: 4px; padding-left: 2px; } </style>";
    $('head').append( optionsKey_styling );
    var optionsKey_hover_styling = "<style> #optionsKey:hover{ opacity: 1; } </style>";
    $('head').append( optionsKey_hover_styling );
    leftDiv.appendChild(optionsKey); // Append the link to the div

    optionsKey.onclick = function(event) {
        var moptionsKey = event.target;
        showoptions = !showoptions;
        if(showoptions){
            $("#rightDiv").animate({left:rightDivLeft, opacity:"show"}, 500);
        } else {
            $("#rightDiv").animate({left:rightDivLeftHide, opacity:"hide"}, 500);
        }
    };

    // ***** Settings **** Center Menu CheckBox ******
    var saved_checkposition = GM_getValue("checkposition");
    if (!saved_checkposition){
        GM_setValue("checkposition", "0");
    }

    var checkbox2title = document.createElement('h5');
    checkbox2title.id = "checkbox2title";
    checkbox2title.innerHTML = "Menu position:";
    var checkbox2title_styling = "<style> #checkbox2title{ position: absolute; color: black; top: " + rightDivTop + "px; left: 0px; overflow: hidden; white-space: nowrap; height: 20px; width: 100px; font-size: 12px; font-weight: bold; text-align: center; display: inline-block; } </style>";
    $('head').append( checkbox2title_styling );
    rightDiv.appendChild(checkbox2title);

    rightDivTop += 26;

    var checkbox2 = document.createElement('input');
    checkbox2.type = "checkbox";
    checkbox2.name = "checkposition";
    checkbox2.value = "value";
    checkbox2.id = "checkposition";
    checkbox2.className = "acheck2";
    checkbox2.checked = GM_getValue("checkposition") === "1";

    var label2 = document.createElement('label');
    label2.htmlFor = "checkposition";
    label2.className = "acheck2";
    label2.appendChild(document.createTextNode('Center'));

    var check2_styling = "<style> input.acheck2{ cursor: pointer; position: absolute; top: " + rightDivTop + "px; left: 10px; text-align: center; text-decoration: none; display: inline-block; } </style>";
    var check2_label_styling = "<style> label.acheck2{ cursor: pointer; position: absolute; top: " + (rightDivTop - 4) + "px; left: 27px; color: black; text-align: center; font-size: 14px; font-weight: bold; text-decoration: none; display: inline-block; } </style>";
    $('head').append( check2_styling );
    $('head').append( check2_label_styling );
    rightDiv.appendChild(checkbox2); // Append the link to the div
    rightDiv.appendChild(label2); // Append the link to the div

    checkbox2.onclick = function(event) {
        var chbox2 = event.target;
        if (chbox2.checked) {
            GM_setValue("checkposition", "1");
            centerMenu();
        } else {
            GM_setValue("checkposition", "0");
            leftMenu();
        }
    };

    rightDivTop += 20;
    // ***** Settings **** Center Menu CheckBox ****** END

    // ***** Settings **** Autostart PrimeHost selection ******** START
    var SetPrimeHostLbl = document.createElement('input');
    SetPrimeHostLbl.type = "text";
    SetPrimeHostLbl.id = "SetPrimeHostLbl";
    SetPrimeHostLbl.value = " Current PrimeHost : ";
    SetPrimeHostLbl.className = optionsclass;
    SetPrimeHostLbl.disabled = true;
    var SetPrimeHostLbl_styling = "<style> #SetPrimeHostLbl, #SetPrimeHostLbl:hover{ position: absolute; top: " + rightDivTop + "px; left: 50%; transform: translateX(-50%); background-color: #666666; color: white; font-size: 12px; font-weight: normal; cursor: default; padding: 7px 7px; text-align: left; text-decoration: none; display: inline-block; border: 3px solid #666666; border-radius: 2px; } </style>";
    $('head').append( SetPrimeHostLbl_styling );
    rightDiv.appendChild(SetPrimeHostLbl); // Append the link to the div

    rightDivTop += 30;

    var SetPrimeHostLbl2 = document.createElement('input');
    SetPrimeHostLbl2.type = "text";
    SetPrimeHostLbl2.id = "SetPrimeHostLbl2";
    SetPrimeHostLbl2.value = hosts[primeHost].substring(1,hosts[primeHost].length - 1);
    SetPrimeHostLbl2.className = optionsclass;
    SetPrimeHostLbl2.disabled = true;
    var SetPrimeHostLbl2_styling = "<style> #SetPrimeHostLbl2, #SetPrimeHostLbl2:hover{ position: absolute; top: " + rightDivTop + "px; left: 50%; transform: translateX(-50%); background-color: #666666; color: white; font-weight: bold; cursor: default; padding: 7px 7px; text-align: center; text-decoration: none; display: inline-block; border: 3px solid #666666; border-radius: 2px; } </style>";
    $('head').append( SetPrimeHostLbl2_styling );
    rightDiv.appendChild(SetPrimeHostLbl2); // Append the link to the div

    rightDivTop += 45;

    for (var x = 0; x < hostsArrLength; x++) {
        var hostslength = hosts[x].length - 1;
        var hostname = hosts[x].substring(1,hostslength);

        var option = document.createElement('input');
        option.type = "button";
        option.id = x;
        option.value = " " + hostname + " ";
        option.className = optionsclass + "button";
        option.style.top = rightDivTop + "px";
        rightDivTop += 45;
        var option_styling = "<style> input." + optionsclass + "button" + "{ position: absolute; left: 50%; transform: translateX(-50%); width: 120px; cursor: pointer; } </style>";
        $('head').append( option_styling );
        rightDiv.appendChild(option); // Append the link to the div
    }

    $("." + optionsclass + "button").click(function(event) {
        var mbutton = event.target;
        GM_setValue ("primeHost", mbutton.id);
        document.getElementById("SetPrimeHostLbl2").value = hosts[mbutton.id].substring(1,hosts[mbutton.id].length - 1);
        primelink = primeLinksArr[mbutton.id];
        if(!primelink){
            primelink = "";
        }
    });

    var options_button_styling = "<style> input." + optionsclass + "button" + "{  background-color: #white; color: #666666; font-weight: bold; padding: 7px 7px; text-align: center; text-decoration: none; display: inline-block; border: 3px solid #666666; border-radius: 2px; } </style>";
    var options_button_hover_styling = "<style> input." + optionsclass + "button" + ":hover{ background-color: #666666; color: white; font-weight: bold; padding: 7px 7px; text-align: center; text-decoration: none; display: inline-block; border: 3px solid #666666; border-radius: 2px; } </style>";
    $('head').append( options_button_styling );
    $('head').append( options_button_hover_styling );

    $("#rightDiv").hide();
    // ***** Settings **** Autostart PrimeHost selection ******** END

    // ********** Left DIV ******** links
    for (var i = 0; i < hostsArrLength; i++) {
        var colorpos = i % colorslength;
        var color = colors[colorpos];
        var hostlength = hosts[i].length - 1;
        var linkTitle = hosts[i].substring(1,hostlength);
        var target = $('#first > table:icontains('+ linkTitle +')');
        $(target).css('background-color', "rgba(" + colorsRGB[colorpos] + ",.4) ");
        var targetlength = target.length;

        var linkID = linkTitle.replace(".","");
        linkID = linkID.replace(".","");
        linkID = linkID.replace(".","");
        linkID = "link_Host_" + linkID + "_ID";

        for (var j = 0; j < targetlength; j++){
            showMenu = true;
            var finalcolor = color;
            var targetx = $(target[j]).find('.movie_version_link a').attr('href');
            var link = 'https://www.primewire.ag' + targetx;

            if((leftDivTop + 50) >= $(window).height()){
                break;
            }

            if(j === 0){
                primeLinksArr[i] = link;
            }

            if(primelink === "" && i == primeHost){
                primelink = link;
            }

            var linkButton = document.createElement('a');
            linkButton.id = linkID + "_" + j;
            linkButton.href =  link; // Insted of calling setAttribute
            linkButton.setAttribute("target", "_blank");
            linkButton.innerHTML = " " + linkTitle + " "; // <a>INNER_TEXT</a>
            var linkButton_styling = "<style> #" + linkID + "_" + j + ":link{ position: absolute; background-color: white; color: " + finalcolor + "; font-weight: bold; top: " + leftDivTop + "px; left: 50%; transform: translateX(-50%); padding: 7px 10px; text-align: center; text-decoration: none; display: inline-block; border: 2px solid " + finalcolor + "; border-radius: 4px; } </style>";
            var linkButton_hover_styling = "<style> #" + linkID + "_" + j + ":link:hover{ position: absolute; background-color: " + finalcolor + "; color: white; font-weight: bold; top: " + leftDivTop + "px; left: 50%; transform: translateX(-50%); padding: 7px 10px; text-align: center; text-decoration: none; display: inline-block; border: 2px solid " + finalcolor + "; border-radius: 4px; } </style>";
            var visited_linkButton_styling = "<style> #" + linkID + "_" + j + ":visited{ position: absolute; background-color: #c6c6c6; color: #666666; font-weight: bold; top: " + leftDivTop + "px; left: 50%; transform: translateX(-50%); padding: 7px 10px; text-align: center; text-decoration: none; display: inline-block; border: 2px solid #666666; border-radius: 4px; } </style>";
            var visited_linkButton_hover_styling = "<style> #" + linkID + "_" + j + ":visited:hover{ position: absolute; background-color: #666666; color: white; font-weight: bold; top: " + leftDivTop + "px; left: 50%; transform: translateX(-50%); padding: 7px 10px; text-align: center; text-decoration: none; display: inline-block; border: 2px solid #666666; border-radius: 4px; } </style>";
            $('head').append( linkButton_styling );
            $('head').append( linkButton_hover_styling );
            $('head').append( visited_linkButton_styling );
            $('head').append( visited_linkButton_hover_styling );
            leftDiv.appendChild(linkButton); // Append the link to the div
            leftDivTop += 50;
        }
    }

    // ********** Final adjustments to all Elements **********************
    if(showMenu){
        if(!primelink){
            primelink = "";
        }
        if(sessionStorage.getItem("mcheck") === "1" && primelink !== ""){
            window.open(primelink, '_blank');
        }

        leftDiv.setAttribute("style", " position: fixed; float: left; z-index: 151; text-align: center; font-size: 16px; height: " + leftDivTop + "px; display: inline-block; border: 1px solid #666666; border-radius: 4px; "); //Set div attributes
        document.body.appendChild(leftDiv); // And append the div to the document body

        var mchildren = document.getElementById("leftDiv").childNodes;
        var mchildrenLength = mchildren.length;
        var leftDivWidth = minDivWidth;
        for(var y = 0; y < mchildrenLength; y++){
            if(leftDivWidth < (mchildren[y].offsetWidth + 20)){
                leftDivWidth = mchildren[y].offsetWidth + 20;
            }
        }
        document.getElementById("leftDiv").style.width = leftDivWidth + "px";
        document.getElementById("title1").style.width = (leftDivWidth - 25) + "px";
        if(prev_next_show){
            document.getElementById("anextid").style.left = (leftDivWidth - 52) + "px";
            document.getElementById("title2").style.width = (leftDivWidth - 25) + "px";
            document.getElementById("title3").style.width = (leftDivWidth - 25) + "px";
        }

        var nchildren = document.getElementById("rightDiv").childNodes;
        var nchildrenLength = nchildren.length;
        var rightDivWidth = minDivWidth;
        for(var q = 0; q < nchildrenLength; q++){
            if(rightDivWidth < (nchildren[q].offsetWidth + 20)){
                rightDivWidth = nchildren[q].offsetWidth + 20;
            }
        }
        document.getElementById("rightDiv").style.width = rightDivWidth + "px";

        document.getElementById("SetPrimeHostLbl").style.width = (rightDivWidth - 20) + "px";
        document.getElementById("SetPrimeHostLbl2").style.width = (rightDivWidth - 20) + "px";

        if(GM_getValue("checkposition") === "1"){
            centerMenu();
        } else {
            leftMenu();
        }
    }

    // ******* Hide Right DIV (Settings) onclick outside DIV ************
    $(document).click(function(event) {
        var a = $(event.target).closest('#rightDiv').length;
        var b = $(event.target).closest('#optionsKey').length;

        if(a < 1 && b < 1) {
            $("#rightDiv").animate({left:rightDivLeftHide, opacity:"hide"}, 500);
            showoptions = false;
        }
    });

});


// ********** Change Menu Position ********** START
function centerMenu() {
    $('#centerDiv').show();
    rightDivLeft = (newwidth + width - 1);
    var width = document.getElementById("leftDiv").offsetWidth;
    var height = document.getElementById("leftDiv").offsetHeight;
    var winwidth = $(window).width();
    var winheight = $(window).height();
    var newwidth = (winwidth - width) / 2;
    var newheight = (winheight - height) / 2;
    document.getElementById("leftDiv").style.left = newwidth + "px";
    document.getElementById("leftDiv").style.top = newheight + "px";
    document.getElementById("leftDiv").style.backgroundColor  = "rgba(242, 242, 242,1)";
    document.getElementById("rightDiv").style.backgroundColor  = "rgba(242, 242, 242,1)";
    document.getElementById("optionsKey").style.left = (newwidth + width) + "px";
    document.getElementById("optionsKey").style.top = newheight + "px";
    if(showoptions){
        document.getElementById("rightDiv").style.left = (newwidth + width - 5) + "px";
    } else {
        document.getElementById("rightDiv").style.left = (newwidth + width - 10) + "px";
    }
    rightDivLeft = (newwidth + width - 5);
    rightDivLeftHide = (newwidth + width - 10);
    document.getElementById("rightDiv").style.top = (newheight + 19) + "px";
}

function leftMenu() {
    $('#centerDiv').hide();
    document.getElementById("leftDiv").style.left = "5px";
    document.getElementById("leftDiv").style.top = "5px";
    document.getElementById("leftDiv").style.backgroundColor  = "rgba(242, 242, 242,1)";
    document.getElementById("rightDiv").style.backgroundColor  = "rgba(242, 242, 242,1)";
    var width = document.getElementById("leftDiv").offsetWidth;
    var height = document.getElementById("leftDiv").offsetHeight;
    document.getElementById("optionsKey").style.left = (5 + width) + "px";
    document.getElementById("optionsKey").style.top = 5 + "px";
    if(showoptions){
        document.getElementById("rightDiv").style.left = width + "px";
    } else {
        document.getElementById("rightDiv").style.left = (width - 6) + "px";
    }
    rightDivLeft = width;
    rightDivLeftHide = width - 6;
    document.getElementById("rightDiv").style.top = "24px";
}
// ********** Change Menu Position ********** END