add style and script to play videos in a shadowbox

anytime that a link appears in the page with class "video-shadowbox-button"
the link must also have the youtube video set in the href with the ?v parameter

Change-Id: I4af84f003075b8d2c43acd3295ce3955b141cc97

tools/droiddoc/templates-sdk/assets/css/default.css

@@ -6955,30 +6955,67 @@ a.landing-button:visited {
 }
 
 #video-frame {
-  width:940px;
+  width:948px;
-  height:526.4px;
+  height:529px;
-  margin:80px auto 0;
+  margin:32px auto 0;
   display:none;
 }
 
 .video-close {
-cursor: pointer;
+  cursor: pointer;
-position: relative;
+  position: relative;
-left: 940px;
+  left: 948px;
-top: 0;
+  top: -8px;
-pointer-events: all;
+  pointer-events: all;
 }
 
 #icon-video-close {
-background-image: url("../images/close.png");
+  background-image: url("../images/close-white.png");
-background-position: 0 0;
+  background-image: -webkit-image-set(url(../images/close-white.png) 1x, url(../images/close-white_2x.png) 2x);
-height: 36px;
+  background-repeat: no-repeat;
-width: 36px;
+  background-position: 0 0;
-display:block;
+  background-size: 36px 36px;
+  height: 36px;
+  width: 36px;
+  display:block;
 }
 
+#icon-video-close:hover {
+  background-image: url("../images/close-grey.png");
+  background-image: -webkit-image-set(url(../images/close-grey.png) 1x, url(../images/close-grey_2x.png) 2x);
+}
 
+/* Preload the hover images */
+a.video-shadowbox-button.white:after {
+  display:none;
+  content:url("../images/close-grey.png") url("../images/close-grey_2x.png");
+}
 
+a.video-shadowbox-button.white {
+  background-image: url("../images/play-circle-white.png");
+  background-image: -webkit-image-set(url(../images/play-circle-white.png) 1x, url(../images/play-circle-white_2x.png) 2x);
+  background-size: 36px 36px;
+  background-repeat: no-repeat;
+  background-position: right;
+  padding: 16px 42px 16px 8px;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 24px;
+  color: #fff;
+  text-decoration:none;
+}
+
+a.video-shadowbox-button.white:hover {
+  color:#bababa !important;
+  background-image: url("../images/play-circle-grey.png");
+  background-image: -webkit-image-set(url(../images/play-circle-grey.png) 1x, url(../images/play-circle-grey_2x.png) 2x);
+}
+
+/* Preload the hover images */
+a.video-shadowbox-button.white:after {
+  display:none;
+  content:url("../images/play-circle-grey.png") url("../images/play-circle-grey_2x.png");
+}
 
 /******************
 Styles for d.a.c/index:

tools/droiddoc/templates-sdk/assets/js/docs.js

@@ -20,7 +20,7 @@ $.ajaxSetup({
 /******  ON LOAD SET UP STUFF *********/
 
 $(document).ready(function() {
-  
+
   // show lang dialog if the URL includes /intl/
   //if (location.pathname.substring(0,6) == "/intl/") {
   //  var lang = location.pathname.split('/')[2];
@@ -558,10 +558,74 @@ false; // navigate across topic boundaries only in design docs
     cookiePath = "distribute_";
   }
 
+
+  /* setup shadowbox for any videos that want it */
+  var $videoLinks = $("a.video-shadowbox-button");
+  if ($videoLinks.length) {
+    // if there's at least one, add the shadowbox HTML to the body
+    $('body').prepend(
+'<div id="video-container">'+
+  '<div id="video-frame">'+
+    '<div class="video-close">'+
+      '<span id="icon-video-close" onclick="closeVideo()">&nbsp;</span>'+
+    '</div>'+
+    '<div id="youTubePlayer"></div>'+
+  '</div>'+
+'</div>');
+
+    // loads the IFrame Player API code asynchronously.
+    $.getScript("https://www.youtube.com/iframe_api");
+
+    $videoLinks.each(function() {
+      var videoId = $(this).attr('href').split('?v=')[1];
+      $(this).click(function(event) {
+        event.preventDefault();
+        startYouTubePlayer(videoId);
+      });
+    });
+
+  }
+
 });
 // END of the onload event
 
 
+var youTubePlayer;
+function onYouTubeIframeAPIReady() {
+}
+
+function startYouTubePlayer(videoId) {
+  if (youTubePlayer == null) {
+    youTubePlayer = new YT.Player('youTubePlayer', {
+      height: '529',
+      width: '940',
+      videoId: videoId,
+      events: {
+        'onReady': onPlayerReady
+      }
+    });
+  } else {
+    youTubePlayer.playVideo();
+  }
+  $("#video-container").fadeIn(200, function(){$("#video-frame").show()});
+}
+
+function onPlayerReady(event) {
+  event.target.playVideo();
+}
+
+function closeVideo() {
+  try {
+    youTubePlayer.stopVideo();
+    $("#video-container").fadeOut(200);
+  } catch(e) {
+    console.log('Video not available');
+    $("#video-container").fadeOut(200);
+  }
+}
+
+
+
 function initExpandableNavItems(rootTag) {
   $(rootTag + ' li.nav-section .nav-section-header').click(function() {
     var section = $(this).closest('li.nav-section');