231 working

231 working

by nhulea

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:block;">
            <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 */
            }
            canvas {
            }
            #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: 75px;
                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: 57px;
                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;
          ...

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 vidWidth,
  vidHeight;

  var W = window.innerWidth;
  var H = window.innerHeight;

  var m = Math.min(W, H);
  var s = m * 0.000745;
  var ch = 29.75 * s;

  canvas.width = W;
  canvas.height = H;
  canvas2.width = W;
  canvas2.height = H;

  //RECT SIZE
  var rw = 344;
  var rh = 405;

  //Images
  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 =...