Rieno Test

$('head').append("<link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=Poiret+One'>");
$('body').append(`<style>
  .imvustylez_products_marquee{margin:0px auto; width: 960px; height: 180px; overflow: hidden;}
        .imvustylez_products_marquee [id$="_panel_header"] {display: none !important; font-size: 1px} .imvustylez_products_marquee [id$="_panel_body"] {line-height: 1px;}
        .imvustylez_products_marquee .productbox,.imvustylez_products_marquee .productbox img{width:100px !important;height:80px !important; border-radius: 5px;}
  #prods{
    position: absolute;
    bottom: 50px;
    left: calc(50vw - 480px);
  }


    @-webkit-keyframes hue {
      0%  { -webkit-filter: hue-rotate(0deg); }
      100% { -webkit-filter: hue-rotate(360deg); }
    }

    #mediabtnsCont{
    background: #121212;
    width:280px;
    height: 28px;
    opacity: 1;
    position: absolute;
    float:left;
    z-index: 900;
    margin-left: 50px;
    margin-top: 13px;
    border-radius: 15px;
    transition: opacity .4s ease-out;
    -moz-transition: opacity .4s ease-out;
    -webkit-transition: opacity .4s ease-out;
    -o-transition: opacity .4s ease-out;
}

#mediabtnsCont:hover{
    opacity: 1;
    transition: opacity .4s ease-in;
    -moz-transition: opacity .4s ease-in;
    -webkit-transition: opacity .4s ease-in;
    -o-transition: opacity .4s ease-in;
}

#mediabtnp {
    background: url(https://userimages-akm.imvu.com/userdata/11/70/33/56/userpics/Snap_7Tr7FJN8Cu574473056.png);
    width: 28px;
    height: 28px;
    cursor: pointer;
    opacity: .4;
    float: left;
    position: relative;
    margin-right: 28px;
    transition: opacity .4s ease-in;
    -moz-transition: opacity .4s ease-in;
    -webkit-transition: opacity .4s ease-in;
    -o-transition: opacity .4s ease-in;
}

#mediabtnp:hover{
    opacity: 1;
    transition: opacity .4s ease-in;
    -moz-transition: opacity .4s ease-in;
    -webkit-transition: opacity .4s ease-in;
    -o-transition: opacity .4s ease-in;
}

#mediabtnp2 {
    background: url(https://userimages-akm.imvu.com/userdata/11/70/33/56/userpics/Snap_7Tr7FJN8Cu574473056.png);
    width: 28px;
    height: 28px;
    cursor: pointer;
    opacity: .4;
    float: left;
    position: relative;
    margin-right: 28px;
    transition: opacity .4s ease-in;
    -moz-transition: opacity .4s ease-in;
    -webkit-transition: opacity .4s ease-in;
    -o-transition: opacity .4s ease-in;
}

#mediabtnp2:hover{
    opacity: 1;
    transition: opacity .4s ease-in;
    -moz-transition: opacity .4s ease-in;
    -webkit-transition: opacity .4s ease-in;
    -o-transition: opacity .4s ease-in;
}

#mediabtns {
    background: url(https://userimages-akm.imvu.com/userdata/11/70/33/56/userpics/Snap_7Tr7FJN8Cu574473056.png);
    width: 28px;
    height: 28px;
    z-index: 901;
    margin-right: 28px;
    float: left;
    cursor: pointer;
    position: relative;
    opacity: .4;
    transition: opacity .4s ease-in;
    -moz-transition: opacity .4s ease-in;
    -webkit-transition: opacity .4s ease-in;
    -o-transition: opacity .4s ease-in;
}

#mediabtns:hover{
    opacity: 1;
    transition: opacity .4s ease-in;
    -moz-transition: opacity .4s ease-in;
    -webkit-transition: opacity .4s ease-in;
    -o-transition: opacity .4s ease-in;
}
.mediaPlayerContainer{
  height: 42px;
  position: relative;
  left: -25px;
  top: -15px;
}
#mediaPlayer{
  height: 42px;
  width: 950px;
  float: left;
}
    #visitors_panel{
        width: 500px !important;
        position: absolute !important;
        top: -25px !important;
        left:calc(50% - 250px) !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        height: 150px !important;
    }
    #badges_panel{
        width: 150px !important;
        position: absolute !important;
        top: 45px !important;
        left:calc(50% - 75px) !important;
        pointer-events:all;
    }
   #aboutme_panel, #contact_panel, #dev_panel, #wishlist_panel,
   #messages_panel, #tagcloud_panel, #stickers_panel, #collect_panel,
   #room_panel, #rankings_panel, #cool_panel, #gallery_panel, #friends_panel,
   #streetteam_panel, #blog_panel, #video_panel_header, #music_panel, #rss_panel, #outfits_panel {
      display: none !important;
   }
   #rightColumn {
      display:none !important;
   }
 .imvustylez_products_marquee{margin:0px auto}
 .imvustylez_products_marquee [id$="_panel_header"] {display: none !important; font-size: 1px}
 .imvustylez_products_marquee [id$="_panel_body"] {line-height: 1px;} .imvustylez_products_marquee
 .productbox,
 .imvustylez_products_marquee
 .productbox img{width:100px !important;height:80px !important;}
 #headerbox { display: none !important; }
  #footerBanner { display: none !important; }
  #footer_style { display: none !important; }
  #footer_panel { display: none !important; }
  #ad_panel { display: none !important; }
  #dev_panel{display:none !important;}
  #imvuTopNav{display:none !important;}
  #ccpheader_leaderboard{display: none !important;}
#url_panel_colRow, .imvucodes_net { display:none !important; }
.paneltitle, .panelmenu, .imvucodes_net { display:none !important; }
</style>`);
$('#url_panel_extra_html_show').append(
    '<div id="contentArea" style="min-width: 960px; width: 100vw; position: absolute; top: 0px; left: 0px"></div>'
);

var loveName = 'LadyLaura3';
var lovetext = 'Oh but of course, Princess.';
var hasLove = loveName ? true : false;
//var pages = [];

var spec = false;
function createElement(s) {
    this.def = {
        width: s.width ? s.width : '100%',
        height: s.height ? s.height : '500px',
        background: s.background ? s.background : 'background-color: rgba(0,0,0,1)',
        yPos: s.yOff ? s.yOff : 'top: 0px',
        xPos: s.xOff ? s.xOff : 'left: 0px',
        content: s.content ? s.content : '',
        align: s.align ? s.align : 'center',
        zIndex: s.zIndex ? s.zIndex : '1',
        position: s.position ? s.position : 'relative',
        float: s.float ? s.float : 'left',
        id: s.id ? s.id : 'div',
        backgroundAttach: s.backgroundAttachment ? s.backgroundAttachment : 'initial',
        backgroundPos: s.backgroundPosition ? s.backgroundPosition : 'initial',
        backgroundRep: s.backgroundRepeat ? s.backgroundRepeat : 'initial',
        backgroundSize: s.backgroundSize ? s.backgroundSize : 'initial',
        blendMode: s.blendMode ? s.blendMode : 'initial'
    };

    this.style =
        'width: ' +
        this.def.width +
        '; height: ' +
        this.def.height +
        '; ' +
        this.def.yPos +
        '; ' +
        this.def.xPos +
        '; text-align: ' +
        this.def.align +
        '; position: ' +
        this.def.position +
        '; float: ' +
        this.def.float +
        '; background-attachment: ' +
        this.def.backgroundAttach +
        '; background-position: ' +
        this.def.backgroundPos +
        '; background-repeat: ' +
        this.def.backgroundRep +
        '; background-size: ' +
        this.def.backgroundSize +
        '; mix-blend-mode: ' +
        this.def.blendMode +
        '; ' +
        this.def.background;

    this.template =
        `<div id='` +
        this.def.id +
        `' style='` +
        this.style +
        `'>
    ` +
        this.def.content +
        `
    </div>`;

    this.init = function() {
        $('#contentArea').append(this.template);
    };
}

function genFriends(s) {
    this.friends = s.friends ? s.friends : [];
    this.styleDef = {
        scale: s.scale ? s.scale : '1',
        radius: s.radius ? s.radius : '0px',
        spacing: s.spacing ? s.spacing : '5px',
        overlay: s.overlay ? s.overlay : '#000',
        opacity: s.opacity ? s.opacity : '0',
        color: s.color ? s.color : '#fff',
        font: s.font ? s.font : 'Poiret One'
    };
    this.CSSStyle =
        `
    <style>
    #fpic{
        width: 100%;
        height: 100%;
        font-family: '` +
        this.styleDef.font +
        `';
        color: ` +
        this.styleDef.color +
        `;
        text-alin: center;
        background: ` +
        this.styleDef.overlay +
        `;
        border-radius: ` +
        this.styleDef.radius +
        `;
        opacity: 0;
        transition: opacity .4s ease-in;
        -moz-transition: opacity .4s ease-in;
        -webkit-transition: opacity .4s ease-in;
        -o-transition: opacity .4s ease-in;
        cursor: context-menu;
    }
    #fpic:hover{
        opacity: ` +
        this.styleDef.opacity +
        `;
        transition: opacity .4s ease-in;
        -moz-transition: opacity .4s ease-in;
        -webkit-transition: opacity .4s ease-in;
        -o-transition: opacity .4s ease-in;
    }
    </style>`;
    this.template = ``;

    this.friends.forEach(function(val, index, arr) {
        this.style =
            'background-size: cover; background-repeat: no-repeat; background-image: url(https://www.imvu.com/catalog/web_av_pic.php?av=' +
            val +
            '); width: calc(160px * ' +
            this.styleDef.scale +
            '); height: calc(220px * ' +
            this.styleDef.scale +
            '); border-radius: ' +
            this.styleDef.radius +
            '; margin-left: ' +
            this.styleDef.spacing +
            '; margin-bottom: ' +
            this.styleDef.spacing +
            '; float: left';
        this.template =
            this.template +
            `
                <div style="` +
            this.style +
            `">
                    <div id="fpic">
                        <div style="position: relative; top: calc(50% - 15px);">` +
            val +
            `</div>
                    </div>
                </div>`;
    });
    return this.CSSStyle + this.template;
}

new createElement({
    height: '100vh; pointer-events:none',
    id: 'home',
    background: 'background: rgba(255,255,255,.2)',
    content: `
        <div id="urect" style="pointer-events:none; background: rgba(54,54,54,.5); border-radius: 5px; width: 250px; height: 70px; position: absolute; top: calc(50% - 35px); left: calc(50% - 125px);">
            <div style="pointer-events:all; border-style: dashed solid dashed solid; border-width: 5px; border-color: #f2f2f2; width: 230px; height: 50px; position: absolute; top: 5px; left: 5px;">
                <div id="userName" style="pointer-events:all; font-size: 40px; font-family: 'Poiret One'; font-weight: bold; color: #f2f2f2">
                    ®ieno
                </div>
            </div>

        </div>
    `
}).init();

if (hasLove) {
    new createElement({
        height: '150px',
        background:
            'background-image: url(https://imvu.riedesign.tk/images/nature.jpg)',
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundAttachment: 'fixed',
        content: `
    <div style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: rgba(255,255,255,.8);">
    <div style="border-style: dashed none dashed none; border-width: 5px; border-color: #FFF; width: 100%; height: 140px; position: absolute; top: 0px; left: 0px">

        <div style="position: absolute; top: calc(50% - 20px); width: 100%; left: 0px; height: 40px; font-size: 40px; font-family: 'Poiret One'; font-weight: bold; color: #363636">
            <center>
            ♥ Thy Princess♥
            </center>
        </div>
    </div>
    </div>
    `
    }).init();

    new createElement({
        height: '550px',
        background:
            'background-image: url(https://imvu.riedesign.tk/images/nature.jpg)',
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundAttachment: 'fixed',
        id: 'wtf',
        content:
            `
    <div style="width: 100%; height: 100%; background: rgba(255,255,255,0.6); position: absolute; top: 0px; left: 0px;">
        <div style="border-radius: 5px; width: calc(160px * 2); height: calc(220px * 2); background-image: url(https://www.imvu.com/catalog/web_av_pic.php?av=` +
            loveName +
            `); background-size: cover; position: absolute; top: calc(50% - calc(calc(220px * 2) / 2)); left: 50px">
        </div>

        <div style="width: 450px; height: 250px; font-family: 'Poiret One'; font-size: 20px; color: #363639; position: absolute; right: 10%; font-weight: bolder; top: calc(50% - 125px)">
            <p style="font-family: 'Poiret One'; color: #363639">
                ${lovetext}
            </p>
        </div>
    </div>`
    }).init();
}
new createElement({
    height: '150px',
    background:
        'background-image: url(https://goldwallpapers.com/uploads/posts/iphone-hipster-wallpaper/iphone_hipster_wallpaper_021.jpg)',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundAttachment: 'fixed',
    content: `
    <div style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: rgba(255,255,255,.8);">
    <div style="border-style: dashed none dashed none; border-width: 5px; border-color: #FFF; width: 100%; height: 140px; position: absolute; top: 0px; left: 0px">

        <div style="position: absolute; top: calc(50% - 20px); width: 100%; left: 0px; height: 40px; font-size: 40px; font-family: 'Poiret One'; font-weight: bold; color: #363636">
            <center>
            Who Am I?
            </center>
        </div>
    </div>
    </div>
    `
}).init();

new createElement({
    height: '650px',
    id: 'about',
    background:
        'background-image: url(https://goldwallpapers.com/uploads/posts/iphone-hipster-wallpaper/iphone_hipster_wallpaper_021.jpg)',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundAttachment: 'fixed',
    content:
        `
    <style>
    #cnt{
        width: 240px;
        float: left;
        text-align: center;
        font-family: 'Poiret One';
        color: #363639;
        font-weight: bolder;
    }
    </style>
    <div style="width: 100%; height: 100%; background: rgba(255,255,255,.6); position: absolute; top: 0px; left: 0px;">
    <div style="width: 960px; height: 250px; position: absolute; top: calc(25% - 125px); left: calc(50% - 480px)">

        <div id="cnt">
        <h1 style="font-family: 'Poiret One'">Interests</h1>
        - Web Design<br/>
        - Neon Product Creation<br/>
        - All music<br/>
        - PC Gaming<br/>
        - Articulate Conversations<br/>
        </div>
        <div id="cnt">
        <h1 style="font-family: 'Poiret One'">Personal</h1>
        - Name: Cody<br/>
        - Age: 26<br/>
        - Location: Leeds, England<br/>
        - Profession: Owner of RieDesign<br/>
        ${(hasLove ? "Taken By - "+loveName: '')}
        '<br/>'
        </div>
        <div id="cnt">
        <h1 style="font-family: 'Poiret One'">Rooms</h1>
        - ® | RieDesign<br/>
        - .:: Lockdown ::.<br/>
        - Petrichor<br/>
        </div>
        <div id="cnt">
        <h1 style="font-family: 'Poiret One'">Pricing</h1>
        - Homepage: $30 or 35k<br/>
        - Neon Product: 2.5k per item ( 15k per private custom )<br/>
        </div>
    </div>
    </div>`
}).init();

new createElement({
    height: '150px',
    background: 'background-image: url(https://data.whicdn.com/images/62959604/original.jpg)',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundAttachment: 'fixed',
    content: `
    <div style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: rgba(255,255,255,.8);">
    <div style="border-style: dashed none dashed none; border-width: 5px; border-color: #FFF; width: 100%; height: 140px; position: absolute; top: 0px; left: 0px">

        <div style="position: absolute; top: calc(50% - 20px); width: 100%; left: 0px; height: 40px; font-size: 40px; font-family: 'Poiret One'; font-weight: bold; color: #363636">
            <center>
            Who do I know?
            </center>
        </div>
    </div>
    </div>
    `
}).init();

new createElement({
    height: '500px',
    id: 'friends',
    background: 'background-image: url(https://data.whicdn.com/images/62959604/original.jpg)',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundAttachment: 'fixed',
    content:
        `<div style="width: 100%; height: 100%; background: rgba(255,255,255,.6); position: absolute; top: 0px; left: 0px;">

    <style>
    #cnt2{
        width: 100vw;
        text-align: center;
        font-family: 'Poiret One';
        overflow-x: hidden;
        overflow-y: auto;
        position: absolute;
        top: 125px;
    }
    </style>
    <center>
        <div id="cnt2">
        ` +
        genFriends({
            friends: [
                loveName ? loveName : 'Xelvar',
                'Begged',
                'Lucidity',
                'SenseiLuke',
                'Anry',
                'Lura',
                'DeadlySin',
                'Pixemath'
            ],
            scale: '0.75',
            spacing: '10px',
            radius: '15px',
            opacity: '.85',
            overlay: '#000'
        }) +
        `
        </div>
    </center>

    </div>`
}).init();

new createElement({
    height: '150px',
    background:
        'background-image: url(https://wallpapertag.com/wallpaper/full/7/e/f/254744-free-background-tumblr-hipster-1920x1200-desktop.jpg)',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundAttachment: 'fixed',
    content: `
    <div style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: rgba(255,255,255,.8);">
    <div style="border-style: dashed none dashed none; border-width: 5px; border-color: #FFF; width: 100%; height: 140px; position: absolute; top: 0px; left: 0px">

        <div style="position: absolute; top: calc(50% - 20px); width: 100%; left: 0px; height: 40px; font-size: 40px; font-family: 'Poiret One'; font-weight: bold; color: #363636">
            <center>
            Layouts by me
            </center>
        </div>
    </div>
    </div>
    `
}).init();

new createElement({
    height: '700px',
    background:
        'background-image: url(https://wallpapertag.com/wallpaper/full/7/e/f/254744-free-background-tumblr-hipster-1920x1200-desktop.jpg)',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundAttachment: 'fixed',
    content: `
    <div style="width: 100%; height: 100%; background: rgba(255,255,255,.6); position: absolute; top: 0px; left: 0px;">

        <div style="height: 410px; position: absolute; top: calc(50% - 205px); width: 100%; white-space: nowrap !important; overflow: auto">
          <a target="_new" href="https://avatars.imvu.com/DeadlySin"><img height= 400 style="" src="https://imvu.riedesign.tk/Homepages/DeadlySin/deadlysin.png" title="DeadlySin Homepage" /></a>

          <a target="_new" href="https://avatars.imvu.com/Ghored"><img height= 400 style="" src="https://userimages-akm.imvu.com/userdata/11/70/33/56/userpics/Snap_vok7nPGWRY1266589541.png" title="Ghored Homepage" /></a>

          <a target="_new" href="https://avatars.imvu.com/diov"><img height= 400 style="" src="https://userimages-akm.imvu.com/userdata/11/70/33/56/userpics/Snap_rKyNWCOsdO1871744664.png" title="Diov Homepage" /></a>

          <a target="_new" href="https://avatars.imvu.com/anry"><img height= 400 style="" src="https://userimages-akm.imvu.com/userdata/11/70/33/56/userpics/Snap_IPVBvGJJlN1476045789.png" title="Anry Homepage" /></a>

          <a target="_new" href="https://avatars.imvu.com/rieno"><img height= 400 style="" src="https://userimages-akm.imvu.com/userdata/11/70/33/56/userpics/Snap_bAP0dR3Dqj163984236.png" title="Rieno Homepage" /></a>

          <a href="javascript(0)"><img height= 400 style="" src="https://userimages-akm.imvu.com/userdata/11/70/33/56/userpics/Snap_YJ1f3gpQHC861927288.png" title="Techno" /></a>

          <a href="javascript(0)"><img height= 400 style="" src="https://userimages-akm.imvu.com/userdata/11/70/33/56/userpics/Snap_wpzmDAGHqG801985421.png" title="x-hold" /></a>

          <a href="javascript(0)"><img height= 400 style="" src="https://userimages-akm.imvu.com/userdata/11/70/33/56/userpics/Snap_keDyO0gXTh667951722.png" title="Pokedex" /></a>

          </div>

    </div>`
}).init();

new createElement({
    height: '150px',
    background: 'background-image: url(https://www.picamon.com/wp-content/uploads/2015/07/Hipster-Backgrounds.jpg)',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundAttachment: 'fixed',
    content: `
    <div style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: rgba(255,255,255,.8);">
    <div style="border-style: dashed none dashed none; border-width: 5px; border-color: #FFF; width: 100%; height: 140px; position: absolute; top: 0px; left: 0px">

        <div style="position: absolute; top: calc(50% - 20px); width: 100%; left: 0px; height: 40px; font-size: 40px; font-family: 'Poiret One'; font-weight: bold; color: #363636">
            <center>
            Support me with my Banner
            </center>
        </div>
    </div>
    </div>
    `
}).init();

new createElement({
    height: '100vh',
    background: 'background-image: url(https://www.picamon.com/wp-content/uploads/2015/07/Hipster-Backgrounds.jpg)',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundAttachment: 'fixed',
    content: `
    <style>
    .rienoBanner{
    margin-left: calc(50vw - 225px);
    width: 450px;
    height: 450px;
    -webkit-animation: hue 60s linear infinite;
    background-image: url(https://imvu.riedesign.tk/IMVUShop/BannerLogo.png);
    background-size: cover;
    margin-bottom: 15px;
    opacity: 1;
    }
    </style>
    <div style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: rgba(255,255,255,.6)">
    <center>

        <div id="cnt2">
        <a href="https://www.imvu.com/shop/web_search.php?manufacturers_id=11703356&r=acw"><div class="rienoBanner"></div></a>
        <input type="textArea" readonly="true" onclick="this.select(); document.execCommand('copy')" value="<!-- Rienos Banner --> <style> .rienoBanner{width: 250px; height: 250px; -webkit-animation: hue 60s linear infinite;} @-webkit-keyframes hue {0% { -webkit-filter: hue-rotate(0deg); } 100%{-webkit-filter: hue-rotate(360deg);} opacity: .5;} .rienoBanner:hover{opacity: 1;}</style> <a href='https://www.imvu.com/shop/web_search.php?manufacturers_id=11703356&r=acw' ><img src='https://imvu.riedesign.tk/IMVUShop/BannerLogo.png' class='rienoBanner' /></a>" />
        </div>
    </center>
    </div>`
}).init();

new createElement({
    height: '150px',
    background: 'background-image: url(https://www.picamon.com/wp-content/uploads/2015/07/Hipster-Backgrounds.jpg)',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundAttachment: 'fixed',
    content: `
    <div style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: rgba(255,255,255,.8);">
    <div style="border-style: dashed none dashed none; border-width: 5px; border-color: #FFF; width: 100%; height: 140px; position: absolute; top: 0px; left: 0px">

        <div style="position: absolute; top: calc(50% - 20px); width: 100%; left: 0px; height: 40px; font-size: 40px; font-family: 'Poiret One'; font-weight: bold; color: #363636">
            <center>
            ®ieno
            </center>
        </div>
    </div>
    </div>
    `
}).init();

new createElement({
    height: '100vh',
    background: 'background: rgba(255,255,255,.2)',
    content: `
        <div id="urect" style="background: rgba(54,54,54,.5); border-radius: 5px; width: 850px; height: 70px; position: absolute; top: calc(50% - 35px); left: calc(50% - 425px);">
            <div style="border-style: dashed solid dashed solid; border-width: 5px; border-color: #f2f2f2; width: 830px; height: 50px; position: absolute; top: 5px; left: 5px;">
                <div id="userName" style="font-size: 40px; font-family: 'Poiret One'; font-weight: bold; color: #f2f2f2">
                    Homepage designed by ®ieno
                </div>
            </div>

        </div>
    `
}).init();

new createElement({
    height: '35px',
    position: 'fixed',
    background: 'background: #363639',
    content: `
    <center style="font-family: 'Poiret One'; color: #FFF">
    <div style="margin-top: 10px">
    Code and design by Rieno | Copyright 2017 Monitored
    </div>
    </center>

                <div id="mediabtnsCont" class="footCTRL" style="background: rgba(0,0,0,0); position: absolute; right: 5px; bottom: 2px; display: block;">
                      <div style="height: 28px; width: 42px; float: left; position: relative;"> </div>
                      <div id="mediabtns" onclick="player.previousVideo()"></div>
                      <div id="mediabtnp" onclick="switchplaystate()"></div>
                      <div style="background-position: -56px" id="mediabtns" onclick="player.nextVideo()"></div>
                      <div style="background-position: -84px" id="mediabtns" onclick="setVolume()"></div>
                </div>

                <div id="footerTitle" style="display: block; position: absolute; bottom: 7px; left: 15px; max-height:20px; width: 250px; z-index: 11; color: #FFF; font-size: 12px; text-align: center; overflow-x: hidden; overflow-y: hidden;">
                    <marquee id="songTitle" style="font-family: 'Poiret One'; width: 250px" scrollamount='1' direction='left' behavior='scroll'>
                    </marquee>
                </div>
    `
}).init();

var modes = [
    'initial',
    'normal',
    'multiply',
    'screen',
    'overlay',
    'darken',
    'lighten',
    'color-dodge',
    'color-burn',
    'hard-light',
    'soft-light',
    'difference',
    'exclusion',
    'hue',
    'saturation',
    'color',
    'luminosity'
];

$(document).ready(function() {
    lAlign();
    setTimeout(function() {
        $('#contentArea').fadeOut('slow', function() {
            //document.getElementById('contentArea').innerHTML = '';
            //pages.forEach(function(val, index, arr){
            //  pages[index].init();
            //});
            $('#contentArea').fadeIn('slow');
            $('#contentArea').prepend(
                '<div background: #FFF; style="position: fixed; width: 100vw; height: 200vh; top: calc(50% - 100vh); left: 0px"><iframe onload="onYouTubePlayerAPIReady();" id="video" style="width: 100vw; height: 200vh; top: 0px; left: 0px; overflow: hidden;" src="//www.youtube.com/embed/videoseries?list=PLYwZKyzJDSbzQuEwQPgEnY2zqwuZl9y8w&enablejsapi=1&html5=1&autoplay=1" frameborder="0" allowfullscreen></iframe></div><div id="vidOverlay" style="position: fixed; top: 0px ;left: 0px; width: 100vw; height: 100vh; background: #FFF; mix-blend-mode: overlay; pointer-events:none;"></div>'
            );
            $('#about').append($('#prods'));
            //$('#recent').append($('#visitors_panel'));
            $('#urect').append($('#badges_panel'));
            document.getElementById('prods').style.display = 'block';
        });
    }, 250);

    if (!window['YT']) {
        var YT = { loading: 0, loaded: 0 };
    }
    if (!window['YTConfig']) {
        var YTConfig = { host: 'https://www.youtube.com' };
    }
    if (!YT.loading) {
        YT.loading = 1;
        (function() {
            var l = [];
            YT.ready = function(f) {
                if (YT.loaded) {
                    f();
                } else {
                    l.push(f);
                }
            };
            window.onYTReady = function() {
                YT.loaded = 1;
                for (var i = 0; i < l.length; i++) {
                    try {
                        l[i]();
                    } catch (e) {}
                }
            };
            YT.setConfig = function(c) {
                for (var k in c) {
                    if (c.hasOwnProperty(k)) {
                        YTConfig[k] = c[k];
                    }
                }
            };
            var a = document.createElement('script');
            a.type = 'text/javascript';
            a.id = 'www-widgetapi-script';
            a.src = 'https:' + '//s.ytimg.com/yts/jsbin/www-widgetapi-vfl1Omgyb/www-widgetapi.js';
            a.async = true;
            var b = document.getElementsByTagName('script')[0];
            b.parentNode.insertBefore(a, b);
        })();
    }
});
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('video', {
        events: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange
        }
    });
}

function onPlayerReady(event) {}

function onPlayerStateChange(event) {
    if (player) {
        if (player.getPlayerState() != 2) {
            document.getElementById('songTitle').innerText = player.getVideoData().title;
            document.getElementById('mediabtnp').style = 'background-position: -112px 0px';
        } else {
            document.getElementById('songTitle').innerText = 'Press Play ►';
            document.getElementById('mediabtnp').style = 'background-position: -28px 0px';
        }
    }
}

function switchplaystate() {
    player.getPlayerState() == 1 ? player.pauseVideo() : player.playVideo();
}

function setVolume() {
    if (player.getVolume() >= 76 && player.getVolume() <= 100) {
        player.setVolume(75);
    } else if (player.getVolume() >= 51 && player.getVolume() <= 75) {
        player.setVolume(50);
    } else if (player.getVolume() >= 26 && player.getVolume() <= 50) {
        player.setVolume(25);
    }
    if (player.getVolume() >= 16 && player.getVolume() <= 25) {
        player.setVolume(15);
    }
    if (player.getVolume() >= 1 && player.getVolume() <= 15) {
        player.setVolume(0);
    }
    if (player.getVolume() == 0) {
        player.setVolume(100);
    }
}

function lAlign() {
    if (document.getElementById('url_panel')) {
        document.getElementById('url_panel').style = 'left: 0px; top: 0px; width: 100wv !important;';
        document.getElementById('imvuContent').align = 'left';
        var links = document.getElementsByTagName('a');
        for (var i = 0; i < links.length; i++) {
            if (links[i].href) {
                links[i].style.color = '#FFF';
            }
        }
    }
}

function changeTitle(divID, divTitle) {
    document.getElementById(divID).innerHTML = divTitle;
}