From 93e5c9d11c5dc500112be659d5220ec65840e3e0 Mon Sep 17 00:00:00 2001
From: Wesley Moore <wez@wezm.net>
Date: Tue, 26 Jan 2010 19:49:53 +1100
Subject: [PATCH] Implement JS loading of Flickr photos

---
 layouts/listing.html | 31 ++-----------------------------
 output/css/style.css |  6 +++---
 output/js/home.js    | 22 ++++++++++++++++++++++
 3 files changed, 27 insertions(+), 32 deletions(-)
 create mode 100644 output/js/home.js
diff --git a/layouts/listing.html b/layouts/listing.html
index 7fe56a2..eef057a 100644
--- a/layouts/listing.html
+++ b/layouts/listing.html
@@ -8,7 +8,6 @@
   <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen,projection" />
   <link rel="stylesheet" href="/css/mobile.css" type="text/css" media="only screen and (max-device-width: 480px)" />  
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
-  <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAOgyewQJRALbOFE6pebbIGxT86vvqu6OnXxNObPf8e1JU6DVn3hS0DkeXsUXWU5ycqtFtNgmG_7fV2g"></script>
   <script src="/js/home.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
@@ -71,38 +70,12 @@
     </div>
   </div>
 
-  <div id="twitter" class="column">
-    <h1>Tweets</h1>
-    <ul>
-      <li>Loading&hellip;</li>
-    </ul>
-  </div>
-  
-  <div class="flickr">
+  <div id="flickr">
     <!-- <h1>Photos</h1> -->
     <ul class="inline">
       <li>
-        <a href="http://www.flickr.com/photos/wezm/4268597148/" title="Blue Flower by wezm, on Flickr"><img src="http://farm5.static.flickr.com/4013/4268597148_ab83667f21_s.jpg" width="75" height="75" alt="Blue Flower" class="desaturate" /></a>
+        Loading photos&hellip;
       </li>
-      <li>
-        <a href="http://www.flickr.com/photos/wezm/4267852401/" title="Wes on Steps in the Rainforest by wezm, on Flickr"><img src="http://farm3.static.flickr.com/2677/4267852401_e2d539967b_s.jpg" width="75" height="75" alt="Wes on Steps in the Rainforest" class="desaturate" /></a>
-      </li>
-      <li>
-        <a href="http://www.flickr.com/photos/wezm/4267852153/" title="Wes and Manda in the Rainforest by wezm, on Flickr"><img src="http://farm5.static.flickr.com/4021/4267852153_1060f0d092_s.jpg" width="75" height="75" alt="Wes and Manda in the Rainforest" class="desaturate" /></a>
-      </li>
-      <li>
-        <a href="http://www.flickr.com/photos/wezm/4268596618/" title="Manda in the Rainforest by wezm, on Flickr"><img src="http://farm5.static.flickr.com/4061/4268596618_c9755d8507_s.jpg" width="75" height="75" alt="Manda in the Rainforest" class="desaturate" /></a>
-      </li>
-      <li>
-        <a href="http://www.flickr.com/photos/wezm/4268596324/" title="Mossy Path and Seat by wezm, on Flickr"><img src="http://farm3.static.flickr.com/2755/4268596324_eaf83cde01_s.jpg" width="75" height="75" alt="Mossy Path and Seat" class="desaturate" /></a>
-      </li>
-      <li>
-        <a href="http://www.flickr.com/photos/wezm/4267851415/" title="Manda Sitting in Linden Gardens by wezm, on Flickr"><img src="http://farm5.static.flickr.com/4049/4267851415_bd068d2d12_s.jpg" width="75" height="75" alt="Manda Sitting in Linden Gardens" class="desaturate" /></a>
-      </li>
-      <li>
-        <a href="http://www.flickr.com/photos/wezm/4268595626/" title="Tea and Coffee Supplies by wezm, on Flickr"><img src="http://farm5.static.flickr.com/4033/4268595626_999db17916_s.jpg" width="75" height="75" alt="Tea and Coffee Supplies" class="desaturate" /></a>
-      </li>
-    </ul>
   </div>
   
   <div class="pagination">
diff --git a/output/css/style.css b/output/css/style.css
index 663c368..88a466b 100644
--- a/output/css/style.css
+++ b/output/css/style.css
@@ -188,13 +188,13 @@ ul#menu li {
 }
 
 /* Flickr thumbnails */
-.flickr {
+#flickr {
   clear: both;
 }
-.flickr li img {
+#flickr li img {
   opacity: 0.5;
 }
-.flickr li img:hover {
+#flickr li img:hover {
   opacity: 1;
 }
 
diff --git a/output/js/home.js b/output/js/home.js
new file mode 100644
index 0000000..5049432
--- /dev/null
+++ b/output/js/home.js
@@ -0,0 +1,22 @@
+
+jQuery(function () {
+  function populate_flickr(data, text_status) {
+    var ul = $("ul", "#flickr");
+    ul.empty();
+    debugger;
+    jQuery.each(data.photos.photo, function(i, photo) {
+      var li = $("<li></li>");
+      var a = $("<a></a>");
+      a.attr("href", "http://www.flickr.com/photos/" + escape(photo.owner) + "/" + photo.id);
+      var img = $("<img />");
+      img.attr('src', photo.url_sq);
+      img.attr('alt', photo.title);
+      a.append(img)
+      li.append(a);
+      ul.append(li);
+    });
+  };
+
+  // Populate Flickr
+  jQuery.getJSON("http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=aa003631cc50bd47f27f242d30bcd22f&user_id=40215689%40N00&format=json&per_page=20&extras=url_sq&jsoncallback=?", populate_flickr);
+});
