<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="Climatempo" height="320" scrolling="false"
    description="Previsao do Tempo para todo o Brasil - Weather Forecast for Brazil"
    title_url="http://www.climatempo.com.br"
     author="Climatempo" author_location="Sao Paulo, Brasil"
      author_email="climatempo@climatempo.com.br"
       screenshot="http://www.climatempo.com.br/gadget/sshot_gadget.png"
        thumbnail="http://www.climatempo.com.br/gadget/mini_gadget.png" > 
        <Require feature="setprefs"/>
        <Require feature="tabs" /> 
        <Require feature="opensocial-0.7"/>
  </ModulePrefs>
    <UserPref name="prefs_version" default_value="0" datatype="hidden"/>
  <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"/>
  <UserPref name="current_channel_id" default_value="0" datatype="hidden"/>
  <Content type="html">
  <![CDATA[ 

    <script type="text/javascript">
    var tabs = new _IG_Tabs(__MODULE_ID__, "Previsao");
   
     function init() {
                tabs.addTab("Previsao", "one_id");
                tabs.addTab("Videos", "two_id");
                tabs.addTab("Noticias", "three_id");
                tabs.addTab("Satelite", "four_id");
                 }



    // Call init function to initialize and display tabs.
    _IG_RegisterOnloadHandler(init);
    </script>
   <div id="one_id" style="display:none">
   <iframe id="previsao" name="previsao" src="http://igoogle.climatempo.com.br/gadget/aplicacao/index.php" scrolling="no" frameborder="no" width="100%" height="330"></iframe>
   </div>
 
   <div id="two_id" style="display:none">
   <script type="text/javascript">
    /* Startup */
    _IG_RegisterOnloadHandler(initializeWidget);
    var widgetLoaded = false;
    function initializeWidget() {
      loadPreferences();
      rebuildChannelList();
      window.onresize = handleResize;
      handleResize();

      // Manually cause the list to react
      _gel("channellist").onchange();
    }

    /* User preference management */
    var prefs = new _IG_Prefs();
    var MAX_SAVED_SEARCHES = 3;
    var CURRENT_PREFS_VERSION = 2;

    function loadPreferences() {
      var prefs_version = prefs.getInt("prefs_version");
      if (prefs_version < CURRENT_PREFS_VERSION) {
        // Do nothing.
      } else if (prefs_version == CURRENT_PREFS_VERSION) {
        var search_channels = prefs.getInt("search_channels");
        for (var i = 0; i < Math.min(MAX_SAVED_SEARCHES, search_channels); i++) {
          var name = prefs.getString("search_channel_name" + i);
          var url = prefs.getString("search_channel_url" + i);
          channels[i + defaultChannels] = [name, url];
        }
        // If this channel number is no longer valid for whatever reason
        // we'll just fallback when trying to set it as the current one
        currentChannelId = prefs.getInt("current_channel_id");
      }
    }

    function appendPrefUpdateIfChanged(parray, userpref_name, 
                                       current_value) {
      if (prefs.getString(userpref_name) != current_value + "") {
        parray.push(userpref_name);
        parray.push(current_value);
      }
    }

    function savePreferences() {
      var p = new Array();
      appendPrefUpdateIfChanged(p, "prefs_version", CURRENT_PREFS_VERSION);
      appendPrefUpdateIfChanged(p, "search_channels", 
                                channels.length - defaultChannels);
      appendPrefUpdateIfChanged(p, "current_channel_id", currentChannelId);

      for (var i = defaultChannels; i < channels.length; i++) {
        appendPrefUpdateIfChanged(p, 
                                  "search_channel_name" + (i - defaultChannels), 
                                  channels[i][0]);
        appendPrefUpdateIfChanged(p, 
                                  "search_channel_url" + (i - defaultChannels), 
                                  channels[i][1]);
      }

      if (p.length > 0) {
        prefs.set.apply(prefs, p);
      }
    }

    /* DOM manipulation helpers */
    function showElements() {
      for (var i = 0; i < arguments.length; i++) {
        _gel(arguments[i]).style.display = "block";
      }
    }

    function hideElements() {
      for (var i = 0; i < arguments.length; i++) {
        _gel(arguments[i]).style.display = "none";
      }
    }
 
    function clearElement(el) {
      while(el.firstChild) {
        el.removeChild(el.firstChild);
      }
    }
    
    function setElementText(element_id, text) {
      el = _gel(element_id);
      clearElement(el);
      el.appendChild(document.createTextNode(text));
    }

    function getDivHeight(div) {
      if (div.clientHeight) {
        return div.clientHeight;
      } else if (div.offsetHeight) {
        return div.offsetHeight;
      }
    }
    
    function getDivWidth(div) {
      if (div.clientWidth) {
        return div.clientWidth;
      } else if (div.offsetWidth) {
        return div.offsetWidth;
      }
    }

    function addItemToList(list, id, text, value) {
      var option = new Option(text, value);
      option.id = id;
      try {
        list.add(option);
      } catch (e) {
        list.appendChild(option);
      }
    }

    /* UI state management */
    // Main gadget states
    var GS_BROWSE = 0;
    var GS_WATCH = 1;
    var GS_INFO = 2;
    var GS_LOADING = 3;
    var GS_DISCONNECTED = 4;
    var GS_NORESULTS = 5;
    var GS_LOADING_INFO = 6;
    var gadgetState = GS_LOADING;
    var MINI_WIDTH = 270;
    var miniMode = false; 
    function goToNewState(newState) {
      if (newState == GS_LOADING) {
        if (gadgetState == GS_INFO || gadgetState == GS_WATCH) {
          goToNewState(GS_BROWSE);
        }
        _gel("loading").style.visibility = "visible";
      }else if (newState == GS_LOADING_INFO) {
        setElementText("infoAdded",  "");
        setElementText("infoFrom", "");
        setElementText("infoViews", "");
        setElementText("infoRatings", ""); 
        setElementText("infoDescription", ""); 

        _gel("infoThumb").style.visibility = "hidden";
        
        hideElements("message", "infolink", "innerWatchVideos", "chooseVideos",
            "pager");
        showElements("hideLink", "infopane", "backlink");
 
        _gel("loadinginfo").style.visibility = "visible";
      }else if (newState == GS_DISCONNECTED) {
        hideElements("backlink", "pager", "watchVideos", "chooseVideos");
        showElements("message");
        displayMessage("Cannot connect to YouTube, retrying...");
      }else if (newState == GS_NORESULTS) {
        hideElements("watchVideos", "chooseVideos", "backlink", "pager");
        showElements("message"); 
        displayMessage("No results found.");
        _gel("query").focus();
      }else if (newState == GS_WATCH) {
        hideElements("infopane", "message", "chooseVideos", "pager",
            "hideLink");
        showElements( "watchVideos", "innerWatchVideos", "backlink", 
            "infolink");
      }else if (newState == GS_BROWSE) {
        hideElements("watchVideos", "message", "backlink", "infopane");
        showElements("chooseVideos", "pager");
      }else if (newState == GS_INFO) {
        hideElements("message", "infolink", "innerWatchVideos", "chooseVideos",
            "pager");
        showElements("hideLink", "infopane", "backlink");

        _gel("infoThumb").style.visibility = "visible";
      }
      
      if (newState != GS_LOADING && newState != GS_LOADING_INFO) {
        _gel("loading").style.visibility = "hidden";
        _gel("loadinginfo").style.visibility = "hidden";
      }

      gadgetState = newState;
    }

    function handleResize() {
      if (miniMode != (getDivWidth(document.body) < MINI_WIDTH)) {
        miniMode = getDivWidth(document.body) < MINI_WIDTH;
        if (gadgetState == GS_BROWSE) {
          renderBrowsePage(currentPage);
        }
      }

      if (gadgetState == GS_WATCH || gadgetState == GS_INFO) {
        renderTitle(getCurrentVideo().title);
      }
    }

    /* Channels */
    var currentChannelId = 0;
    var channels = [
      ["Previsao do Tempo", 
      "http://br.youtube.com/rss/user/climatempo/videos.rss"]
      ];
    var defaultChannels = channels.length;

    // Gets the id of the listbox item for a particular channel
    // index    
    function channelNodeId(index) {
      return "channel_" + index;
    }
 
    // Called initially and whenever the list of channels changes
    function rebuildChannelList() {
      // add all channels
      var list = _gel("channellist");
      clearElement(list);
      
      for (var i = 0; i < channels.length; i++)  {
        addItemToList(list, channelNodeId(i), channels[i][0], i);
      }
      
      // go to the current visited channel
      _gel(channelNodeId(currentChannelId)).selected = true;
    }
    
    // Search helper
    function getSearchUrl(query) {
      return "http://youtube.com/rss/search_by_relevance/" + 
          escape(query) + ".rss";
    } 

    // Does a search by requesting the RSS feed for the query from YT
    function doSearch(query) {
      if (query == "") {
        return;
      }

      var queryName = '"' + query + '"';
      var queryUrl = getSearchUrl(query); 

      var newChannelId = 0;
      var alreadyInList = false;

      // if this query is already in the channel list, just select it
      for (var i = 0; i < channels.length; i++) {
        if (channels[i][0] == queryName && channels[i][1] == queryUrl) {
          newChannelId = i;
          alreadyInList = true;
          break;
        }
      }
      
      // otherwise add it
      if (!alreadyInList) {
        // keep the last MAX_SAVED_SEARCES searches in the channel list
        if (channels.length - defaultChannels == MAX_SAVED_SEARCHES) {
          for (var i = 0; i < MAX_SAVED_SEARCHES - 1; i++) {
            channels[defaultChannels + i] = channels[defaultChannels + i + 1];
          }
          // replace last one
          channels[channels.length - 1] = [queryName, queryUrl];
        } else {
          // append
          channels[channels.length] = [queryName, queryUrl];
        }
        
        rebuildChannelList();
        newChannelId = channels.length - 1; 
      }
      _gel(channelNodeId(newChannelId)).selected = true;
      _gel("channellist").onchange();
    }
    
    // Handle channel change from UI or Search
    function changeChannel(selected) { 
      currentChannelId = selected.value
      channelUrl = channels[currentChannelId][1];
      if (currentChannelId >= defaultChannels) {
        var queryName = channels[currentChannelId][0];
        var query = queryName.substr(1,queryName.length-2);
        if(_gel("query").value != query) {
          _gel("query").value = query;
        }
      }
      
      // Skip saving prefs if we're still loading
      if (widgetLoaded) {
        savePreferences();
      }

      goToNewState(GS_LOADING);
      // TODO: move setp calls to here?
      _IG_FetchXmlContent(channelUrl, handleChannelXml);
    }

    function displayMessage(message) {
      setElementText("message", message);
    }
    
    // Callback once we've recieved channel data from YouTube
    var CONNECTION_RETRY_SECONDS = 10;
    var MAX_SEARCH_RESULTS = 24;
    function handleChannelXml(response) {
      if (response == null || typeof(response) != "object" ||
          response.firstChild == null) 
      {
        goToNewState(GS_DISCONNECTED);
        setTimeout(rebuildChannelList, CONNECTION_RETRY_SECONDS * 1000);
        return;
      }

      var items = response.getElementsByTagName("item");
      videos = new Array();
      for (var i = 0; i < items.length && 
          videos.length <= MAX_SEARCH_RESULTS; i++) {
        var video = new Object();
        for (var j = 0; j < items[i].childNodes.length; j++) {
          if (items[i].childNodes[j].nodeName == "enclosure") {
            var url = items[i].childNodes[j].getAttribute("url");
            var duration = items[i].childNodes[j].getAttribute("duration");
            video.swf = url;
            video.id = url.replace(/.*\/v\/(.*)\.swf/, "$1");
            video.index = videos.length;
            video.duration = duration;
          }
          if (items[i].childNodes[j].nodeName == "media:thumbnail") {
            var url = items[i].childNodes[j].getAttribute("url");
            video.thumbnail = url;
          }
          if (items[i].childNodes[j].nodeName == "title") {
            video.title = getXmlNodeText(items[i].childNodes[j])
          }
        }
        videos.push(video);
      }
      
      if (videos.length > 0) {
        currentVideoIndex = 0;
        renderBrowsePage(0);
      } else {
        goToNewState(GS_NORESULTS);
      }

      if (!widgetLoaded) {
        widgetLoaded = true;
      }
    }
    
    // XML DOM helper
    function getXmlNodeText(node) {
      if (node.text) {
        // ie
        return node.text;
      } else if (node.textContent) {
        // firefox
        return node.textContent; 
      } else if (node.firstChild && node.firstChild.nodeValue) {
        // safari
        return node.firstChild.nodeValue;
      } else {
        return "";
      }
    }
    
    /* Videos */
    var videos;
    var currentVideoIndex = 0;
    function getCurrentVideo() {
      return videos[currentVideoIndex];
    }
    
    // Start playback of a particular video
    var currentPlayerDivId = 0;
    function loadVideo(video) {
      goToNewState(GS_WATCH); 

      currentVideoIndex = video.index;
      // firefox/flash seem to have a bug which needs this double buffering
      // work-around
      pd = "video" + currentPlayerDivId;
      currentPlayerDivId = 0 + !currentPlayerDivId;
      cd = "video" + currentPlayerDivId;

      _gel(pd).style.display = "none";
      clearElement(_gel(pd));
      _gel(cd).style.display = "block";

      var fo = 
          new SWFObject(video.swf, "movie_player", "100%", "200", 7, "#FFFFFF");
      fo.addParam("wmode", "transparent");
      fo.addParam("flashvars", "autoplay=1");
      setTimeout(function() {fo.write(cd)}, 10);

      setElementText("videoDuration", renderDuration(video.duration));
      renderTitle(video.title);
      
    }
    
    // Render the title into the info bar, measuring and resizing to fit
    var TRUNCATION_STRING = "...";
    function renderTitle(theTitle) {
      // determine single line height
      setElementText("videoTitle", "|");
      var baseHeight = getDivHeight(_gel("videoTitle"));
      
      // cut title to fit in single line
      var title = theTitle;
      setElementText("videoTitle", title);
      for (i = TRUNCATION_STRING.length; i < title.length; i++) {
        if (getDivHeight(_gel("videoTitle")) > baseHeight) {
          setElementText("videoTitle", title.substr(0,
                title.length-i) + TRUNCATION_STRING);
        } else {
          break;
        }
      }
    }
    
    // Next/Previous video buttons
    function nextVideo() {
      selectCurrentVideo(currentVideoIndex + 1);  
    }
    function previousVideo() {
      selectCurrentVideo(currentVideoIndex - 1);  
    }
    function selectCurrentVideo(newVideoIndex) {
      // wrap around
      if (newVideoIndex < 0) {
        currentVideoIndex = videos.length - 1;
      } else {
        currentVideoIndex = newVideoIndex % videos.length;
      }

      if (gadgetState == GS_WATCH) {
        loadVideo(getCurrentVideo());
      } else if (gadgetState == GS_INFO) {
        showInfo();
      }
    }

    function loadVideoLater(video) {
      return function() {loadVideo(video);};
    }
     
    /* Browse page */
    var VIDEO_SLOTS = 6; 
    var VIDEO_SLOTS_PER_ROW = 3; 
    var miniMode = false;
    var currentPage = 0;
    
    function videosPerPage() {
      return miniMode ? 4 : 6;
    }

    function renderBrowsePage(newPage) {
      // Clear and hide video slots
      for (var i = 0; i < VIDEO_SLOTS; i++) {
         clearElement(_gel("link" + i));
        _gel("slot" + i).style.display = "none";
      }
      
      // Decide on videos per page and current page
      var lastPage = Math.floor(videos.length/videosPerPage());
      currentPage = newPage;
      if (currentPage > lastPage) {
        currentPage = lastPage;
      } 

      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%";
      }
      
      // Fill the slots
      for (var i = 0; i < videosPerPage(); i++) {
        var videoId = currentPage * videosPerPage() + i;

        // Stop if out of videos 
        if (videoId >= videos.length) {
          break;
        }
 
        var slotId = i + (miniMode ? Math.floor(i/(VIDEO_SLOTS_PER_ROW-1)) : 0);
        var video = videos[videoId];

        // set up slot
        _gel("slot" + slotId).style.display = "block";
        _gel("slot" + slotId).onclick = loadVideoLater(video);
        
        // insert thumb
        var thumb = document.createElement("img");
        thumb.id = "thumb" + i;
        thumb.className = "thumb";
        thumb.src = video.thumbnail;
        thumb.title = video.title;
       
        var span = document.createElement("span");
        span.className = "thumbSpan";
        span.appendChild(thumb);
       
        clearElement(_gel("link" + slotId));
        _gel("link" + slotId).appendChild(span);
        
        // fill in title and duration
        clearElement(_gel("title" + slotId));
        clearElement(_gel("duration" + slotId));
        title = document.createTextNode(truncate(video.title, 15));
        duration = document.createTextNode("" + renderDuration(video.duration));
        _gel("title" + slotId).appendChild(title);
        _gel("duration" + slotId).appendChild(duration);
      }

      renderPager(currentPage);
      goToNewState(GS_BROWSE); 
    }
    
    function truncate(string, maxLen) {
      if (string.length > maxLen) {
        string = string.substr(0, maxLen - TRUNCATION_STRING.length);
        string += TRUNCATION_STRING;
      }
      return string;
    }

    function renderDuration(duration) {
      minutes = Math.floor(duration / 60);
      seconds = (duration % 60) + "";
      seconds = seconds.substr(0, 2);
      if (seconds.length == 0) {
        seconds = "00";
      } else if (seconds.length == 1) {
        seconds = "0" + seconds;
      }
      return minutes + ":" + seconds;
    }
    
    /* Pager */ 
    function renderBrowsePageLater(newPage) {
      return function() {renderBrowsePage(newPage);};
    }

    function getPageLink(page, selected) {
      var node = document.createTextNode("" + (page + 1));
      var inner;
      if (selected) {
        inner = node;
      } else {
        var link = document.createElement('a');
        link.href = "#";
        link.onclick = renderBrowsePageLater(page);
        link.appendChild(node);
        inner = link;
      }

      var span = document.createElement('span');
      span.appendChild(inner);
      span.appendChild(document.createTextNode("\u00A0\u00A0"));
      return span;
    }

    function renderPager(page) {
      var linksDiv = _gel("pagelinks");
      clearElement(linksDiv);
      
      for (var i = 0; i < videos.length; i += videosPerPage()) {
        linksDiv.appendChild(
            getPageLink(i/videosPerPage(), i == (page * videosPerPage())));
      }
    }
    
    /* Info */
    function showInfo() {
      video = getCurrentVideo();
      setElementText("infoTitle", video.title);
      setElementText("videoDuration", renderDuration(video.duration));
      renderTitle(video.title);
      detailsRequestPrefix = "http://www.youtube.com/api2_rest?";
      detailsRequestPrefix += "method=youtube.videos.get_details";
      detailsRequestPrefix += "&dev_id=ZF7LQgIuE3U&video_id=";
      goToNewState(GS_LOADING_INFO);
      _IG_FetchXmlContent(detailsRequestPrefix + video.id, 
          handleVideoDetails);
    }

    function closeInfo() {
      goToNewState(GS_WATCH);
      loadVideo(getCurrentVideo());
    }
    
    // XML DOM helper
    function getFirstChildWithName(xmlElement, name) {
      if (xmlElement.childNodes) {
        for (var i = 0; i < xmlElement.childNodes.length; i++) {
          if (xmlElement.childNodes[i].nodeName == name) {
            return xmlElement.childNodes[i];
          }
        }
      }
      return null;
    }

    function handleVideoDetails(response) {
      if (response == null || typeof(response) != "object" ||
          response.firstChild == null)
      {
        setElementText("infoAdded",  "");
        setElementText("infoFrom", "");
        setElementText("infoViews", "");
        setElementText("infoRatings", ""); 
        
        setElementText("infoDescription", 
        "Sorry!  We could not retrieve the video details.  " +
        "Please try again later.");
      } else {
        var utResponse = getFirstChildWithName(response, "ut_response");
        var videoDetails = getFirstChildWithName(utResponse, "video_details");

        for (var i = 0; i < videoDetails.childNodes.length; i++) {
          var c = videoDetails.childNodes[i];

          if (c.nodeName == "author") {
              video.author = getXmlNodeText(c);
          }
          if (c.nodeName == "view_count") {
              video.views = getXmlNodeText(c);
          }
          if (c.nodeName == "upload_time") {
            var uploadTime = new Date();
            uploadTime.setTime(getXmlNodeText(c) * 1000);
            video.uploaded = format_time_ago(uploadTime.getTime());
          }
          if (c.nodeName == "rating_avg") {
              video.rating = getXmlNodeText(c);
          }
          if (c.nodeName == "rating_count") {
              video.rated = getXmlNodeText(c);
          }
          if (c.nodeName == "description") {
              video.description = getXmlNodeText(c);
          }
        }

        setElementText("infoAdded",  video.uploaded);
        setElementText("infoFrom", video.author);
        _gel("infoFrom").href="http://youtube.com/user/"+video.author;
        setElementText("infoViews", video.views);
        setElementText("infoRatings", Math.round(video.rating) + 
            " of 5 by " + video.rated + " people");

        _gel("infoThumb").src = video.thumbnail;
        _gel("infoDescription").innerHTML =
          HtmlEscapeAddWbrs(video.description, 10);
      }
      goToNewState(GS_INFO);
      renderTitle(video.title);
    }
    
    function HtmlEscapeAddWbrs(str, maxGap) {
      if (str) {
        // HTML escape
        var amp_re_ = /&/g;
        var lt_re_ = /</g;
        var gt_re_ = />/g;
        var quote_re_ = /\"/g;
        str = str.replace(amp_re_, "&amp;").replace(lt_re_, "&lt;").
        replace(gt_re_, "&gt;").replace(quote_re_, "&quot;");
        
        var result = "";
        for (var i = 0; i < str.length; i = i + maxGap) {
          result += str.substr(i, maxGap);
          result += "<wbr>";
        }
        return result;
      } else {
        return "";
      }
    }
    
    // Time formatting helpers so we don't have to import external js
    function format_time_ago(timeUploaded) {
      var thisdate = new Date();
      currentTime = thisdate.getTime();
      diffInMilliseconds = currentTime - timeUploaded;
      return formatOutput(diffInMilliseconds);
    }
    function formatOutput(timeDIffInMilliseconds) {
      var sec = Math.floor(timeDIffInMilliseconds/1000);
      var min = Math.floor(sec/60);
      var hr = Math.floor(min/60);
      var day = Math.floor(hr/24);
      var week = Math.floor(day/7);
      var month = Math.floor(day/30);
      var year = Math.floor(day/365);
      var pluralString = "s";
      min = min % 60;
      hr = hr % 24;
      if (year > 0) {
         return (year + " year" + printS(year) + " ago");
      } else if (month > 0) {
         return (month + " month" + printS(month) + " ago");
      } else if (week > 0) {
         return (week + " week" + printS(week) + " ago");
      } else if (day > 0) {
         return (day + " day" + printS(day) + " ago");
      } else if (hr > 0) {
         return (hr + " hour" + printS(hr) + " ago");
      } else if (min > 0) {
         return (min + " minute" + printS(min) + " ago");
      } else {
         return ("1 minute ago"); 
      }
    } 
    function printS(num_value) {
      if(num_value>1) {
        return "s";
      } else {
        return "";
      }
    }
</script>

<style>
  .slot {
    cursor:hand;
    cursor:pointer;
    width: 87px;
    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: -2px;
    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;
  }

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

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

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

<script type="text/javascript" src="/ig/modules/youtube_videos_content/swfobject.js">
</script>

<div id="uppernav" class="hbar">
  <table>
    <tr>
      <td>
        <a href="http://youtube.com" target="_top"><img
            height="22" width="51" border="0"
          src="/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="/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>
              <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>
            </td>
          <td align=right>
            <div>
              <a href="javascript:void(0)" onclick="nextVideo()"><img 
                  border="0" width="17" height="17"
                  src="/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>
     
   
   
   
   
   <div id="three_id" style="display:none"><iframe id="noticias" name="noticias" src="http://igoogle.climatempo.com.br/gadget/aplicacao/noticias.php" scrolling="no" frameborder="no" width="100%" height="330"></iframe></div>
   <div id="four_id" style="display:none"><iframe id="satelite" name="satelite" src="http://igoogle.climatempo.com.br/gadget/aplicacao/satelite.php" scrolling="no" frameborder="no" width="100%" height="330"></iframe></div>
  
      ]]>
  </Content>
</Module>