Untitled

<html>
<head>

<link rel="stylesheet" href="fonts/stylesheet.css" type="text/css" charset="utf-8" />

<script type="text/javascript" src="js/gsap/TweenMax.js"></script>

<style>

body {
    margin:0px;
    background-color: rgba(0, 0, 0, 0);
    /*background-image: url('imgs/l3rdguide.png');*/
    font-family: 'goudy_trajan_regularregular';
    font-size: 26px;
    color:#FFFFFF;
    overflow: hidden;
    width:1920px;
    height:1080px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-text-stroke: 0.35px;
}

#container {
    width: 1920px;
    height: 1080px;
    position: absolute;
    top: 0;
    left: 0;
}

#l3rd {
    position:absolute;
    width:1177px;
    height: 118px;
    bottom:37px;
    left:124px;
    overflow: hidden;
}

#l3rdbg {
    position: absolute;
    height: 100%;
    width: 100%;
    top:0px;
    left:0px;
    background-image: url("imgs/l3rdnormal.png");
}

#logo {
    position: absolute;
    bottom:12px;
    left:49px;
    width: 168px;
    height: 168px;
    background-image: url("imgs/mkxlogo.png");

}

#line1 {
    position: absolute;
    top:24px;
    left:115px;
    font-size: 36px;
}


#line2 {
    position: absolute;
    top:67px;
    left:115px;
    font-size: 24px;
}

.hidden {
    display: none;
}

</style>

<script type="text/javascript">
    window.onload = init;

    var xhr = new XMLHttpRequest();

    var timestampOld=0;
    var timestamp=0;
    var cacheBuster=0;

    var firstupdate = true;

    var scObj;

    var cTitle1;
    var cTitle2;

    var animating = 0;

    var showl3rd = false;

    function init() {

        if (window.external.SetLocalPropertyAsync) {
            window.external.SetLocalPropertyAsync("prop:BrowserSize","1920,1080");
            window.external.SetLocalPropertyAsync("prop:pos","0.000000,0.000000,1.000000,1.000000");
        }

        cTitle1 = document.querySelector("#line1");
        cTitle2 = document.querySelector("#line2");

        xhr.overrideMimeType('application/json');

        xhr.onreadystatechange = scLoaded;

        pollHandler();

        setInterval(function() {
            pollHandler();
        }, 500);
    }

    function pollHandler() {
        xhr.open('GET', "streamcontrol.json?test="+cacheBuster,true);
        xhr.send();
        cacheBuster++;

    }

    function scLoaded() {

        if (xhr.readyState === 4) {

            scObj = JSON.parse(xhr.responseText);

            timestampOld = timestamp;
            timestamp = scObj["timestamp"];

            if (timestamp != timestampOld) {
              l3rdUpdate();
            }

        }

    }

    function l3rdUpdate() {
        if (showl3rd == false && scObj["showl3rd"] == "1") {
            update();
            showl3rd = true;
        } else if (showl3rd == true && scObj["showl3rd"] == "0") {
            TweenMax.to(document.getElementById("container"),1,{opacity:0,onComplete:function(){
                document.getElementById("container").style.display = "none";
                TweenMax.set(document.getElementById("container"),{opacity:1});
                firstupdate = true;
            }})
            showl3rd = false;
        } else if (showl3rd == true) {
            update();
        }
    }

    function update() {
        if (firstupdate) {
                animating++;

                cTitle1.innerHTML = scObj["cTitle1"];
                cTitle2.innerHTML = scObj["cTitle2"];

                TweenMax.from(document.querySelector("#logo"),1,{css:{transform: "rotate(-90deg) scale(0.01,0.01)"}});
                TweenMax.from(document.querySelector("#l3rdbg"),1,{x:"-1177px",delay:1});

                TweenMax.from(cTitle1,0.5,{x:"100px",opacity:0,delay:1.5});
                TweenMax.from(cTitle2,0.5,{x:"100px",opacity:0,delay:1.6,onComplete:function(){animating--;}});


                document.getElementById("container").style.display="block";

                firstupdate = false;
            } else if (animating == 0) {

                if (cTitle1.innerHTML != scObj["cTitle1"]) {
                    animating++;
                    TweenMax.to(cTitle1,0.5,{x:"100px",opacity:0,onComplete:function(){cTitle1.innerHTML = scObj["cTitle1"];}});
                    TweenMax.to(cTitle1,0.5,{x:"0px",opacity:1,delay:0.5,onComplete:function(){animating--;}})
                }
                if (cTitle2.innerHTML != scObj["cTitle2"]) {
                    animating++;
                    TweenMax.to(cTitle2,0.5,{x:"100px",opacity:0,delay:0.1,onComplete:function(){cTitle2.innerHTML = scObj["cTitle2"];}});
                    TweenMax.to(cTitle2,0.5,{x:"0px",opacity:1,delay:0.6,onComplete:function(){animating--;}})
                }


            }
    }
</script>

</head>

<body>
<div id="container" class="hidden">
    <div id="l3rd">
        <div id="l3rdbg"></div>
        <div id="line1">Cameraman</div>
        <div id="line2">@Zhieeep</div>
    </div>
    <div id="logo"></div>
</div>
</body>
</html>