Index: dashboard/occ2011-thanks.html
===================================================================
--- dashboard/occ2011-thanks.html	(revision 339)
+++ dashboard/occ2011-thanks.html	(revision 339)
@@ -0,0 +1,257 @@
+<!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>
+
+
+<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; }
+
+  img { border: none; }
+
+  .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">
+ // <![CDATA[
+  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();
+      });
+  };
+
+  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.photos.photo, function(i,item){
+      // http://farm3.static.flickr.com/2753/5859450667_d6e29b9fb2_s.jpg
+      var url = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_s.jpg'; 
+      var target = 'http://www.flickr.com/photos/' + item.owner + '/' + item.id + '/';
+
+      // Here's where we piece together the HTML
+      htmlString += '<li><a href="' + target + '" target="_blank">';
+      htmlString += '<img src="' + url + '" 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(){
+    // 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);
+    $.getJSON("http://api.flickr.com/services/rest/?method=flickr.photos.search&name=value&api_key=138a25b8ce15c2cce5491b0c0170f2be&format=json&tags=occ2011&sort=interestingness-desc&page-count=1&jsoncallback=?&tag_mode=all",displayImages);
+    $("#tab-set").tabs();
+
+    $("#tab-set").localScroll({ 
+      target:"#tab-set",
+      hash: true,
+      duration : 0
+    });
+
+    $('#mycarousel').jcarousel({
+        auto: 1,
+        wrap: 'last',
+        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="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">
+   <table width="100%">
+   <tr><td>
+   <a href="http://wifisoft.org"><img src="img/wifisoft-logo.jpg" width="50px"/></a></td><td>
+   <h3>#occ2011 has ended!</h3>
+   </td></tr></table>
+   <p />
+   We hope to see you again next year, check our website for more information: <a href="http://opencommunitycamp.org">http://opencommunitycamp.org</a>
+<p />
+   Big thanks to our sponsors:<p />
+   <a href="http://www.ziggozakelijk.nl"><img src="img/ziggo-logo.jpg" alt="Ziggo" height="100px" /></a>
+   <a href="http://optiver.com"><img height="100px" src="img/optiver-logo.png" alt="Optiver" /></a>
+</div>
+<div id="youtube" class="ui-layout-east">
+  <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">
+    // <![CDATA[
+    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&amp;max-results=10&amp;category=occ2011&amp;alt=json-in-script&amp;callback=showMyVideos2">
+  </script>
+</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>
+      <input type="radio" id="radio5" name="window" value="http://noc.occ2011.org/nagios/"   /><label for="radio5">NOC Nagios</label>
+      <input type="radio" id="radio6" name="window" value="http://noc.occ2011.org/smokeping/smokeping.cgi"   /><label for="radio6">NOC Smokeping</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>
