From 776368d45e0ea3d92ec0f30a9965174595df9546 Mon Sep 17 00:00:00 2001
From: danielgrippi <danielgrippi@gmail.com>
Date: Sun, 10 Jul 2011 20:46:58 -0700
Subject: [PATCH] added left/right arrow events to the lightbox; lightbox only
 on stream element images for now

---
 app/views/services/finder.html.haml           |  4 +-
 app/views/shared/_stream_element.html.haml    |  2 +-
 .../status_messages/_status_message.haml      |  8 ++--
 public/javascripts/widgets/lightbox.js        | 41 +++++++++++++++++--
 4 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/app/views/services/finder.html.haml b/app/views/services/finder.html.haml
index 4b9fc19e4..c8b5e7158 100644
--- a/app/views/services/finder.html.haml
+++ b/app/views/services/finder.html.haml
@@ -3,9 +3,7 @@
 -#   the COPYRIGHT file.
 
 - content_for :head do
-  = include_javascripts :aspects
-
-= include_javascripts :finder
+  = include_javascripts :finder
 
 #aspect_edit_pane.larger.friend_finder
   #facebox_header
diff --git a/app/views/shared/_stream_element.html.haml b/app/views/shared/_stream_element.html.haml
index faf31bcb2..3ae4e2b39 100644
--- a/app/views/shared/_stream_element.html.haml
+++ b/app/views/shared/_stream_element.html.haml
@@ -26,7 +26,7 @@
             = link_to(how_long_ago(post), post_path(post))
 
       - if post.activity_streams?
-        = link_to image_tag(post.image_url), post.object_url
+        = link_to image_tag(post.image_url, 'data-small-photo' => post.image_url), post.object_url, :class => "stream-photo-link"
       - else
         = render 'status_messages/status_message', :post => post, :photos => post.photos
 
diff --git a/app/views/status_messages/_status_message.haml b/app/views/status_messages/_status_message.haml
index 1d857fac5..5dcce8a85 100644
--- a/app/views/status_messages/_status_message.haml
+++ b/app/views/status_messages/_status_message.haml
@@ -5,14 +5,14 @@
 
 - if photos.size > 0
   .photo_attachments
-    = link_to (image_tag photos.first.url(:scaled_full), :class => "stream-photo", 'data-small-photo' => photos.first.url(:thumb_medium), 'data-full-photo' => photos.first.url), photo_path(photos.first), :class => "big_stream_photo"
+    = link_to (image_tag photos.first.url(:scaled_full), :class => "stream-photo", 'data-small-photo' => photos.first.url(:thumb_medium), 'data-full-photo' => photos.first.url), photo_path(photos.first), :class => "stream-photo-link big_stream_photo"
     - if photos.size > 1
       - if photos.size >= 8
         - for photo in photos[1..8]
-          = link_to (image_tag photo.url(:thumb_small), :class => 'stream-photo thumb_small', 'data-small-photo' => photo.url(:thumb_medium), 'data-full-photo' => photo.url), photo_path(photo)
+          = link_to (image_tag photo.url(:thumb_small), :class => 'stream-photo thumb_small', 'data-small-photo' => photo.url(:thumb_medium), 'data-full-photo' => photo.url), photo_path(photo), :class => 'stream-photo-link'
       - else
         - for photo in photos[1..photos.size]
-          = link_to (image_tag photo.url(:thumb_small), :class => 'stream-photo thumb_small', 'data-small-photo' => photo.url(:thumb_medium), 'data-full-photo' => photo.url), photo_path(photo)
+          = link_to (image_tag photo.url(:thumb_small), :class => 'stream-photo thumb_small', 'data-small-photo' => photo.url(:thumb_medium), 'data-full-photo' => photo.url), photo_path(photo), :class => 'stream-photo-link'
 
-%p{ :class => direction_for(post.text) }
+%p{:class => direction_for(post.text)}
   = markdownify(post.text, :youtube_maps => post[:youtube_titles])
diff --git a/public/javascripts/widgets/lightbox.js b/public/javascripts/widgets/lightbox.js
index ddeef2daf..a61d30e48 100644
--- a/public/javascripts/widgets/lightbox.js
+++ b/public/javascripts/widgets/lightbox.js
@@ -25,26 +25,58 @@ jQuery.fn.center = (function() {
         lightbox: $("#lightbox"),
         imageset: $("#lightbox-imageset"),
         backdrop: $("#lightbox-backdrop"),
+        closelink: $("#lightbox-close-link"),
         image: $("#lightbox-image"),
-        stream: $("#main_stream"),
+        stream: $(".stream_container"),
         body: $(document.body),
         window: $(window)
       });
       
-      self.stream.delegate("a", "click", self.lightboxImageClicked);
+      self.stream.delegate("a.stream-photo-link", "click", self.lightboxImageClicked);
       self.imageset.delegate("img", "click", self.imagesetImageClicked);
 
       self.window.resize(function() {
         self.lightbox.css("max-height", (self.window.height() - 100) + "px");
       }).trigger("resize");
 
+      self.closelink.click(self.resetLightbox);
+
       self.body.keydown(function(evt) {
-        if(evt.keyCode == 27){
+
+        var imageThumb = self.imageset.find("img.selected");
+
+        switch(evt.keyCode) {
+        case 27:
           self.resetLightbox();
+          break;
+        case 37:
+          //left
+          self.selectImage(self.prevImage(imageThumb));
+          break;
+        case 39:
+          //right
+          self.selectImage(self.nextImage(imageThumb));
+          break;
         }
       });
     };
 
+    this.nextImage = function(thumb){
+      var next = thumb.next();
+      if (next.length == 0) {
+        next = self.imageset.find("img").first();
+      }
+      return(next);
+    };
+
+    this.prevImage = function(thumb){
+      var prev = thumb.prev();
+      if (prev.length == 0) {
+        prev = self.imageset.find("img").last();
+      }
+      return(prev);
+    };
+
     this.lightboxImageClicked = function(evt) {
       evt.preventDefault();
       
@@ -75,7 +107,8 @@ jQuery.fn.center = (function() {
 
     this.imagesetImageClicked = function(evt) { 
       evt.preventDefault();
-      
+     
+
       self.selectImage($(this));
     };