From b96db555050690f8517f7caf58c13fb512d4c5b0 Mon Sep 17 00:00:00 2001
From: Gabriel Dunne <gdunne@quilime.com>
Date: Fri, 22 Mar 2013 17:37:34 -0700
Subject: [PATCH] Stuff.

---
 README                    |   0
 README.md                 |   0
 convert_gifs_to_static.py |   3 +-
 package.json              |   4 +-
 public/script.js          |  58 ++++++++++++++++++-
 public/style.css          |  25 +++++++++
 server_gifs.js            | 115 +++++++++++++++++++++++---------------
 7 files changed, 153 insertions(+), 52 deletions(-)
 create mode 100644 README
 create mode 100644 README.md

diff --git a/README b/README
new file mode 100644
index 0000000..e69de29
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e69de29
diff --git a/convert_gifs_to_static.py b/convert_gifs_to_static.py
index 7172b96..af52297 100644
--- a/convert_gifs_to_static.py
+++ b/convert_gifs_to_static.py
@@ -12,7 +12,6 @@
 #     os.system('cd gifs/prelinger/; curl -O ' + thumb)
 
 # json_data.close()
-
 # convert gifs/prelinger/0540_1935_Pontiac_Advertising_R2_13_38_44_00_3mb.gif[3] -coalesce out.gif
 # convert gifs/prelinger/0540_Spain_in_Revolt_R3_13_00_52_20_3mb.gif -format "%[scenes]" info: | tail -n 1
 
@@ -49,7 +48,6 @@ def main():
         #     print 'Oh dear.'
 
 
-
 class GIFError(Exception): pass
 def get_gif_num_frames(filename):
     frames = 0
@@ -82,3 +80,4 @@ def get_gif_num_frames(filename):
 
 if __name__ == "__main__":
     main()
+
diff --git a/package.json b/package.json
index 2e03029..9af02a2 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,8 @@
   "description": "archive-browser",
   "version": "0.0.1",
   "dependencies": {
-    "express": "3.x"
+    "express" : "3.x",
+    "request" : "x.x",
+    "jsdom"   : "x.x"
   }
 }
diff --git a/public/script.js b/public/script.js
index dd58657..e177204 100644
--- a/public/script.js
+++ b/public/script.js
@@ -1,20 +1,72 @@
+
 $(document).ready(function() {
+
+  $(document.body).append('<div id="scrim" />');
+  $(document.body).append('<div id="subcontent"><div class="container"></div></div>');
+  $('#scrim').click(function() {
+    $('#subcontent').fadeOut(100, function() {
+      scrim(0);
+    });
+  });
+
   $.each( $('.thumbs li'), function( key, elem ) {
 
     var id = $(elem).attr('id')
     var thumb_static = $(elem).find('img').attr('src');
     var thumb_name = thumb_static.split("/");
     thumb_name = thumb_name[thumb_name.length-1];
-    var img = $(elem).find('img');
 
-    $(elem).find('a').hover(function() {
+    var link = $(elem).find('a');
+    var img = $(link).find('img');
+    var thumbs_url = $(elem).attr('data-thumbs-url');
+
+    link.click(function() {
+      scrim(1, function() {
+        $('#subcontent .container').empty();
+        $('#subcontent').fadeIn(100);
+
+        //console.log(thumbs_url);
+
+        $.getJSON('/proxy/?url=' + thumbs_url, function(data) {
+
+          console.log(data);
+          // var items = [];
+
+          // $.each(data, function(key, val) {
+          //   items.push('<li id="' + key + '">' + val + '</li>');
+          // });
+
+          // $('<ul/>', {
+          //   'class': 'my-new-list',
+          //   html: items.join('')
+          // }).appendTo('body');
+        });
+
+        // $.load("/proxy/?url=" + thumbs_url + ' div.box div ', function(response, status, xhr) {
+        //   // alert('Load was performed.');
+        //   console.log(response);
+        // });
+
+      });
+      return false;
+    });
+    link.hover(function() {
       img.attr('src', 'prelinger_anim/' + thumb_name);
     });
-    $(elem).find('a').mouseout(function() {
+    link.mouseout(function() {
       img.attr('src', 'prelinger_static/' + thumb_name);
     });
+
   });
 });
 
+var scrim = function(visible, callback) {
+  var s = $('#scrim');
+  if (visible == 1)
+    s.fadeIn(150, callback);
+  else
+    s.fadeOut(150, callback);
+}
+
 
 //onmouseout="this.src=\'prelinger_static/'+t+'\'" onmouseover="this.src=\'prelinger/'+t+'\'"
diff --git a/public/style.css b/public/style.css
index bd59bd4..f77e85a 100644
--- a/public/style.css
+++ b/public/style.css
@@ -20,3 +20,28 @@ ul.thumbs li img {
     width:160px;
     height:110px;
 }
+
+#scrim {
+    background:rgba(0,0,0,0.5);
+    width:100%;
+    height:100%;
+    position:absolute;
+    top:0;
+    left:0;
+    z-index: 100;
+    display: none;
+}
+
+#subcontent {
+    position:absolute;
+    z-index:200;
+    display:none;
+    left: 50%;
+}
+#subcontent .container {
+    position: relative;
+    left: -50%;
+    background:#f0f;
+    width:500px;
+    height:500px;
+}
diff --git a/server_gifs.js b/server_gifs.js
index 482fbcf..c0e4895 100644
--- a/server_gifs.js
+++ b/server_gifs.js
@@ -1,33 +1,38 @@
 var express = require("express"),
+    request = require('request'),
+    jsdom   = require("jsdom"),
     app     = express(),
+    fs      = require("fs"),
     port    = 3000;
 
+var jquery = fs.readFileSync("./public/jquery-1.9.1.min.js").toString();
+
 var prelinger = require('./prelinger.json');
 
-app.get("/", function(req, res) {
 
+app.get("/", function(req, res) {
   var out = [];
-
   out.push('<ul class="thumbs">');
   // prelinger.clips.length
-  var count = 50;
+  var count = 10;
   for( var i = 0; i < prelinger.clips.length; i++) {
 
-    // count--;
-    // if (count == 0)
-    //   break;
+    count--;
+    if (count == 0)
+      break;
 
     var clip = prelinger.clips[i];
     var t = clip.thumbnail_filename;
-    var ts = clip.thumbnails_url;
+    var turl = clip.thumbnails_url;
     var url = clip.url;
     out.push([
-      '<li id="'+ clip.id +'">',
-      '<a href="' + ts + '">',
+      '<li id="'+ clip.id +'" data-thumbs-url="' + turl + '">',
+      '<a href="#">',
       '<img src="prelinger_static/' + t + '">',
       '</a>',
       '</li>'].join("")
       );
+
   }
   out.push('</ul>');
   out.push('<link rel="stylesheet" type="text/css" href="style.css">');
@@ -38,11 +43,65 @@ app.get("/", function(req, res) {
   res.setHeader('Content-Type', 'text/html');
   res.setHeader('Content-Length', body.length);
   res.end(body);
-
 });
 
 
 
+// url proxy
+app.get("/proxy/", function(req, res) {
+  jsdom.env({
+    html : req.query["url"],
+    src : [jquery],
+    done: function (errors, window) {
+      var $ = window.$;
+      var thumbs = [];
+      var as =$("div.box div a");
+      for (var i = 0; i < as.length; i++) {
+        thumbs.push({
+          "url" : "http://archive.org" + $(as[i]).attr('href'),
+          "img" : $(as[i]).find('img').attr('src')
+        });
+      }
+      res.end(JSON.stringify({
+        "url" : req.query["url"],
+        "links" : thumbs
+      }));
+    }
+    // function (errors, window) {
+
+    //   //console.log();
+
+    //   //var $ = window.$;
+
+    //   window.$.each("div.box div a", function(key, val) {
+    //     console.log(val);
+    //   })
+
+    //   var thumbs = window.$("div.box div a img").attr('src');
+
+    //   // console.log(thumbs);
+
+    //   res.end(JSON.stringify({
+    //     "test" : "test",
+    //     "thumbs" : ""
+    //   }));
+    //   //console.log("there have been", window.$("a").length, "nodejs releases!");
+    // }
+  });
+
+  // request(req.query["url"], function (error, response, body) {
+  // if (!error && response.statusCode == 200) {
+  //   jsdom
+  //   res.end(body);
+  // }
+  // })
+})
+
+
+
+
+
+
 app.configure(function(){
   app.use(express.methodOverride());
   app.use(express.bodyParser());
@@ -56,39 +115,3 @@ app.configure(function(){
 });
 app.listen(port);
 console.log('Listening on port ' + port);
-
-
-
-/*var express = require('express');
-var app = express();
-
-app.use(express.static(__dirname + '/css'));
-
-//app.use("/css", express.static(__dirname + '/css'));
-
-var prelinger = require('./prelinger.json');
-
-app.get('/gifs', function(req, res){
-
-  var out = [];
-  out.push('<ul>');
-  // prelinger.clips.length
-  for( var i = 0; i < 2; i++) {
-    var c = prelinger.clips[i];
-    //out.push('<li><img src="' + c.thumbnail + '" /></li>');
-    var t = c.thumbnail.split('/');
-    t = t[t.length-1].split('?')[0];
-    out.push('<li>' + t + '</li>');
-  }
-  out.push('</ul>');
-  var body = out.join("");
-
-  res.setHeader('Content-Type', 'text/html');
-  res.setHeader('Content-Length', body.length);
-  res.end(body);
-});
-
-app.listen(3000);
-console.log('Listening on port 3000');
-
-*/
-- 
2.34.1