Index: dashboard/occ2011-dashboard.html
===================================================================
--- dashboard/occ2011-dashboard.html	(revision 334)
+++ dashboard/occ2011-dashboard.html	(revision 335)
@@ -1,19 +1,62 @@
-<html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
+<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 <title>Open Community Camp 2011 - Live Page</title>
-<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" />
-  
+
+
+<LINK rel="stylesheet" type="text/css" href="lib/css/themes/base/jquery.ui.all.css">
+<LINK rel="stylesheet" type="text/css" href="lib/css/layout-default-latest.css">
+<LINK rel="stylesheet" type="text/css" href="skins/tango/skin.css">
+
+<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
+
+<script src="lib/js/jquery-latest.js" type="text/javascript"></script>
+<script src="lib/js/jquery-ui-latest.js" type="text/javascript"></script>
+<script src="lib/js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
+<script src="lib/js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
+<script src="lib/js/jquery.jcarousel.min.js" type="text/javascript"></script>
+<script src="lib/js/jquery.layout-latest.js" type="text/javascript"></script>
+
+<style type="text/css">
+  .ui-tabs-panel { width: inherit; height: inherit; }
+
+  .title {
+    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;
+  }
+
+  #flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
+  div#flickr-images .jcarousel-skin-tango .jcarousel-container-horizontal {
+    width: 94%;
+  }
+  div#flickr-images .jcarousel-skin-tango .jcarousel-clip-horizontal {
+    width: 100%;
+  }
+
+  div#youtube .jcarousel-skin-tango .jcarousel-container-horizontal {
+    width: 75%;
+  }
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: 0px solid;
+    overflow-x: hidden;
+    overflow-y: hidden;
+  }
+</style>
 <script type="text/javascript">
-  $(function() {
-    $( "#tab-set" ).tabs();
-  });
-
+ // <![CDATA[
   function mycarousel_initCallback(carousel)
   {
@@ -35,14 +78,42 @@
   };
 
+  function displayImages(data) {
+    // Start putting together the HTML string
+    var htmlString = "<ul id='flickr-images-list' class='jcarousel-skin-tango'>";
+
+    // Now start cycling through our array of Flickr photo details
+    $.each(data.items, function(i,item){
+      var sourceSquare = (item.media.m);
+      // I only want the ickle square thumbnails
+      var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");
+
+      // Here's where we piece together the HTML
+      htmlString += '<li><a href="' + item.link + '" target="_blank">';
+      htmlString += '<img src="' + sourceSquare + '" alt="' + item.title + '" title="' + item.title + '"/>';
+      htmlString += '</a></li>';
+    });
+
+  // Pop our HTML in the #images DIV  
+  $('#flickr-images').html(htmlString + "</ul>");
+
+  // Close down the JSON function call
+  $('#flickr-images-list').jcarousel({
+      auto: 1,
+      wrap: 'last',
+      initCallback: mycarousel_initCallback
+  });
+  };
+
   $(document).ready(function(){
-    $(".tab-set").tabs();
-    if($("#tab-set") && document.location.hash){
-  		$("#tab-set").scrollTo("#tab-set");
-  	}
+    // Our very special jQuery JSON fucntion call to Flickr, gets details of the most recent 20 images
+    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=occ2011&format=json&jsoncallback=?", displayImages);
+    $("#tab-set").tabs();
+
     $("#tab-set").localScroll({ 
       target:"#tab-set",
       hash: true,
-      duration : 0,
-    });
+      duration : 0
+    });
+
     $('#mycarousel').jcarousel({
         auto: 1,
@@ -50,108 +121,72 @@
         initCallback: mycarousel_initCallback
     });
+
+    $(document).ready(function () {
+      $('body').layout({
+        applyDefaultStyles: true,
+        west__size: 320,
+        east__size: 340,
+        north__size: 160,
+        south__size: 80
+      });
+      $( "#radio" ).buttonset();
+    });
+
+    $("input[name='window']").change(function () {
+      $("#mainFrame").attr('src',$("input[name='window']:checked").val());
+    });
   });
+// ]]>
 </script>
 </head>
 <body>
-
-<div id="tab-set">
-  <ul>
-    <li><a href="#main">Main Page</a></li>
-    <li><a href="#telex">IRC Telex</a></li>
-    <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>
-    <tr><td colspan="3">
-    <!-- Start of Flickr Badge -->
-    <style type="text/css">
-    #flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
-    #flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
-    #flickr_icon_td {padding:0 5px 0 0 !important;}
-    .flickr_badge_image {text-align:center !important;}
-    .flickr_badge_image img {border: 1px solid black !important;}
-    #flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
-    #flickr_badge_uber_wrapper a:hover,
-    #flickr_badge_uber_wrapper a:link,
-    #flickr_badge_uber_wrapper a:active,
-    #flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
-    #flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000}
-    #flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
-</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;
-  }
-</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>
-<!-- End of Flickr Badge -->
-
-</td>
-</tr><tr>
-<td>
-  <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?channels=occ&uio=d4" width="647px" height="400px"></iframe>
-  </div>
-</td>
-<td>
+<div id="flickr-badge" class="ui-layout-north">
+<a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a>
+ <div id="flickr-images"></div>
+</div>
+<div id="twitter" class="ui-layout-west">
+    <script src="http://widgets.twimg.com/j/2/widget.js" type="text/javascript"></script>
+    <script type="text/javascript">
+    // <![CDATA[
+      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>
+    <g:plusone></g:plusone>
+
+</div>
+ <div id="webchat" class="ui-layout-center">
+   <iframe id="mainFrame" src="http://live.occ2011.org:9999/browser-embedded.html" width="100%" height="100%"></iframe>
+</div>
+<div id="youtube" class="ui-layout-east">
   <div id="playerContainer" style="width: 320px; height: 260px;">
     <object id="player"></object>
@@ -160,4 +195,5 @@
   <script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
   <script type="text/javascript">
+    // <![CDATA[
     function loadVideo(playerUrl, autoplay) {
       swfobject.embedSWF(
@@ -185,30 +221,22 @@
       }
     }
+  // ]]>
   </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 type="text/javascript" src="https://gdata.youtube.com/feeds/api/videos?strict=true&amp;max-results=10&amp;category=occ2011&amp;alt=json-in-script&amp;callback=showMyVideos2">
   </script>
-</td>
-</tr></table>
-
-</div>
-<div id="telex">
-  <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>
-</div>
-<div id="webcam">
-  <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>
-
-
-
+</div>
+<div class="ui-layout-south">
+<center>
+<form>
+  <div id="radio">
+      <input type="radio" id="radio1" name="window" value="http://live.occ2011.org:9999/browser-embedded.html" checked="checked" /><label for="radio1">Live Webcams</label>
+      <input type="radio" id="radio2" name="window" value="http://bunny.occ2011.org:9090?channels=occ" /><label for="radio2">WebChat</label>
+      <input type="radio" id="radio3" name="window" value="http://live.occ2011.org:9999/telex.html"   /><label for="radio3">IRC Telex</label>
+      <input type="radio" id="radio4" name="window" value="http://live.occ2011.org:9999/room1.html"   /><label for="radio4">Live Presentations</label>
+   </div>
+</form>
+<tt>Developed at <a href="http://opencommunitycamp.org">#occ2011</a> by <a href="http://rickvanderzwet.nl">Rick van der Zwet</a></tt>
+</center>
+</div>
 </body>
 </html>
