add page for google IO videos

this is a scrappy page with inline styles and such as a first iteration.
plan is to clean this up and make it extensible later

Change-Id: I3351f6d79f42b807b84540e1c00092440d9b83d8

1 files changed, 341 insertions, 0 deletions

diff --git a/docs/html/channels/io2013.jd b/docs/html/channels/io2013.jd
new file mode 100644
index 0000000..f1ae585
--- /dev/null
+++ b/docs/html/channels/io2013.jd
@@ -0,0 +1,341 @@
+fullpage=true
+page.title=Google I/O 13
+@jd:body
+    
+<style>
+
+#ioplayer-frame {
+  z-index:10;
+  width:703px;
+  height:396px;
+  margin:0;
+  position:relative;
+}
+
+#noplayer-message {
+  position:absolute;
+  top:50%;left:0;
+  width:100%;
+  z-index:-1;
+  text-align:center;
+  display:none;
+}
+
+h1 {
+  font-weight:100;
+  font-size:40px;
+  line-height:30px;
+  margin:30px 0 10px 0px;
+  color:#000;
+}
+
+h2 {
+  font-weight:100;
+  font-size:30px;
+  line-height:30px;
+  margin:12px 0 10px 0px;
+  color:#000;
+  float:left;
+  display:block;
+}
+
+.col-4 h2 {
+  margin-top:40px;
+}
+
+ul.videos {
+  list-style:none;
+  margin:0;
+  width:auto;
+}
+ul.videos li {
+  display:block;
+  float:left;
+  position:relative;
+  margin:0 2px 2px 0;
+  background-repeat:no-repeat !important;
+  background-size:320px auto;
+  background-position:10% 50%;
+}
+ul.videos li a {
+  color:#fff !important;
+  display:block;
+  margin:0;
+  padding:8px 12px;
+  width:209px;
+  height:134px;
+  box-shadow:inset 500px 500px 999px rgba(000, 000, 000, 0.2);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.8)), color-stop(1, transparent));
+  background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.8), transparent);
+  background-image: -moz-linear-gradient(top, rgba(0,0,0,0.8), transparent);
+  background-image: -o-linear-gradient(top, rgba(0,0,0,0.8), transparent);
+  background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
+}
+ul.videos.featured li {
+  margin:0 0 2px;
+}
+ul.videos.featured li a {
+  margin:0;
+  height:115px;
+}
+ul.videos li a:hover {
+  box-shadow:inset 500px 500px 999px rgba(255,255,255, 0.6);
+}
+ul.videos li h4 {
+  text-shadow:1px 1px 0 rgba(0,0,0,0.8);
+  font-size:18px;
+  line-height:22px;
+  color:inherit;
+  margin:0;
+}
+
+ul.videos li .description-frame {
+  display:none;
+}
+ul.videos li a:hover .description-frame {
+  display:block;
+  position:absolute;
+  top:80px;
+  left:8px;
+  z-index:99;
+}
+ul.videos .description {
+  background:#fff;
+  width:200px;
+  padding:8px;
+  -webkit-border-radius:1px;
+  -moz-border-radius:1px;
+  border-radius:1px;
+  -moz-box-shadow: 0 2px 3px 2px rgba(000,000,000, 0.4);
+  -webkit-box-shadow: 0 2px 3px 2px rgba(000,000,000, 0.4);
+  box-shadow: 0 2px 3px 2px rgba(000,000,000, 0.4);
+  font-size:11px;
+  line-height:12px;
+  color:#000;
+  overflow:hidden;
+}
+ul.videos .arrow-up {
+  position:absolute;
+  left:15px;
+  top:-11px;
+  width:0;
+  height:0;
+  border-bottom:12px solid #fff;
+  border-left:12px solid transparent;
+  border-right:12px solid transparent;
+}
+ul.videos .arrow-down {
+  position:absolute;
+  left:15px;
+  bottom:-11px;
+  width:0;
+  height:0;
+  border-top:12px solid #fff;
+  border-left:12px solid transparent;
+  border-right:12px solid transparent;
+}
+
+ul.videos span.tag {
+  font-size:.9em;
+  font-weight:normal;
+  display: block;
+  position: absolute;
+  bottom: 0;
+  color: #fff;
+  left: 0;
+  padding: 4px;
+  border-top-right-radius:4px;
+  text-transform:uppercase;
+  text-shadow: none;
+}
+ul.videos span.tag.design {
+  background-color:rgba(51, 181, 229, .7);
+}
+ul.videos span.tag.develop {
+  background-color:rgba(255, 136, 0, .7);
+}
+ul.videos span.tag.distribute {
+  background-color:rgba(153, 204, 0, .7);
+}
+
+</style>
+
+
+
+
+
+
+
+<div class="wrap">
+
+  <div class="col-12" style="width:704px;margin:0">
+    <h1>Android @ Google I/O 13</h1>
+    <div id="ioplayer-frame">
+      <div id="noplayer-message">
+        <!-- busted flash player message -->
+        Your video is supposed to appear here.<br/>
+        Make sure you have the <a href="//get.adobe.com/flashplayer/" target="_blank">Flash&reg; Player</a>.
+      </div>
+      <div id="player"><!-- Youtube embeds here... actually replaces this div --></div>
+    </div>
+  </div>
+
+  <div class="col-4" style="margin:0;width:234px;padding:0 0 0 2px">
+    <h2 class="norule">Most Popular</h2>
+    <ul class="videos featured" id="playlist2">
+    </ul>
+  </div>
+</div>
+
+<div class="wrap">
+
+    <div style="position:absolute;width:940px;text-align:right">
+      <a href="//www.youtube.com/AndroidDevelopers" target="_blank">
+      More on YouTube
+        <img src="//www.youtube.com/favicon.ico" style="border:0;width:16px;height:16px;vertical-align:middle;margin:0 2px 3px 2px">
+      </a>
+    </div>
+  <div style="width:944px;overflow:hidden;padding:0 0 20px">
+    <h2 class="norule">All Videos</h2>
+    <ul class="videos" id="playlist1" style="clear:left">
+      <span id="videos-design"></span>
+      <span id="videos-develop"></span>
+      <span id="videos-distribute"></span>
+    </ul>
+  </div>
+
+</div>
+
+<br class="clearfix"/>
+
+      
+      
+      
+      
+      
+      
+      
+      
+      
+
+<script src="//swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js" type="text/javascript"></script>
+<script type="text/javascript">
+
+/* Load a video into the player box.
+ * @param id        The YouTube video ID
+ * @param title     The video title to display in the player box (character escaped)
+ * @param autoplay  Whether to automatically play the video
+ */
+function loadVideo(id, title, autoplay) {
+  var url = '//www.youtube.com/v/' + id + '&rel=1&border=0&fs=1' + (autoplay?'&autoplay=1':'');
+  swfobject.embedSWF(url, 'player', '704', '397', '9.0.0', false, false, {allowfullscreen: 'true'});
+  $("#videoPlayerTitle").html("<h2>" + unescape(title) + "</h2>");
+  setTimeout(function(){$('#noplayer-message').show()}, 2000);
+  $("body").animate({ scrollTop: 0 }, "slow");
+}
+
+
+function buildPlaylistDesign(data) {
+  buildPlaylist(data, $('ul#playlist1 #videos-design'), "design");
+}
+
+function buildPlaylistDevelop(data) {
+  buildPlaylist(data, $('ul#playlist1 #videos-develop'), "develop");
+}
+
+function buildPlaylistDistribute(data) {
+  buildPlaylist(data, $('ul#playlist1 #videos-distribute'), "distribute");
+}
+
+function buildPlaylist2(data) {
+  buildPlaylist(data, $('ul#playlist2'));
+}
+
+function buildPlaylist(data, ul, tag) {
+
+  var MAX_DESC_LENGTH = 200; // the length at which we will trim the description
+  var feed = data.feed;
+  var entries = feed.entry || [];
+  var playlistId = feed.yt$playlistId.$t;
+
+  // Loop through each entry (each video) and add it to the '#DevelopersLive' list
+  for (var i = 0; i < entries.length; i++) {
+    var entry = entries[i];
+    var title = entry.title.$t;
+    var id = entry.media$group.yt$videoid.$t;
+    // get 180x320 thumbnail
+    var thumbs = entry.media$group.media$thumbnail;
+    var thumbUrl;
+    for (var j = 0; j < thumbs.length; j++) {
+      if (thumbs[j].yt$name == "hqdefault") {
+        thumbUrl = thumbs[j].url;
+      }
+    }
+
+    // chop out the google io title
+    title = title.substr(title.indexOf("-") + 1, title.length);
+
+    var fullDescription = entry.media$group.media$description.$t;
+    var playerUrl = entry.media$group.media$content[0].url;
+    var shortDescription = fullDescription.substr(0, MAX_DESC_LENGTH);
+    // further shorten description if there's a url (remove it)
+    var httpindex = shortDescription.indexOf("http://");
+    if (httpindex != -1) {
+      shortDescription = shortDescription.substring(0,httpindex);
+    }
+    shortDescription += shortDescription.length == MAX_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
+
+    var a = $('<a href="#" id="' + id + '" '
+          + 'onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" >');
+    var pShortDescription = $('<div class="description-frame"><div class="arrow-up"></div>'
+          + '<div class="description">' + shortDescription + '</div></div>');
+    var h4Title = "<h4>" + title + "</h4>";
+    var li = $('<li style="background-image:url(\'' + thumbUrl +'\')">');
+
+    li.append(a);
+    a.append(h4Title).append(pShortDescription);
+
+    if (tag !== undefined) {
+      var $tag = $('<span class="tag ' + tag + '">' + tag + '</span>');
+      a.append($tag);
+    }
+
+    ul.append(li);
+
+
+    // put the first video in the player 
+    if ((tag == "design") && (i == 0)) {
+      loadVideo(id, escape(title), false);
+    }
+  }
+}
+
+
+/* Request the playlist feeds from YouTube */
+function showDevelopersLivePlaylist() {
+  var playlistId = "PLWz5rJ2EKKc-qVhMuAprIFYFbCotdgJKq"; /* IO 13 - Design */
+  $.getScript("//gdata.youtube.com/feeds/api/playlists/"
+          + playlistId +
+          "?v=2&alt=json-in-script&max-results=50&callback=buildPlaylistDesign&orderby=position");
+
+  playlistId = "PLWz5rJ2EKKc9rkwO9yBosRvkQBJd5utmR"; /* IO 13 - Develop */
+  $.getScript("//gdata.youtube.com/feeds/api/playlists/"
+          + playlistId +
+          "?v=2&alt=json-in-script&max-results=50&callback=buildPlaylistDevelop&orderby=position");
+
+  playlistId = "PLWz5rJ2EKKc-1WjgQqL0B4OQtbLfhMlB2"; /* IO 13 - Distribute */
+  $.getScript("//gdata.youtube.com/feeds/api/playlists/"
+          + playlistId +
+          "?v=2&alt=json-in-script&max-results=50&callback=buildPlaylistDistribute&orderby=position");
+
+
+  playlistId = "PLWz5rJ2EKKc9WGUwq2gQ-coU3fSyexgOx"; /* IO 13 - The Android Sessions */
+  $.getScript("//gdata.youtube.com/feeds/api/playlists/"
+          + playlistId +
+          "?v=2&alt=json-in-script&max-results=3&callback=buildPlaylist2&orderby=viewCount");
+}
+
+showDevelopersLivePlaylist();
+
+
+</script>
\ No newline at end of file