Index: dashboard/occ2011-dashboard.html
===================================================================
--- dashboard/occ2011-dashboard.html	(revision 326)
+++ dashboard/occ2011-dashboard.html	(revision 334)
@@ -2,10 +2,12 @@
 <head>
 <title>Open Community Camp 2011 - Live Page</title>
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
-<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
-<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
-<script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
-
-<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all" />
+<script src="js/jquery.min.js" type="text/javascript"></script>
+<script src="js/jquery-ui.min.js" type="text/javascript"></script>
+<script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
+<script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
+<script src="js/jquery.jcarousel.min.js" type="text/javascript"></script>
+
+<link rel="stylesheet" href="css/jquery-ui.css" type="text/css" media="all" />
+<link rel="stylesheet" href="css/skin.css" type="text/css" media="all" />
   
 <script type="text/javascript">
@@ -13,4 +15,23 @@
     $( "#tab-set" ).tabs();
   });
+
+  function mycarousel_initCallback(carousel)
+  {
+      // Disable autoscrolling if the user clicks the prev or next button.
+      carousel.buttonNext.bind('click', function() {
+          carousel.startAuto(0);
+      });
+  
+      carousel.buttonPrev.bind('click', function() {
+          carousel.startAuto(0);
+      });
+  
+      // Pause autoscrolling if the user moves with the cursor over the clip.
+      carousel.clip.hover(function() {
+          carousel.stopAuto();
+      }, function() {
+          carousel.startAuto();
+      });
+  };
 
   $(document).ready(function(){
@@ -24,11 +45,13 @@
       duration : 0,
     });
+    $('#mycarousel').jcarousel({
+        auto: 1,
+        wrap: 'last',
+        initCallback: mycarousel_initCallback
+    });
   });
 </script>
-
 </head>
 <body>
-
-<div class="demo">
 
 <div id="tab-set">
@@ -38,8 +61,9 @@
     <li><a href="#noc">NOC</a></li>
     <li><a href="#webcam">Live WebCams</a></li>
+    <li><a href="#room1">Live Room1</a></li>
+    <li><a href="#about">Join in! Use hashtag #occ2011</a></li>
   </ul>
   <div id="main">
     <table>
-    <caption><h3>Join in! Use hashtag #occ2011</h3></caption>
     <tr><td colspan="3">
     <!-- Start of Flickr Badge -->
@@ -59,107 +83,109 @@
 </style>
 <style type="text/css">
-.titlec {
-font-size: small;
-}
-ul.videos li {
-float: left;
-width: 10em;
-margin-bottom: 1em;
-}
-ul.videos
-{
-margin-bottom: 1em;
-padding-left : 0em;
-margin-left: 0em;
-list-style: none;
-}
+  .titlec {
+  font-size: small;
+  }
+  ul.videos li {
+  float: left;
+  width: 10em;
+  margin-bottom: 1em;
+  }
+  ul.videos
+  {
+  margin-bottom: 1em;
+  padding-left : 0em;
+  margin-left: 0em;
+  list-style: none;
+  }
 </style>
 
-<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
-<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=5&display=latest&size=m&layout=h&source=all_tag&user=70375122%40N00&tag=occ2011"></script>
-</table>
-</td></tr></table>
+<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr>
+  <td>
+    <a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a>
+    <table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
+      <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=5&display=latest&size=m&layout=h&source=all_tag&user=70375122%40N00&tag=occ2011"></script>
+    </table>
+  </td>
+</tr></table>
 <!-- End of Flickr Badge -->
+
 </td>
 </tr><tr>
 <td>
-<script src="http://widgets.twimg.com/j/2/widget.js"></script>
-<script>
-new TWTR.Widget({
-version: 2,
-type: 'search',
-search: '#occ2011',
-interval: 6000,
-title: 'Open Community Camp 2011',
-subject: 'http://opencommunitycamp.org',
-width: 300,
-height: 300,
-theme: {
-shell: {
-  background: '#8ec1da',
-  color: '#ffffff'
-},
-tweets: {
-  background: '#ffffff',
-  color: '#444444',
-  links: '#1985b5'
-}
-},
-features: {
-scrollbar: true,
-loop: true,
-live: true,
-hashtags: true,
-timestamp: true,
-avatars: true,
-toptweets: true,
-behavior: 'all'
-}
-}).render().start();
-</script>
+  <script src="http://widgets.twimg.com/j/2/widget.js"></script>
+  <script type="text/javascript">
+    new TWTR.Widget({
+    version: 2,
+    type: 'search',
+    search: '#occ2011',
+    interval: 6000,
+    title: 'Open Community Camp 2011',
+    subject: 'http://opencommunitycamp.org',
+    width: 300,
+    height: 300,
+    theme: {
+    shell: {
+      background: '#8ec1da',
+      color: '#ffffff'
+    },
+    tweets: {
+      background: '#ffffff',
+      color: '#444444',
+      links: '#1985b5'
+    }
+    },
+    features: {
+    scrollbar: true,
+    loop: true,
+    live: true,
+    hashtags: true,
+    timestamp: true,
+    avatars: true,
+    toptweets: true,
+    behavior: 'all'
+    }
+    }).render().start();
+  </script>
 </td>
 <td>
-<div style="background-color: #00FFFF;width:647px;height:400px">
-<iframe src="http://webchat.freenode.net?randomnick=1&channels=occ&uio=d4" width="647" height="400"></iframe>
-</div>
+  <div style="background-color: #00FFFF;width:647px;height:400px">
+  <iframe src="http://webchat.freenode.net?channels=occ&uio=d4" width="647px" height="400px"></iframe>
+  </div>
 </td>
 <td>
-<div id="playerContainer" style="width: 20em; height: 180px;float: left;">
-<object id="player"></object>
-</div>
-<div id="videos2"></div>
-<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
-<script type="text/javascript">
-function loadVideo(playerUrl, autoplay) {
-swfobject.embedSWF(
-  playerUrl + '&rel=1&border=0&fs=1&autoplay=' + 
-  (autoplay?1:0), 'player', '290', '250', '9.0.0', false, 
-  false, {allowfullscreen: 'true'});
-}
-
-function showMyVideos2(data) {
-var feed = data.feed;
-var entries = feed.entry || [];
-var html = ['<ul class="videos">'];
-for (var i = 0; i < entries.length; i++) {
-var entry = entries[i];
-var title = entry.title.$t.substr(0, 20);
-var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
-var playerUrl = entries[i].media$group.media$content[0].url;
-html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">',
-	  '<span class="titlec">', title, '...</span><br /><img src="', 
-	  thumbnailUrl, '" width="130" height="97"/>', '</span></li>');
-}
-html.push('</ul><br style="clear: left;"/>');
-document.getElementById('videos2').innerHTML = html.join('');
-if (entries.length > 0) {
-loadVideo(entries[0].media$group.media$content[0].url, false);
-}
-}
-</script>
-<script 
-type="text/javascript"
-src="https://gdata.youtube.com/feeds/api/videos?strict=true&max-results=10&category=occ2011&alt=json-in-script&callback=showMyVideos2">
-</script>
+  <div id="playerContainer" style="width: 320px; height: 260px;">
+    <object id="player"></object>
+  </div>
+  <div id="videos2"></div>
+  <script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
+  <script type="text/javascript">
+    function loadVideo(playerUrl, autoplay) {
+      swfobject.embedSWF(
+        playerUrl + '&rel=1&border=0&fs=1&autoplay=' + 
+        (autoplay?1:0), 'player', '320', '260', '9.0.0', false, 
+        false, {allowfullscreen: 'true'});
+      }
+      
+    function showMyVideos2(data) {
+      var feed = data.feed;
+      var entries = feed.entry || [];
+      var html = ['<ul id="mycarousel" class="jcarousel-skin-tango videos">'];
+      for (var i = 0; i < entries.length; i++) {
+        var entry = entries[i];
+        var title = entry.title.$t.substr(0, 20);
+        var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
+        var playerUrl = entries[i].media$group.media$content[0].url;
+        html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">',
+        	  '<img src="', thumbnailUrl, '" width="75" height="75" alt="',title ,'..."/>', '</li>');
+      }
+      html.push('</ul><br style="clear: left;"/>');
+      document.getElementById('videos2').innerHTML = html.join('');
+      if (entries.length > 0) {
+        loadVideo(entries[0].media$group.media$content[0].url, false);
+      }
+    }
+  </script>
+  <script type="text/javascript" src="https://gdata.youtube.com/feeds/api/videos?strict=true&max-results=10&category=occ2011&alt=json-in-script&callback=showMyVideos2">
+  </script>
 </td>
 </tr></table>
@@ -167,19 +193,20 @@
 </div>
 <div id="telex">
-<table><tr><td>
-<iframe src="http://webchat.freenode.net?randomnick=1&channels=occ&uio=d4" width="647" height="400"></iframe></td><td>
-<img src="http://live.occ2011.org:9999/cam4/video" />
-</td></tr>
-</table>
+  <table><tr><td>
+    <iframe src="http://webchat.freenode.net?channels=occ&uio=d4" width="647" height="400"></iframe></td><td>
+    <img src="http://live.occ2011.org:9999/cam4/video" />
+  </td></tr></table>
 </div>
 <div id="noc">
-<iframe src="http://noc.occ2011.org" width="100%" height="100%"></iframe>
+  <iframe src="http://noc.occ2011.org" width="100%" height="100%"></iframe>
 </div>
 <div id="webcam">
-<iframe src="http://live.occ2011.org" width="100%" height="100%"></iframe>
-</div>
-</div>
-
-</div>
+  <iframe src="http://live.occ2011.org:9999/browser.html" width="100%" height="100%"></iframe>
+</div>
+<div id="room1">
+  <iframe src="http://live.occ2011.org:9999/room1.html" width="100%" height="100%"></iframe>
+</div>
+</div>
+
 
 
