<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Youtube videos"
    title_url="http://youtube.com"
    author="Igor K."
    author_location="San Bruno, CA"
    author_email="igork.feedback+youtube_videos@gmail.com"
    screenshot="http://www.google.com/ig/modules/en_us_youtube_videos.png"
    thumbnail="http://www.google.com/ig/modules/en_us_youtube_videos-thm.png">
    
    <Require feature="setprefs"/>
    <Require feature="opensocial-0.7"/>
    <Preload href="http://youtube.com/rss/global/recently_featured.rss"/>
  </ModulePrefs>

  <UserPref name="prefs_version" default_value="0" datatype="hidden"/>

  <!-- A list of the last 3 custom search terms and the corresponding URLs -->

  <UserPref name="search_channels" default_value="0" datatype="hidden"/>
  <UserPref name="search_channel_name0" default_value="" datatype="hidden"/>
  <UserPref name="search_channel_url0" default_value="" datatype="hidden"/>
  <UserPref name="search_channel_name1" default_value="" datatype="hidden"/>
  <UserPref name="search_channel_url1" default_value="" datatype="hidden"/>
  <UserPref name="search_channel_name2" default_value="" datatype="hidden"/>
  <UserPref name="search_channel_url2" default_value="" datatype="hidden"/>

  <!-- The current channel (default or custom), an index into 'channels' -->
  <UserPref name="current_channel_id" default_value="0" datatype="hidden"/>

  <!-- Only read, never written.  Allows a host page to ask us to do a search-->
  <UserPref name="rawQuery" default_value="" datatype="hidden"/>
  <!-- The url to preload, typically the last URL fetched. -->
  <UserPref name="channel_url_to_preload" datatype="hidden"
   default_value="http://youtube.com/rss/global/recently_featured.rss" />

  <Content type="html">
  <![CDATA[<!---->
  <script>
   gadgets.util.registerOnLoadHandler(initializeWidget);
var widgetLoaded = false;
function initializeWidget() {
   loadPreferences();
   rebuildChannelList();
   window.onresize = handleResize;
   handleResize();
   if(rawQuery)doSearch(rawQuery);
   else _gel("channellist").onchange()}
var prefs = new gadgets.Prefs(), rawQuery = "";
function loadPreferences() {
   var a = prefs.getInt("prefs_version");
   if(a < 2) {
      }
   else if(a == 2) {
      var c = prefs.getInt("search_channels");
      for(var b = 0; b < Math.min(3, c); b++) {
         var e = prefs.getString("search_channel_name" + b), d = prefs.getString("search_channel_url" + b);
         channels[b + defaultChannels] = [e, d]}
      currentChannelId = prefs.getInt("current_channel_id")}
   rawQuery = prefs.getString("rawQuery")}
function appendPrefUpdateIfChanged(a, c, b) {
   if(prefs.getString(c) != b + "") {
      a.push(c);
      a.push(b)}
   }
function savePreferences() {
   var a = [];
   appendPrefUpdateIfChanged(a, "prefs_version", 2);
   appendPrefUpdateIfChanged(a, "search_channels", channels.length - defaultChannels);
   appendPrefUpdateIfChanged(a, "current_channel_id", currentChannelId);
   appendPrefUpdateIfChanged(a, "channel_url_to_preload", channels[currentChannelId][1]);
   for(var c = defaultChannels; c < channels.length; c++) {
      appendPrefUpdateIfChanged(a, "search_channel_name" + (c - defaultChannels), channels[c][0]);
      appendPrefUpdateIfChanged(a, "search_channel_url" + (c - defaultChannels), channels[c][1])}
   if(a.length > 0)prefs.set.apply(prefs, a)}
function showElements() {
   for(var a = 0; a < arguments.length; a++)_gel(arguments[a]).style.display = "block"}
function hideElements() {
   for(var a = 0; a < arguments.length; a++)_gel(arguments[a]).style.display = "none"}
function clearElement(a) {
   while(a.firstChild)a.removeChild(a.firstChild)}
function setElementText(a, c) {
   var b = _gel(a);
   clearElement(b);
   b.appendChild(document.createTextNode(c))}
function getDivHeight(a) {
   if(a.clientHeight)return a.clientHeight;
   else if(a.offsetHeight)return a.offsetHeight}
function getDivWidth(a) {
   if(a.clientWidth)return a.clientWidth;
   else if(a.offsetWidth)return a.offsetWidth}
function addItemToList(a, c, b, e) {
   var d = new Option(b, e);
   d.id = c;
   try {
      a.add(d)}
   catch(f) {
      a.appendChild(d)}
   }
var gadgetState = 3, miniMode = false;
function goToNewState(a) {
   if(a == 3) {
      if(gadgetState == 2 || gadgetState == 1)goToNewState(0);
      _gel("loading").style.visibility = "visible"}
   else if(a == 6) {
      setElementText("infoAdded", "");
      setElementText("infoFrom", "");
      setElementText("infoViews", "");
      setElementText("infoRatings", "");
      setElementText("infoDescription", "");
      _gel("infoThumb").src = "";
      _gel("infoThumb").style.visibility = "hidden";
      hideElements("message", "infolink", "innerWatchVideos", "chooseVideos", "pager");
      showElements("hideLink", "infopane", "backlink");
      _gel("loadinginfo").style.visibility = "visible"}
   else if(a == 4) {
      hideElements("backlink", "pager", "watchVideos", "chooseVideos");
      showElements("message");
      displayMessage(" cannot connect retrying")}
   else if(a == 5) {
      hideElements("watchVideos", "chooseVideos", "backlink", "pager");
      showElements("message");
      displayMessage("__MSG_no_results__");
      _gel("query").focus()}
   else if(a == 1) {
      hideElements("infopane", "message", "chooseVideos", "pager", "hideLink");
      showElements("watchVideos", "innerWatchVideos", "backlink", "infolink")}
   else if(a == 0) {
      hideElements("watchVideos", "message", "backlink", "infopane");
      showElements("chooseVideos", "pager")}
   else if(a == 2) {
      hideElements("message", "infolink", "innerWatchVideos", "chooseVideos", "pager");
      showElements("hideLink", "infopane", "backlink");
      _gel("infoThumb").style.visibility = "visible"}
   if(a != 3 && a != 6) {
      _gel("loading").style.visibility = "hidden";
      _gel("loadinginfo").style.visibility = "hidden"}
   gadgetState = a}
function handleResize() {
   if(miniMode != getDivWidth(document.body) < 270) {
      miniMode = getDivWidth(document.body) < 270;
      if(gadgetState == 0)renderBrowsePage(currentPage)}
   if(gadgetState == 1 || gadgetState == 2)renderTitle(getCurrentVideo().title)}
var currentChannelId = 0, channels = [["Recently Featured", "http://youtube.com/rss/global/recently_featured.rss"], ["Top Favorites", "http://youtube.com/rss/global/top_favorites.rss"], ["Top Rated", "http://youtube.com/rss/global/top_rated.rss"], ["Most Viewed Today", "http://youtube.com/rss/global/top_viewed_today.rss"], ["Most Discussed Today", "http://youtube.com/rss/global/most_discussed_today.rss"], ["Recently Added", "http://youtube.com/rss/global/recently_featured.rss"]], defaultChannels = channels.length;
function channelNodeId(a) {
   return"channel_" + a}
function rebuildChannelList() {
   var a = _gel("channellist");
   clearElement(a);
   for(var c = 0; c < channels.length; c++)addItemToList(a, channelNodeId(c), channels[c][0], c);
   _gel(channelNodeId(currentChannelId)).selected = true}
function doSearch(a) {
   if(a == "")return;
   var c = '"' + a + '"', b = "http://youtube.com/rss/search_by_relevance/" + encodeURI(a) + ".rss", e = 0, d = false;
   for(var f = 0; f < channels.length; f++)if(channels[f][0] == c && channels[f][1] == b) {
      e = f;
      d = true;
      break}
   if(!d) {
      if(channels.length - defaultChannels == 3) {
         for(var f = 0; f < 2; f++)channels[defaultChannels + f] = channels[defaultChannels + f + 1];
         channels[channels.length - 1] = [c, b]}
      else channels[channels.length] = [c, b];
      rebuildChannelList();
      e = channels.length - 1}
   _gel(channelNodeId(e)).selected = true;
   _gel("channellist").onchange()}
function changeChannel(a) {
   currentChannelId = a.value;
   var c = channels[currentChannelId][1];
   if(currentChannelId >= defaultChannels) {
      var b = channels[currentChannelId][0], e = b.substr(1, b.length - 2);
      if(_gel("query").value != e)_gel("query").value = e}
   if(widgetLoaded)savePreferences();
   goToNewState(3);
   var paramscgl = {
      };
   paramscgl[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;
    gadgets.io.makeRequest(c,handleChannelXml,paramscgl);
   /*_IG_FetchXmlContent(c, handleChannelXml)*/}
function displayMessage(a) {
   setElementText("message", a)}
function handleChannelXml(a) {
   a = a.data;
   if(a == null || typeof a != "object" || a.firstChild == null) {
      goToNewState(4);
      setTimeout(rebuildChannelList, 10000);
      return}
   var c = a.getElementsByTagName("item");
   videos = [];
   for(var b = 0; b < c.length && videos.length <= 24; b++) {
      var e = {
         };
      for(var d = 0; d < c[b].childNodes.length; d++) {
         if(c[b].childNodes[d].nodeName == "enclosure") {
            var f = c[b].childNodes[d].getAttribute("url"), g = c[b].childNodes[d].getAttribute("duration");
            e.swf = f;
            e.id = f.replace(/.*\/v\/(.*)\.swf/,"$1");
            e.index = videos.length;
            e.duration = g}
         if(c[b].childNodes[d].nodeName == "media:thumbnail") {
            var f = c[b].childNodes[d].getAttribute("url");
            e.thumbnail = f}
         if(c[b].childNodes[d].nodeName == "title")e.title = getXmlNodeText(c[b].childNodes[d])}
      videos.push(e)}
   if(videos.length > 0) {
      currentVideoIndex = 0;
      renderBrowsePage(0)}
   else goToNewState(5);
   if(!widgetLoaded)widgetLoaded = true}
function getXmlNodeText(a) {
   return a.text ? a.text : (a.textContent ? a.textContent : (a.firstChild && a.firstChild.nodeValue ? a.firstChild.nodeValue : ""))}
var videos, currentVideoIndex = 0;
function getCurrentVideo() {
   return videos[currentVideoIndex]}
var currentPlayerDivId = 0;
function loadVideo(a) {
   goToNewState(1);
   currentVideoIndex = a.index;
   var c = "video" + currentPlayerDivId;
   currentPlayerDivId = 0 +!currentPlayerDivId;
   var b = "video" + currentPlayerDivId;
   _gel(c).style.display = "none";
   clearElement(_gel(c));
   _gel(b).style.display = "block";
   var e = new SWFObject(a.swf, "movie_player", "100%", "200", 7, "#FFFFFF");
   e.a("wmode", "transparent");
   e.a("flashvars", "autoplay=1");
   setTimeout(function() {
      e.write(b)}
   , 10);
   setElementText("videoDuration", renderDuration(a.duration));
   renderTitle(a.title)}
function renderTitle(a) {
   setElementText("videoTitle", "|");
   var c = getDivHeight(_gel("videoTitle")), b = a;
   setElementText("videoTitle", b);
   for(var e = "...".length; e < b.length; e++)if(getDivHeight(_gel("videoTitle")) > c)setElementText("videoTitle", b.substr(0, b.length - e) + "...");
   else break}
function nextVideo() {
   selectCurrentVideo(currentVideoIndex + 1)}
function previousVideo() {
   selectCurrentVideo(currentVideoIndex - 1)}
function selectCurrentVideo(a) {
   currentVideoIndex = a < 0 ? videos.length - 1 : a % videos.length;
   if(gadgetState == 1)loadVideo(getCurrentVideo());
   else if(gadgetState == 2)showInfo()}
function loadVideoLater(a) {
   return function() {
      loadVideo(a)}
   }
var currentPage = 0;
function videosPerPage() {
   return miniMode ? 4 : 6}
function renderBrowsePage(a) {
   for(var c = 0; c < 6; c++) {
      clearElement(_gel("link" + c));
      _gel("slot" + c).style.display = "none"}
   var b = Math.floor(videos.length / videosPerPage());
   currentPage = a;
   if(currentPage > b)currentPage = b;
   if(miniMode) {
      _gel("cell0").style.width = "50%";
      _gel("cell1").style.width = "50%";
      _gel("cell2").style.width = "0px"}
   else {
      _gel("cell0").style.width = "33%";
      _gel("cell1").style.width = "33%";
      _gel("cell2").style.width = "33%"}
   for(var c = 0; c < videosPerPage(); c++) {
      var e = currentPage * videosPerPage() + c;
      if(e >= videos.length)break;
      var d = c + (miniMode ? Math.floor(c / 2) : 0), f = videos[e];
      _gel("slot" + d).style.display = "block";
      _gel("slot" + d).onclick = loadVideoLater(f);
      var g = document.createElement("img");
      g.id = "thumb" + c;
      g.className = "thumb";
      g.src = f.thumbnail;
      g.title = f.title;
      var h = document.createElement("span");
      h.className = "thumbSpan";
      h.appendChild(g);
      clearElement(_gel("link" + d));
      _gel("link" + d).appendChild(h);
      clearElement(_gel("title" + d));
      clearElement(_gel("duration" + d));
      var i = document.createTextNode(truncate(f.title, 15)), j = document.createTextNode("" + renderDuration(f.duration));
      _gel("title" + d).appendChild(i);
      _gel("duration" + d).appendChild(j)}
   renderPager(currentPage);
   goToNewState(0)}
function charWidth(a) {
   if(a <= "\u04f9" || a == "\u05be" || a >= "\u05d0" && a <= "\u05ea" || a == "\u05f3" || a == "\u05f4" || a >= "\u0e00" && a <= "\u0e7f" || a >= "\u1e00" && a <= "\u20af" || a >= "\u2100" && a <= "\u213a" || a >= "\uff61" && a <= "\uffdc")return 1;
   return 2}
function displayLength(a) {
   var c = 0;
   for(var b = 0; b < a.length; b++) {
      var e = a.substr(b, 1);
      c += charWidth(e)}
   return c}
function truncateByWidth(a, c) {
   var b = 0, e = "";
   for(var d = 0; d < a.length && b < c; d++) {
      var f = a.substr(d, 1);
      e += f;
      b += charWidth(f)}
   return e}
function truncate(a, c) {
   if(displayLength(a) > c) {
      a = truncateByWidth(a, c - "...".length);
      a += "..."}
   return a}
function renderDuration(a) {
   var c = Math.floor(a / 60), b = a % 60 + "";
   b = b.substr(0, 2);
   if(b.length == 0)b = "00";
   else if(b.length == 1)b = "0" + b;
   return c + ":" + b}
function renderBrowsePageLater(a) {
   return function() {
      renderBrowsePage(a)}
   }
function getPageLink(a, c) {
   var b = document.createTextNode("" + (a + 1)), e;
   if(c)e = b;
   else {
      var d = document.createElement("a");
      d.href = "#";
      d.onclick = renderBrowsePageLater(a);
      d.appendChild(b);
      e = d}
   var f = document.createElement("span");
   f.appendChild(e);
   f.appendChild(document.createTextNode("\u00a0\u00a0"));
   return f}
function renderPager(a) {
   var c = _gel("pagelinks");
   clearElement(c);
   for(var b = 0; b < videos.length; b += videosPerPage())c.appendChild(getPageLink(b / videosPerPage(), b == a * videosPerPage()))}
var video;
function showInfo() {
   video = getCurrentVideo();
   setElementText("infoTitle", video.title);
   setElementText("videoDuration", renderDuration(video.duration));
   renderTitle(video.title);
   var a = "http://www.youtube.com/api2_rest?";
   a += "method=youtube.videos.get_details";
   a += "&dev_id=ZF7LQgIuE3U&video_id=";
   goToNewState(6);
   var paramscgl = {
      };
   paramscgl[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;
   gadgets.io.makeRequest(a+video.id,handleVideoDetails,paramscgl);
   /*_IG_FetchXmlContent(a + video.id, handleVideoDetails)*/}
function closeInfo() {
   goToNewState(1);
   loadVideo(getCurrentVideo())}
function getFirstChildWithName(a, c) {
   if(a.childNodes)for(var b = 0; b < a.childNodes.length; b++)if(a.childNodes[b].nodeName == c)return a.childNodes[b];
   return null}
function handleVideoDetails(a) {
   a = a.data;
   if(a == null || typeof a != "object" || a.firstChild == null) {
      setElementText("infoAdded", "");
      setElementText("infoFrom", "");
      setElementText("infoViews", "");
      setElementText("infoRatings", "");
      _gel("infoThumb").src = "";
      setElementText("infoDescription", "Sorry! We could not retrieve the video details. Please try again later.")}
   else {
      var c = getFirstChildWithName(a, "ut_response"), b = getFirstChildWithName(c, "video_details");
      for(var e = 0; e < b.childNodes.length; e++) {
         var d = b.childNodes[e];
         if(d.nodeName == "author")video.author = getXmlNodeText(d);
         if(d.nodeName == "view_count")video.views = getXmlNodeText(d);
         if(d.nodeName == "upload_time") {
            var f = new Date;
            f.setTime(getXmlNodeText(d) * 1000);
            var g = "en_US";
            video.uploaded = g.substr(0, 2) == "en" ? format_time_ago(f.getTime()) : f.toDateString()}
         if(d.nodeName == "rating_avg")video.rating = getXmlNodeText(d);
         if(d.nodeName == "rating_count")video.rated = getXmlNodeText(d);
         if(d.nodeName == "description")video.description = getXmlNodeText(d)}
      setElementText("infoAdded", video.uploaded);
      setElementText("infoFrom", video.author);
      _gel("infoFrom").href = "http://youtube.com/user/" + video.author;
      setElementText("infoViews", video.views);
      var h = "{0} of 5 by {1} people";
      h = h.replace(/\{0\}/,Math.round(video.rating));
      h = h.replace(/\{1\}/,video.rated);
      setElementText("infoRatings", h);
      _gel("infoThumb").src = video.thumbnail;
      _gel("infoDescription").innerHTML = HtmlEscapeAddWbrs(video.description, 10)}
   goToNewState(2);
   renderTitle(video.title)}
function HtmlEscapeAddWbrs(a, c) {
   if(a) {
      var b = /&/g, e = //g, f = /\"/g;
      a = a.replace(b, "&amp;").replace(e, "&lt;").replace(d, "&gt;").replace(f, "&quot;");
      var g = "";
      for(var h = 0; h < a.length; h = h + c) {
         g += a.substr(h, c);
         g += "<wbr>"}
      return g}
   else return""}
function format_time_ago(a) {
   var c = new Date, b = c.getTime(), e = b - a;
   return formatOutput(e)}
function formatOutput(a) {
   var c = Math.floor(a / 1000), b = Math.floor(c / 60), e = Math.floor(b / 60), d = Math.floor(e / 24), f = Math.floor(d / 7), g = Math.floor(d / 30), h = Math.floor(d / 365), i = "s";
   b = b % 60;
   e = e % 24;
   return h > 0 ? h + " year" + printS(h) + " ago" : (g > 0 ? g + " month" + printS(g) + " ago" : (f > 0 ? f + " week" + printS(f) + " ago" : (d > 0 ? d + " day" + printS(d) + " ago" : (e > 0 ? e + " hour" + printS(e) + " ago" : (b > 0 ? b + " minute" + printS(b) + " ago" : "1 minute ago")))))}
function printS(a) {
   return a > 1 ? "s" : ""}
   </script>

<style>
  .slot {
    cursor:hand;
    cursor:pointer;
    width: 89px;
    display:none;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top:2px;
    vertical-align: middle;
  }

  .browseitemtitle {
    margin-left:2px;
    font-size: 8pt;
    text-align: left;
    white-space: nowrap;
  }

  .browseitemduration {
    margin-left:2px;
    font-size: 8pt;
    text-align: left;
  }

  .infowatch{
    font-size: 8pt;
  }

  .videotitle {
    font-size: 9pt;
    font-weight: bold;
  }

  .videoinfolabel {
    font-size: 8pt;
  }

  .videoinfo {
    font-size: 8pt;
    overflow:scroll;
    font-weight: bold;
  }

  .description {
    font-size: 8pt;
    overflow:auto;
  }

  .thumb {
    width: 85px;
    height: 64px;
    padding: 1px;
    border: 1px solid #666666;
    text-align: middle;
  }

  .player {
    margin-top:2px;
    margin-bottom: 2px;
    width: 100%;
    height:200px;

  }

  .videobar{
    background:#F6F6F6 none repeat scroll 0%;
    border: 1px solid #CCCCCC;
    voice-family: "\"}\"";
    voice-family: inherit;
    padding: 2px;
  }

  .contentpane {
    clear:both;
    margin-top: 2px;
    padding-left: 2px;
    padding-right: 2px;
    font-size: 8pt;
    font-family: arial,helvetica;
    height: 248px;
  }

  .infopane {
    clear:both;
    font-size: 8pt;
    font-family: arial,helvetica;
    vertical-align: middle;
    border-top: solid 1px #cccccc;
    border-right: solid 1px #cccccc;
    border-left: solid 1px #cccccc;
    height:201;
    overflow:auto;
  }

  .pager {
    font-size: 8pt;
    margin-top: -1px;
    text-align: right;
    white-space: nowrap;
    display: none;
  }

  .hbar {
    width:100%;
    white-space:nowrap;
    clear:both;
  }

  .loading {
    visibility:hidden;
    position: absolute;
    font-family:arial, helvetica;
    font-size: 8pt;
    padding:0px;
    margin:0px;
    margin-left:4px;
  }

  .message {
    text-align: center;
    display:none;
    font-family:arial, helvetica;
    font-size: 10pt;
    padding-top: 30px;
    height: 208px;
    vertical-align:middle;
    white-space:normal;
  }

  wbr:after { content: "\00200B" }

  * html .thumb {
    border: 1px solid white;
  }

  * html .thumbSpan {
    border: 1px solid #666666;
  }
</style>

<script src="http://www.google.com/ig/modules/youtube_videos/swfobject_1.js"></script>

<div id="uppernav" class="hbar">
  <table>
    <tr>
      <td>
        <a href="http://www.youtube.com" target="_top"><img
            height="22" width="51" border="0"
          src="http://www.google.com/ig/modules/youtube_videos_content/ytlogo_51x22.gif" /></a>
      </td>
      <td width="100%">
        <form style="display:inline;">
          <select id="channellist" onchange="changeChannel(this)"
            style="width:100%"></select>
        </form>
      </td>
      <td align="right" valign="middle">
        <div id="pager" class="pager">
          <span>Page </span>
          <span id="pagelinks"></span>
        </div>
        <div id="backlink" class="pager" >
          <a href="javascript:void(0)" onclick="renderBrowsePage(currentPage)">back to list</a>
        </div>
      </td>
    </tr>
  </table>
</div>

<div id="middle" class="hbar">
  <div id="loading" class="loading" >Loading...</div>

  <div id="message" class="message"></div>

  <div id="watchVideos" class="contentpane" >
    <div id="innerWatchVideos">
      <div id="video0" class="player"></div>
      <div id="video1" class="player"></div>
    </div>
    <div id="infopane" class="infopane" style="display:none">

      <table width=100%>
        <tr valign=top>
          <td>
            <span class="thumbSpan" style="float:right" >
              <a href="javascript:void(0)" onclick="closeInfo()"><img
                  class="thumb" style="padding-top:2px;" id="infoThumb"/></a>
            </span>
            <span id="infoTitle" class="videotitle"></span><br/>
            <div style="height:5px;"></div>
            <span class="videoinfolabel">Uploaded:</span>
            <span id="infoAdded" class="videoinfo"></span><br/>
            <span class="videoinfolabel">From: </span>
            <a target="_top" id="infoFrom" href="" class="videoinfo"></a><br/>
            <span class="videoinfolabel">Views: </span>
            <span id="infoViews" class="videoinfo"></span><br/>
            <span class="videoinfolabel">Rated:</span>
            <span id="infoRatings" class="videoinfo"></span><br/>
         </td>
        </tr>
        <tr><td></td></tr>
        <tr>
          <td colspan=2>
            <div id="loadinginfo" class="loading" >Loading...</div>
            <div id="infoDescription" class="description"></div>
          </td>
      </table>
    </div>

    <div class="videobar" id="videobar">
      <table>
        <tr>
          <td align=left>
            <div>
              <a href="javascript:void(0)" onclick="previousVideo()"><img
                  border="0" width="17" height="17"
                  src="http://www.google.com/ig/modules/youtube_videos_content/left_17x17.gif"/></a>
            </div>
          </td>
          <td width=99%>
            <div id="videoTitle" class="videotitle"></div>
            <span id="videoDuration" class="videoinfo"></span>
          </td>
          <td>
            <div id="videoMetadata" style="font-size:8pt; white-space:nowrap;">
              <div id="infolink" class="infowatch">
                <a href="javascript:void(0)" onclick="showInfo()">Info:</a>
              </div>
              <div id="hideLink" class="infowatch" style="display:none;">
                <a href="javascript:void(0)" onclick="closeInfo()">Watch:</a>
              </div>
            </div>
          </td>
          <td align=right>
            <div>
              <a href="javascript:void(0)" onclick="nextVideo()"><img
                  border="0" width="17" height="17"
                  src="http://www.google.com/ig/modules/youtube_videos_content/right_17x17.gif"/></a>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>

  <div id="chooseVideos" class="contentpane">
    <table id="browse" style="width:100%; height:100%;">
      <tr height="50%" align="center">
        <td id="cell0" width="33%">
          <div id="slot0" class="slot">
            <a id="link0" href="javascript:void(0)"></a>
            <div id="title0" class="browseitemtitle"></div>
            <div id="duration0" class="browseitemduration"></div>
          </div>
        </td>
        <td id="cell1" width="33%">
          <div id="slot1" class="slot">
            <a id="link1" href="javascript:void(0)"></a>
            <div id="title1" class="browseitemtitle"></div>
            <div id="duration1" class="browseitemduration"></div>
          </div>
        </td>
        <td id="cell2" width="33%">
          <div id="slot2" class="slot">
            <a id="link2" href="javascript:void(0)"></a>
            <div id="title2" class="browseitemtitle"></div>
            <div id="duration2" class="browseitemduration"></div>
          </div>
        </td>
      </tr>
      <tr align="center">
        <td>
          <div id="slot3" class="slot">
            <a id="link3" href="javascript:void(0)"></a>
            <div id="title3" class="browseitemtitle"></div>
            <div id="duration3" class="browseitemduration"></div>
          </div>
        </td>
        <td>
          <div id="slot4" class="slot">
            <a id="link4" href="javascript:void(0)"></a>
            <div id="title4" class="browseitemtitle"></div>
            <div id="duration4" class="browseitemduration"></div>
          </div>
        </td>
        <td>
          <div id="slot5" class="slot">
            <a id="link5" href="javascript:void(0)"></a>
            <div id="title5" class="browseitemtitle"></div>
            <div id="duration5" class="browseitemduration"></div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>

<div id="searchFooter" class="hbar">
  <form name="searchForm" onsubmit="doSearch(this.query.value); return false;">
    <table>
      <tr>
        <td width="100%">
          <input name="query" id="query" type="text" style="width:100%"/>
        </td>
        <td>
          <input name="search" value="Search" type="button"
            onclick="this.form.onsubmit();"/>
        </td>
      </tr>
    </table>
  </form>
</div>
]]>

</Content>
</Module>
