231 working use this fo dekk

231 working

by Nick Hulea

HTML

<img id="rating-icon" src="http://i.cdn.turner.com/adultswim/adultswimtv/tools/img/global/rating-icons/tv-ma.gif" alt="tv-ma">
<div id="center">
    <div id="videoWrapper" style="display:none;">
        <!--<img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/vid_image_150.png" />-->
        <iframe id="bj_vid" src="//www.youtube.com/embed/aKi-cj39-xg" frameborder="0" allowfullscreen></iframe>
        <div id="txtImages" style="display:none;">
            <div id="blogo">
                <img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/BLACK-JESUS.png" />
            </div>
            <div id="tune">
                <img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/PREMIERES-AUGUST-7TH-AT-11-00P-.png" />
            </div>
            <div id="aslogo">
                <img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/asLogo.png" />
            </div>
        </div>
    </div>
</div>
<div id="hands">
    <div id="left" style="display:none;">
        <img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/lefty_v3_slice.png" />
    </div>
    <div id="right" style="display:none;">
        <img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/righty_v3_slice_54.png" />
    </div>
</div>
<canvas id="myCanvas"></canvas>
<canvas id="myCanvas2"></canvas>

CSS

html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                border: 0;
                overflow: hidden;
                /*  Disable scrollbars */
                display: block;
                /* No floating content on sides */
            }
            #videoWrapper img {
                position: relative;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            #videoWrapper iframe {
                position: relative;
                top: 0;
                left: 8px;
                width: 96%;
                height: 100%;
            }
            #videoWrapper {
                position: absolute;
                top: 0;
                bottom: 114px;
                left: 0;
                right: 0;
                margin: auto;
                width:50%;
                height:50%;
                z-index:8;
            }
            #myCanvas {
                z-index: 1;
                display: block;
                position: absolute;
                bottom: 35px;
                left: 0;
                right: 0;
            }
            #myCanvas2 {
                z-index:-1;
                display:block;
                position: absolute;
                top: 0;
                left: 0;
            }
            #center {
                width: 50%;
                height: 100%;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
            #hands {
                width: 50%;
                height: 100%;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
            #left {
                z-index: 8;
                height: 50%;
               ...

JavaScript

var canvas = document.getElementById("myCanvas");
var canvas2 = document.getElementById("myCanvas2");
var center = document.getElementById("center");
var hands = document.getElementById("hands");
var vid = document.getElementById("videoWrapper");
var video = document.getElementById("bj_vid");
var vWrapper = document.getElementById("videoWrapper");
var leftHand = document.getElementById("left");
var rightHand = document.getElementById("right");
var txt = document.getElementById("txtImages");
var vidWidth, vidHeight;
var W = window.innerWidth;
var H = window.innerHeight;
var m = Math.min(W, H);
var s = m * 7.45E-4;
var ch = 29.75 * s;
canvas.width = W;
canvas.height = H;
canvas2.width = W;
canvas2.height = H;
var lh = new Image;
lh.src = "http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/lefty_v3.png";
var rh = new Image;
rh.src = "http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/righty_v3.png";
var lhslice = new Image;
lhslice.src = "http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/lefty_v3_slice.png";
var rhslice = new Image;
rhslice.src = "http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/righty_v3_slice_54.png";
var cloud1 = new Image;
cloud1.src = "http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/cloud_final_2.png";
var cloud2 = new Image;
cloud2.src = "http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/cloud_4.png";
var sky = new Image;
sky.src = "http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/sky.jpg";
var rVid = new Image;
rVid.src = "http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/vid_image_right_150.png";
var lVid = new Image;
lVid.src = "http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/vid_image_left_150.png";
var vidWidth = rVid.width * s + lVid.width * s,
    vidHeight =...